feat(tree):增加 insertBefore 方法 (DevCloudFE#408)

* docs(tree): 补充generateInnerTree方法的文档 * feat(tree): 增加insertBefore方法

Author: kagol

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,
  }
  }
 })