fix: 角色权限-功能权限

src/views/system/role/CreateUserDrawer.vue

@@ -30,18 +30,15 @@
           <div class="permission-name">场景权限</div>
           <el-space>
             <el-checkbox v-model:checked="isSpread" @change="packHandle">展开/收起</el-checkbox>
-            <el-checkbox v-model="isAll" @change="handleCheckAll">全选/全不选</el-checkbox>
           </el-space>
           <el-divider />
           <div style="height: 25vh">
             <el-scrollbar>
               <el-tree
                 ref="treeRef"
-                show-checkbox
                 node-key="code"
                 :data="treeData"
                 :props="treeProps"
-                @check="checkedTree"
                 @node-click="clickNode"
               />
             </el-scrollbar>
@@ -51,6 +48,9 @@
           <div class="mark-left"></div>
           <el-card shadow="hover" class="permission-card">
             <div class="permission-name">功能权限</div>
+            <el-space>
+              <el-checkbox v-model="isAll" @change="handleCheckAll">全选/全不选</el-checkbox>
+            </el-space>
             <el-divider />
             <div style="height: 10vh">
               <el-scrollbar>
@@ -92,7 +92,7 @@
   const { tableData, getSceneDetail } = sceneInfos;
 
   // 默认功能权限全部勾选，有未勾选的添加至excludeFeaturePermissionMap中：[workdshopCode]: [permission数组]
-  const excludeFeaturePermissionMap = {};
+  const featurePermissionMap = {};
 
   const rules = {
     roleCode: {
@@ -184,6 +184,7 @@
 
   const message = ElMessage;
   const formRef: any = ref(null);
+  const modeTreeRef = ref();
   const isDrawer = ref(false);
   const subLoading = ref(false);
   const isSpread = ref(false);
@@ -201,6 +202,9 @@
 
     if (nodeInfo.data.isShop) {
       selectedNodeKey.value = tree.code;
+      const checkedNodes = featurePermissionMap[selectedNodeKey.value] || [];
+      isAll.value = checkedNodes.length === modeList.value.length;
+      modeTreeRef.value.setCheckedKeys(checkedNodes);
     } else {
       selectedNodeKey.value = '';
     }
@@ -223,58 +227,66 @@
   }
 
   function handleCheckAll(value) {
+    // if (!value) {
+    //   formParams.value.permissions = [];
+    //   treeRef.value!.setCheckedKeys([]);
+    // } else {
+    //   const allTreeNodes = treeRef.value.store._getAllNodes().map((item) => item.data.code);
+    //   console.log('allTreeNodes', allTreeNodes.length);
+
+    //   treeRef.value!.setCheckedKeys(allTreeNodes);
+    // }
     if (!value) {
-      formParams.value.permissions = [];
-      treeRef.value!.setCheckedKeys([]);
+      featurePermissionMap[selectedNodeKey.value] = [];
     } else {
-      const allTreeNodes = treeRef.value.store._getAllNodes().map((item) => item.data.code);
-      console.log('allTreeNodes', allTreeNodes.length);
-
-      treeRef.value!.setCheckedKeys(allTreeNodes);
+      featurePermissionMap[selectedNodeKey.value] = modeList.value.map((item) => item.key);
+      modeTreeRef.value.setCheckedKeys(featurePermissionMap[selectedNodeKey.value]);
     }
   }
 
-  function checkedTree(tree, checkedInfo) {
-    console.log(tree);
-    console.log(checkedInfo);
-
-    const nodes = checkedInfo.checkedNodes;
-    console.log('nodes', nodes);
-
-    const halfKeys = checkedInfo.halfCheckedKeys;
-    formParams.value.permissionList = checkedInfo.halfCheckedKeys;
-    // const permissionShopNodes = nodes.filter((item) => item.isShop);
-    // const newPerm = [] as any[];
-    // permissionShopNodes.forEach((node) => {
-    //   modeList.value.forEach((item) => {
-    //     newPerm.push({
-    //       workshopCode: node.code,
-    //       permissionId: item.key,
-    //     });
-    //   });
-    // });
-    // formParams.value.permissionList = newPerm;
-
-    // formParams.value.permissionList = nodes
-    //   .filter((item) => item.isShop)
-    //   .map((node) => {
-    //     return {
-    //       workshopCode: node.code,
-    //       permissionId: '0',
-    //     };
-    //   });
-    formParams.value.permissionKeys = halfKeys;
-    const allTreeNodes = treeRef.value.store._getAllNodes().map((item) => item.data.code);
-    if (nodes.length < allTreeNodes.length) {
-      isAll.value = false;
-    } else {
-      isAll.value = true;
-    }
-  }
+  // function checkedTree(tree, checkedInfo) {
+  //   console.log(tree);
+  //   console.log(checkedInfo);
+
+  //   const nodes = checkedInfo.checkedNodes;
+  //   console.log('nodes', nodes);
+
+  //   const halfKeys = checkedInfo.halfCheckedKeys;
+  //   formParams.value.permissionList = checkedInfo.halfCheckedKeys;
+  //   formParams.value.permissionList = nodes
+  //     .filter((item) => item.isShop)
+  //     .map((node) => {
+  //       return {
+  //         workshopCode: node.code,
+  //         permissionId: '0',
+  //       };
+  //     });
+  //   formParams.value.permissionKeys = halfKeys;
+  //   const allTreeNodes = treeRef.value.store._getAllNodes().map((item) => item.data.code);
+  //   if (nodes.length < allTreeNodes.length) {
+  //     isAll.value = false;
+  //   } else {
+  //     isAll.value = true;
+  //   }
+  // }
+
+  const getPermissionList = () => {
+    const newPerm = [] as any[];
+    Object.entries(featurePermissionMap).forEach((item) => {
+      (item[1] as number[]).forEach((key) => {
+        newPerm.push({
+          workshopCode: item[0],
+          permissionId: key,
+        });
+      });
+    });
+    console.log(newPerm);
+
+    return newPerm;
+  };
 
   function checkedModeTree(_, tree) {
-    console.log('feat===', tree);
-    excludeFeaturePermissionMap[selectedNodeKey.value] = tree.setCheckedKeys;
+    featurePermissionMap[selectedNodeKey.value] = tree.checkedKeys;
   }
 
   function openDrawer(roleId?) {
@@ -296,6 +308,7 @@
       if (!valid) {
         return message.error('请填写完整信息');
       }
+      formParams.value.permissionList = getPermissionList();
       if (formParams.value.roleId) {
         console.log('bianji');
 
@@ -337,7 +350,16 @@
     treeRef.value!.setCheckedKeys([]);
     // isAll.value = false;
   }
-  const selectNodes = ref<string[]>([]);
+  function setFeaturePermission(permissionList) {
+    permissionList.forEach((item) => {
+      if (featurePermissionMap[item.workdshopCode]) {
+        featurePermissionMap[item.workdshopCode].push(item.permissionId);
+      } else {
+        featurePermissionMap[item.workdshopCode] = [item.permissionId];
+      }
+    });
+  }
+  // const selectNodes = ref<string[]>([]);
   function getInfo() {
     roleUserInfo({ roleId: formParams.value.roleId }).then((res) => {
       const info = {
@@ -350,11 +372,12 @@
       };
       formParams.value = info;
       isDrawer.value = true;
-      nextTick(() => {
-        selectNodes.value = res.permissionMap.map((item) => item.workshopCode);
-        // 将匹配到的节点的键值数组传递给 setCheckedKeys 方法
-        treeRef.value.setCheckedKeys(selectNodes.value);
-      });
+      setFeaturePermission(res.permissionMap);
+      // nextTick(() => {
+      //   selectNodes.value = res.permissionMap.map((item) => item.workshopCode);
+      //   // 将匹配到的节点的键值数组传递给 setCheckedKeys 方法
+      //   treeRef.value.setCheckedKeys(selectNodes.value);
+      // });
     });
   }
 

src/views/system/role/role.vue

@@ -42,7 +42,7 @@
                 <FileAddOutlined />
               </el-icon>
             </template>
-            添加用户角色
+            用户角色
           </el-button>
           <el-button type="primary" @click="openCreateDrawer">
             <template #icon>
@@ -50,7 +50,7 @@
                 <FileAddOutlined />
               </el-icon>
             </template>
-            添加管理员角色
+            管理员角色
           </el-button>
         </template>