fix: 提交

src/enums/index.js

@@ -24,7 +24,7 @@ export default function createEnum(dictList) {
   };
 }
 // 角色状态
-export const RULE_STATUS = createEnum([
+export const ROLE_STATUS = createEnum([
   {
     value: 0,
     label: "启用",

src/views/userManage/roleManage/roleDetail/index.vue

@@ -45,7 +45,7 @@
             <el-table-column align="center" property="roleName" label="角色名称" />
             <el-table-column align="center" property="status" label="状态">
               <template slot-scope="scope">
-                {{ RULE_STATUS.getLabelByValue(scope.row.status) }}
+                {{ ROLE_STATUS.getLabelByValue(scope.row.status) }}
               </template>
             </el-table-column>
             <el-table-column align="center" property="createTime" label="创建时间" />
@@ -67,10 +67,10 @@
 
         <el-main>
           <div class="sf-title">分配功能权限</div>
-          <el-table :data="tableData" border row-key="id" :span-method="handleSpanMethod">
-            <el-table-column align="center" property="firstLevel" label="一级功能" />
-            <el-table-column align="center" property="secondLevel" label="二级功能" />
-            <!-- <el-table-column align="center" property="thirdLevel" label="权限名称" /> -->
+          <el-table :data="tableData" border row-key="id" :span-method="mergeTable">
+            <el-table-column align="center" property="moduleName" label="模块" />
+            <el-table-column align="center" property="firstName" label="一级功能" />
+            <el-table-column align="center" property="secondName" label="二级功能" />
           </el-table>
         </el-main>
       </el-container>
@@ -82,9 +82,10 @@
 <script>
 import ApiButton from "@/components/ApiButton/index.vue";
 import CrudPopup from "../roleList/components/CrudPopup/index.vue";
-import { getRoleAllList  } from "@/api/userManage/role";
-import { getRoleMenuList, geMenuTreeList } from '@/api/userManage/menu'
-import { RULE_STATUS } from '@/enums/index'
+import { getRoleAllList } from "@/api/userManage/role";
+import { getRoleMenuList, geMenuTreeList } from "@/api/userManage/menu";
+import { ROLE_STATUS } from "@/enums/index";
+import { to } from "await-to-js";
 export default {
   name: "RoleDetail",
   components: {
@@ -93,43 +94,22 @@ export default {
   },
   data() {
     return {
-      RULE_STATUS,
-      loading: true,
+      ROLE_STATUS,
+      loading: false,
       roleList: [],
       currentRole: null,
+      doctorWorkPers: [],
+      saleManagePers: [],
+      saleProcessPers: [],
+      doctorWorkMenus: [],
+      saleManageMenus: [],
+      saleProcessMenus: [],
+      tableData: [],
       treeData: [],
-      menuIds: [],
     };
   },
   created() {
-    Promise.all([this.loadRoleList(), this.loadTreeList()]).finally(() => {
-      this.loading = false;
-    });
-  },
-  computed: {
-    currentMenus() {
-      if (this.menuIds.length === 0 || this.treeData.length === 0) return [];
-      return this.filterMenusAndKeepParents(this.treeData, this.menuIds);
-    },
-    tableData() {
-      const result = [];
-      const flattenMenuData = (data, parentNames = []) => {
-        data.forEach((item) => {
-          if (item.children?.length > 0) {
-            flattenMenuData(item.children, [...parentNames, item.menuName]);
-          } else {
-            const [firstLevel, secondLevel, ...others] = [...parentNames, item.menuName];
-            result.push({
-              firstLevel,
-              secondLevel,
-              thirdLevel: others.join("/"),
-            });
-          }
-        });
-      };
-      flattenMenuData(this.currentMenus);
-      return this.mergeRowsAndCols(result);
-    },
+    this.init();
   },
   watch: {
     currentRole(val) {
@@ -139,87 +119,47 @@ export default {
     },
   },
   methods: {
+    async init() {
+      this.loading = true;
+      Promise.all([this.loadRoleList(), this.loadTreeList()]).finally(() => {
+        this.loading = false;
+      });
+    },
     loadRoleList() {
       return getRoleAllList().then((res) => {
+        console.log("getRoleAllList=", res);
         this.roleList = res.data;
         let selectRole;
         if (this.currentRole) {
           selectRole = this.roleList.find((item) => item.id === this.currentRole.id);
         }
-        this.$refs.singleTable.setCurrentRow(selectRole || res.data[0]);
+        this.$nextTick(() => {
+          this.$refs.singleTable.setCurrentRow(selectRole || res.data[0]);
+        });
       });
     },
     loadTreeList() {
       return geMenuTreeList().then((res) => {
-        this.treeData = res.data;
-      });
-    },
-    loadMenuIdList(roleId) {
-      return getRoleMenuList({ roleId }).then((res) => {
-        this.menuIds = res.data.map((item) => item.menuId);
+        this.doctorWorkMenus = res?.data?.doctorWork || [];
+        this.saleManageMenus = res?.data?.saleManage || [];
+        this.saleProcessMenus = res?.data?.saleProcess || [];
       });
     },
-    // 添加角色 {}
-    // 计算表格合并相同项
-    mergeRowsAndCols(inputList) {
-      const firstLevelCount = {};
-      const secondLevelCount = {};
-      const outputList = [];
-
-      inputList.forEach((item) => {
-        const { firstLevel, secondLevel } = item;
-        firstLevelCount[firstLevel] = (firstLevelCount[firstLevel] || 0) + 1;
-        secondLevelCount[secondLevel] = (secondLevelCount[secondLevel] || 0) + 1;
-      });
-      inputList.forEach((item, index) => {
-        const { firstLevel, secondLevel, thirdLevel } = item;
-        const newItem = { firstLevel, secondLevel, thirdLevel };
-
-        if (firstLevelCount[firstLevel] > 1) {
-          if (index === inputList.findIndex((x) => x.firstLevel === firstLevel)) {
-            newItem.firstRowSpan = firstLevelCount[firstLevel];
-          } else {
-            newItem.firstColSpan = 0;
-          }
-        }
-
-        if (secondLevelCount[secondLevel] > 1) {
-          if (index === inputList.findIndex((x) => x.secondLevel === secondLevel)) {
-            newItem.secondRowSpan = secondLevelCount[secondLevel];
-          } else {
-            newItem.secondColSpan = 0;
-          }
-        }
-
-        outputList.push(newItem);
-      });
-      return outputList;
-    },
-    // 根据全量菜单过滤
-    filterMenusAndKeepParents(menus, menuIds) {
-      const filteredMenus = [];
-
-      for (const menu of menus) {
-        if (menuIds.includes(menu.id)) {
-          // 如果菜单在menuIds中，则保留该菜单
-          const filteredMenu = { ...menu };
-
-          // 如果菜单有子菜单，递归过滤并保留父菜单
-          if (menu.children) {
-            filteredMenu.children = this.filterMenusAndKeepParents(menu.children, menuIds);
-          }
-
-          filteredMenus.push(filteredMenu);
-        } else if (menu.children) {
-          // 如果菜单不在menuIds中但有子菜单，递归过滤并保留父菜单
-          const filteredChildren = this.filterMenusAndKeepParents(menu.children, menuIds);
-          if (filteredChildren.length > 0) {
-            const filteredMenu = { ...menu, children: filteredChildren };
-            filteredMenus.push(filteredMenu);
-          }
-        }
+    async loadMenuIdList() {
+      const [err, res] = await to(getRoleMenuList({ roleId: this.currentRole.id }));
+      if (!err) {
+        this.doctorWorkPers = res?.data?.doctorWork || [];
+        this.saleManagePers = res?.data?.saleManage || [];
+        this.saleProcessPers = res?.data?.saleProcess || [];
+        this.tableData = this.packageTableData();
+      } else {
+        this.doctorWorkPers = [];
+        this.saleManagePers = [];
+        this.saleProcessPers = [];
+        this.permissionTableData = [];
+        this.tableData = [];
       }
-      return filteredMenus;
+      console.log("getRoleMenuList=", res);
     },
     handleCurrentChange(item) {
       this.currentRole = item;
@@ -236,23 +176,115 @@ export default {
       this.$refs.crud
         .open({
           ...this.currentRole,
-          menuIdList: this.menuIds,
         })
         .then(this.loadRoleList);
     },
-    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
+    packageTableData: (() => {
+      let tableData = [];
+      let doctorWorkData = [];
+      let saleManageData = [];
+      let saleProcessData = [];
+      return function () {
+        tableData = [];
+        doctorWorkData = [];
+        saleManageData = [];
+        saleProcessData = [];
+        if (this.doctorWorkMenus?.length > 0) {
+          this.doctorWorkMenus?.forEach((item) => {
+            const { children = [], menuName: firstName, ...otherItem } = item;
+            (children || []).forEach((item2, index2) => {
+              const { menuName: secondName, id } = item2;
+              if (!this.doctorWorkPers.includes(id)) {
+                return
+              }
+              let pushItem = {
+                id,
+                firstName,
+                secondName,
+              };
+              if (index2 === 0) {
+                pushItem.rowspan2 = children.length;
+              }
+              doctorWorkData.push(pushItem);
+            });
+          });
+        }
+        if (doctorWorkData.length > 0) {
+          doctorWorkData[0].rowspan = doctorWorkData.length;
+          doctorWorkData[0].moduleName = "随访中心"
+        }
+
+        if (this.saleManageMenus?.length > 0) {
+          this.saleManageMenus.forEach((item) => {
+            const { children = [], menuName: firstName, ...otherItem } = item;
+            (children || []).forEach((item2, index2) => {
+              const { menuName: secondName, id } = item2;
+              if (!this.saleManagePers.includes(id)) {
+                return
+              }
+              let pushItem = {
+                id,
+                firstName,
+                secondName,
+              };
+              if (index2 === 0) {
+                pushItem.rowspan2 = children.length;
+              }
+              saleManageData.push(pushItem);
+            });
+          });
+        }
+        if (saleManageData.length > 0) {
+          saleManageData[0].rowspan = saleManageData.length;
+          saleManageData[0].moduleName = "营销中心-管理层";
+        }
+
+        if (this.saleProcessMenus?.length > 0) {
+          this.saleProcessMenus.forEach((item) => {
+            const { children = [], menuName: firstName, ...otherItem } = item;
+            (children || []).forEach((item2, index2) => {
+              const { menuName: secondName, id } = item2;
+              if (!this.saleProcessPers.includes(id)) {
+                return
+              }
+              let pushItem = {
+                id,
+                firstName,
+                secondName,
+              };
+              if (index2 === 0) {
+                pushItem.rowspan2 = children.length;
+              }
+              saleProcessData.push(pushItem);
+            });
+          });
+        }
+        if (saleProcessData.length > 0) {
+          saleProcessData[0].rowspan = saleManageData.length;
+          saleProcessData[0].moduleName = "营销中心-执行层";
+        }
+        tableData = [...doctorWorkData, ...saleManageData, ...saleProcessData];
+        return tableData;
+      };
+    })(),
+    mergeTable({row, column, rowIndex, columnIndex}) {
       if (columnIndex === 0) {
         return {
-          rowspan: row.firstRowSpan >= 0 ? row.firstRowSpan : 1,
-          colspan: row.firstColSpan >= 0 ? row.firstColSpan : 1,
-        };
+          rowspan: row.rowspan ? row.rowspan : 0,
+          colspan: 1
+        }
       } else if (columnIndex === 1) {
         return {
-          rowspan: row.secondRowSpan >= 0 ? row.secondRowSpan : 1,
-          colspan: row.secondColSpan >= 0 ? row.secondColSpan : 1,
-        };
+          rowspan: row.rowspan2 ? row.rowspan2 : 0,
+          colspan: 1
+        }
+      } else {
+        return {
+          rowspan: 1,
+          colspan: 1
+        }
       }
-    },
+    }
   },
 };
 </script>

src/views/userManage/roleManage/roleDetail1/index.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="app-container">
+    <el-container style="height: 100%; border: 1px solid #eee" v-loading="loading">
+      <el-aside
+        width="400px"
+        style="
+          background-color: transparent;
+          border-right: 1px solid #eee;
+          margin: 0;
+          padding-top: 40px;
+        "
+      >
+        <el-table
+          ref="singleTable"
+          :data="roleList"
+          highlight-current-row
+          @current-change="handleCurrentChange"
+          :show-header="false"
+          border
+        >
+          <el-table-column align="center" property="roleName" label="角色名称" />
+          <template slot="append">
+            <div
+              @click="handleAddRole"
+              style="
+                height: 44px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+              "
+            >
+              <i class="el-icon-plus mr5" style="color: #1890ff"></i>
+              <el-button type="text">新增角色</el-button>
+            </div>
+          </template>
+        </el-table>
+      </el-aside>
+
+      <el-container>
+        <el-header height="auto">
+          <div class="sf-title mt10">角色信息</div>
+          <el-table :data="currentRole ? [currentRole] : []" border>
+            <el-table-column align="center" property="id" label="角色ID" />
+            <el-table-column align="center" property="roleName" label="角色名称" />
+            <el-table-column align="center" property="status" label="状态">
+              <template slot-scope="scope">
+                {{ ROLE_STATUS.getLabelByValue(scope.row.status) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="createTime" label="创建时间" />
+            <el-table-column align="center" property="updateTime" label="最后编辑时间" />
+            <el-table-column
+              align="center"
+              label="操作"
+              class-name="small-padding fixed-width"
+              fixed="right"
+            >
+              <template slot-scope="scope">
+                <el-button size="mini" type="text" @click="handleEditRole(scope.row)">
+                  编辑
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-header>
+
+        <el-main>
+          <div class="sf-title">分配功能权限</div>
+          <el-table :data="tableData" border row-key="id" :span-method="handleSpanMethod">
+            <el-table-column align="center" property="firstLevel" label="一级功能" />
+            <el-table-column align="center" property="secondLevel" label="二级功能" />
+            <!-- <el-table-column align="center" property="thirdLevel" label="权限名称" /> -->
+          </el-table>
+        </el-main>
+      </el-container>
+    </el-container>
+    <CrudPopup ref="crud" />
+  </div>
+</template>
+
+<script>
+import ApiButton from "@/components/ApiButton/index.vue";
+import CrudPopup from "../roleList/components/CrudPopup/index.vue";
+import { getRoleAllList  } from "@/api/userManage/role";
+import { getRoleMenuList, geMenuTreeList } from '@/api/userManage/menu'
+import { ROLE_STATUS } from '@/enums/index'
+export default {
+  name: "RoleDetail",
+  components: {
+    ApiButton,
+    CrudPopup,
+  },
+  data() {
+    return {
+      ROLE_STATUS,
+      loading: true,
+      roleList: [],
+      currentRole: null,
+      treeData: [],
+      menuIds: [],
+    };
+  },
+  created() {
+    Promise.all([this.loadRoleList(), this.loadTreeList()]).finally(() => {
+      this.loading = false;
+    });
+  },
+  computed: {
+    currentMenus() {
+      if (this.menuIds.length === 0 || this.treeData.length === 0) return [];
+      return this.filterMenusAndKeepParents(this.treeData, this.menuIds);
+    },
+    tableData() {
+      const result = [];
+      const flattenMenuData = (data, parentNames = []) => {
+        data.forEach((item) => {
+          if (item.children?.length > 0) {
+            flattenMenuData(item.children, [...parentNames, item.menuName]);
+          } else {
+            const [firstLevel, secondLevel, ...others] = [...parentNames, item.menuName];
+            result.push({
+              firstLevel,
+              secondLevel,
+              thirdLevel: others.join("/"),
+            });
+          }
+        });
+      };
+      flattenMenuData(this.currentMenus);
+      return this.mergeRowsAndCols(result);
+    },
+  },
+  watch: {
+    currentRole(val) {
+      if (val?.id) {
+        this.loadMenuIdList(val.id);
+      }
+    },
+  },
+  methods: {
+    loadRoleList() {
+      return getRoleAllList().then((res) => {
+        this.roleList = res.data;
+        let selectRole;
+        if (this.currentRole) {
+          selectRole = this.roleList.find((item) => item.id === this.currentRole.id);
+        }
+        this.$refs.singleTable.setCurrentRow(selectRole || res.data[0]);
+      });
+    },
+    loadTreeList() {
+      return geMenuTreeList().then((res) => {
+        console.log('geMenuTreeList=', res)
+        this.treeData = res.data;
+      });
+    },
+    loadMenuIdList(roleId) {
+      return getRoleMenuList({ roleId }).then((res) => {
+        console.log('getRoleMenuList=', res)
+        this.menuIds = res.data.map((item) => item.menuId);
+      });
+    },
+    // 添加角色 {}
+    // 计算表格合并相同项
+    mergeRowsAndCols(inputList) {
+      const firstLevelCount = {};
+      const secondLevelCount = {};
+      const outputList = [];
+
+      inputList.forEach((item) => {
+        const { firstLevel, secondLevel } = item;
+        firstLevelCount[firstLevel] = (firstLevelCount[firstLevel] || 0) + 1;
+        secondLevelCount[secondLevel] = (secondLevelCount[secondLevel] || 0) + 1;
+      });
+      inputList.forEach((item, index) => {
+        const { firstLevel, secondLevel, thirdLevel } = item;
+        const newItem = { firstLevel, secondLevel, thirdLevel };
+
+        if (firstLevelCount[firstLevel] > 1) {
+          if (index === inputList.findIndex((x) => x.firstLevel === firstLevel)) {
+            newItem.firstRowSpan = firstLevelCount[firstLevel];
+          } else {
+            newItem.firstColSpan = 0;
+          }
+        }
+
+        if (secondLevelCount[secondLevel] > 1) {
+          if (index === inputList.findIndex((x) => x.secondLevel === secondLevel)) {
+            newItem.secondRowSpan = secondLevelCount[secondLevel];
+          } else {
+            newItem.secondColSpan = 0;
+          }
+        }
+
+        outputList.push(newItem);
+      });
+      return outputList;
+    },
+    // 根据全量菜单过滤
+    filterMenusAndKeepParents(menus, menuIds) {
+      const filteredMenus = [];
+
+      for (const menu of menus) {
+        if (menuIds.includes(menu.id)) {
+          // 如果菜单在menuIds中，则保留该菜单
+          const filteredMenu = { ...menu };
+
+          // 如果菜单有子菜单，递归过滤并保留父菜单
+          if (menu.children) {
+            filteredMenu.children = this.filterMenusAndKeepParents(menu.children, menuIds);
+          }
+
+          filteredMenus.push(filteredMenu);
+        } else if (menu.children) {
+          // 如果菜单不在menuIds中但有子菜单，递归过滤并保留父菜单
+          const filteredChildren = this.filterMenusAndKeepParents(menu.children, menuIds);
+          if (filteredChildren.length > 0) {
+            const filteredMenu = { ...menu, children: filteredChildren };
+            filteredMenus.push(filteredMenu);
+          }
+        }
+      }
+      return filteredMenus;
+    },
+    handleCurrentChange(item) {
+      this.currentRole = item;
+    },
+    // 新增角色
+    handleAddRole() {
+      this.$refs.crud.open().then((res) => {
+        this.currentRole = res;
+        this.loadRoleList();
+      });
+    },
+    // 编辑角色
+    handleEditRole() {
+      this.$refs.crud
+        .open({
+          ...this.currentRole,
+          menuIdList: this.menuIds,
+        })
+        .then(this.loadRoleList);
+    },
+    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        return {
+          rowspan: row.firstRowSpan >= 0 ? row.firstRowSpan : 1,
+          colspan: row.firstColSpan >= 0 ? row.firstColSpan : 1,
+        };
+      } else if (columnIndex === 1) {
+        return {
+          rowspan: row.secondRowSpan >= 0 ? row.secondRowSpan : 1,
+          colspan: row.secondColSpan >= 0 ? row.secondColSpan : 1,
+        };
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  height: 100%;
+}
+</style>

src/views/userManage/roleManage/roleList/components/CrudPopup/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Popup ref="popup" title="角色信息" @closed="dialogClosed">
+  <Popup ref="popup" title="角色信息" width="800px" @closed="dialogClosed">
     <el-form :model="form" :rules="rules" ref="form" label-width="80px">
       <el-form-item label="角色名称" prop="roleName" placeholder="请输入角色名称">
         <el-input v-model="form.roleName" :maxlength="32"></el-input>
@@ -9,22 +9,61 @@
       </el-form-item>
       <el-form-item label="角色状态" prop="status" required>
         <el-switch
-          :value="form.status === RULE_STATUS.getValueByName('enabled')"
-          @change="form.status = $event ? RULE_STATUS.getValueByName('enabled') : RULE_STATUS.getValueByName('disabled')"
+          :value="form.status === ROLE_STATUS.getValueByName('enabled')"
+          @change="
+            form.status = $event
+              ? ROLE_STATUS.getValueByName('enabled')
+              : ROLE_STATUS.getValueByName('disabled')
+          "
         />
       </el-form-item>
       <el-form-item label="角色权限" prop="menuIdList">
-        <div class="tree-menus">
-          <el-tree
-            ref="tree"
-            v-model="form.menuIdList"
-            :data="treeData"
-            show-checkbox
-            node-key="id"
-            @check="handleSelectMenuChange"
-            :props="{ children: 'children', label: 'menuName', isLeaf: true }"
-            default-expand-all
-          ></el-tree>
+        <div class="tree-menus" v-loading="loading">
+          <div class="tree-menu-item">
+            <div class="header">随访中心</div>
+            <div class="tree-menu-item-content">
+              <el-tree
+                ref="tree"
+                :default-checked-keys="form.doctorWorkChecks"
+                :data="treeData"
+                show-checkbox
+                node-key="id"
+                @check="(_, val) => handleSelectMenuChange(val, 'doctorWorkChecks')"
+                :props="{ children: 'children', label: 'menuName', isLeaf: true }"
+                default-expand-all
+              ></el-tree>
+            </div>
+          </div>
+          <div class="tree-menu-item">
+            <div class="header">营销中心-管理层</div>
+            <div class="tree-menu-item-content">
+              <el-tree
+                ref="tree2"
+                :default-checked-keys="form.saleManageChecks"
+                :data="treeData2"
+                show-checkbox
+                node-key="id"
+                @check="(_, val) => handleSelectMenuChange(val, 'saleManageChecks')"
+                :props="{ children: 'children', label: 'menuName', isLeaf: true }"
+                default-expand-all
+              ></el-tree>
+            </div>
+          </div>
+          <div class="tree-menu-item">
+            <div class="header">营销中心-执行层</div>
+            <div class="tree-menu-item-content">
+              <el-tree
+                ref="tree3"
+                :default-checked-keys="form.saleProcessChecks"
+                :data="treeData3"
+                show-checkbox
+                node-key="id"
+                @check="(_, val) => handleSelectMenuChange(val, 'saleProcessChecks')"
+                :props="{ children: 'children', label: 'menuName', isLeaf: true }"
+                default-expand-all
+              ></el-tree>
+            </div>
+          </div>
         </div>
       </el-form-item>
     </el-form>
@@ -38,15 +77,16 @@
 <script>
 import Popup from "@/components/Popup";
 import { saveRole } from "@/api/userManage/role";
-import { getRoleMenuList, geMenuTreeList } from '@/api/userManage/menu'
-import { RULE_STATUS } from '@/enums/index';
+import { getRoleMenuList, geMenuTreeList } from "@/api/userManage/menu";
+import { ROLE_STATUS } from "@/enums/index";
+import { to } from "await-to-js";
 export default {
   components: {
     Popup,
   },
   data() {
     return {
-      RULE_STATUS,
+      ROLE_STATUS,
       loading: false,
       form: this.getFormDefaultValue(),
       rules: {
@@ -54,9 +94,25 @@ export default {
           { required: true, message: "请输入角色名称", trigger: "blur" },
           { max: 32, message: "长度不能超过32个字符", trigger: "blur" },
         ],
-        menuIdList: [{ required: true, message: "请选择角色权限", trigger: "change" }],
+        menuIdList: [
+          {
+            validator: (rule, value, callback) => {
+              if (
+                this.form.doctorWorkChecks?.length >= 0 ||
+                this.form.saleManageChecks?.length >= 0 ||
+                this.form.saleProcessChecks?.length >= 0
+              ) {
+                return callback();
+              }
+              callback(new Error("请选择角色权限"));
+            },
+          },
+        ],
       },
       treeData: [],
+      treeData2: [],
+      treeData3: [],
+      loading: false,
     };
   },
   created() {
@@ -65,39 +121,55 @@ export default {
   methods: {
     loadAllMenuList() {
       return geMenuTreeList().then((res) => {
-        this.treeData = res.data;
+        this.treeData = res.data?.doctorWork || [];
+        this.treeData2 = res.data?.saleManage || [];
+        this.treeData3 = res.data?.saleProcess || [];
       });
     },
-    loadMenuIdList(roleId) {
-      return getRoleMenuList({ roleId }).then((res) => {
-        this.form.menuIdList = res.data.map((item) => item.menuId);
+    async loadMenuIdList(roleId) {
+      this.loading = true;
+      const [err, res] = await to(getRoleMenuList({ roleId }));
+      if (!err) {
+        this.form.doctorWorkChecks = res?.data?.doctorWork || [];
+        this.form.saleManageChecks = res?.data?.saleManage || [];
+        this.form.saleProcessChecks = res?.data?.saleProcess || [];
+      }
+      this.$nextTick(() => {
+        console.log("this.$refs.tree=", this.$refs.tree);
+        this.$refs.tree.setCheckedKeys(this.form.doctorWorkChecks);
+        this.$refs.tree2.setCheckedKeys(this.form.saleManageChecks);
+        this.$refs.tree3.setCheckedKeys(this.form.saleProcessChecks);
       });
+      this.loading = false;
     },
-    handleSelectMenuChange(_, { checkedKeys, halfCheckedKeys }) {
-      this.form.menuIdList = checkedKeys;
-      this.$refs.form.validateField("menuIdList");
+    handleSelectMenuChange({ checkedKeys, halfCheckedKeys }, property) {
+      console.log("property=", property);
+      this.form[property] = checkedKeys;
+      // this.form.menuIdList = checkedKeys;
+      this.$nextTick(() => {
+        this.$refs.form?.validateField("menuIdList");
+      });
     },
     getFormDefaultValue() {
       return {
         roleName: "",
-        status: RULE_STATUS.getValueByName('enabled'),
+        status: ROLE_STATUS.getValueByName("enabled"),
         menuIdList: [],
+        doctorWorkChecks: [],
+        saleManageChecks: [],
+        saleProcessChecks: [],
       };
     },
-    open(params) {
+    async open(params) {
+      console.log("params=", params);
+      await this.$nextTick();
       this.$refs.popup.open(params);
       if (params) {
         for (const key of Object.keys(this.form)) {
           this.form[key] = params[key];
         }
         this.form.roleId = params.id;
-        if (params.menuIdList) {
-          this.$nextTick(() => {
-            this.$refs.tree.setCheckedKeys(params.menuIdList);
-          });
-        } else {
-          this.loadMenuIdList(params.id);
-        }
+        this.loadMenuIdList(params.id);
       }
       this.promise = {};
       return new Promise((resolve, reject) => {
@@ -113,7 +185,12 @@ export default {
         if (valid) {
           this.loading = true;
           try {
-            const res = await saveRole(this.form);
+            const { menuIdList, doctorWorkChecks, saleManageChecks, saleProcessChecks, ...params } =
+              this.form;
+            const res = await saveRole({
+              menuIdList: [...doctorWorkChecks, ...saleManageChecks, ...saleProcessChecks],
+              ...params,
+            });
             if (this.form.roleId) {
               this.$message.success("修改成功");
             } else {
@@ -143,9 +220,34 @@ export default {
 </script>
 <style lang="scss" scoped>
 .tree-menus {
+  display: flex;
   border: 1px solid #dfe4ed;
-  height: 200px;
   border-radius: 4px;
-  overflow-y: auto;
+
+  .tree-menu-item {
+    flex: 1;
+    .header {
+      overflow-y: auto;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 40px;
+      border-right: 1px solid #dfe4ed;
+      border-bottom: 1px solid #dfe4ed;
+    }
+    .header:last-child {
+      border-right: none;
+    }
+    .tree-menu-item-content {
+      overflow-y: auto;
+      height: 200px;
+      border-right: 1px solid #dfe4ed;
+    }
+    .tree-menu-item-content:last-child {
+      border-right: none;
+    }
+  }
 }
 </style>

src/views/userManage/roleManage/roleList/index.vue

@@ -55,7 +55,7 @@
       />
       <el-table-column align="center" label="状态" prop="status" :show-overflow-tooltip="true">
         <template slot-scope="scope">
-          {{ RULE_STATUS.getLabelByValue(scope.row.status) }}
+          {{ ROLE_STATUS.getLabelByValue(scope.row.status) }}
         </template>
       </el-table-column>
       <el-table-column
@@ -66,13 +66,13 @@
       >
         <template slot-scope="scope">
           <el-button size="mini" type="text" @click="handleSwitchEnable(scope.row)">
-            {{ scope.row.status === RULE_STATUS.getValueByName('enabled') ? "停用" : "启用" }}
+            {{ scope.row.status === ROLE_STATUS.getValueByName('enabled') ? "停用" : "启用" }}
           </el-button>
           <el-button
             size="mini"
             type="text"
             @click="handleEdit(scope.row)"
-            :disabled="scope.row.status === RULE_STATUS.getValueByName('enabled')"
+            :disabled="scope.row.status === ROLE_STATUS.getValueByName('enabled')"
           >
             编辑
           </el-button>
@@ -80,7 +80,7 @@
             size="mini"
             type="text"
             @click="handleDelete(scope.row)"
-            :disabled="scope.row.status === RULE_STATUS.getValueByName('enabled')"
+            :disabled="scope.row.status === ROLE_STATUS.getValueByName('enabled')"
           >
             删除
           </el-button>
@@ -103,7 +103,7 @@
 import ApiButton from "@/components/ApiButton/index.vue";
 import { rolePageList, disableRole, enableRole, delRole } from "@/api/userManage/role";
 import CrudPopup from "./components/CrudPopup/index.vue";
-import { RULE_STATUS } from '@/enums/index';
+import { ROLE_STATUS } from '@/enums/index';
 export default {
   name: "RoleManage",
   components: {
@@ -112,7 +112,7 @@ export default {
   },
   data() {
     return {
-      RULE_STATUS,
+      ROLE_STATUS,
       // 遮罩层
       loading: true,
       // 显示搜索条件
@@ -178,7 +178,7 @@ export default {
 
     /** 启用/禁用切换 */
     handleSwitchEnable(item) {
-      const isEnable = item.status === this.RULE_STATUS.getValueByName('enabled');
+      const isEnable = item.status === this.ROLE_STATUS.getValueByName('enabled');
       const fetch = async () => {
         if (isEnable) {
           await disableRole(item.id);