feat: 添加角色分配菜单

admin_2/src/api/system.js

@@ -137,6 +137,14 @@ export const refreshResource = (data) => {
     data,
   });
 };
+// 资源分组
+export const getResourceGroup = (data) => {
+  return request({
+    url: `/bill/resource/group`,
+    method: "post",
+    data,
+  });
+};
 /**
  *  区县接入系统
  */
@@ -236,6 +244,15 @@ export const addRoleMenu = (data) => {
   });
 };
 
+// 获取角色菜单
+export const getRoleMenuList = (data) => {
+  return request({
+    url: `/bill/role/auth/editMenu`,
+    method: "post",
+    data,
+  });
+};
+
 /**
  *  用户管理
  */

admin_2/src/pages/system/access/Access.vue

@@ -55,9 +55,9 @@
     <!-- 新增 -->
     <AddAccess
       ref="AddAccess"
-      :addVisible.sync="show"
+      :show.sync="show"
       :title="title"
-      @addSuccess="getAccessList"
+      @success="getAccessList"
     ></AddAccess>
     <AccessSystem
       ref="AccessSystem"

admin_2/src/pages/system/access/components/AccessSystem.vue

@@ -147,13 +147,13 @@ export default {
       // });
       this.areaInfo.accessSystemList = this.accessSystemList;
       let res = await saveAccess(this.areaInfo);
-      this.loading = false;
       let { code, msg } = res.data;
       if (code === 1) {
         this.$message.success(msg);
         this.$emit("success");
         this.handleClose();
       }
+      this.loading = false;
     },
     async delSystem({ row, $index }) {
       if (row.id) {

admin_2/src/pages/system/access/components/AddAccess.vue

@@ -98,7 +98,11 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="handleRest">重 置</el-button>
-        <el-button size="small" type="primary" @click="handleOk"
+        <el-button
+          size="small"
+          type="primary"
+          :loading="loading"
+          @click="handleOk"
           >确 定</el-button
         >
       </span>
@@ -131,7 +135,7 @@ export default {
       required: true,
       default: "",
     },
-    addVisible: {
+    show: {
       type: Boolean,
       required: true,
       default: false,
@@ -140,6 +144,7 @@ export default {
   data() {
     return {
       api: process.env.VUE_APP_API_BASE_URL,
+      loading: false,
       fileList: [],
       preview: false,
       filepaths: [],
@@ -178,10 +183,10 @@ export default {
     ...mapState("user", ["areaTree"]),
     Visible: {
       get() {
-        return this.addVisible;
+        return this.show;
       },
       set(val) {
-        this.$emit("update:addVisible", val);
+        this.$emit("update:show", val);
       },
     },
     initTree() {
@@ -193,6 +198,7 @@ export default {
     handleOk() {
       this.$refs.form.validate(async (valid) => {
         if (valid) {
+          this.loading = true;
           let res = await saveAccess({
             ...this.form,
             tag: this.form.tag.join(","),
@@ -200,9 +206,10 @@ export default {
           let { code, msg } = res.data;
           if (code === 1) {
             this.$message.success(msg);
-            this.$emit("addSuccess");
+            this.$emit("success");
             this.handleClose();
           }
+          this.loading = false;
         }
       });
     },

admin_2/src/pages/system/areaSystem/components/AddAreaSystem.vue

@@ -47,7 +47,11 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="handleRest">重 置</el-button>
-        <el-button size="small" type="primary" @click="handleOk"
+        <el-button
+          size="small"
+          type="primary"
+          :loading="loading"
+          @click="handleOk"
           >确 定</el-button
         >
       </span>
@@ -73,6 +77,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       form: {
         systemName: "",
         systemCode: "",
@@ -104,6 +109,7 @@ export default {
     handleOk() {
       this.$refs.form.validate(async (valid) => {
         if (valid) {
+          this.loading = true;
           let res = await saveSystem(this.form);
           let { code, msg } = res.data;
           if (code === 1) {
@@ -111,6 +117,7 @@ export default {
             this.$emit("success");
             this.handleClose();
           }
+          this.loading = false;
         }
       });
     },

admin_2/src/pages/system/menu/components/AddMenu.vue

@@ -198,7 +198,11 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="handleRest">重 置</el-button>
-        <el-button size="small" type="primary" @click="handleOk"
+        <el-button
+          size="small"
+          type="primary"
+          :loading="loading"
+          @click="handleOk"
           >确 定</el-button
         >
       </span>
@@ -242,6 +246,7 @@ export default {
   data() {
     return {
       iconJson,
+      loading: false,
       defaultProps: {
         children: "childList",
         label: "name",
@@ -297,6 +302,7 @@ export default {
     handleOk() {
       this.$refs.form.validate(async (valid) => {
         if (valid) {
+          this.loading = true;
           let res = await saveMenu(this.form);
           let { code, msg } = res.data;
           if (code === 1) {
@@ -304,6 +310,7 @@ export default {
             this.$emit("success");
             this.handleClose();
           }
+          this.loading = false;
         }
       });
     },

admin_2/src/pages/system/parameter/Parameter.vue

@@ -65,10 +65,10 @@
     <!-- 新增参数 -->
     <AddParameter
       ref="AddParameter"
-      :addVisible.sync="addVisible"
+      :show.sync="addVisible"
       :title="title"
       :dict="dict"
-      @addSuccess="getParamList"
+      @success="getParamList"
     ></AddParameter>
   </div>
 </template>

admin_2/src/pages/system/parameter/components/AddParameter.vue

@@ -90,7 +90,11 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="handleRest">重 置</el-button>
-        <el-button size="small" type="primary" @click="handleOk"
+        <el-button
+          size="small"
+          type="primary"
+          :loading="loading"
+          @click="handleOk"
           >确 定</el-button
         >
       </span>
@@ -107,7 +111,7 @@ export default {
       required: true,
       default: "",
     },
-    addVisible: {
+    show: {
       type: Boolean,
       required: true,
       default: false,
@@ -122,6 +126,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       form: {
         name: "", // 参数名称
         firstOrganize: "", // 一级组织
@@ -147,10 +152,10 @@ export default {
   computed: {
     Visible: {
       get() {
-        return this.addVisible;
+        return this.show;
       },
       set(val) {
-        this.$emit("update:addVisible", val);
+        this.$emit("update:show", val);
       },
     },
   },
@@ -159,13 +164,15 @@ export default {
     handleOk() {
       this.$refs.form.validate(async (valid) => {
         if (valid) {
+          this.loading = true;
           let res = await saveParam(this.form);
           let { code, msg } = res.data;
           if (code === 1) {
             this.$message.success(msg);
-            this.$emit("addSuccess");
+            this.$emit("success");
             this.handleClose();
           }
+          this.loading = false;
         }
       });
     },

admin_2/src/pages/system/resourceManage/components/AddResource.vue

@@ -137,12 +137,12 @@ export default {
             url: this.form.urls.map((v) => v.value).join(","),
           });
           let { code, msg } = res.data;
-          this.loading = false;
           if (code == 1) {
             this.$message.success(msg);
             this.$emit("success");
             this.handleClose();
           }
+          this.loading = false;
         }
       });
     },

admin_2/src/pages/system/role/Role.vue

@@ -55,29 +55,38 @@
     <!-- 新增 -->
     <AddRole
       ref="AddRole"
-      :addVisible.sync="show"
+      :show.sync="show"
       :title="title"
-      @addSuccess="getRoleList"
+      @success="getRoleList"
     ></AddRole>
     <!-- 分配资源 -->
     <ApportionRes
       ref="ApportionRes"
-      :addVisible.sync="resShow"
-      @addSuccess="getRoleList"
+      :show.sync="resShow"
+      @success="getRoleList"
     ></ApportionRes>
+    <!-- 分配菜单 -->
+    <ApportionMenu
+      ref="ApportionMenu"
+      :menuTree="menuTree"
+      :show.sync="menuShow"
+      :roleInfo="roleInfo"
+    ></ApportionMenu>
   </div>
 </template>
 
 <script>
 import TableHeader from "@/components/TableHeader.vue";
-import { getRoleList, deleteRole } from "@/api/system";
+import { getRoleList, deleteRole, getMenuTreeselect } from "@/api/system";
 import AddRole from "./components/AddRole.vue";
 import ApportionRes from "./components/ApportionRes.vue";
+import ApportionMenu from "./components/ApportionMenu.vue";
 export default {
   components: {
     TableHeader,
     AddRole,
     ApportionRes,
+    ApportionMenu,
   },
   data() {
     return {
@@ -119,7 +128,7 @@ export default {
         {
           label: "操作",
           align: "center",
-          width: "200",
+          width: "260",
           formatter: (row) => {
             return (
               <div class="flex justify-center gap-4">
@@ -129,6 +138,12 @@ export default {
                 >
                   分配资源
                 </span>
+                <span
+                  class="primary cursor-pointer"
+                  onClick={() => this.apportionMenu(row)}
+                >
+                  分配菜单
+                </span>
                 <span
                   class="primary cursor-pointer"
                   onClick={() => this.handleEdit(row)}
@@ -150,22 +165,37 @@ export default {
         name: "",
       },
       tableData: [],
+      menuTree: [], // 菜单树
       current: 1,
       size: 10,
       total: 0,
       loading: false,
       selectRows: [],
       show: false,
+      menuShow: false,
       title: "新增",
       dict: {}, // 字典
       resShow: false,
+      roleInfo: {},
     };
   },
   created() {
     this.getRoleList();
+    this.getMenuTreeselect();
   },
   computed: {},
   methods: {
+    // 获取菜单树
+    async getMenuTreeselect() {
+      let res = await getMenuTreeselect({
+        page: 1,
+        size: -1,
+      });
+      if (res.data.code == 1) {
+        let { result } = res.data.data;
+        this.menuTree = result;
+      }
+    },
     async getRoleList() {
       this.loading = true;
       let res = await getRoleList({
@@ -251,6 +281,12 @@ export default {
       this.$refs.ApportionRes.onAdd(row.id);
       this.resShow = true;
     },
+    // 分配菜单
+    apportionMenu(row) {
+      this.roleInfo = row;
+      this.$refs.ApportionMenu.onAdd(row);
+      this.menuShow = true;
+    },
   },
 };
 </script>

admin_2/src/pages/system/role/components/AddRole.vue

@@ -31,7 +31,11 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="handleRest">重 置</el-button>
-        <el-button size="small" type="primary" @click="handleOk"
+        <el-button
+          size="small"
+          type="primary"
+          :loading="loading"
+          @click="handleOk"
           >确 定</el-button
         >
       </span>
@@ -49,7 +53,7 @@ export default {
       required: true,
       default: "",
     },
-    addVisible: {
+    show: {
       type: Boolean,
       required: true,
       default: false,
@@ -57,6 +61,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       form: {
         name: "",
         remark: "",
@@ -69,10 +74,10 @@ export default {
   computed: {
     Visible: {
       get() {
-        return this.addVisible;
+        return this.show;
       },
       set(val) {
-        this.$emit("update:addVisible", val);
+        this.$emit("update:show", val);
       },
     },
   },
@@ -81,13 +86,15 @@ export default {
     handleOk() {
       this.$refs.form.validate(async (valid) => {
         if (valid) {
+          this.loading = true;
           let res = await addRole(this.form);
           let { code, msg } = res.data;
           if (code === 1) {
             this.$message.success(msg);
-            this.$emit("addSuccess");
+            this.$emit("success");
             this.handleClose();
           }
+          this.loading = false;
         }
       });
     },

admin_2/src/pages/system/role/components/ApportionMenu.vue

+<template>
+  <div>
+    <el-dialog
+      title="分配角色菜单"
+      :destroy-on-close="true"
+      :visible.sync="Visible"
+      width="30%"
+      @close="handleClose"
+      :close-on-click-modal="false"
+      top="10vh"
+    >
+      <el-form ref="form" :model="form" size="small" label-width="100px">
+        <el-form-item label="角色名称">
+          <el-input readonly :value="roleInfo.name"></el-input>
+        </el-form-item>
+        <el-form-item label="菜单权限">
+          <el-checkbox v-model="isExpand" @change="handleCheckedTreeExpand"
+            >展开/折叠</el-checkbox
+          >
+          <el-checkbox v-model="isNodeAll" @change="handleCheckedTreeNodeAll"
+            >全选/全不选</el-checkbox
+          >
+          <el-checkbox v-model="checkStrictly">父子联动</el-checkbox>
+          <el-tree
+            class="tree-border"
+            :data="menuTree"
+            show-checkbox
+            ref="menu"
+            node-key="id"
+            :check-strictly="!checkStrictly"
+            :props="defaultProps"
+          ></el-tree>
+        </el-form-item>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="handleRest">重 置</el-button>
+        <el-button
+          size="small"
+          :loading="loading"
+          type="primary"
+          @click="handleOk"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addRoleMenu, getRoleMenuList } from "@/api/system";
+export default {
+  components: {},
+  props: {
+    show: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    roleInfo: {
+      type: Object,
+      required: true,
+      default: () => {},
+    },
+    menuTree: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      userMenuList: [], // 用户资源列表
+      //   menuTree: [], // 菜单树
+      isExpand: false,
+      isNodeAll: false,
+      checkStrictly: true,
+      defaultProps: {
+        label: "label",
+        children: "children",
+      },
+      form: {
+        menuIdList: [],
+        roleId: "",
+      },
+    };
+  },
+  computed: {
+    Visible: {
+      get() {
+        return this.show;
+      },
+      set(val) {
+        this.$emit("update:show", val);
+      },
+    },
+  },
+  methods: {
+    // 获取角色菜单列表
+    async getRoleMenuList() {
+      let res = await getRoleMenuList({
+        roleId: this.form.roleId,
+        page: 1,
+        size: -1,
+      });
+      if (res.data.code == 1) {
+        let { data } = res.data;
+        let ids = this.getRoleMenuIdList(data);
+        ids.forEach((v) => {
+          this.$nextTick(() => {
+            this.$refs.menu.setChecked(v, true, false);
+          });
+        });
+      }
+    },
+    // 确定
+    async handleOk() {
+      this.loading = true;
+      let res = await addRoleMenu({
+        roleId: this.form.roleId,
+        menuIdList: this.getMenuAllCheckedKeys(),
+      });
+      let { code, msg } = res.data;
+      if (code === 1) {
+        this.$message.success(msg || "添加成功");
+        this.$emit("success");
+        this.handleClose();
+      }
+      this.loading = false;
+    },
+    // 所有菜单节点数据
+    getMenuAllCheckedKeys() {
+      // 目前被选中的菜单节点
+      let checkedKeys = this.$refs.menu.getCheckedKeys();
+      // 半选中的菜单节点
+      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
+      return [...halfCheckedKeys, ...checkedKeys];
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value) {
+      let treeList = this.menuTree;
+      for (let i = 0; i < treeList.length; i++) {
+        this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value) {
+      this.$refs.menu.setCheckedNodes(value ? this.menuTree : []);
+    },
+    // 新增
+    async onAdd(row) {
+      Object.assign(this.form, this.$options.data().form);
+      this.form.roleId = row.id;
+      this.getRoleMenuList();
+    },
+
+    // 重置
+    handleRest() {
+      this.isNodeAll = false;
+      this.$refs.menu.setCheckedNodes([]);
+    },
+    // 关闭
+    handleClose() {
+      this.handleRest();
+      this.Visible = false;
+    },
+    // 获取角色菜单id列表
+    getRoleMenuIdList(data) {
+      let result = [];
+      let getData = (list) => {
+        list.forEach((item) => {
+          result.push(item.id);
+          if (item.children && item.children.length > 0) {
+            getData(item.children);
+          }
+        });
+      };
+      getData(data);
+      return result;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+:deep(.el-dialog__body) {
+  max-height: 620px;
+  overflow: auto;
+}
+.tree-border {
+  margin-top: 5px;
+  border: 1px solid #e5e6e7;
+  background: #fff none;
+  border-radius: 4px;
+}
+</style>

admin_2/src/pages/system/role/components/ApportionRes.vue

@@ -24,7 +24,7 @@
           @change="onChange($event, v)"
         >
           <el-row>
-            <el-col :span="12" v-for="item in v.list" :key="item.id">
+            <el-col :span="6" v-for="item in v.list" :key="item.id">
               <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
             </el-col>
           </el-row>
@@ -32,7 +32,11 @@
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="handleRest">重 置</el-button>
-        <el-button size="small" type="primary" @click="handleOk"
+        <el-button
+          size="small"
+          type="primary"
+          :loading="loading"
+          @click="handleOk"
           >确 定</el-button
         >
       </span>
@@ -42,14 +46,14 @@
 
 <script>
 import {
-  getResourceList,
   getRoleResourceList,
   addRoleResource,
+  getResourceGroup,
 } from "@/api/system";
 export default {
   components: {},
   props: {
-    addVisible: {
+    show: {
       type: Boolean,
       required: true,
       default: false,
@@ -57,6 +61,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       resourceList: {},
       userResourceList: [], // 用户资源列表
       form: {
@@ -68,23 +73,24 @@ export default {
   computed: {
     Visible: {
       get() {
-        return this.addVisible;
+        return this.show;
       },
       set(val) {
-        this.$emit("update:addVisible", val);
+        this.$emit("update:show", val);
       },
     },
   },
   methods: {
-    // 获取资源列表
-    async getResourceList() {
-      let res = await getResourceList({
+    // 获取资源分组
+    async getResourceGroup() {
+      let res = await getResourceGroup({
         page: 1,
         size: -1,
       });
       if (res.data.code == 1) {
         let { data } = res.data.data;
-        this.resourceList = this.groupByAuth(data);
+        let group = this.formatGroup(data);
+        this.resourceList = group;
       }
     },
 
@@ -102,37 +108,53 @@ export default {
       }
     },
     // 权限分组
-    groupByAuth(list) {
+    // groupByAuth(list) {
+    //   let group = {};
+    //   list.forEach((item) => {
+    //     let name = item.name.split("-")[0];
+    //     if (!group[name]) {
+    //       group[name] = {
+    //         isIndeterminate: false,
+    //         checkAll: false,
+    //         list: [],
+    //       };
+    //     }
+    //     group[name].list.push(item);
+    //   });
+    //   return group;
+    // },
+
+    // 格式化分组
+    formatGroup(data) {
       let group = {};
-      list.forEach((item) => {
-        let name = item.name.split("-")[0];
-        if (!group[name]) {
-          group[name] = {
+      Object.keys(data).forEach((key) => {
+        group[key] = {
           isIndeterminate: false,
           checkAll: false,
           list: [],
         };
-        }
-        group[name].list.push(item);
+        group[key].list.push(...data[key]);
       });
       return group;
     },
 
     // 确定
     async handleOk() {
+      this.loading = true;
       let res = await addRoleResource(this.form);
       let { code } = res.data;
       if (code === 1) {
         this.$message.success("添加成功");
-        this.$emit("addSuccess");
+        this.$emit("success");
         this.handleClose();
       }
+      this.loading = false;
     },
     // 新增
     onAdd(roleId) {
       Object.assign(this.form, this.$options.data().form);
       this.form.roleId = roleId;
-      this.getResourceList();
+      this.getResourceGroup();
       this.getRoleResourceList(roleId);
     },
 

admin_2/src/pages/system/task/TaskSet.vue

@@ -47,10 +47,10 @@
     <!-- 新增参数 -->
     <AddTask
       ref="AddTask"
-      :addVisible.sync="addVisible"
+      :show.sync="addVisible"
       :title="title"
       :dict="dict"
-      @addSuccess="getTaskList"
+      @success="getTaskList"
     ></AddTask>
   </div>
 </template>

admin_2/src/pages/system/task/components/AddTask.vue

@@ -125,7 +125,11 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="handleRest">重 置</el-button>
-        <el-button size="small" type="primary" @click="handleOk"
+        <el-button
+          size="small"
+          type="primary"
+          :loading="loading"
+          @click="handleOk"
           >确 定</el-button
         >
       </span>
@@ -142,7 +146,7 @@ export default {
       required: true,
       default: "",
     },
-    addVisible: {
+    show: {
       type: Boolean,
       required: true,
       default: false,
@@ -157,6 +161,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       days: {}, // 号数
       weeks: {}, // 周
       form: {
@@ -184,10 +189,10 @@ export default {
   computed: {
     Visible: {
       get() {
-        return this.addVisible;
+        return this.show;
       },
       set(val) {
-        this.$emit("update:addVisible", val);
+        this.$emit("update:show", val);
       },
     },
   },
@@ -205,13 +210,15 @@ export default {
     handleOk() {
       this.$refs.form.validate(async (valid) => {
         if (valid) {
+          this.loading = true;
           let res = await saveTask(this.form);
           let { code, msg } = res.data;
           if (code === 1) {
             this.$message.success(msg);
-            this.$emit("addSuccess");
+            this.$emit("success");
             this.handleClose();
           }
+          this.loading = false;
         }
       });
     },

admin_2/src/pages/system/user/components/AddUserRole.vue

@@ -49,7 +49,7 @@ import { getRoleList, saveUser } from "@/api/system";
 export default {
   components: {},
   props: {
-    addVisible: {
+    show: {
       type: Boolean,
       required: true,
       default: false,
@@ -69,10 +69,10 @@ export default {
   computed: {
     Visible: {
       get() {
-        return this.addVisible;
+        return this.show;
       },
       set(val) {
-        this.$emit("update:addVisible", val);
+        this.$emit("update:show", val);
       },
     },
   },
@@ -103,13 +103,13 @@ export default {
             mobile,
             roleIds: roleIds.join(","),
           });
-          this.loading = false;
           let { code, msg } = res.data;
           if (code == 1) {
             this.$message.success(msg);
-            this.$emit("addSuccess");
+            this.$emit("success");
             this.handleClose();
           }
+          this.loading = false;
         }
       });
     },