feat(tree): 增加合并节点的功能

Author: kagol

packages/devui-vue/devui/tree/src/core/use-merge-nodes.ts

@@ -0,0 +1,41 @@
+import { Ref } from 'vue';
+import useOperate from './use-operate';
+import { IInnerTreeNode, IUseCore } from './use-tree-types';
+
+export default function() {
+  return function useMergeNodes(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
+    const { setNodeValue, getChildren } = core;
+    const { removeNode } = useOperate()(data, core);
+
+    const mergeTreeNodes = () => {
+      const mergeToNode = (node: IInnerTreeNode) => {
+        if (node.isLeaf) return;
+
+        const children = getChildren(node, { recursive: false });
+        if (children?.length === 1) {
+          const subChildren = getChildren(children[0], { recursive: false });
+          
+          if (subChildren.length !== 0) {
+            setNodeValue(node, 'label', node.label + ' / ' + children[0]?.label);
+            removeNode(children[0], { recursive: false });
+            mergeToNode(node);
+          } else {
+            setNodeValue(children[0], 'parentId', node.id);
+          }
+        } else {
+          children.forEach(item => {
+            mergeToNode(item);
+          });
+        }
+      };
+
+      data.value.filter(item => item.level === 1).forEach(item => {
+        mergeToNode(item);
+      });
+    }
+
+    return {
+      mergeTreeNodes,
+    }
+  };
+}

packages/devui-vue/devui/tree/src/core/use-operate.ts

@@ -38,9 +38,19 @@ export default function(options?) {
       );
     }
 
-    const removeNode = (node: ITreeNode): void => {
+    const removeNode = (node: IInnerTreeNode, config = { recursive: true }): void => {
+      if (!config.recursive) {
+        getChildren(node).forEach(child => {
+          setNodeValue(child, 'level', getLevel(child) - 1);
+        });
+      }
+
       data.value = data.value.filter(item => {
-        return item.id !== node.id && !getChildren(node).map(nodeItem => nodeItem.id).includes(item.id);
+        if (config.recursive) {
+          return item.id !== node.id && !getChildren(node).map(nodeItem => nodeItem.id).includes(item.id);
+        } else {
+          return item.id !== node.id;
+        }
       });
     }
 

packages/devui-vue/devui/tree/src/new-tree.tsx

@@ -5,20 +5,22 @@ import DTreeNodeToggle from './components/tree-node-toggle';
 import useTree from './core/use-tree';
 import useCheck from './core/use-check';
 import useSelect from './core/use-select';
-import { USE_TREE_TOKEN } from './const';
 import useOperate from './core/use-operate';
+import useMergeNodes from './core/use-merge-nodes';
+import { USE_TREE_TOKEN } from './const';
 import { TreeProps, treeProps } from './new-tree-types';
 import './tree.scss';
 
 export default defineComponent({
   name: 'DNewTree',
   props: treeProps,
-  setup(props: TreeProps, { slots }) {
+  setup(props: TreeProps, { slots, expose }) {
     const { data, check } = toRefs(props);
 
     const userPlugins = [
       useSelect(),
       useOperate(),
+      useMergeNodes(),
     ];
 
     const checkOptions = ref({
@@ -49,6 +51,10 @@ export default defineComponent({
 
     provide(USE_TREE_TOKEN, treeFactory);
 
+    expose({
+      treeFactory
+    });
+
     return () => {
       return (
         <div class="devui-tree">

packages/devui-vue/docs/components/tree/index.md

@@ -278,6 +278,93 @@ export default defineComponent({
 
 :::
 
+### 节点合并
+
+:::demo
+
+```vue
+<template>
+  <d-new-tree :data="data" ref="treeRef"></d-new-tree>
+</template>
+<script lang="ts">
+import { defineComponent, ref, onMounted } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const treeRef = ref(null);
+    const data = ref([
+      {
+        label: 'Parent node 1',
+        children: [
+          {
+            label: 'Parent node 1-1',
+            children: [
+              {
+                label: 'Parent node 1-1-1',
+                children: [
+                  {
+                    label: 'Parent node 1-1-1-1'
+                  }
+                ]
+              }
+            ]
+          },
+        ]
+      },
+      {
+        label: 'Parent node 2',
+        children: [
+          {
+            label: 'Parent node 2-1',
+            children: [
+              {
+                label: 'Leaf node 2-1-1'
+              },
+              {
+                label: 'Leaf node 2-1-2'
+              },
+            ]
+          },
+        ]
+      },
+      {
+        label: 'Parent node 3',
+        children: [
+          {
+            label: 'Leaf node 3-1',
+            children: [
+              {
+                label: 'Leaf node 3-1-1',
+                children: [
+                  {
+                    label: 'Leaf node 3-1-1-1'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            label: 'Leaf node 3-2'
+          }
+        ]
+      }
+    ]);
+
+    onMounted(() => {
+      treeRef.value.treeFactory.mergeTreeNodes();
+    });
+
+    return {
+      data,
+      treeRef,
+    }
+  }
+})
+</script>
+```
+
+:::
+
 ### Tree 参数
 
 | 参数名 | 类型                        | 默认值 | 说明                   | 跳转 Demo             |