From 4a231507a2e051312a47ee95a910a82bfa30dc76 Mon Sep 17 00:00:00 2001 From: gxuud Date: Tue, 19 Apr 2022 19:59:45 +0800 Subject: [PATCH 1/2] =?UTF-8?q?chore(tree):=20=E4=BF=AE=E5=A4=8Deslint?= =?UTF-8?q?=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../checkable-tree/checkable-tree.spec.tsx | 2 +- .../__tests__/node-merge/node-merge.spec.tsx | 2 +- .../devui/tree/src/components/icon-close.tsx | 2 +- .../devui/tree/src/components/icon-open.tsx | 2 +- .../tree/src/components/tree-node-content.tsx | 6 ++- .../tree/src/components/tree-node-toggle.tsx | 17 ++++--- .../devui/tree/src/components/tree-node.tsx | 39 ++++++++------- .../tree/src/components/use-tree-node.ts | 35 +++++++++---- .../devui/tree/src/core/use-check.ts | 34 +++++++------ .../devui-vue/devui/tree/src/core/use-core.ts | 49 ++++++++++++------- .../devui/tree/src/core/use-disable.ts | 31 +++++++----- .../devui/tree/src/core/use-operate.ts | 28 ++++++----- .../devui/tree/src/core/use-select.ts | 24 +++++---- .../devui/tree/src/core/use-toggle.ts | 19 ++++--- .../devui/tree/src/core/use-tree-types.ts | 7 +-- .../devui-vue/devui/tree/src/core/utils.ts | 20 ++++---- .../devui-vue/devui/tree/src/new-tree.tsx | 2 +- 17 files changed, 192 insertions(+), 127 deletions(-) diff --git a/packages/devui-vue/devui/tree/__tests__/checkable-tree/checkable-tree.spec.tsx b/packages/devui-vue/devui/tree/__tests__/checkable-tree/checkable-tree.spec.tsx index d55da60c49..75f17b69f9 100644 --- a/packages/devui-vue/devui/tree/__tests__/checkable-tree/checkable-tree.spec.tsx +++ b/packages/devui-vue/devui/tree/__tests__/checkable-tree/checkable-tree.spec.tsx @@ -37,4 +37,4 @@ describe('Checkable tree', () => { it.todo('The checkbox should be checked when setting checked to true.'); it.todo('The checkbox can\'t be checked when setting disableCheck to true.'); -}); \ No newline at end of file +}); diff --git a/packages/devui-vue/devui/tree/__tests__/node-merge/node-merge.spec.tsx b/packages/devui-vue/devui/tree/__tests__/node-merge/node-merge.spec.tsx index 3cfbf954b5..4d30d38cf6 100644 --- a/packages/devui-vue/devui/tree/__tests__/node-merge/node-merge.spec.tsx +++ b/packages/devui-vue/devui/tree/__tests__/node-merge/node-merge.spec.tsx @@ -28,4 +28,4 @@ describe('Tree node merge', () => { expect(childNodes[0].text()).toBe('Parent node 1 / Parent node 1-1'); expect(childNodes[1].text()).toBe('Leaf node 1-1-1'); }); -}); \ No newline at end of file +}); diff --git a/packages/devui-vue/devui/tree/src/components/icon-close.tsx b/packages/devui-vue/devui/tree/src/components/icon-close.tsx index bb356a0cc6..2c990f98da 100644 --- a/packages/devui-vue/devui/tree/src/components/icon-close.tsx +++ b/packages/devui-vue/devui/tree/src/components/icon-close.tsx @@ -1,4 +1,4 @@ -export const IconClose = () => ( +export const IconClose = (): JSX.Element => ( ( +export const IconOpen = (): JSX.Element => ( , + default: () => ({}), }, }, setup(props) { const { data } = toRefs(props); const { nodeTitleClass, - } = useTreeNode(data); + } = useTreeNode(data as ComputedRef); return () => { return ( diff --git a/packages/devui-vue/devui/tree/src/components/tree-node-toggle.tsx b/packages/devui-vue/devui/tree/src/components/tree-node-toggle.tsx index 10e6619b41..e95d1959d2 100644 --- a/packages/devui-vue/devui/tree/src/components/tree-node-toggle.tsx +++ b/packages/devui-vue/devui/tree/src/components/tree-node-toggle.tsx @@ -1,6 +1,6 @@ import { defineComponent, inject, PropType, toRefs } from 'vue'; import { USE_TREE_TOKEN } from '../const'; -import { ITreeNode } from '../core/use-tree-types'; +import { ITreeNode, IUseTree } from '../core/use-tree-types'; import { IconClose } from './icon-close'; import { IconOpen } from './icon-open'; @@ -9,11 +9,12 @@ export default defineComponent({ props: { data: { type: Object as PropType, + default: () => ({}) }, }, setup(props) { const { data } = toRefs(props); - const { toggleNode } = inject(USE_TREE_TOKEN); + const { toggleNode } = inject(USE_TREE_TOKEN) as Partial; return () => { return ( @@ -21,14 +22,16 @@ export default defineComponent({ class={['devui-tree-node__folder', data.value?.disableToggle && 'toggle-disabled']} onClick={(event: MouseEvent) => { event.stopPropagation(); - toggleNode(data.value); + if (toggleNode) { + toggleNode(data.value); + } }}> { data.value.isLeaf - ? - : data.value.expanded - ? - : + ? + : data.value.expanded + ? + : } ); diff --git a/packages/devui-vue/devui/tree/src/components/tree-node.tsx b/packages/devui-vue/devui/tree/src/components/tree-node.tsx index caf4c33efe..009ecb3d7d 100644 --- a/packages/devui-vue/devui/tree/src/components/tree-node.tsx +++ b/packages/devui-vue/devui/tree/src/components/tree-node.tsx @@ -1,6 +1,7 @@ +import type { ComputedRef } from 'vue'; import { computed, defineComponent, inject, PropType, renderSlot, toRefs, useSlots } from 'vue'; import { NODE_HEIGHT, USE_TREE_TOKEN } from '../const'; -import { IInnerTreeNode } from '../core/use-tree-types'; +import { IInnerTreeNode, IUseTree } from '../core/use-tree-types'; import DTreeNodeToggle from './tree-node-toggle'; import { Checkbox } from '../../../checkbox'; import DTreeNodeContent from './tree-node-content'; @@ -11,6 +12,7 @@ export default defineComponent({ props: { data: { type: Object as PropType, + default: () => ({}) }, check: { type: Boolean, @@ -19,7 +21,7 @@ export default defineComponent({ }, setup(props, { slots }) { const { data, check } = toRefs(props); - const { toggleSelectNode, toggleCheckNode, toggleNode, getChildren } = inject(USE_TREE_TOKEN); + const { toggleSelectNode, toggleCheckNode, toggleNode, getChildren } = inject(USE_TREE_TOKEN) as Partial; const { nodeClass, @@ -28,11 +30,11 @@ export default defineComponent({ nodeVLineClass, nodeVLineStyle, nodeHLineClass, - } = useTreeNode(data); + } = useTreeNode(data as ComputedRef); const halfChecked = computed(() => { - const children = getChildren(data.value); - const checkedChildren = children.filter((item: IInnerTreeNode) => item.checked); + const children = getChildren?.(data.value); + const checkedChildren = children?.filter((item: IInnerTreeNode) => item.checked); if (['upward', 'both'].includes(check.value)) { return checkedChildren.length > 0 && checkedChildren.length < children.length; @@ -42,6 +44,14 @@ export default defineComponent({ }); return () => { + const checkboxProps = { + key: data.value?.id, + disabled: data.value?.disableCheck, + halfchecked: halfChecked.value, + modelValue: data.value?.checked, + 'onUpdate:modelValue': () => { toggleCheckNode(data.value); }, + onClick: (event: MouseEvent) => { event.stopPropagation(); }, + }; return (
@@ -49,25 +59,18 @@ export default defineComponent({ { slots.icon - ? renderSlot(useSlots(), 'icon', { nodeData: data, toggleNode }) - : + ? renderSlot(useSlots(), 'icon', { nodeData: data, toggleNode }) + : } -
+
{ check.value && - { toggleCheckNode(data.value); }} - onClick={(event: MouseEvent) => { event.stopPropagation(); }} - /> + } { slots.default - ? renderSlot(useSlots(), 'default', { nodeData: data }) - : + ? renderSlot(useSlots(), 'default', { nodeData: data }) + : }
diff --git a/packages/devui-vue/devui/tree/src/components/use-tree-node.ts b/packages/devui-vue/devui/tree/src/components/use-tree-node.ts index 7348dc9e0c..3d0938162e 100644 --- a/packages/devui-vue/devui/tree/src/components/use-tree-node.ts +++ b/packages/devui-vue/devui/tree/src/components/use-tree-node.ts @@ -1,24 +1,41 @@ -import { computed, ComputedRef, inject } from 'vue'; +import type { ComputedRef } from 'vue'; +import { computed, inject } from 'vue'; import { NODE_HEIGHT, NODE_INDENT, USE_TREE_TOKEN } from '../const'; import { IInnerTreeNode, IUseTree } from '../core/use-tree-types'; -export default function useTreeNode(data: ComputedRef) { - const { getChildren } = inject(USE_TREE_TOKEN); +export interface IUseTreeNode { + nodeClass: ComputedRef<(string | false | undefined)[]>; + nodeStyle: ComputedRef<{ paddingLeft: string }>; + nodeContentClass: ComputedRef<(string | false | undefined)[]>; + nodeTitleClass: ComputedRef<(string | false | undefined)[]>; + nodeVLineClass: ComputedRef<(string | false | undefined)[]>; + nodeVLineStyle: ComputedRef<{ height: string; left: string; top: string }>; + nodeHLineClass: ComputedRef<(string | false | undefined)[]>; +} + +export default function useTreeNode(data: ComputedRef): IUseTreeNode { + const { getChildren } = inject(USE_TREE_TOKEN) as Partial; const nodeClass = computed(() => [ 'devui-tree-node', data.value?.expanded && 'devui-tree-node__open', ]); - const nodeStyle = computed(() => {return { paddingLeft: `${NODE_INDENT * (data.value?.level - 1)}px` }}); + const nodeStyle = computed(() => { + return { paddingLeft: `${NODE_INDENT * (data.value?.level - 1)}px` }; + }); const nodeVLineClass = computed(() => [ !data.value?.isLeaf && data.value?.expanded && 'devui-tree-node__vline', ]); - const nodeVLineStyle = computed(() => {return { - height: `${NODE_HEIGHT * (getChildren(data.value, { expanded: true }).length - 1) + NODE_HEIGHT / 2 + 1}px`, - left: `${NODE_INDENT * (data.value?.level - 1) + 9}px`, - top: `${NODE_HEIGHT}px`, - }}); + const nodeVLineStyle = computed(() => { + return { + height: `${NODE_HEIGHT * ( + getChildren(data.value, { expanded: true }).length - 1 + ) + NODE_HEIGHT / 2 + 1}px`, + left: `${NODE_INDENT * (data.value?.level - 1) + 9}px`, + top: `${NODE_HEIGHT}px`, + }; + }); const nodeHLineClass = computed(() => [ data.value?.level !== 1 && 'devui-tree-node__hline', ]); diff --git a/packages/devui-vue/devui/tree/src/core/use-check.ts b/packages/devui-vue/devui/tree/src/core/use-check.ts index 3a0008dccf..90b2553489 100644 --- a/packages/devui-vue/devui/tree/src/core/use-check.ts +++ b/packages/devui-vue/devui/tree/src/core/use-check.ts @@ -1,21 +1,23 @@ import { ref, Ref } from 'vue'; -import { CheckStrategy, IInnerTreeNode, IUseCore } from './use-tree-types'; - -export default function(options?: Ref<{ - checkStrategy: CheckStrategy -}> = ref({ - checkStrategy: 'both' -})) { - return function useCheck(data: Ref, core: IUseCore) { +import { ICheckStrategy, IInnerTreeNode, IUseCore } from './use-tree-types'; +export interface IUseCheck { + checkNode: (node: IInnerTreeNode) => void; + uncheckNode: (node: IInnerTreeNode) => void; + toggleCheckNode: (node: IInnerTreeNode) => void; +} +export default function ( + options: Ref<{ checkStrategy: ICheckStrategy }> = ref({ checkStrategy: 'both' as ICheckStrategy }) +) { + return function useCheck(data: Ref, core: IUseCore): IUseCheck { const { setNodeValue, getNode, getChildren, getParent } = core; const checkNode = (node: IInnerTreeNode): void => { setNodeValue(node, 'checked', true); - } + }; const uncheckNode = (node: IInnerTreeNode): void => { setNodeValue(node, 'checked', false); - } + }; const controlParentNodeChecked = (node: IInnerTreeNode): void => { const parentNode = getParent(node); @@ -32,7 +34,7 @@ export default function(options?: Ref<{ } else if (checkedSiblingNodes.length === siblingNodes.length) { setNodeValue(parentNode, 'checked', true); } - } + }; if (parentNode.parentId) { toggleParentChecked(); @@ -42,32 +44,32 @@ export default function(options?: Ref<{ } else { toggleParentChecked(); } - } + }; const toggleCheckNode = (node: IInnerTreeNode): void => { if (getNode(node).checked) { setNodeValue(node, 'checked', false); if (['downward', 'both'].includes(options.value.checkStrategy)) { - getChildren(node).forEach(item => setNodeValue(item, 'checked', false)); + getChildren(node, {}).forEach(item => setNodeValue(item, 'checked', false)); } } else { setNodeValue(node, 'checked', true); if (['downward', 'both'].includes(options.value.checkStrategy)) { - getChildren(node).forEach(item => setNodeValue(item, 'checked', true)); + getChildren(node, {}).forEach(item => setNodeValue(item, 'checked', true)); } } if (['upward', 'both'].includes(options.value.checkStrategy)) { controlParentNodeChecked(node); } - } + }; return { checkNode, uncheckNode, toggleCheckNode, - } + }; }; } diff --git a/packages/devui-vue/devui/tree/src/core/use-core.ts b/packages/devui-vue/devui/tree/src/core/use-core.ts index 4dfd22119c..2e2d88514b 100644 --- a/packages/devui-vue/devui/tree/src/core/use-core.ts +++ b/packages/devui-vue/devui/tree/src/core/use-core.ts @@ -2,18 +2,34 @@ import { computed, ComputedRef, Ref } from 'vue'; import { IInnerTreeNode, ITreeNode, IUseCore, valueof } from './use-tree-types'; import { generateInnerTree } from './utils'; -export default function(options?){ +export default function(){ return function useCore(data: Ref): IUseCore { const getLevel = (node: IInnerTreeNode): number => { return data.value.find((item) => item.id === node.id).level; - } - + }; const getChildren = (node: IInnerTreeNode, config = { expanded: false, recursive: true, }): IInnerTreeNode[] => { - let result = []; - const treeData = config.expanded ? getExpendedTree() : data; + const getInnerExpendedTree = (): ComputedRef => { + return computed(() => { + let excludeNodes: IInnerTreeNode[] = []; + const result = []; + for (let i = 0, len = data?.value.length; i < len; i++) { + const item = data?.value[i]; + if (excludeNodes.map(innerNode => innerNode.id).includes(item.id)) { + continue; + } + if (item.expanded !== true) { + excludeNodes = getChildren(item); + } + result.push(item); + } + return result; + }); + }; + const result = []; + const treeData = config.expanded ? getInnerExpendedTree() : data; const startIndex = treeData.value.findIndex((item) => item.id === node.id); for (let i = startIndex + 1; i < treeData.value.length && getLevel(node) < treeData.value[i].level; i++) { @@ -23,52 +39,47 @@ export default function(options?){ result.push(treeData.value[i]); } } - return result; - } + }; const getParent = (node: IInnerTreeNode): IInnerTreeNode => { return data.value.find((item) => item.id === node.parentId); - } + }; const getExpendedTree = (): ComputedRef => { return computed(() => { let excludeNodes: IInnerTreeNode[] = []; - let result = []; + const result = []; for (let i = 0, len = data?.value.length; i < len; i++) { const item = data?.value[i]; - if (excludeNodes.map(node => node.id).includes(item.id)) { continue; } - if (item.expanded !== true) { excludeNodes = getChildren(item); } - result.push(item); } - return result; }); - } + }; const getIndex = (node: IInnerTreeNode): number => { return data.value.findIndex((item) => item.id === node.id); - } + }; const getNode = (node: IInnerTreeNode): IInnerTreeNode => { return data.value.find((item) => item.id === node.id); - } + }; const setNodeValue = (node: IInnerTreeNode, key: keyof IInnerTreeNode, value: valueof): void => { data.value[getIndex(node)][key] = value; - } + }; const setTree = (newTree: ITreeNode[]): void => { data.value = generateInnerTree(newTree); - } + }; return { getLevel, @@ -79,6 +90,6 @@ export default function(options?){ getNode, setNodeValue, setTree, - } + }; }; } diff --git a/packages/devui-vue/devui/tree/src/core/use-disable.ts b/packages/devui-vue/devui/tree/src/core/use-disable.ts index be0c940161..f663ad0c27 100644 --- a/packages/devui-vue/devui/tree/src/core/use-disable.ts +++ b/packages/devui-vue/devui/tree/src/core/use-disable.ts @@ -1,33 +1,42 @@ import { Ref } from 'vue'; import { IInnerTreeNode, IUseCore } from './use-tree-types'; -export default function(options?) { - return function useDisable(data: Ref, core: IUseCore) { +export interface IUseDisable { + disableSelectNode: (node: IInnerTreeNode) => void; + disableCheckNode: (node: IInnerTreeNode) => void; + disableToggleNode: (node: IInnerTreeNode) => void; + enableSelectNode: (node: IInnerTreeNode) => void; + enableCheckNode: (node: IInnerTreeNode) => void; + enableToggleNode: (node: IInnerTreeNode) => void; +} + +export default function() { + return function useDisable(data: Ref, core: IUseCore): IUseDisable { const { setNodeValue } = core; - + const disableSelectNode = (node: IInnerTreeNode): void => { setNodeValue(node, 'disableSelect', true); - } + }; const disableCheckNode = (node: IInnerTreeNode): void => { setNodeValue(node, 'disableCheck', true); - } + }; const disableToggleNode = (node: IInnerTreeNode): void => { setNodeValue(node, 'disableToggle', true); - } - + }; + const enableSelectNode = (node: IInnerTreeNode): void => { setNodeValue(node, 'disableSelect', false); - } + }; const enableCheckNode = (node: IInnerTreeNode): void => { setNodeValue(node, 'disableCheck', false); - } + }; const enableToggleNode = (node: IInnerTreeNode): void => { setNodeValue(node, 'disableToggle', false); - } + }; return { disableSelectNode, @@ -36,6 +45,6 @@ export default function(options?) { enableSelectNode, enableCheckNode, enableToggleNode, - } + }; }; } 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 daf4388edb..63750b90f3 100644 --- a/packages/devui-vue/devui/tree/src/core/use-operate.ts +++ b/packages/devui-vue/devui/tree/src/core/use-operate.ts @@ -1,11 +1,17 @@ import { Ref } from 'vue'; import { IInnerTreeNode, ITreeNode, IUseCore } from './use-tree-types'; -export default function(options?) { - return function useOperate(data: Ref, core: IUseCore) { +export interface IUseOperate { + insertBefore: (parentNode: ITreeNode, node: ITreeNode, referenceNode: ITreeNode,) => void; + removeNode: (node: ITreeNode) => void; + editNode: (node: IInnerTreeNode, label: string) => void; +} + +export default function () { + return function useOperate(data: Ref, core: IUseCore): IUseOperate { const { setNodeValue, getChildren, getIndex, getLevel } = core; - + const insertBefore = ( parentNode: ITreeNode, node: ITreeNode, @@ -32,26 +38,26 @@ export default function(options?) { }; data.value = data.value.slice(0, insertedIndex) - .concat( - currentNode, - data.value.slice(insertedIndex, data.value.length) - ); - } + .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 => { setNodeValue(node, 'label', label); - } + }; return { insertBefore, removeNode, editNode, - } + }; }; } diff --git a/packages/devui-vue/devui/tree/src/core/use-select.ts b/packages/devui-vue/devui/tree/src/core/use-select.ts index c33da08725..137fa4de25 100644 --- a/packages/devui-vue/devui/tree/src/core/use-select.ts +++ b/packages/devui-vue/devui/tree/src/core/use-select.ts @@ -1,8 +1,14 @@ -import { ref, Ref } from 'vue'; +import { Ref } from 'vue'; import { IInnerTreeNode, IUseCore } from './use-tree-types'; -export default function(options?) { - return function useSelect(data: Ref, core: IUseCore) { +export interface IUseSelect { + selectNode: (node: IInnerTreeNode) => void; + deselectNode: (node: IInnerTreeNode) => void; + toggleSelectNode: (node: IInnerTreeNode) => void; +} + +export default function () { + return function useSelect(data: Ref, core: IUseCore): IUseSelect { const { setNodeValue } = core; let prevActiveNode: IInnerTreeNode; @@ -11,17 +17,17 @@ export default function(options?) { if (node.disableSelect) { return; } if (prevActiveNode) { - const prevActiveNodeIndex = data.value.findIndex(item => item.id === prevActiveNode.id) + const prevActiveNodeIndex = data.value.findIndex(item => item.id === prevActiveNode.id); setNodeValue(data.value[prevActiveNodeIndex], 'selected', false); } - + setNodeValue(node, 'selected', true); prevActiveNode = node; - } + }; const deselectNode = (node: IInnerTreeNode): void => { setNodeValue(node, 'selected', false); - } + }; const toggleSelectNode = (node: IInnerTreeNode): void => { if (node.selected) { @@ -29,12 +35,12 @@ export default function(options?) { } else { selectNode(node); } - } + }; return { selectNode, deselectNode, toggleSelectNode, - } + }; }; } diff --git a/packages/devui-vue/devui/tree/src/core/use-toggle.ts b/packages/devui-vue/devui/tree/src/core/use-toggle.ts index 46e1b69ced..92ea7b6424 100644 --- a/packages/devui-vue/devui/tree/src/core/use-toggle.ts +++ b/packages/devui-vue/devui/tree/src/core/use-toggle.ts @@ -1,21 +1,26 @@ import { Ref } from 'vue'; import { IInnerTreeNode, IUseCore } from './use-tree-types'; -export default function(options?){ - return function useToggle(data: Ref, core: IUseCore) { +export interface IUseToggle { + expandNode: (node: IInnerTreeNode) => void; + collapseNode: (node: IInnerTreeNode) => void; + toggleNode: (node: IInnerTreeNode) => void; +} + +export default function () { + return function useToggle(data: Ref, core: IUseCore): IUseToggle { const { getNode, setNodeValue } = core; const expandNode = (node: IInnerTreeNode): void => { if (node.disableToggle) { return; } setNodeValue(node, 'expanded', true); - } + }; const collapseNode = (node: IInnerTreeNode): void => { if (node.disableToggle) { return; } - setNodeValue(node, 'expanded', false); - } + }; const toggleNode = (node: IInnerTreeNode): void => { if (node.disableToggle) { return; } @@ -25,12 +30,12 @@ export default function(options?){ } else { setNodeValue(node, 'expanded', true); } - } + }; return { expandNode, collapseNode, toggleNode, - } + }; }; } 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 7b5fb5ac86..b2be224449 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 @@ -13,6 +13,7 @@ export interface ITreeNode { disableSelect?: boolean; disableCheck?: boolean; disableToggle?: boolean; + isLeaf?: boolean; } // 内部数据结构使用扁平结构 @@ -27,9 +28,9 @@ export type valueof = T[keyof T]; export interface IUseCore { getLevel: (node: IInnerTreeNode) => number; - getChildren: (node: IInnerTreeNode, config: { - expanded: boolean; - recursive: boolean; + getChildren: (node: IInnerTreeNode, config?: { + expanded?: boolean; + recursive?: boolean; }) => IInnerTreeNode[]; getParent: (node: IInnerTreeNode) => IInnerTreeNode; getExpendedTree: () => ComputedRef; diff --git a/packages/devui-vue/devui/tree/src/core/utils.ts b/packages/devui-vue/devui/tree/src/core/utils.ts index a462ca611e..8968cb7a7e 100644 --- a/packages/devui-vue/devui/tree/src/core/utils.ts +++ b/packages/devui-vue/devui/tree/src/core/utils.ts @@ -2,7 +2,7 @@ import { randomId } from '../../../shared/utils'; import { IInnerTreeNode, ITreeNode } from './use-tree-types'; export function flatToNested(flatTree: IInnerTreeNode[]): ITreeNode[] { - let treeMap = {}; + const treeMap = {}; return flatTree.reduce((acc: ITreeNode[], cur: IInnerTreeNode) => { const { id, parentId } = cur; @@ -23,14 +23,20 @@ export function flatToNested(flatTree: IInnerTreeNode[]): ITreeNode[] { }, []); } +export function omit(obj: T, ...keys: Array): { [key: string]: unknown } { + return Object.entries(obj) + .filter((item) => !keys.includes(item[0])) + .reduce((acc, item) => Object.assign({}, acc, { [item[0]]: item[1] }), {}); +} + /** * 用于生成内部使用的扁平结构，对树的所有操作都是在操作这个内部的扁平结构， * 该数据一旦发生变化，树组件的 UI 即相应变化。 - * + * * @param tree 原始嵌套结构的树数据 * @param key 子节点key，默认为'children' * @returns 扁平结构的树数据 - * + * * 将嵌套结构拍平之后，增加了 * - 'id'：唯一标识一个树节点 * - 'parentId'：父节点 @@ -41,7 +47,7 @@ export function flatToNested(flatTree: IInnerTreeNode[]): ITreeNode[] { export function generateInnerTree( tree: ITreeNode[], key = 'children', - level: number = 0, + level = 0, path: ITreeNode[] = [] ): IInnerTreeNode[] { level++; @@ -75,9 +81,3 @@ export function generateInnerTree( } }, []); } - -export function omit(obj: T, ...keys: Array) { - return Object.entries(obj) - .filter((item) => !keys.includes(item[0])) - .reduce((acc, item) => Object.assign({}, acc, { [item[0]]: item[1] }), {}); -} diff --git a/packages/devui-vue/devui/tree/src/new-tree.tsx b/packages/devui-vue/devui/tree/src/new-tree.tsx index 6fa13305a8..abf16929d0 100644 --- a/packages/devui-vue/devui/tree/src/new-tree.tsx +++ b/packages/devui-vue/devui/tree/src/new-tree.tsx @@ -27,7 +27,7 @@ export default defineComponent({ watch(check, (newVal) => { checkOptions.value.checkStrategy = newVal; - }) + }); if (check.value) { userPlugins.push(useCheck(checkOptions)); From ac6db08d48f772f387b8b45d436cc5c2c4e9cc97 Mon Sep 17 00:00:00 2001 From: gxuud Date: Tue, 19 Apr 2022 20:04:20 +0800 Subject: [PATCH 2/2] =?UTF-8?q?chore(tree):=20=E4=BF=AE=E5=A4=8D=E5=BC=82?= =?UTF-8?q?=E5=B8=B8eslint=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tree/src/core/use-check.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/tree/src/core/use-check.ts b/packages/devui-vue/devui/tree/src/core/use-check.ts index 90b2553489..862717fed3 100644 --- a/packages/devui-vue/devui/tree/src/core/use-check.ts +++ b/packages/devui-vue/devui/tree/src/core/use-check.ts @@ -51,13 +51,13 @@ export default function ( setNodeValue(node, 'checked', false); if (['downward', 'both'].includes(options.value.checkStrategy)) { - getChildren(node, {}).forEach(item => setNodeValue(item, 'checked', false)); + getChildren(node).forEach(item => setNodeValue(item, 'checked', false)); } } else { setNodeValue(node, 'checked', true); if (['downward', 'both'].includes(options.value.checkStrategy)) { - getChildren(node, {}).forEach(item => setNodeValue(item, 'checked', true)); + getChildren(node).forEach(item => setNodeValue(item, 'checked', true)); } }