feat(tree):增加 insertBefore 方法

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

@@ -4,16 +4,44 @@ import { IInnerTreeNode, ITreeNode, IUseCore } from './use-tree-types';
 export default function useOperate(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
   console.log('useOperate:', data, data.value);
 
-  const { setNodeValue, getChildren } = core;
+  const { setNodeValue, getChildren, getIndex, getLevel } = core;
 
-  const insertBefore = (parentNode: ITreeNode, node: ITreeNode, referenceNode: ITreeNode, cut: boolean = false): void => {
-    // TODO
+  const insertBefore = (
+    parentNode: ITreeNode,
+    node: ITreeNode,
+    referenceNode: ITreeNode,
+  ): void => {
+    const children = getChildren(parentNode);
+    const lastChild = children[children.length - 1];
+    let insertedIndex = getIndex(parentNode) + 1;
+
+    if (referenceNode) {
+      insertedIndex = getIndex(referenceNode);
+    } else if (lastChild) {
+      insertedIndex = getIndex(lastChild) + 1;
+    }
+
+    setNodeValue(parentNode, 'expanded', true);
+    setNodeValue(parentNode, 'isLeaf', false);
+
+    const currentNode = {
+      ...node,
+      level: getLevel(parentNode) + 1,
+      parentId: parentNode.id,
+      isLeaf: true,
+    };
+
+    data.value = data.value.slice(0, insertedIndex)
+    .concat(
+      currentNode,
+      data.value.slice(insertedIndex, data.value.length)
+    );
   }
 
   const removeNode = (node: ITreeNode): void => {
     data.value = data.value.filter(item => {
       return item.id !== node.id && !getChildren(node).map(nodeItem => nodeItem.id).includes(item.id);
-    })
+    });
   }
 
   const editNode = (node: IInnerTreeNode, label: string): void => {

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

@@ -51,7 +51,7 @@ export interface IUseDisable {
 }
 
 export interface IUseOperate {
-  insertBefore: (parentNode: ITreeNode, node: ITreeNode, referenceNode: ITreeNode, cut: boolean) => void;
+  insertBefore: (parentNode: ITreeNode, node: ITreeNode, referenceNode: ITreeNode) => void;
   removeNode: (node: ITreeNode) => void;
   editNode: (node: ITreeNode, label: string) => void;
 }

packages/devui-vue/devui/tree/src/core/utils.ts

@@ -23,6 +23,21 @@ export function flatToNested(flatTree: IInnerTreeNode[]): ITreeNode[] {
   }, []);
 }
 
+/**
+ * 用于生成内部使用的扁平结构，对树的所有操作都是在操作这个内部的扁平结构，
+ * 该数据一旦发生变化，树组件的 UI 即相应变化。
+ * 
+ * @param tree 原始嵌套结构的树数据
+ * @param key 子节点key，默认为'children'
+ * @returns 扁平结构的树数据
+ * 
+ * 将嵌套结构拍平之后，增加了
+ * - 'id'：唯一标识一个树节点
+ * - 'parentId'：父节点
+ * - 'level'：所属的节点层级
+ * - 'isLeaf'：是否是叶子节点，用于决定是否渲染展开/收起按钮
+ * - 'idType'(没有传入 id 的节点会生成一个随机的 id，idType 用来标识 id 是否是随机生成的)
+ */
 export function generateInnerTree(
   tree: ITreeNode[],
   key = 'children',

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

@@ -8,6 +8,7 @@ import useCheck from './core/use-check';
 import useSelect from './core/use-select';
 import { USE_TREE_TOKEN } from './const';
 import './tree.scss';
+import useOperate from './core/use-operate';
 
 export default defineComponent({
   name: 'DNewTree',
@@ -22,13 +23,14 @@ export default defineComponent({
 
     const treeFactory = useTree(
       data.value,
-      [useSelect, useCheck]
+      [useSelect, useCheck, useOperate]
     );
 
     const {
       setTree,
       getExpendedTree,
       toggleNode,
+      insertBefore,
     } = treeFactory;
 
     // 外部同步内部

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

@@ -1037,7 +1037,6 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-button @click="changeData">changeData</d-button>
   <d-new-tree :data="data">
     <template #content="{nodeData}">
       <svg t="1649231851892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2194" width="16" height="16"><path d="M946.5 505L560.1 118.8l-25.9-25.9c-12.3-12.2-32.1-12.2-44.4 0L77.5 505c-12.3 12.3-18.9 28.6-18.8 46 0.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8 12.1-12.1 18.7-28.2 18.7-45.3 0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204z m217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z" p-id="2195"></path></svg>
@@ -1119,16 +1118,8 @@ export default defineComponent({
       }
     ]);
 
-    const changeData = () => {
-      data.value = data.value.concat({
-        label: 'Leaf node 1-4',
-        id: 'node-1-4'
-      });
-    }
-
     return {
       data,
-      changeData,
     }
   }
 })