角色管理页面修改

gaoluyang

2025-02-12 7c5d1de8b4a2293da8efc260dccd94a3b28640b7

角色管理页面修改

 src/router/index.js

@@ -115,6 +115,7 @@
    ]
  },
  {
    // 用户管理
    path: '/system/user-auth',
    component: Layout,
    hidden: true,
@@ -129,6 +130,7 @@
    ]
  },
  {
    // 角色管理
    path: '/system/role-auth',
    component: Layout,
    hidden: true,

 src/views/system/role/index.vue

@@ -51,51 +51,16 @@
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:role:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:role:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:role:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:role:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <div class="addButton mb8">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        v-hasPermi="['system:role:add']"
      >新增</el-button>
    </div>

    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
@@ -134,15 +99,21 @@
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:role:remove']"
          >删除</el-button>
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          >详细</el-button>
<!--          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">-->
<!--            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"-->
<!--                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>-->
<!--              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"-->
<!--                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
        </template>
      </el-table-column>
    </el-table>
@@ -159,7 +130,7 @@
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="form.roleName" placeholder="请输入角色名称" />
          <el-input v-model="form.roleName" placeholder="请输入角色名称" :disabled="title === '查看角色'"/>
        </el-form-item>
        <el-form-item prop="roleKey">
          <span slot="label">
@@ -168,13 +139,13 @@
            </el-tooltip>
            权限字符
          </span>
          <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
          <el-input v-model="form.roleKey" placeholder="请输入权限字符"  :disabled="title === '查看角色'"/>
        </el-form-item>
        <el-form-item label="角色顺序" prop="roleSort">
          <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
          <el-input-number v-model="form.roleSort" controls-position="right" :min="0"  :disabled="title === '查看角色'"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
          <el-radio-group v-model="form.status" :disabled="title === '查看角色'">
            <el-radio
              v-for="dict in dict.type.sys_normal_disable"
              :key="dict.value"
@@ -183,10 +154,11 @@
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单权限">
          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')" v-if="title !== '查看角色'">展开/折叠</el-checkbox>
          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')" v-if="title !== '查看角色'">全选/全不选</el-checkbox>
          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')" v-if="title !== '查看角色'">父子联动</el-checkbox>
          <el-tree
            :disabled="title === '查看角色'"
            class="tree-border"
            :data="menuOptions"
            show-checkbox
@@ -198,11 +170,11 @@
          ></el-tree>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" :disabled="title === '查看角色'"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button type="primary" @click="submitForm" v-if="title !== '查看角色'">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
@@ -211,7 +183,7 @@
    <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
      <el-form :model="form" label-width="80px">
        <el-form-item label="角色名称">
          <el-input v-model="form.roleName" :disabled="true" />
          <el-input v-model="form.roleName" :disabled="true"/>
        </el-form-item>
        <el-form-item label="权限字符">
          <el-input v-model="form.roleKey" :disabled="true" />
@@ -525,6 +497,27 @@
      });
      this.title = "修改角色";
    },
    // 查看角色详情
    handleView (row) {
      this.title = "查看角色";
      this.reset();
      const roleId = row.roleId || this.ids
      const roleMenu = this.getRoleMenuTreeselect(roleId);
      getRole(roleId).then(response => {
        this.form = response.data;
        this.open = true;
        this.$nextTick(() => {
          roleMenu.then(res => {
            let checkedKeys = res.checkedKeys
            checkedKeys.forEach((v) => {
              this.$nextTick(()=>{
                this.$refs.menu.setChecked(v, true ,false);
              })
            })
          });
        });
      });
    },
    /** 选择角色权限范围触发 */
    dataScopeSelectChange(value) {
      if(value !== '2') {
@@ -602,4 +595,10 @@
    }
  }
};
</script>
</script>

<style scoped>
.addButton {
  text-align: right;
}
</style>