src/components/TopNav/index.vue

@@ -218,7 +218,7 @@ export default {
 	float: left;
 	height: 84px !important;
 	line-height: 84px !important;
-	color: #999093 !important;
+	color: transparent !important;
 	padding: 0 5px !important;
 	font-size: 18px;
 }

src/styles/index.scss

@@ -224,6 +224,10 @@ input, textarea{
       left:20px;
       font-size:21px !important
     }
+    .el-message-box__input {
+      padding-left: 57px;
+      padding-right: 15px;
+    }
   }
   .el-message-box__btns {
     padding-right: 32px;

src/views/system/components/statusBtn.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <span class="dot" :class="injectData.status === 1 ? 'red' : 'green'"></span>
+    <span>{{ state }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "StatusBtn",
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    state() {
+      return this.injectData.status === 1 ? "停用" : "启用";
+    },
+  },
+};
+</script>
+<style scoped>
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+.green {
+  background: #10dc76;
+}
+.red {
+  background: #ff5656;
+}
+</style>

src/views/system/components/statusBtn2.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <span class="dot" :class="injectData.status === 1 ? 'red' : 'green'"></span>
+    <span>{{ state }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "StatusBtn2",
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    state() {
+      return this.injectData.status === 1 ? "关闭" : "开启";
+    },
+  },
+};
+</script>
+<style scoped>
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+.green {
+  background: #10dc76;
+}
+.red {
+  background: #ff5656;
+}
+</style>

src/views/system/components/statusBtn3.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <span
+      class="dot"
+      :class="injectData.resultCode === 0 ? 'green' : 'red'"
+    ></span>
+    <span>{{ state }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "StatusBtn3",
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    state() {
+      return this.injectData.resultCode === 0 ? "成功" : "失败";
+    },
+  },
+};
+</script>
+<style scoped>
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+.green {
+  background: #10dc76;
+}
+.red {
+  background: #ff5656;
+}
+</style>

src/views/system/components/statusBtn4.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <span class="dot" :class="injectData.result === 0 ? 'green' : 'red'"></span>
+    <span>{{ state }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "StatusBtn3",
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    state() {
+      return this.injectData.result === 0 ? "成功" : "失败";
+    },
+  },
+};
+</script>
+<style scoped>
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+.green {
+  background: #10dc76;
+}
+.red {
+  background: #ff5656;
+}
+</style>

src/views/system/components/statusBtn5.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-switch
+    v-model="status"
+    type="text"
+    size="small"
+    @change="changeHandler"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      status: false,
+    };
+  },
+  mounted() {
+    this.mapToState();
+  },
+  methods: {
+    mapToState() {
+      this.status = this.injectData.status === 0 ? true : false;
+    },
+    changeHandler() {
+      let params = {};
+      params.id = this.injectData.id;
+      params.status = this.status ? "0" : "1";
+      params.username = this.injectData.username;
+      this.$emit("emitData", params);
+    },
+  },
+};
+</script>

src/views/system/role/components/dataAuth.vue

@@ -0,0 +1,162 @@
+<template>
+  <el-form :model="form" label-width="80px">
+    <el-form-item label="角色名称">
+      <el-input v-model="form.name" :disabled="true" />
+    </el-form-item>
+    <el-form-item label="角色标识">
+      <el-input v-model="form.code" :disabled="true" />
+    </el-form-item>
+    <el-form-item label="权限范围">
+      <el-select v-model="form.dataScope" style="width: 100%">
+        <el-option
+          v-for="item in dataScopeDictDatas"
+          :key="parseInt(item.value)"
+          :label="item.label"
+          :value="parseInt(item.value)"
+        ></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      label="数据权限"
+      v-show="form.dataScope === SysDataScopeEnum.DEPT_CUSTOM"
+    >
+      <el-checkbox
+        :checked="!form.deptCheckStrictly"
+        @change="handleCheckedTreeConnect($event, 'dept')"
+        >父子联动(选中父节点，自动选择子节点)</el-checkbox
+      >
+      <el-checkbox
+        v-model="deptExpand"
+        @change="handleCheckedTreeExpand($event, 'dept')"
+        >展开/折叠</el-checkbox
+      >
+      <el-checkbox
+        v-model="deptNodeAll"
+        @change="handleCheckedTreeNodeAll($event, 'dept')"
+        >全选/全不选</el-checkbox
+      >
+      <el-tree
+        class="tree-border"
+        :data="deptOptions"
+        show-checkbox
+        default-expand-all
+        ref="dept"
+        node-key="id"
+        :check-strictly="form.deptCheckStrictly"
+        empty-text="加载中，请稍后"
+        :props="defaultProps"
+      ></el-tree>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { SystemDataScopeEnum } from "@/utils/constants";
+import { getRole } from "@/api/system/role";
+import { listSimpleDepts } from "@/api/system/dept";
+import { DICT_TYPE, getDictDatas } from "@/utils/dict";
+import { assignRoleDataScope } from "@/api/system/permission";
+export default {
+  name: "DataAuth",
+  data() {
+    return {
+      form: {
+        id: undefined,
+        name: undefined,
+        code: undefined,
+        deptIds: [],
+        dataScope: undefined,
+        deptCheckStrictly: false,
+      },
+      deptExpand: true,
+      deptNodeAll: false,
+      // 部门列表
+      deptOptions: [], // 部门属性结构
+      depts: [], // 部门列表
+      defaultProps: {
+        label: "name",
+        children: "children",
+      },
+      // 枚举
+      SysDataScopeEnum: SystemDataScopeEnum,
+      // 数据字典
+      dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE),
+    };
+  },
+  methods: {
+    init(id) {
+      this.form.id = id;
+      getRole(id).then((res) => {
+        this.form.name = res.data.name;
+        this.form.code = res.data.code;
+        this.form.dataScope = res.data.dataScope;
+        // 获得部门列表
+        listSimpleDepts().then((response) => {
+          // 处理 deptOptions 参数
+          this.deptOptions = [];
+          this.deptOptions.push(...this.handleTree(response.data, "id"));
+          this.depts = response.data;
+          this.$refs.dept.setCheckedKeys(res.data.dataScopeDeptIds, false);
+        });
+      });
+    },
+    submitForm() {
+      if (this.form.id !== undefined) {
+        assignRoleDataScope({
+          roleId: this.form.id,
+          dataScope: this.form.dataScope,
+          dataScopeDeptIds:
+            this.form.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM
+              ? []
+              : this.$refs.dept.getCheckedKeys(),
+        }).then((response) => {
+          this.$modal.msgSuccess("修改成功");
+          this.$emit("successSubmitd");
+        });
+      }
+    },
+    formClear() {
+      this.deptExpand = true;
+      this.deptNodeAll = false;
+      this.form = {
+        id: undefined,
+        name: undefined,
+        code: undefined,
+        deptIds: [],
+        dataScope: undefined,
+        deptCheckStrictly: false,
+      };
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect(value, type) {
+      if (type === "menu") {
+        this.form.menuCheckStrictly = value;
+      } else if (type === "dept") {
+        this.form.deptCheckStrictly = !value;
+      }
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      if (type === "menu") {
+        let treeList = this.menuOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      } else if (type === "dept") {
+        let treeList = this.deptOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value, type) {
+      if (type === "menu") {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
+      } else if (type === "dept") {
+        // this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+        this.$refs.dept.setCheckedNodes(value ? this.depts : []);
+      }
+    },
+  },
+};
+</script>

src/views/system/role/components/menuAuth.vue

@@ -0,0 +1,146 @@
+<template>
+  <el-form :model="form" label-width="80px">
+    <el-form-item label="角色名称">
+      <el-input v-model="form.name" :disabled="true" />
+    </el-form-item>
+    <el-form-item label="角色标识">
+      <el-input v-model="form.code" :disabled="true" />
+    </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-tree
+        class="tree-border"
+        :data="menuOptions"
+        show-checkbox
+        ref="menu"
+        node-key="id"
+        :check-strictly="form.menuCheckStrictly"
+        empty-text="加载中，请稍后"
+        :props="defaultProps"
+      ></el-tree>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getRole } from "@/api/system/role";
+import { SystemDataScopeEnum } from "@/utils/constants";
+import { assignRoleMenu, listRoleMenus } from "@/api/system/permission";
+import { DICT_TYPE, getDictDatas } from "@/utils/dict";
+import { listSimpleMenus } from "@/api/system/menu";
+export default {
+  name: "MenuAuth",
+  data() {
+    return {
+      form: {
+        id: undefined,
+        name: undefined,
+        code: undefined,
+        menuIds: [],
+        menuCheckStrictly: true,
+      },
+      // 菜单列表
+      menuOptions: [],
+      menuExpand: false,
+      menuNodeAll: false,
+      SysDataScopeEnum: SystemDataScopeEnum,
+      // 数据字典
+      dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE),
+      defaultProps: {
+        label: "name",
+        children: "children",
+      },
+    };
+  },
+  methods: {
+    init(id) {
+      this.form.id = id;
+      getRole(id).then((res) => {
+        this.form.name = res.data.name;
+        this.form.code = res.data.code;
+        listSimpleMenus().then((response) => {
+          // 处理 menuOptions 参数
+          this.menuOptions = [];
+          this.menuOptions.push(...this.handleTree(response.data, "id"));
+          // 获取角色拥有的菜单权限
+          listRoleMenus(id).then((response) => {
+            // 设置为严格，避免设置父节点自动选中子节点，解决半选中问题
+            this.form.menuCheckStrictly = true;
+            // 设置选中
+            this.$refs.menu.setCheckedKeys(response.data);
+            // 设置为非严格，继续使用半选中
+            this.form.menuCheckStrictly = false;
+          });
+        });
+      });
+    },
+    submitForm() {
+      if (this.form.id !== undefined) {
+        assignRoleMenu({
+          roleId: this.form.id,
+          menuIds: [
+            ...this.$refs.menu.getCheckedKeys(),
+            ...this.$refs.menu.getHalfCheckedKeys(),
+          ],
+        }).then((response) => {
+          this.$modal.msgSuccess("修改成功");
+          this.$emit("successSubmitm");
+        });
+      }
+    },
+    formClear() {
+      if (this.$refs.menu !== undefined) {
+        this.$refs.menu.setCheckedKeys([]);
+      }
+      this.menuExpand = false;
+      this.menuNodeAll = false;
+      this.form = {
+        id: undefined,
+        name: undefined,
+        code: undefined,
+        menuIds: [],
+        menuCheckStrictly: true,
+      };
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect(value, type) {
+      if (type === "menu") {
+        this.form.menuCheckStrictly = value;
+      } else if (type === "dept") {
+        this.form.deptCheckStrictly = !value;
+      }
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      if (type === "menu") {
+        let treeList = this.menuOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      } else if (type === "dept") {
+        let treeList = this.deptOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value, type) {
+      if (type === "menu") {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
+      } else if (type === "dept") {
+        // this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+        this.$refs.dept.setCheckedNodes(value ? this.depts : []);
+      }
+    },
+  },
+};
+</script>

src/views/system/role/components/roleAdd.vue

@@ -0,0 +1,129 @@
+<template>
+  <el-form ref="form" :rules="rules" label-width="100px" :model="form">
+    <el-row>
+      <el-col :span="24">
+        <el-form-item label="角色编码" prop="code">
+          <el-input v-model="form.code"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="角色名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="角色顺序" prop="sort">
+          <el-input-number
+            v-model="form.sort"
+            controls-position="right"
+            :min="1"
+            :max="999999999"
+            style="width: 100%"
+          ></el-input-number>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="状态" prop="status" v-if="isEdit">
+          <el-switch v-model="form.status"> </el-switch>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script>
+import { addRole, getRole, updateRole } from "@/api/system/role";
+export default {
+  name: "RoleAdd",
+  data() {
+    return {
+      form: {
+        id: "",
+        code: "",
+        name: "",
+        sort: 1,
+        status: 0,
+        remark: "",
+      },
+      isEdit: false, //是否是编辑
+      rules: {
+        code: [
+          { required: true, message: "角色编码不能为空", trigger: "blur" },
+        ],
+        name: [
+          { required: true, message: "角色名称不能为空", trigger: "blur" },
+        ],
+        sort: [{ required: true }],
+      },
+    };
+  },
+  methods: {
+    init(id) {
+      if (id) {
+        this.isEdit = true;
+        this.form.id = id;
+        getRole(id).then((res) => {
+          if (res.code === 0) {
+            this.form.id = res.data.id;
+            this.form.code = res.data.code;
+            this.form.name = res.data.name;
+            this.form.sort = res.data.sort;
+            this.form.remark = res.data.remark;
+            this.form.status = res.data.status ? false : true;
+          }
+        });
+      } else {
+        this.isEdit = false;
+        this.form.id = "";
+      }
+    },
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.isEdit) {
+            //编辑
+            updateRole({
+              id: this.form.id,
+              code: this.form.code,
+              name: this.form.name,
+              sort: this.form.sort,
+              remark: this.form.remark,
+              status: this.form.status ? 0 : 1,
+            }).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit("successSubmit");
+              }
+            });
+          } else {
+            addRole({
+              code: this.form.code,
+              name: this.form.name,
+              sort: this.form.sort,
+              remark: this.form.remark,
+              status: 0,
+            }).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit("successSubmit");
+              }
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    formClear() {
+      this.$refs.form.resetFields();
+      this.isEdit = false;
+    },
+  },
+};
+</script>

src/views/system/role/index.vue

@@ -1,495 +1,292 @@
 <template>
-  <div class="app-container">
+	<div class="app-container">
-    <!-- <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
+		<!-- <doc-alert
+      title="功能权限"
+      url="https://doc.iocoder.cn/resource-permission"
+    />
     <doc-alert title="数据权限" url="https://doc.iocoder.cn/data-permission" /> -->
-    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
+		<!-- 搜索工作栏 -->
-      <el-form-item label="角色名称" prop="name">
+		<search-bar
-        <el-input v-model="queryParams.name" placeholder="请输入角色名称" clearable size="small" style="width: 240px"
+			:formConfigs="formConfig"
-                  @keyup.enter.native="handleQuery"/>
+			ref="searchBarForm"
-      </el-form-item>
+			@headBtnClick="buttonClick" />
-      <el-form-item label="角色标识" prop="code">
+		<!-- 列表 -->
-        <el-input v-model="queryParams.code" placeholder="请输入角色标识" clearable size="small" style="width: 240px"
+		<base-table
-                  @keyup.enter.native="handleQuery"/>
+			:page="queryParams.pageNo"
-      </el-form-item>
+			:limit="queryParams.pageSize"
-      <el-form-item label="状态" prop="status">
+			:table-props="tableProps"
-        <el-select v-model="queryParams.status" placeholder="角色状态" clearable size="small" style="width: 240px">
+			:table-data="list"
-          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+			:max-height="tableH">
-        </el-select>
+			<method-btn
-      </el-form-item>
+				v-if="tableBtn.length"
-      <el-form-item label="创建时间" prop="createTime">
+				slot="handleBtn"
-        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+				:width="230"
-                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+				label="操作"
-      </el-form-item>
+				:method-list="tableBtn"
-      <el-form-item>
+				@clickBtn="handleClick" />
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+		</base-table>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+		<pagination
-      </el-form-item>
+			:page.sync="queryParams.pageNo"
-    </el-form>
+			:limit.sync="queryParams.pageSize"
+			:total="total"
+			@pagination="getList" />
 
-    <el-row :gutter="10" class="mb8">
+		<!-- 新增&编辑 -->
-      <el-col :span="1.5">
+		<base-dialog
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+			:dialogTitle="addOrEditTitle"
-                   v-hasPermi="['system:role:create']">新增</el-button>
+			:dialogVisible="centervisible"
-      </el-col>
+			@cancel="handleCancel"
-      <el-col :span="1.5">
+			@confirm="handleConfirm"
-        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+			:before-close="handleCancel"
-                   v-hasPermi="['system:role:export']">导出</el-button>
+			width="50%">
-      </el-col>
+			<role-add ref="roleAdd" @successSubmit="successSubmit" />
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+		</base-dialog>
-    </el-row>
+		<!-- 菜单权限 -->
-
+		<base-dialog
-    <el-table v-loading="loading" :data="roleList">
+			dialogTitle="分配菜单权限"
-      <el-table-column label="角色编号" prop="id" width="120" />
+			:dialogVisible="menuVisible"
-      <el-table-column label="角色名称" prop="name" :show-overflow-tooltip="true" width="150" />
+			@cancel="handleCancelm"
-      <el-table-column label="角色标识" prop="code" :show-overflow-tooltip="true" width="150" />
+			@confirm="handleConfirmm"
-      <el-table-column label="角色类型" prop="type" width="80">
+			:before-close="handleCancelm"
-        <template v-slot="scope">
+			width="50%">
-          <dict-tag :type="DICT_TYPE.SYSTEM_ROLE_TYPE" :value="scope.row.type"/>
+			<menu-auth ref="menuAuth" @successSubmitm="successSubmitm" />
-        </template>
+		</base-dialog>
-      </el-table-column>
+		<!-- 数据权限 -->
-      <el-table-column label="显示顺序" prop="sort" width="100" />
+		<base-dialog
-      <el-table-column label="状态" align="center" width="100">
+			dialogTitle="分配数据权限"
-        <template v-slot="scope">
+			:dialogVisible="dataVisible"
-          <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)"/>
+			@cancel="handleCanceld"
-        </template>
+			@confirm="handleConfirmd"
-      </el-table-column>
+			:before-close="handleCanceld"
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+			width="50%">
-        <template v-slot="scope">
+			<data-auth ref="dataAuth" @successSubmitd="successSubmitd" />
-          <span>{{ parseTime(scope.row.createTime) }}</span>
+		</base-dialog>
-        </template>
+	</div>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template v-slot="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['system:role:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleMenu(scope.row)"
-                     v-hasPermi="['system:permission:assign-role-menu']">菜单权限</el-button>
-          <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleDataScope(scope.row)"
-                     v-hasPermi="['system:permission:assign-role-data-scope']">数据权限</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['system:role:delete']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
-
-    <!-- 添加或修改角色配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="角色名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入角色名称" />
-        </el-form-item>
-        <el-form-item label="角色标识" prop="code">
-          <el-input v-model="form.code" placeholder="请输入角色标识" />
-        </el-form-item>
-        <el-form-item label="角色顺序" prop="sort">
-          <el-input-number v-model="form.sort" controls-position="right" :min="0" />
-        </el-form-item>
-        <el-form-item label="备注">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 分配角色的数据权限对话框 -->
-    <el-dialog 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.name" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="角色标识">
-          <el-input v-model="form.code" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="权限范围">
-          <el-select v-model="form.dataScope">
-            <el-option
-              v-for="item in dataScopeDictDatas"
-              :key="parseInt(item.value)"
-              :label="item.label"
-              :value="parseInt(item.value)"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="数据权限" v-show="form.dataScope === SysDataScopeEnum.DEPT_CUSTOM">
-          <el-checkbox :checked="!form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动(选中父节点，自动选择子节点)</el-checkbox>
-          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
-          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
-          <el-tree
-            class="tree-border"
-            :data="deptOptions"
-            show-checkbox
-            default-expand-all
-            ref="dept"
-            node-key="id"
-            :check-strictly="form.deptCheckStrictly"
-            empty-text="加载中，请稍后"
-            :props="defaultProps"
-          ></el-tree>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitDataScope">确 定</el-button>
-        <el-button @click="cancelDataScope">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 分配角色的菜单权限对话框 -->
-    <el-dialog :title="title" :visible.sync="openMenu" width="500px" append-to-body>
-      <el-form :model="form" label-width="80px">
-        <el-form-item label="角色名称">
-          <el-input v-model="form.name" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="角色标识">
-          <el-input v-model="form.code" :disabled="true" />
-        </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-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id"
-              :check-strictly="form.menuCheckStrictly" empty-text="加载中，请稍后" :props="defaultProps"></el-tree>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitMenu">确 定</el-button>
-        <el-button @click="cancelMenu">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
 </template>
 
 <script>
-import {
+import { delRole, listRole } from '@/api/system/role';
-  addRole,
+import tableHeightMixin from '@/mixins/tableHeightMixin';
-  changeRoleStatus,
+import RoleAdd from './components/roleAdd';
-  delRole,
+import MenuAuth from './components/menuAuth';
-  exportRole,
+import DataAuth from './components/dataAuth';
-  getRole,
+import statusBtn from './../components/statusBtn.vue';
-  listRole,
+const tableProps = [
-  updateRole
+	{
-} from "@/api/system/role";
+		prop: 'code',
-import {listSimpleMenus} from "@/api/system/menu";
+		label: '角色编码',
-import {assignRoleMenu, listRoleMenus, assignRoleDataScope} from "@/api/system/permission";
+		minWidth: 140,
-import {listSimpleDepts} from "@/api/system/dept";
+		showOverflowtooltip: true,
-import {CommonStatusEnum, SystemDataScopeEnum} from "@/utils/constants";
+	},
-import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+	{
-
+		prop: 'name',
+		label: '角色名称',
+		minWidth: 140,
+		showOverflowtooltip: true,
+	},
+	{
+		prop: 'sort',
+		label: '角色顺序',
+		minWidth: 90,
+		showOverflowtooltip: true,
+	},
+	{
+		prop: 'status',
+		label: '状态',
+		minWidth: 100,
+		subcomponent: statusBtn,
+	},
+	{
+		prop: 'remark',
+		label: '角色描述',
+		minWidth: 140,
+		showOverflowtooltip: true,
+	},
+];
 export default {
-  name: "SystemRole",
+	name: 'SystemRole',
-  data() {
+	mixins: [tableHeightMixin],
-    return {
+	components: { RoleAdd, MenuAuth, DataAuth },
-      // 遮罩层
+	data() {
-      loading: true,
+		return {
-      // 导出遮罩层
+			formConfig: [
-      exportLoading: false,
+				{
-      // 显示搜索条件
+					type: 'input',
-      showSearch: true,
+					label: '角色名称',
-      // 总条数
+					placeholder: '角色名称',
-      total: 0,
+					param: 'name',
-      // 角色表格数据
+				},
-      roleList: [],
+				{
-      // 弹出层标题
+					type: 'button',
-      title: "",
+					btnName: '查询',
-      // 是否显示弹出层
+					name: 'search',
-      open: false,
+					color: 'primary',
-      // 是否显示弹出层（数据权限）
+				},
-      openDataScope: false,
+				{
-      // 是否显示弹出层（菜单权限）
+					type: this.$auth.hasPermi('system:role:create') ? 'separate' : '',
-      openMenu: false,
+				},
-      menuExpand: false,
+				{
-      menuNodeAll: false,
+					type: this.$auth.hasPermi('system:role:create') ? 'button' : '',
-      deptExpand: true,
+					btnName: '新增',
-      deptNodeAll: false,
+					name: 'add',
-      // 菜单列表
+					color: 'success',
-      menuOptions: [],
+					plain: true,
-      // 部门列表
+				},
-      deptOptions: [], // 部门属性结构
+			],
-      depts: [], // 部门列表
+			queryParams: {
-      // 查询参数
+				pageNo: 1,
-      queryParams: {
+				pageSize: 20,
-        pageNo: 1,
+				name: '',
-        pageSize: 10,
+			},
-        name: undefined,
+			tableProps,
-        code: undefined,
+			list: [],
-        status: undefined,
+			tableBtn: [
-        createTime: []
+				this.$auth.hasPermi('system:permission:assign-role-menu')
-      },
+					? {
-      // 表单参数
+							type: 'menuAuth',
-      form: {},
+							btnName: '菜单权限',
-      defaultProps: {
+					  }
-        label: "name",
+					: undefined,
-        children: "children"
+				this.$auth.hasPermi('system:permission:assign-role-data-scope')
-      },
+					? {
-      // 表单校验
+							type: 'dataAuth',
-      rules: {
+							btnName: '数据权限',
-        name: [
+							// showTip: "新增工单",
-          { required: true, message: "角色名称不能为空", trigger: "blur" }
+					  }
-        ],
+					: undefined,
-        code: [
+				this.$auth.hasPermi('system:role:update')
-          { required: true, message: "角色标识不能为空", trigger: "blur" }
+					? {
-        ],
+							type: 'edit',
-        sort: [
+							btnName: '编辑',
-          { required: true, message: "角色顺序不能为空", trigger: "blur" }
+					  }
-        ]
+					: undefined,
-      },
+				this.$auth.hasPermi('system:role:delete')
-
+					? {
-      // 枚举
+							type: 'delete',
-      SysCommonStatusEnum: CommonStatusEnum,
+							btnName: '删除',
-      SysDataScopeEnum: SystemDataScopeEnum,
+					  }
-      // 数据字典
+					: undefined,
-      roleTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_ROLE_TYPE),
+			].filter((v) => v),
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
+			addOrEditTitle: '',
-      dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE)
+			centervisible: false,
-    };
+			// 菜单权限
-  },
+			menuVisible: false,
-  created() {
+			// 数据权限
-    this.getList();
+			dataVisible: false,
-  },
+			// 总条数
-  methods: {
+			total: 0,
-    /** 查询角色列表 */
+		};
-    getList() {
+	},
-      this.loading = true;
+	created() {
-      listRole(this.queryParams).then(
+		this.getList();
-        response => {
+	},
-          this.roleList = response.data.list;
+	methods: {
-          this.total = response.data.total;
+		/** 查询角色列表 */
-          this.loading = false;
+		getList() {
-        }
+			listRole(this.queryParams).then((response) => {
-      );
+				this.list = response.data.list;
-    },
+				this.total = response.data.total;
-    // 角色状态修改
+			});
-    handleStatusChange(row) {
+		},
-      // 此时，row 已经变成目标状态了，所以可以直接提交请求和提示
+		buttonClick(val) {
-      let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
+			console.log(val);
-      this.$modal.confirm('确认要"' + text + '""' + row.name + '"角色吗?').then(function() {
+			if (val.btnName === 'search') {
-          return changeRoleStatus(row.id, row.status);
+				this.queryParams.pageNo = 1;
-        }).then(() => {
+				this.queryParams.name = val.name;
-          this.$modal.msgSuccess(text + "成功");
+				this.getList();
-        }).catch(function() {
+			} else {
-          // 异常时，需要将 row.status 状态重置回之前的
+				this.addOrEditTitle = '新增';
-          row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
+				this.centervisible = true;
-              : CommonStatusEnum.ENABLE;
+				this.$nextTick(() => {
-        });
+					this.$refs.roleAdd.init();
-    },
+				});
-    // 取消按钮
+			}
-    cancel() {
+		},
-      this.open = false;
+		handleClick(val) {
-      this.reset();
+			switch (val.type) {
-    },
+				case 'edit':
-    // 取消按钮（数据权限）
+					this.addOrEditTitle = '编辑';
-    cancelDataScope() {
+					this.centervisible = true;
-      this.openDataScope = false;
+					this.$nextTick(() => {
-      this.reset();
+						this.$refs.roleAdd.init(val.data.id);
-    },
+					});
-    // 取消按钮（菜单权限）
+					break;
-    cancelMenu() {
+				case 'delete':
-      this.openMenu = false;
+					this.handleDelete(val.data);
-      this.reset();
+					break;
-    },
+				case 'menuAuth':
-    // 表单重置
+					this.menuVisible = true;
-    reset() {
+					this.$nextTick(() => {
-      if (this.$refs.menu !== undefined) {
+						this.$refs.menuAuth.init(val.data.id);
-        this.$refs.menu.setCheckedKeys([]);
+					});
-      }
+					break;
-      this.menuExpand = false;
+				default:
-      this.menuNodeAll = false;
+					this.dataVisible = true;
-      this.deptExpand = true;
+					this.$nextTick(() => {
-      this.deptNodeAll = false;
+						this.$refs.dataAuth.init(val.data.id);
-      this.form = {
+					});
-        id: undefined,
+			}
-        name: undefined,
+		},
-        code: undefined,
+		/** 删除按钮操作 */
-        sort: 0,
+		handleDelete(row) {
-        deptIds: [],
+			this.$modal
-        menuIds: [],
+				.delConfirm(row.name)
-        dataScope: undefined,
+				.then(function () {
-        deptCheckStrictly: false,
+					return delRole(row.id);
-        menuCheckStrictly: true,
+				})
-        remark: undefined
+				.then(() => {
-      };
+					this.queryParams.pageNo = 1;
-      this.resetForm("form");
+					this.getList();
-    },
+					this.$modal.msgSuccess('删除成功');
-    /** 搜索按钮操作 */
+				})
-    handleQuery() {
+				.catch(() => {});
-      this.queryParams.pageNo = 1;
+		},
-      this.getList();
+		// 新增取消
-    },
+		handleCancel() {
-    /** 重置按钮操作 */
+			this.$refs.roleAdd.formClear();
-    resetQuery() {
+			this.centervisible = false;
-      this.resetForm("queryForm");
+			this.addOrEditTitle = '';
-      this.handleQuery();
+		},
-    },
+		handleConfirm() {
-    // 树权限（展开/折叠）
+			this.$refs.roleAdd.submitForm();
-    handleCheckedTreeExpand(value, type) {
+		},
-      if (type === 'menu') {
+		successSubmit() {
-        let treeList = this.menuOptions;
+			this.handleCancel();
-        for (let i = 0; i < treeList.length; i++) {
+			this.getList();
-          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+		},
-        }
+		// 菜单权限
-      } else if (type === 'dept') {
+		handleCancelm() {
-        let treeList = this.deptOptions;
+			this.$refs.menuAuth.formClear();
-        for (let i = 0; i < treeList.length; i++) {
+			this.menuVisible = false;
-          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
+		},
-        }
+		handleConfirmm() {
-      }
+			this.$refs.menuAuth.submitForm();
-    },
+		},
-    // 树权限（全选/全不选）
+		successSubmitm() {
-    handleCheckedTreeNodeAll(value, type) {
+			this.handleCancelm();
-      if (type === 'menu') {
+			this.getList();
-        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
+		},
-      } else if (type === 'dept') {
+		// 数据权限
-        // this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+		handleCanceld() {
-        this.$refs.dept.setCheckedNodes(value ? this.depts: []);
+			this.$refs.dataAuth.formClear();
-      }
+			this.dataVisible = false;
-    },
+		},
-    // 树权限（父子联动）
+		handleConfirmd() {
-    handleCheckedTreeConnect(value, type) {
+			this.$refs.dataAuth.submitForm();
-      if (type === 'menu') {
+		},
-        this.form.menuCheckStrictly = value;
+		successSubmitd() {
-      } else if (type === 'dept') {
+			this.handleCanceld();
-        this.form.deptCheckStrictly = !value;
+			this.getList();
-      }
+		},
-    },
+	},
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加角色";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id
-      getRole(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改角色";
-      });
-    },
-    /** 分配菜单权限操作 */
-    handleMenu(row) {
-      this.reset();
-      const id = row.id
-      // 处理了 form 的角色 name 和 code 的展示
-      this.form.id = id;
-      this.form.name = row.name;
-      this.form.code = row.code;
-      // 打开弹窗
-      this.openMenu = true;
-      // 获得菜单列表
-      listSimpleMenus().then(response => {
-        // 处理 menuOptions 参数
-        this.menuOptions = [];
-        this.menuOptions.push(...this.handleTree(response.data, "id"));
-        // 获取角色拥有的菜单权限
-        listRoleMenus(id).then(response => {
-          // 设置为严格，避免设置父节点自动选中子节点，解决半选中问题
-          this.form.menuCheckStrictly = true
-          // 设置选中
-          this.$refs.menu.setCheckedKeys(response.data);
-          // 设置为非严格，继续使用半选中
-          this.form.menuCheckStrictly = false
-        })
-      });
-
-    },
-    /** 分配数据权限操作 */
-    handleDataScope(row) {
-      this.reset();
-      // 处理了 form 的角色 name 和 code 的展示
-      this.form.id = row.id;
-      this.form.name = row.name;
-      this.form.code = row.code;
-      // 打开弹窗
-      this.openDataScope = true;
-      // 获得部门列表
-      listSimpleDepts().then(response => {
-        // 处理 deptOptions 参数
-        this.deptOptions = [];
-        this.deptOptions.push(...this.handleTree(response.data, "id"));
-        this.depts = response.data;
-        // this.deptIds = response.data.map(x => x.id);
-        // 获得角色拥有的数据权限
-        getRole(row.id).then(response => {
-          this.form.dataScope = response.data.dataScope;
-          this.$refs.dept.setCheckedKeys(response.data.dataScopeDeptIds, false);
-        });
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id !== undefined) {
-            updateRole(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addRole(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 提交按钮（数据权限） */
-    submitDataScope: function() {
-      if (this.form.id !== undefined) {
-        assignRoleDataScope({
-          roleId: this.form.id,
-          dataScope: this.form.dataScope,
-          dataScopeDeptIds: this.form.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM ? [] :
-              this.$refs.dept.getCheckedKeys()
-        }).then(response => {
-          this.$modal.msgSuccess("修改成功");
-          this.openDataScope = false;
-          this.getList();
-        });
-      }
-    },
-    /** 提交按钮（菜单权限） */
-    submitMenu: function() {
-      if (this.form.id !== undefined) {
-        assignRoleMenu({
-          roleId: this.form.id,
-          menuIds: [...this.$refs.menu.getCheckedKeys(), ...this.$refs.menu.getHalfCheckedKeys()]
-        }).then(response => {
-          this.$modal.msgSuccess("修改成功");
-          this.openMenu = false;
-          this.getList();
-        });
-      }
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除角色编号为"' + ids + '"的数据项?').then(function() {
-          return delRole(ids);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$modal.confirm('是否确认导出所有角色数据项?').then(function() {
-          this.exportLoading = true;
-          return exportRole(queryParams);
-        }).then(response => {
-          this.$download.excel(response, '角色数据.xls');
-          this.exportLoading = false;
-      }).catch(() => {});
-    }
-  }
 };
 </script>
+<style lang="scss" scoped>
+.app-container {
+	width: 100%;
+	height: calc(100vh - 164px);
+	background-color: #fff;
+	border-radius: 8px;
+	padding: 8px;
+}
+</style>

src/views/system/user/profile/index.vue

@@ -7,9 +7,9 @@
             <span>个人信息</span>
           </div>
           <div>
-            <!-- <div class="text-center">
+            <div class="text-center">
               <userAvatar :user="user" />
-            </div> -->
+            </div>
             <ul class="list-group list-group-striped">
               <li class="list-group-item">
                 <svg-icon icon-class="user" />用户名称
@@ -66,7 +66,7 @@
 </template>
 
 <script>
-// import userAvatar from "./userAvatar";
+import userAvatar from "./userAvatar";
 import userInfo from "./userInfo";
 import resetPwd from "./resetPwd";
 import userSocial from "./userSocial";
@@ -74,7 +74,7 @@ import { getUserProfile } from "@/api/system/user";
 
 export default {
   name: "Profile",
-  components: { /** userAvatar , **/ userInfo, resetPwd, userSocial },
+  components: { userAvatar, userInfo, resetPwd, userSocial },
   data() {
     return {
       user: {},

yarn.lock

@@ -189,7 +189,7 @@
   resolved "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz"
   integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
   dependencies:
-    "@babel/types" "^7.22.15"
+    "@babel/types" "^7.22.5"
 
 "@babel/helper-module-transforms@^7.24.7":
   version "7.24.7"
@@ -1000,6 +1000,8 @@
   integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
@@ -1166,8 +1168,8 @@
   resolved "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz"
   integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
   dependencies:
-    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/resolve-uri" "3.1.0"
-    "@jridgewell/sourcemap-codec" "^1.4.14"
+    "@jridgewell/sourcemap-codec" "1.4.14"
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"