Merge pull request 'projects/mes-zjl' (#391) from projects/mes-zjl into projects/mes-test

Reviewed-on: #391

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,250 +1,180 @@
 <template>
 	<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>
-      </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',
+	mixins: [tableHeightMixin],
+	components: { RoleAdd, MenuAuth, DataAuth },
 	data() {
 		return {
-      // 遮罩层
+			formConfig: [
-      loading: true,
+				{
-      // 导出遮罩层
+					type: 'input',
-      exportLoading: false,
+					label: '角色名称',
-      // 显示搜索条件
+					placeholder: '角色名称',
-      showSearch: true,
+					param: 'name',
-      // 总条数
+				},
-      total: 0,
+				{
-      // 角色表格数据
+					type: 'button',
-      roleList: [],
+					btnName: '查询',
-      // 弹出层标题
+					name: 'search',
-      title: "",
+					color: 'primary',
-      // 是否显示弹出层
+				},
-      open: false,
+				{
-      // 是否显示弹出层（数据权限）
+					type: this.$auth.hasPermi('system:role:create') ? 'separate' : '',
-      openDataScope: false,
+				},
-      // 是否显示弹出层（菜单权限）
+				{
-      openMenu: false,
+					type: this.$auth.hasPermi('system:role:create') ? 'button' : '',
-      menuExpand: false,
+					btnName: '新增',
-      menuNodeAll: false,
+					name: 'add',
-      deptExpand: true,
+					color: 'success',
-      deptNodeAll: false,
+					plain: true,
-      // 菜单列表
+				},
-      menuOptions: [],
+			],
-      // 部门列表
-      deptOptions: [], // 部门属性结构
-      depts: [], // 部门列表
-      // 查询参数
 			queryParams: {
 				pageNo: 1,
-        pageSize: 10,
+				pageSize: 20,
-        name: undefined,
+				name: '',
-        code: undefined,
-        status: undefined,
-        createTime: []
 			},
-      // 表单参数
+			tableProps,
-      form: {},
+			list: [],
-      defaultProps: {
+			tableBtn: [
-        label: "name",
+				this.$auth.hasPermi('system:permission:assign-role-menu')
-        children: "children"
+					? {
-      },
+							type: 'menuAuth',
-      // 表单校验
+							btnName: '菜单权限',
-      rules: {
+					  }
-        name: [
+					: undefined,
-          { required: true, message: "角色名称不能为空", trigger: "blur" }
+				this.$auth.hasPermi('system:permission:assign-role-data-scope')
-        ],
+					? {
-        code: [
+							type: 'dataAuth',
-          { required: true, message: "角色标识不能为空", trigger: "blur" }
+							btnName: '数据权限',
-        ],
+							// showTip: "新增工单",
-        sort: [
+					  }
-          { required: true, message: "角色顺序不能为空", trigger: "blur" }
+					: undefined,
-        ]
+				this.$auth.hasPermi('system:role:update')
-      },
+					? {
-
+							type: 'edit',
-      // 枚举
+							btnName: '编辑',
-      SysCommonStatusEnum: CommonStatusEnum,
+					  }
-      SysDataScopeEnum: SystemDataScopeEnum,
+					: undefined,
-      // 数据字典
+				this.$auth.hasPermi('system:role:delete')
-      roleTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_ROLE_TYPE),
+					? {
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
+							type: 'delete',
-      dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE)
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			addOrEditTitle: '',
+			centervisible: false,
+			// 菜单权限
+			menuVisible: false,
+			// 数据权限
+			dataVisible: false,
+			// 总条数
+			total: 0,
 		};
 	},
 	created() {
@@ -253,243 +183,110 @@ export default {
 	methods: {
 		/** 查询角色列表 */
 		getList() {
-      this.loading = true;
+			listRole(this.queryParams).then((response) => {
-      listRole(this.queryParams).then(
+				this.list = response.data.list;
-        response => {
-          this.roleList = response.data.list;
 				this.total = response.data.total;
-          this.loading = false;
-        }
-      );
-    },
-    // 角色状态修改
-    handleStatusChange(row) {
-      // 此时，row 已经变成目标状态了，所以可以直接提交请求和提示
-      let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
-      this.$modal.confirm('确认要"' + text + '""' + row.name + '"角色吗?').then(function() {
-          return changeRoleStatus(row.id, row.status);
-        }).then(() => {
-          this.$modal.msgSuccess(text + "成功");
-        }).catch(function() {
-          // 异常时，需要将 row.status 状态重置回之前的
-          row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
-              : CommonStatusEnum.ENABLE;
 			});
 		},
-    // 取消按钮
+		buttonClick(val) {
-    cancel() {
+			console.log(val);
-      this.open = false;
+			if (val.btnName === 'search') {
-      this.reset();
-    },
-    // 取消按钮（数据权限）
-    cancelDataScope() {
-      this.openDataScope = false;
-      this.reset();
-    },
-    // 取消按钮（菜单权限）
-    cancelMenu() {
-      this.openMenu = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      if (this.$refs.menu !== undefined) {
-        this.$refs.menu.setCheckedKeys([]);
-      }
-      this.menuExpand = false;
-      this.menuNodeAll = false;
-      this.deptExpand = true;
-      this.deptNodeAll = false;
-      this.form = {
-        id: undefined,
-        name: undefined,
-        code: undefined,
-        sort: 0,
-        deptIds: [],
-        menuIds: [],
-        dataScope: undefined,
-        deptCheckStrictly: false,
-        menuCheckStrictly: true,
-        remark: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
 				this.queryParams.pageNo = 1;
+				this.queryParams.name = val.name;
 				this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 树权限（展开/折叠）
-    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: []);
-      }
-    },
-    // 树权限（父子联动）
-    handleCheckedTreeConnect(value, type) {
-      if (type === 'menu') {
-        this.form.menuCheckStrictly = value;
-      } else if (type === 'dept') {
-        this.form.deptCheckStrictly = !value;
-      }
-    },
-    /** 新增按钮操作 */
-    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.addOrEditTitle = '新增';
-              this.$modal.msgSuccess("新增成功");
+				this.centervisible = true;
-              this.open = false;
+				this.$nextTick(() => {
-              this.getList();
+					this.$refs.roleAdd.init();
-            });
-          }
-        }
-      });
-    },
-    /** 提交按钮（数据权限） */
-    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();
 				});
 			}
 		},
-    /** 提交按钮（菜单权限） */
+		handleClick(val) {
-    submitMenu: function() {
+			switch (val.type) {
-      if (this.form.id !== undefined) {
+				case 'edit':
-        assignRoleMenu({
+					this.addOrEditTitle = '编辑';
-          roleId: this.form.id,
+					this.centervisible = true;
-          menuIds: [...this.$refs.menu.getCheckedKeys(), ...this.$refs.menu.getHalfCheckedKeys()]
+					this.$nextTick(() => {
-        }).then(response => {
+						this.$refs.roleAdd.init(val.data.id);
-          this.$modal.msgSuccess("修改成功");
+					});
-          this.openMenu = false;
+					break;
-          this.getList();
+				case 'delete':
+					this.handleDelete(val.data);
+					break;
+				case 'menuAuth':
+					this.menuVisible = true;
+					this.$nextTick(() => {
+						this.$refs.menuAuth.init(val.data.id);
+					});
+					break;
+				default:
+					this.dataVisible = true;
+					this.$nextTick(() => {
+						this.$refs.dataAuth.init(val.data.id);
 					});
 			}
 		},
 		/** 删除按钮操作 */
 		handleDelete(row) {
-      const ids = row.id || this.ids;
+			this.$modal
-      this.$modal.confirm('是否确认删除角色编号为"' + ids + '"的数据项?').then(function() {
+				.delConfirm(row.name)
-          return delRole(ids);
+				.then(function () {
-        }).then(() => {
+					return delRole(row.id);
+				})
+				.then(() => {
+					this.queryParams.pageNo = 1;
 					this.getList();
-          this.$modal.msgSuccess("删除成功");
+					this.$modal.msgSuccess('删除成功');
-      }).catch(() => {});
+				})
+				.catch(() => {});
+		},
+		// 新增取消
+		handleCancel() {
+			this.$refs.roleAdd.formClear();
+			this.centervisible = false;
+			this.addOrEditTitle = '';
+		},
+		handleConfirm() {
+			this.$refs.roleAdd.submitForm();
+		},
+		successSubmit() {
+			this.handleCancel();
+			this.getList();
+		},
+		// 菜单权限
+		handleCancelm() {
+			this.$refs.menuAuth.formClear();
+			this.menuVisible = false;
+		},
+		handleConfirmm() {
+			this.$refs.menuAuth.submitForm();
+		},
+		successSubmitm() {
+			this.handleCancelm();
+			this.getList();
+		},
+		// 数据权限
+		handleCanceld() {
+			this.$refs.dataAuth.formClear();
+			this.dataVisible = false;
+		},
+		handleConfirmd() {
+			this.$refs.dataAuth.submitForm();
+		},
+		successSubmitd() {
+			this.handleCanceld();
+			this.getList();
+		},
 	},
-    /** 导出按钮操作 */
-    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/index.vue

@@ -1,8 +1,17 @@
 <template>
-	<div style="display: flex; gap: 16px; flex: 1; background: #eff1f6">
+	<div class="user-container">
-		<div
+		<!-- <doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
-			class="app-container"
+    <doc-alert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
-			style="background: white; width: 280px; border-radius: 8px">
+    <doc-alert
+      title="Excel 导入导出"
+      url="https://doc.iocoder.cn/excel-import-and-export/"
+    /> -->
+		<!-- 搜索工作栏 -->
+
+		<el-row :gutter="8" class="user-box">
+			<!--部门数据-->
+			<el-col :span="4" :xs="24">
+				<div class="user-box-left">
 					<div class="head-container">
 						<el-input
 							v-model="deptName"
@@ -24,240 +33,47 @@
 							@node-click="handleNodeClick" />
 					</div>
 				</div>
-
-		<div
-			class="app-container"
-			style="background: #fff; border-radius: 8px; width: 1px; flex: 1">
-			<el-form
-				:model="queryParams"
-				ref="queryForm"
-				size="small"
-				:inline="true"
-				v-show="showSearch"
-				label-width="68px">
-				<el-form-item label="用户名称" prop="username">
-					<el-input
-						v-model="queryParams.username"
-						placeholder="请输入用户名称"
-						clearable
-						style="width: 240px"
-						@keyup.enter.native="handleQuery" />
-				</el-form-item>
-				<el-form-item label="手机号码" prop="mobile">
-					<el-input
-						v-model="queryParams.mobile"
-						placeholder="请输入手机号码"
-						clearable
-						style="width: 240px"
-						@keyup.enter.native="handleQuery" />
-				</el-form-item>
-				<el-form-item label="状态" prop="status">
-					<el-select
-						v-model="queryParams.status"
-						placeholder="用户状态"
-						clearable
-						style="width: 240px">
-						<el-option
-							v-for="dict in statusDictDatas"
-							:key="parseInt(dict.value)"
-							:label="dict.label"
-							:value="parseInt(dict.value)" />
-					</el-select>
-				</el-form-item>
-				<el-form-item label="创建时间" prop="createTime">
-					<el-date-picker
-						v-model="queryParams.createTime"
-						style="width: 240px"
-						value-format="yyyy-MM-dd HH:mm:ss"
-						type="daterange"
-						range-separator="-"
-						start-placeholder="开始日期"
-						end-placeholder="结束日期"
-						:default-time="['00:00:00', '23:59:59']" />
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" icon="el-icon-search" @click="handleQuery">
-						搜索
-					</el-button>
-					<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-				</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:user:create']">
-						新增
-					</el-button>
 			</el-col>
-				<el-col :span="1.5">
+			<!--用户数据-->
-					<el-button
+			<el-col :span="20" :xs="24">
-						type="info"
+				<div class="user-box-right">
-						icon="el-icon-upload2"
+					<search-bar
-						size="mini"
+						:formConfigs="formConfig"
-						@click="handleImport"
+						ref="userSearchBarForm"
-						v-hasPermi="['system:user:import']">
+						@headBtnClick="buttonClick" />
-						导入
+					<!-- 列表 -->
-					</el-button>
+					<base-table
-				</el-col>
+						:page="queryParams.pageNo"
-				<el-col :span="1.5">
+						:limit="queryParams.pageSize"
-					<el-button
+						:table-props="tableProps"
-						type="warning"
+						:table-data="userList"
-						icon="el-icon-download"
+						:max-height="tableH"
-						size="mini"
+						@emitFun="handleStatusChange">
-						@click="handleExport"
+						<method-btn
-						:loading="exportLoading"
+							v-if="tableBtn.length"
-						v-hasPermi="['system:user:export']">
+							slot="handleBtn"
-						导出
+							:width="220"
-					</el-button>
-				</el-col>
-				<right-toolbar
-					:showSearch.sync="showSearch"
-					@queryTable="getList"
-					:columns="columns"></right-toolbar>
-			</el-row>
-
-			<el-table v-loading="loading" :data="userList">
-				<el-table-column
-					label="用户编号"
-					align="center"
-					key="id"
-					prop="id"
-					v-if="columns[0].visible" />
-				<el-table-column
-					label="用户名称"
-					align="center"
-					key="username"
-					prop="username"
-					v-if="columns[1].visible"
-					:show-overflow-tooltip="true" />
-				<el-table-column
-					label="用户昵称"
-					align="center"
-					key="nickname"
-					prop="nickname"
-					v-if="columns[2].visible"
-					:show-overflow-tooltip="true" />
-				<el-table-column
-					label="部门"
-					align="center"
-					key="deptName"
-					prop="dept.name"
-					v-if="columns[3].visible"
-					:show-overflow-tooltip="true" />
-				<el-table-column
-					label="手机号码"
-					align="center"
-					key="mobile"
-					prop="mobile"
-					v-if="columns[4].visible"
-					width="120" />
-				<el-table-column
-					label="状态"
-					key="status"
-					v-if="columns[5].visible"
-					align="center">
-					<template v-slot="scope">
-						<el-switch
-							v-model="scope.row.status"
-							:active-value="0"
-							:inactive-value="1"
-							@change="handleStatusChange(scope.row)" />
-					</template>
-				</el-table-column>
-				<el-table-column
-					label="创建时间"
-					align="center"
-					prop="createTime"
-					v-if="columns[6].visible"
-					width="160">
-					<template v-slot="scope">
-						<span>{{ parseTime(scope.row.createTime) }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column
 							label="操作"
-					align="center"
+							:method-list="tableBtn"
-					width="160"
+							@clickBtn="handleClick" />
-					class-name="small-padding fixed-width">
+					</base-table>
-					<template v-slot="scope">
-						<el-button
-							size="mini"
-							type="text"
-							icon="el-icon-edit"
-							@click="handleUpdate(scope.row)"
-							v-hasPermi="['system:user:update']">
-							修改
-						</el-button>
-						<el-dropdown
-							@command="
-								(command) => handleCommand(command, scope.$index, scope.row)
-							"
-							v-hasPermi="[
-								'system:user:delete',
-								'system:user:update-password',
-								'system:permission:assign-user-role',
-							]">
-							<el-button size="mini" type="text" icon="el-icon-d-arrow-right">
-								更多
-							</el-button>
-							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item
-									command="handleDelete"
-									v-if="scope.row.id !== 1"
-									size="mini"
-									type="text"
-									icon="el-icon-delete"
-									v-hasPermi="['system:user:delete']">
-									删除
-								</el-dropdown-item>
-								<el-dropdown-item
-									command="handleResetPwd"
-									size="mini"
-									type="text"
-									icon="el-icon-key"
-									v-hasPermi="['system:user:update-password']">
-									重置密码
-								</el-dropdown-item>
-								<el-dropdown-item
-									command="handleRole"
-									size="mini"
-									type="text"
-									icon="el-icon-circle-check"
-									v-hasPermi="['system:permission:assign-user-role']">
-									分配角色
-								</el-dropdown-item>
-							</el-dropdown-menu>
-						</el-dropdown>
-					</template>
-				</el-table-column>
-			</el-table>
 
 					<pagination
-				v-show="total > 0"
-				:total="total"
 						:page.sync="queryParams.pageNo"
 						:limit.sync="queryParams.pageSize"
+						:total="total"
 						@pagination="getList" />
+				</div>
+			</el-col>
+		</el-row>
 
 		<!-- 添加或修改参数配置对话框 -->
-			<el-dialog
+		<base-dialog :dialogTitle="title" :dialogVisible="open" width="50%">
-				:title="title"
+			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
-				:visible.sync="open"
-				width="600px"
-				append-to-body>
-				<el-form ref="form" :model="form" :rules="rules" label-width="80px">
 				<el-row>
 					<el-col :span="12">
 						<el-form-item label="用户昵称" prop="nickname">
-								<el-input
+							<el-input v-model="form.nickname" placeholder="请输入用户昵称" />
-									v-model="form.nickname"
-									placeholder="请输入用户昵称" />
 						</el-form-item>
 					</el-col>
 					<el-col :span="12">
@@ -296,9 +112,7 @@
 							v-if="form.id === undefined"
 							label="用户名称"
 							prop="username">
-								<el-input
+							<el-input v-model="form.username" placeholder="请输入用户名称" />
-									v-model="form.username"
-									placeholder="请输入用户名称" />
 						</el-form-item>
 					</el-col>
 					<el-col :span="12">
@@ -317,7 +131,10 @@
 				<el-row>
 					<el-col :span="12">
 						<el-form-item label="用户性别">
-								<el-select v-model="form.sex" placeholder="请选择">
+							<el-select
+								v-model="form.sex"
+								placeholder="请选择"
+								style="width: 100%">
 								<el-option
 									v-for="dict in sexDictDatas"
 									:key="parseInt(dict.value)"
@@ -328,7 +145,11 @@
 					</el-col>
 					<el-col :span="12">
 						<el-form-item label="岗位">
-								<el-select v-model="form.postIds" multiple placeholder="请选择">
+							<el-select
+								v-model="form.postIds"
+								multiple
+								placeholder="请选择"
+								style="width: 100%">
 								<el-option
 									v-for="item in postOptions"
 									:key="item.id"
@@ -350,17 +171,16 @@
 				</el-row>
 			</el-form>
 			<div slot="footer" class="dialog-footer">
-					<el-button type="primary" @click="submitForm">确 定</el-button>
 				<el-button @click="cancel">取 消</el-button>
+				<el-button type="primary" @click="submitForm">确 定</el-button>
 			</div>
-			</el-dialog>
+		</base-dialog>
 
 		<!-- 用户导入对话框 -->
-			<el-dialog
+		<base-dialog
-				:title="upload.title"
+			:dialogTitle="upload.title"
-				:visible.sync="upload.open"
+			:dialogVisible="upload.open"
-				width="400px"
+			width="400px">
-				append-to-body>
 			<el-upload
 				ref="upload"
 				:limit="1"
@@ -388,7 +208,7 @@
 						:underline="false"
 						style="font-size: 12px; vertical-align: baseline"
 						@click="importTemplate">
-							下载模板
+						导出模板
 					</el-link>
 				</div>
 			</el-upload>
@@ -396,14 +216,10 @@
 				<el-button type="primary" @click="submitFileForm">确 定</el-button>
 				<el-button @click="upload.open = false">取 消</el-button>
 			</div>
-			</el-dialog>
+		</base-dialog>
 
 		<!-- 分配角色 -->
-			<el-dialog
+		<base-dialog dialogTitle="分配角色" :dialogVisible="openRole" width="500px">
-				title="分配角色"
-				:visible.sync="openRole"
-				width="500px"
-				append-to-body>
 			<el-form :model="form" label-width="80px">
 				<el-form-item label="用户名称">
 					<el-input v-model="form.username" :disabled="true" />
@@ -412,7 +228,11 @@
 					<el-input v-model="form.nickname" :disabled="true" />
 				</el-form-item>
 				<el-form-item label="角色">
-						<el-select v-model="form.roleIds" multiple placeholder="请选择">
+					<el-select
+						v-model="form.roleIds"
+						multiple
+						placeholder="请选择"
+						style="width: 100%">
 						<el-option
 							v-for="item in roleOptions"
 							:key="parseInt(item.id)"
@@ -425,8 +245,7 @@
 				<el-button type="primary" @click="submitRole">确 定</el-button>
 				<el-button @click="cancelRole">取 消</el-button>
 			</div>
-			</el-dialog>
+		</base-dialog>
-		</div>
 	</div>
 </template>
 
@@ -453,12 +272,168 @@ import { DICT_TYPE, getDictDatas } from '@/utils/dict';
 import { assignUserRole, listUserRoles } from '@/api/system/permission';
 import { listSimpleRoles } from '@/api/system/role';
 import { getBaseHeader } from '@/utils/request';
-
+import tableHeightMixin from '@/mixins/tableHeightMixin';
+import { parseTime } from '@/utils/ruoyi';
+import statusBtn5 from './../components/statusBtn5.vue';
+const tableProps = [
+	{
+		prop: 'id',
+		label: '用户编号',
+		showOverflowtooltip: true,
+	},
+	{
+		prop: 'username',
+		label: '用户名称',
+		minWidth: 120,
+		showOverflowtooltip: true,
+	},
+	{
+		prop: 'nickname',
+		label: '用户昵称',
+		minWidth: 120,
+		showOverflowtooltip: true,
+	},
+	{
+		prop: 'dept',
+		label: '部门',
+		minWidth: 120,
+		filter: (item) => item.name || '',
+		showOverflowtooltip: true,
+	},
+	{
+		prop: 'mobile',
+		label: '手机号码',
+		minWidth: 150,
+		showOverflowtooltip: true,
+	},
+	{
+		prop: 'status',
+		label: '状态',
+		minWidth: 80,
+		// filter: publicFormatter(DICT_TYPE.SYSTEM_OPERATE_TYPE),
+		subcomponent: statusBtn5,
+	},
+	{
+		prop: 'createTime',
+		label: '创建时间',
+		filter: parseTime,
+		minWidth: 150,
+		showOverflowtooltip: true,
+	},
+];
 export default {
 	name: 'SystemUser',
+	mixins: [tableHeightMixin],
 	components: { Treeselect },
 	data() {
 		return {
+			formConfig: [
+				{
+					type: 'input',
+					label: '用户名称',
+					placeholder: '用户名称',
+					param: 'username',
+					width: 150,
+				},
+				{
+					type: 'input',
+					label: '手机号码',
+					placeholder: '手机号码',
+					param: 'mobile',
+					width: 150,
+				},
+				{
+					type: 'select',
+					label: '状态',
+					selectOptions: this.getDictDatas(this.DICT_TYPE.COMMON_STATUS),
+					labelField: 'label',
+					valueField: 'value',
+					param: 'status',
+					width: 100,
+				},
+				{
+					type: 'datePicker',
+					label: '创建时间',
+					dateType: 'daterange',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					param: 'createTime',
+					defaultSelect: [],
+					defaultTime: ['00:00:00', '23:59:59'],
+					width: 250,
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'cancel',
+				},
+				{
+					type: this.$auth.hasPermiOr([
+						'system:user:create',
+						'system:user:import',
+						'system:user:export',
+					])
+						? 'separate'
+						: '',
+				},
+				{
+					type: this.$auth.hasPermi('system:user:import') ? 'button' : '',
+					btnName: '导入',
+					name: 'import',
+					color: 'primary',
+					plain: true,
+				},
+				{
+					type: this.$auth.hasPermi('system:user:export') ? 'button' : '',
+					btnName: '导出',
+					name: 'export',
+					color: 'primary',
+					plain: true,
+				},
+				{
+					type: this.$auth.hasPermi('system:user:create') ? 'button' : '',
+					btnName: '新增',
+					name: 'addNew',
+					color: 'success',
+					plain: true,
+				},
+			],
+			tableBtn: [
+				this.$auth.hasPermi('system:user:update-password')
+					? {
+							type: 'reset',
+							btnName: '重置密码',
+					  }
+					: undefined,
+				this.$auth.hasPermi('system:permission:assign-user-role')
+					? {
+							type: 'role',
+							btnName: '分配角色',
+					  }
+					: undefined,
+				this.$auth.hasPermi('system:user:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('system:user:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableProps,
 			// 遮罩层
 			loading: true,
 			// 导出遮罩层
@@ -468,7 +443,7 @@ export default {
 			// 总条数
 			total: 0,
 			// 用户表格数据
-			userList: null,
+			userList: [],
 			// 弹出层标题
 			title: '',
 			// 部门树选项
@@ -509,23 +484,13 @@ export default {
 			// 查询参数
 			queryParams: {
 				pageNo: 1,
-				pageSize: 10,
+				pageSize: 20,
 				username: undefined,
 				mobile: undefined,
 				status: undefined,
 				deptId: undefined,
 				createTime: [],
 			},
-			// 列信息
-			columns: [
-				{ key: 0, label: `用户编号`, visible: true },
-				{ key: 1, label: `用户名称`, visible: true },
-				{ key: 2, label: `用户昵称`, visible: true },
-				{ key: 3, label: `部门`, visible: true },
-				{ key: 4, label: `手机号码`, visible: true },
-				{ key: 5, label: `状态`, visible: true },
-				{ key: 6, label: `创建时间`, visible: true },
-			],
 			// 表单校验
 			rules: {
 				username: [
@@ -577,23 +542,44 @@ export default {
 		// });
 	},
 	methods: {
-		// 更多操作
+		handleClick(val) {
-		handleCommand(command, index, row) {
+			switch (val.type) {
-			switch (command) {
+				case 'edit':
-				case 'handleUpdate':
+					this.handleUpdate(val.data);
-					this.handleUpdate(row); //修改客户信息
 					break;
-				case 'handleDelete':
+				case 'delete':
-					this.handleDelete(row); //红号变更
+					this.handleDelete(val.data.id, val.data.username);
 					break;
-				case 'handleResetPwd':
+				case 'reset':
-					this.handleResetPwd(row);
+					this.handleResetPwd(val.data);
-					break;
-				case 'handleRole':
-					this.handleRole(row);
 					break;
 				default:
+					this.handleRole(val.data);
+			}
+		},
+		buttonClick(val) {
+			console.log(val);
+			switch (val.btnName) {
+				case 'search':
+					this.handleQuery(val);
 					break;
+				case 'cancel':
+					this.$refs['userSearchBarForm'].resetForm();
+					this.queryParams.pageNo = 1;
+					this.queryParams.username = '';
+					this.queryParams.mobile = '';
+					this.queryParams.status = '';
+					this.queryParams.createTime = [];
+					this.getList();
+					break;
+				case 'addNew':
+					this.handleAdd();
+					break;
+				case 'import':
+					this.handleImport();
+					break;
+				default:
+					this.handleExport();
 			}
 		},
 		/** 查询用户列表 */
@@ -630,20 +616,8 @@ export default {
 		},
 		// 用户状态修改
 		handleStatusChange(row) {
-			let text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用';
+			changeUserStatus(row.id, row.status).then((res) => {
-			this.$modal
+				this.$modal.msgSuccess('操作成功');
-				.confirm('确认要"' + text + '""' + row.username + '"用户吗?')
-				.then(function () {
-					return changeUserStatus(row.id, row.status);
-				})
-				.then(() => {
-					this.$modal.msgSuccess(text + '成功');
-				})
-				.catch(function () {
-					row.status =
-						row.status === CommonStatusEnum.ENABLE
-							? CommonStatusEnum.DISABLE
-							: CommonStatusEnum.ENABLE;
 			});
 		},
 		// 取消按钮
@@ -675,15 +649,14 @@ export default {
 			this.resetForm('form');
 		},
 		/** 搜索按钮操作 */
-		handleQuery() {
+		handleQuery(val) {
 			this.queryParams.pageNo = 1;
+			this.queryParams.username = val.username;
+			this.queryParams.mobile = val.mobile;
+			this.queryParams.status = val.status;
+			this.queryParams.createTime = val.createTime;
 			this.getList();
 		},
-		/** 重置按钮操作 */
-		resetQuery() {
-			this.resetForm('queryForm');
-			this.handleQuery();
-		},
 		/** 新增按钮操作 */
 		handleAdd() {
 			this.reset();
@@ -703,15 +676,12 @@ export default {
 				this.form = response.data;
 				this.open = true;
 				this.title = '修改用户';
-				this.form.password = '';
 			});
 		},
 		/** 重置密码按钮操作 */
 		handleResetPwd(row) {
-			this.$prompt('请输入"' + row.username + '"的新密码', '提示', {
+			this.$modal
-				confirmButtonText: '确定',
+				.prompt('请输入 【' + row.username + '】 的新密码')
-				cancelButtonText: '取消',
-			})
 				.then(({ value }) => {
 					resetUserPwd(row.id, value).then((response) => {
 						this.$modal.msgSuccess('修改成功，新密码是：' + value);
@@ -775,12 +745,11 @@ export default {
 			}
 		},
 		/** 删除按钮操作 */
-		handleDelete(row) {
+		handleDelete(id, detContent) {
-			const ids = row.id || this.ids;
 			this.$modal
-				.confirm('是否确认删除用户编号为"' + ids + '"的数据项?')
+				.delConfirm(detContent)
-				.then(function () {
+				.then(() => {
-					return delUser(ids);
+					return delUser(id);
 				})
 				.then(() => {
 					this.getList();
@@ -811,7 +780,7 @@ export default {
 			this.upload.title = '用户导入';
 			this.upload.open = true;
 		},
-		/** 下载模板操作 */
+		/** 导出模板操作 */
 		importTemplate() {
 			importTemplate().then((response) => {
 				this.$download.excel(response, '用户导入模板.xls');
@@ -867,3 +836,20 @@ export default {
 	},
 };
 </script>
+<style lang="scss" scoped>
+.user-container {
+	width: 100%;
+	height: calc(100vh - 164px);
+	background-color: #f2f4f9;
+
+	.user-box {
+		.user-box-left,
+		.user-box-right {
+			background-color: #fff;
+			padding: 8px;
+			border-radius: 8px;
+			height: calc(100vh - 164px);
+		}
+	}
+}
+</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"