feat: add update node APIs

wsfe · Jul 30, 2024 · d12b15b · d12b15b
1 parent 549e4fd
commit d12b15b
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 0 deletions.
diff --git a/src/components/Tree.vue b/src/components/Tree.vue
@@ -405,6 +405,8 @@ const {
   filter,
   showCheckedNodes,
   loadRootNodes,
+  updateNode,
+  updateNodes,
 } = usePublicTreeAPI(nonReactive, props, {
   resetSpaceHeights,
   updateExpandedKeys,
@@ -705,6 +707,8 @@ defineExpose({
   filter,
   showCheckedNodes,
   loadRootNodes,
+  updateNode,
+  updateNodes,
   scrollTo,
 })
 

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -39,6 +39,8 @@ export const TREE_API_METHODS = [
   'filter',
   'showCheckedNodes',
   'loadRootNodes',
+  'updateNode',
+  'updateNodes',
   'scrollTo'
 ] as const
 

diff --git a/src/hooks/usePublicTreeAPI.ts b/src/hooks/usePublicTreeAPI.ts
@@ -235,6 +235,18 @@ export const usePublicTreeAPI = (
         isRootLoading.value = false
       })
   }
+  /**
+   * 更新单个节点
+   */
+  function updateNode(key: TreeNodeKeyType, newNode: ITreeNodeOptions) {
+    return nonReactive.store.updateNode(key, newNode)
+  }
+  /**
+   * 更新多个节点
+   */
+  function updateNodes(newNodes: ITreeNodeOptions[]) {
+    return nonReactive.store.updateNodes(newNodes)
+  }
 
   return {
     unloadCheckedNodes,
@@ -269,5 +281,7 @@ export const usePublicTreeAPI = (
     filter,
     showCheckedNodes,
     loadRootNodes,
+    updateNode,
+    updateNodes,
   }
 }
diff --git a/src/store/tree-store.ts b/src/store/tree-store.ts
@@ -518,6 +518,58 @@ export default class TreeStore extends TreeEventTarget {
     }
   }
 
+  updateNode(key: TreeNodeKeyType, newNode: ITreeNodeOptions, triggerDataChange = true) {
+    if (!this.mapData[key]) return
+
+    const newNodeCopy: ITreeNodeOptions = {}
+    const notAllowedFields = [
+      this.options.keyField,
+      'indeterminate',
+      'visible',
+      'isLeaf',
+    ]
+
+    // Exclude key field and fields starting with '_'
+    Object.keys(newNode).forEach((field) => {
+      if (!field.startsWith('_') && !notAllowedFields.includes(field)) {
+        newNodeCopy[field] = newNode[field]
+      }
+    })
+
+    if (Array.isArray(newNodeCopy.children)) {
+      this.mapData[key].setChildren(newNodeCopy.children)
+      delete newNodeCopy.children
+    }
+    if ('checked' in newNodeCopy) {
+      this.setChecked(key, newNodeCopy.checked, false, false)
+      delete newNodeCopy.checked
+    }
+    if ('selected' in newNodeCopy) {
+      this.setSelected(key, newNodeCopy.selected, false, false)
+      delete newNodeCopy.selected
+    }
+    if ('expand' in newNodeCopy) {
+      this.setExpand(key, newNodeCopy.expand, false, false, false)
+      delete newNodeCopy.expand
+    }
+    Object.keys(newNodeCopy).forEach((field) => {
+      this.mapData[key][field] = newNodeCopy[field]
+    })
+
+    if (triggerDataChange) {
+      this.emit('visible-data-change')
+    }
+  }
+
+  updateNodes(newNodes: ITreeNodeOptions[]) {
+    const validNodes = newNodes.filter((node) => node[this.options.keyField] != null)
+    validNodes.forEach((node) => {
+      this.updateNode(node[this.options.keyField], node, false)
+    })
+
+    this.emit('visible-data-change')
+  }
+
   //#endregion Set api
 
   //#region Get api