From e82fee46b70fd68e1fe5568d1238a2a2d4b459b4 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Mon, 19 Jun 2023 19:50:04 +0800
Subject: [PATCH] =?UTF-8?q?Refactor:=20=E6=A0=91=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=E6=96=B0=E7=9A=84=E6=95=B0=E6=8D=AE=E7=BB=93=E6=9E=84=E7=9A=84?=
 =?UTF-8?q?=E8=A6=81=E6=B1=82=E9=87=8D=E6=9E=84=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=A4=9A=E7=BA=A7=E6=A0=91=E7=82=B9=E5=87=BB=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomTree/index.vue | 93 +++++++++++++++++++----------
 1 file changed, 62 insertions(+), 31 deletions(-)

diff --git a/src/components/CustomTree/index.vue b/src/components/CustomTree/index.vue
index 3753344..3be4ae1 100644
--- a/src/components/CustomTree/index.vue
+++ b/src/components/CustomTree/index.vue
@@ -1,6 +1,7 @@
 <template>
   <a-tree
     class="custom-tree"
+    ref="treeRef"
     v-bind="$attrs"
     v-model="checkedKeys"
     checkable
@@ -14,6 +15,7 @@
 </template>
 
 <script>
+import { cloneDeep } from 'lodash'
 export default {
   props: {
     treeData: {
@@ -41,47 +43,76 @@ export default {
   },
   methods: {
     onTreeSelect(_, { node }) {
-      const selectedKey = node.eventKey
-      const parentKey = node.$parent.eventKey
+      const selectedKey = node.eventKey // 选中的节点的key
+      const findIndex = this.checkedKeys.findIndex(key => key == selectedKey) // 当前选中的节点处在选中的节点列表中的位置
 
-      const findIndex = this.checkedKeys.findIndex(key => key == selectedKey)
+      const children = node.dataRef.children
 
-      if (parentKey) {
-        // 选中的是子级节点
+      if (children && children.length) {
+        // 是父节点
+        const allChildren = this.getAllChildrenData(node.dataRef.children)
+        const childrenKeys = allChildren.map(child => child[this.replaceFields.key])
+        if(node.checked) { // 已经选中了，取消选中
+          let _checkedKeys = cloneDeep(this.checkedKeys)
+          _checkedKeys.splice(findIndex, 1)
+          _checkedKeys = _checkedKeys.filter(checkedKey => {
+            return !childrenKeys.includes(checkedKey)
+          })
+          this.checkedKeys = _checkedKeys
+        }
+        else {
+          this.checkedKeys.push(selectedKey)
+          this.checkedKeys.push(...childrenKeys.filter(childKey => !this.checkedKeys.includes(childKey)))
+        }
+      } else {
+        // 是最终子节点
+        const ancestorNodes = this.getAllAncestorNode(node)
         if (-1 == findIndex) {
           // 选中了
           this.checkedKeys.push(selectedKey)
-
-          const parentNode = this.treeData.find(tree => tree[this.replaceFields.key] == parentKey) // 找到树列表中的父节点
-          const childrenKeys = parentNode.children.map(child => child[this.replaceFields.key])
-          if (childrenKeys.every(key => this.checkedKeys.includes(key))) {
-            // 如果子列表每一个都能在选中的列表中找到，则是全选
-            this.checkedKeys.push(parentKey)
-          }
+          ancestorNodes.forEach(node => {
+            this.$nextTick(() => {
+              if (node.checked) {
+                this.checkedKeys.push(node.eventKey)
+              }
+            })
+          })
         } else {
           // 取消了
           this.checkedKeys.splice(findIndex, 1)
-
-          const findParent = this.checkedKeys.findIndex(key => key == parentKey)
-          if (-1 !== findParent) {
-            this.checkedKeys.splice(findParent, 1)
-          }
-        }
-      } else {
-        //选中的是父级节点
-        const parentNode = this.treeData.find(tree => tree[this.replaceFields.key] == selectedKey)
-        const childrenKeys = parentNode.children.map(child => child[this.replaceFields.key])
-
-        const findParent = this.checkedKeys.findIndex(key => key == selectedKey)
-        if (-1 == findParent) {
-          // 未选中父节点,则将子节点都选中
-          this.checkedKeys.push(selectedKey)
-          this.checkedKeys.push(...childrenKeys)
-        } else {
-          // 已经选中了父节点,则将子节点都取消选中
-          this.checkedKeys = this.checkedKeys.filter(key => key !== selectedKey && !childrenKeys.includes(key))
+          ancestorNodes.forEach(node => { // 取消所有祖先节点的选中状态
+            const index = this.checkedKeys.findIndex(key => key == node.eventKey)
+            if(-1 !== index) {
+              this.checkedKeys.splice(index, 1)
+            }
+          })
         }
       }
+    },
+
+    // 获取一个节点下所有层级子节点的集合
+    getAllChildrenData(nodeData) {
+      const childDataList = []
+      nodeData.forEach(child => {
+        childDataList.push(child)
+        if(child.children) {
+         childDataList.push(...this.getAllChildrenData(child.children))
+        }
+      })
+      return childDataList
+    },
+
+    getAllAncestorNode(currNode) {
+      const nodeList = []
+      const parentNode = currNode.$parent
+      const parentKey = parentNode ? parentNode.eventKey : undefined
+      const hasParentKey = parentKey !== null && parentKey !== undefined
+      const isLeafNode = -1 == this.treeData.findIndex(treeNode => treeNode[this.replaceFields.key] == parentKey)
+      nodeList.push(parentNode)
+      if (hasParentKey && isLeafNode) {
+        nodeList.push(...this.getAllAncestorNode(parentNode))
+      }
+      return nodeList
     }
   },
   watch: {