From 29a5e787fe9eb8aeddd82d25c7ad420b5ba384b7 Mon Sep 17 00:00:00 2001 From: Kagol Date: Wed, 6 Apr 2022 18:47:38 +0800 Subject: [PATCH 1/2] =?UTF-8?q?docs(tree):=20=E8=A1=A5=E5=85=85generateInn?= =?UTF-8?q?erTree=E6=96=B9=E6=B3=95=E7=9A=84=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tree/src/core/utils.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/devui-vue/devui/tree/src/core/utils.ts b/packages/devui-vue/devui/tree/src/core/utils.ts index a6e2c5478a..d4fe887e1c 100644 --- a/packages/devui-vue/devui/tree/src/core/utils.ts +++ b/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', From ad8f75bc0a39ea36ef4899d7fcde7e94955e7828 Mon Sep 17 00:00:00 2001 From: Kagol Date: Wed, 6 Apr 2022 19:38:42 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(tree):=20=E5=A2=9E=E5=8A=A0insertBefor?= =?UTF-8?q?e=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/tree/src/core/use-operate.ts | 36 ++++++++++++++++--- .../devui/tree/src/core/use-tree-types.ts | 2 +- .../devui-vue/devui/tree/src/new-tree.tsx | 4 ++- .../devui-vue/docs/components/tree/index.md | 9 ----- 4 files changed, 36 insertions(+), 15 deletions(-) diff --git a/packages/devui-vue/devui/tree/src/core/use-operate.ts b/packages/devui-vue/devui/tree/src/core/use-operate.ts index c1a6956e55..077d5b4d06 100644 --- a/packages/devui-vue/devui/tree/src/core/use-operate.ts +++ b/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, 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 => { diff --git a/packages/devui-vue/devui/tree/src/core/use-tree-types.ts b/packages/devui-vue/devui/tree/src/core/use-tree-types.ts index 653651ccad..27785d5f59 100644 --- a/packages/devui-vue/devui/tree/src/core/use-tree-types.ts +++ b/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; } diff --git a/packages/devui-vue/devui/tree/src/new-tree.tsx b/packages/devui-vue/devui/tree/src/new-tree.tsx index 0faf995092..c1e3db7bc7 100644 --- a/packages/devui-vue/devui/tree/src/new-tree.tsx +++ b/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; // 外部同步内部 diff --git a/packages/devui-vue/docs/components/tree/index.md b/packages/devui-vue/docs/components/tree/index.md index b9d5f9d9ad..031dbab100 100644 --- a/packages/devui-vue/docs/components/tree/index.md +++ b/packages/devui-vue/docs/components/tree/index.md @@ -1037,7 +1037,6 @@ export default defineComponent({ ```vue