role用户角色添加及编辑修改

src/views/system/role/CreateUserDrawer.vue

@@ -36,11 +36,13 @@
             <el-scrollbar>
               <el-tree
                 ref="treeRef"
+                show-checkbox
                 node-key="code"
-                :highlight-current="true"
+                :render-after-expand="false"
                 :data="treeData"
                 :props="treeProps"
                 @node-click="clickNode"
+                @check-change="checkNode"
               />
             </el-scrollbar>
           </div>
@@ -85,7 +87,6 @@
   import { ref, onMounted, computed, nextTick } from 'vue';
   import { ElMessage } from 'element-plus';
   import type { userFormParamsType } from './types';
-
   import { addRole, getFeaturePermissions, roleUserInfo, updateRole } from '@/api/system/role';
   import useScene from '@/views/system-config/scene-manage/use-scene';
   import { storeToRefs } from 'pinia';
@@ -199,20 +200,34 @@
 
   const formParams = ref<userFormParamsType>(defaultTreeValueRef());
 
-  function clickNode(tree, nodeInfo, _, __) {
-    console.log('tree', tree);
-    console.log('nodeInfo', nodeInfo.data.isShop);
-    featurePermissionMap[selectedNodeKey.value] = [];
-    if (nodeInfo.data.isShop) {
+  function clickNode(tree, _nodeInfo, _, __) {
+    if (tree.code in featurePermissionMap) {
       selectedNodeKey.value = tree.code;
-      const checkedNodes = featurePermissionMap[selectedNodeKey.value] || [];
-      isAll.value = checkedNodes.length >= modeList.value.length;
-      modeTreeRef.value.setCheckedKeys(checkedNodes);
+      isAll.value = featurePermissionMap[tree.code].length >= modeList.value.length;
+      modeTreeRef.value.setCheckedKeys(featurePermissionMap[tree.code]);
     } else {
+      isAll.value = false;
       selectedNodeKey.value = '';
     }
   }
 
+  const checkNode = (checkedNodes, checkedKeys) => {
+    if (checkedKeys) {
+      if (checkedNodes.isShop && !(checkedNodes.code in featurePermissionMap)) {
+        selectedNodeKey.value = checkedNodes.code;
+        isAll.value = true;
+        handleCheckAll(true);
+      }
+    } else {
+      if (checkedNodes.isShop && checkedNodes.code in featurePermissionMap) {
+        delete featurePermissionMap[checkedNodes.code];
+      }
+      selectedNodeKey.value = '';
+      isAll.value = false;
+      handleCheckAll(false);
+    }
+  };
+
   function treeNodeExpand(status) {
     for (var i = 0; i < treeRef.value.store._getAllNodes().length; i++) {
       treeRef.value.store._getAllNodes()[i].expanded = status;
@@ -294,6 +309,11 @@
   function checkedModeTree(_, tree) {
     isAll.value = tree.checkedKeys.length >= modeList.value.length;
     featurePermissionMap[selectedNodeKey.value] = tree.checkedKeys;
+    const selectLength = tree.checkedKeys.length;
+    if (selectLength === 0) {
+      delete featurePermissionMap[selectedNodeKey.value];
+      treeRef.value!.setCheckedKeys(Object.keys(featurePermissionMap));
+    }
   }
 
   function openDrawer(roleId?) {
@@ -357,18 +377,17 @@
 
   function handleReset() {
     formRef.value.resetFields();
-    featurePermissionMap[selectedNodeKey.value] = [];
-
+    Object.keys(featurePermissionMap).forEach((key) => {
+      delete featurePermissionMap[key];
+    });
     formParams.value = Object.assign(formParams.value, defaultValueRef());
-    treeRef.value!.setCurrentKey(null);
+    treeRef.value!.setCheckedKeys([]);
     modeTreeRef.value!.setCheckedNodes([]);
     isAll.value = false;
     selectedNodeKey.value = '';
   }
   function setFeaturePermission(permissionList) {
     for (const item of permissionList) {
-      console.log(item);
-
       if (featurePermissionMap[item.workshopCode]) {
         featurePermissionMap[item.workshopCode].push(item.permissionId);
       } else {
@@ -390,12 +409,12 @@
       formParams.value = info;
       isDrawer.value = true;
       setFeaturePermission(res.permissionMap);
-      const treeSelectData = Object.keys(featurePermissionMap)[0];
-      selectedNodeKey.value = treeSelectData;
-      const modeTreeSelectData = Object.values(featurePermissionMap)[0] as Array<string>;
-      if (modeTreeSelectData.length === modeTreeData.value.length) {
-        isAll.value = true;
-      }
+      const treeSelectData = Object.keys(featurePermissionMap);
+      isAll.value = false;
+      selectedNodeKey.value = '';
+
+      // const modeTreeSelectData = Object.values(featurePermissionMap)[0] as Array<string>;
+      // isAll.value = modeTreeSelectData.length >= modeTreeData.value.length;
 
       // nextTick(() => {
       //   selectNodes.value = res.permissionMap.map((item) => item.workshopCode);
@@ -403,8 +422,8 @@
       //   treeRef.value.setCheckedKeys(selectNodes.value);
       // });
       nextTick(() => {
-        treeRef.value?.setCurrentKey(treeSelectData, true);
-        modeTreeRef.value?.setCheckedKeys(modeTreeSelectData);
+        treeRef.value?.setCheckedKeys(treeSelectData, true);
+        modeTreeRef.value?.setCheckedKeys([]);
       });
     });
   }