ZERO_CODE/ZeroCodeProject/project_template/role/role.vue

<template>
  <div class="main_box">
    <h2>角色管理</h2>
    <el-button class="role_add" @click="dialogVisible3 = true">角色新建</el-button>
    <el-table :data="tableData" style="width: 100%;height: 604px"
              @selection-change="handleSelectionChange"
              :header-cell-style="{'text-align':'center','background-color':'#389F37','height':'60px','color':'#ffffff','font-size':'15px','font-weight':'400'}"
              :cell-style="{'text-align':'center'}"
              :cell-class-name="cellStyle"
              @select="handleSelection"
              :row-class-name="tableRowClassName"
              v-loading="loading"
    >
      <el-table-column fixed label="Operations" width="200">
        <template #default="scope">
          <el-button link class="table_operation_button" @click="handleClick(scope.row)"
          >编辑
          </el-button
          >
          <el-button link class="table_operation_button">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed prop="user_group_name" label="角色名"/>
      <el-table-column prop="user_group_number" label="角色编号"/>
      <el-table-column label="权限组">
        <template #default="scope">
          <el-tag v-for="(gp,index) in scope.row.permission" :key="index" class="ml-2 tag" type="success">{{
              gp
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="防控组">
        <template #default="scope">
          <el-tag v-for="(gp,index) in scope.row.accesses" :key="index" class="ml-2 tag" type="success">{{
              gp
            }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        v-model="dialogVisible"
        title="编辑"
        width="70%"
    >
      <el-form :model="form" ref="form" :inline="true" class="demo-form-inline" style="" label-width="80px">
        <el-form-item label="角色名称">
          <el-input v-model="form.user_group_name" class="input"/>
        </el-form-item>
        <el-form-item label="角色编号">
          <el-input v-model="form.user_group_number" class="input"/>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-tag v-for="(gp,index) in form.permission" :key="index" class="ml-2 tag" type="success">{{ gp }}</el-tag>
          <el-button type="primary" @click="Add_group_permission" class="Add_group">修改</el-button>
        </el-form-item>
        <el-form-item label="角色防控">
          <el-tag v-for="(gp,index) in form.accesses" :key="index" class="ml-2 tag" type="success">{{ gp }}</el-tag>
          <el-button type="primary" @click="Add_group_access" class="Add_group">修改</el-button>
        </el-form-item>
      </el-form>
      <div class="button_box" style="">
        <el-button class="save_button" @click="Edit_Submit">提交</el-button>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog
        v-model="dialogVisible1"
        title="选择组"
        width="50%"
    >
      <div>
        <el-select v-model="filter_obj" class="m-2" placeholder="Select" size="large"
                   style="margin-bottom: 10px;width: 300px" @change="filter_premission" clearable @clear="get_all"
                   filterable>
          <el-option
              v-for="item in data_objects"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </div>
      <el-table :data="user_permission" ref="user_group_table" style="width: 100%;height: 604px"
                @selection-change="handleSelectionChange"
                :header-cell-style="{'text-align':'center','background-color':'#389F37','height':'60px','color':'#ffffff','font-size':'15px','font-weight':'400'}"
                :cell-style="{'text-align':'center'}"
                :cell-class-name="cellStyle"
                @select="select_group_permission"
                :row-class-name="tableRowClassName"
                :row-key="(row)=> { return row.uuid }">
        <el-table-column type="selection"/>
        <el-table-column fixed prop="permissions_name" label="权限名称"/>
        <el-table-column prop="permissions_type" label="权限类型"/>
      </el-table>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1 = false" class="dialog_button">取 消</el-button>
        <el-button class="dialog_button" @click="conform_add_permission">
          确 定
        </el-button>
      </span>
      </template>
    </el-dialog>


    <el-dialog
        v-model="dialogVisible2"
        title="选择组"
        width="50%"
    >
      <div>
        <el-input v-model="filter_access" class="m-2" placeholder="Select" size="large"
                  style="margin-bottom: 10px;width: 300px" @input="filter_accesss">
        </el-input>
      </div>
      <el-table :data="user_access" ref="user_group_table" style="width: 100%;height: 604px"
                @selection-change="handleSelectionChange"
                :header-cell-style="{'text-align':'center','background-color':'#389F37','height':'60px','color':'#ffffff','font-size':'15px','font-weight':'400'}"
                :cell-style="{'text-align':'center'}"
                :cell-class-name="cellStyle"
                @select="select_group_access"
                :row-class-name="tableRowClassName"
                :row-key="(row)=> { return row.uuid }">
        <el-table-column type="selection"/>
        <el-table-column fixed prop="access_control_name" label="防控名称"/>
      </el-table>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false" class="dialog_button">取 消</el-button>
        <el-button @click="conform_add_access" class="dialog_button">
          确 定
        </el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog
        v-model="dialogVisible3"
        title="新建角色"
        width="50%"
    >
      <el-form :model="add_form" ref="form" :inline="true" class="demo-form-inline" style="" label-width="100px">
        <el-form-item label="角色名称" style="">
          <el-input v-model="add_form.user_group_name" placeholder="请输入" class="input"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible3 = false" class="dialog_button">取 消</el-button>
        <el-button @click="add_role" class="dialog_button">
          确 定
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script src="./role.js"></script>


<style scoped src="./role.css"></style>