fix 权限树状态更新

src/modules/basic/view/role_privilege_settings.vue

@@ -71,9 +71,9 @@
             ref="tree"
             highlight-current
             :check-strictly="true"
-            :default-expanded-keys="[-1]"
+            :default-expanded-keys="checkedKeys"
             :default-checked-keys="checkedKeys"
-            @check-change="treeChange"
+            @check="nodeCheck"
             :expand-on-click-node="true"
           />
         </div>
@@ -90,7 +90,6 @@ export default {
   name: "RolePrivilegeSettings",
   data() {
     return {
-      completed: false,
       form: {
         orgId: null,
         roleId: null,
@@ -162,15 +161,10 @@ export default {
         console.log("initTree(). checkedKeys:", resp2.data);
         this.treeData = resp1.data.children;
         this.checkedKeys = resp2.data;
-        this.completed = true;
       });
     },
     /*change事件*/
     change() {
-      if (!this.completed) {
-        return;
-      }
-
       this.initTree(
         this.form.orgId,
         this.form.roleId,
@@ -178,10 +172,6 @@ export default {
       );
     },
     rootOrgChanged() {
-      if (!this.completed) {
-        return;
-      }
-
       var url =
         CORE_API +
         "/rolePrivilege/getRoles?includeSuperAdmin=false&rootOrgId=" +
@@ -191,45 +181,96 @@ export default {
         if (0 < this.roleList.length) {
           this.form.roleId = this.roleList[0].roleId;
         }
-      });
 
-      this.initTree(
-        this.form.orgId,
-        this.form.roleId,
-        this.form.privilegeGroupId
-      );
+        this.initTree(
+          this.form.orgId,
+          this.form.roleId,
+          this.form.privilegeGroupId
+        );
+      });
     },
-    treeChange(node, checked) {
-      console.log("[tree change] node:", node);
-      if (checked && !this.checkedKeys.includes(node.id)) {
-        this.checkedKeys.push(node.id);
-      }
-      if (!checked && this.checkedKeys.includes(node.id)) {
-        this.checkedKeys = this.checkedKeys.filter(v => v != node.id);
-      }
+    nodeCheck({ id, parentId, children }, { checkedKeys }) {
+      // console.log("[tree change] node:", node);
 
-      var checkChildren = this.uncheckChildren_nodeId != node.id;
-      this.uncheckChildren_nodeId = null;
+      const checked = checkedKeys.includes(id);
+      // 当前node的状态
       if (checked) {
-        if (node.parentId) {
-          this.uncheckChildren_nodeId = node.parentId;
-          this.$refs.tree.setChecked(node.parentId, true, false);
-        }
-        if (checkChildren) {
-          if (node.children && 0 < node.children.length) {
-            for (const cur of node.children) {
-              this.$refs.tree.setChecked(cur.id, true, false);
-            }
+        this.checkedKeys = [...this.checkedKeys, id];
+      } else {
+        this.checkedKeys = this.checkedKeys.filter(id0 => id0 !== id);
+      }
+      // 选中状态下对子节点的影响：递归选中所有子孙节点
+      if (checked && children) {
+        this.checkedKeys = [...this.checkedKeys, ...children.map(v => v.id)];
+        for (const child of children) {
+          this.checkedKeys = [...this.checkedKeys, child.id];
+          for (const child of child.children || []) {
+            // 树最多只有三个层级，这里就不写递归了
+            this.checkedKeys = [...this.checkedKeys, child.id];
           }
         }
-      } else {
-        if (node.children && 0 < node.children.length) {
-          for (const cur of node.children) {
-            this.$refs.tree.setChecked(cur.id, false, false);
+      }
+
+      // 选中状态下对父节点的影响：递归选中所有父辈节点
+      if (checked && parentId) {
+        this.checkedKeys = [...this.checkedKeys, parentId];
+        const parent1 = this.$refs.tree.getNode(parentId).data;
+        // this.$refs.tree.setChecked(parentId, true, false);
+        if (parent1.parentId) {
+          // 第二个父节点
+          this.checkedKeys = [...this.checkedKeys, parent1.parentId];
+          // this.$refs.tree.setChecked(parent1.parentId, true, false);
+        }
+      }
+
+      // 取消选中状态下对子节点的影响：递归取消选中所有子孙节点
+      if (!checked && children) {
+        this.checkedKeys = this.checkedKeys.filter(id0 => id0 !== id);
+        // console.log(this.checkedKeys);
+        for (const child of children) {
+          this.checkedKeys = this.checkedKeys.filter(id => id !== child.id);
+          // console.log(this.checkedKeys);
+          for (const child of child.children || []) {
+            // 树最多只有三个层级，这里就不写递归了
+            this.checkedKeys = this.checkedKeys.filter(id => id !== child.id);
           }
         }
       }
 
+      this.checkedKeys = [...new Set(this.checkedKeys)];
+      this.$refs.tree.setCheckedKeys(this.checkedKeys);
+
+      // 取消选中状态下对父节点的影响：无影响
+
+      // if (checked && !this.checkedKeys.includes(node.id)) {
+      //   this.checkedKeys.push(node.id);
+      // }
+      // if (!checked && this.checkedKeys.includes(node.id)) {
+      //   this.checkedKeys = this.checkedKeys.filter(v => v != node.id);
+      // }
+
+      // var checkChildren = this.uncheckChildren_nodeId != node.id;
+      // this.uncheckChildren_nodeId = null;
+      // if (checked) {
+      //   if (node.parentId) {
+      //     this.uncheckChildren_nodeId = node.parentId;
+      //     this.$refs.tree.setChecked(node.parentId, true, false);
+      //   }
+      //   if (checkChildren) {
+      //     if (node.children && 0 < node.children.length) {
+      //       for (const cur of node.children) {
+      //         this.$refs.tree.setChecked(cur.id, true, false);
+      //       }
+      //     }
+      //   }
+      // } else {
+      //   if (node.children && 0 < node.children.length) {
+      //     for (const cur of node.children) {
+      //       this.$refs.tree.setChecked(cur.id, false, false);
+      //     }
+      //   }
+      // }
+
       this.treeChanged = true;
     },
     save() {