canrd-outside / order-erp-front · Commits

Commit 5ad93c6004026489bd22b32ef049f7c63efc1024

Authored by chengj
Committed by GitHub
1 parent ce7f382b

feat(function): get selected tree node (#1857)

Inline Side-by-side
Showing 4 changed files with 34 additions and 1 deletions
src/components/Tree/src/Tree.vue
  View file @5ad93c6
... ... @@ -119,6 +119,7 @@
119 119 getAllKeys,
120 120 getChildrenKeys,
121 121 getEnabledKeys,
  122 + getSelectedNode,
122 123 } = useTree(treeDataRef, getFieldNames);
123 124  
124 125 function getIcon(params: Recordable, icon?: string) {
... ... @@ -320,6 +321,7 @@
320 321 insertNodesByKey,
321 322 deleteNodeByKey,
322 323 updateNodeByKey,
  324 + getSelectedNode,
323 325 checkAll,
324 326 expandAll,
325 327 filterByLevel: (level: number) => {
... ...
src/components/Tree/src/tree.ts
  View file @5ad93c6
... ... @@ -185,4 +185,9 @@ export interface TreeActionType {
185 185 updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
186 186 setSearchValue: (value: string) => void;
187 187 getSearchValue: () => string;
  188 + getSelectedNode: (
  189 + key: KeyType,
  190 + treeList?: TreeItem[],
  191 + selectNode?: TreeItem | null,
  192 + ) => TreeItem | null;
188 193 }
... ...
src/components/Tree/src/useTree.ts
  View file @5ad93c6
1   -import type { InsertNodeParams, KeyType, FieldNames } from './tree';
  1 +import type { InsertNodeParams, KeyType, FieldNames, TreeItem } from './tree';
2 2 import type { Ref, ComputedRef } from 'vue';
3 3 import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
4 4  
... ... @@ -176,6 +176,23 @@ export function useTree(treeDataRef: Ref&lt;TreeDataItem[]&gt;, getFieldNames: Compute
176 176 }
177 177 }
178 178 }
  179 +
  180 + // Get selected node
  181 + function getSelectedNode(key: KeyType, list?: TreeItem[], selectedNode?: TreeItem | null) {
  182 + if (!key && key !== 0) return null;
  183 + const treeData = list || unref(treeDataRef);
  184 + treeData.forEach((item) => {
  185 + if (selectedNode?.key || selectedNode?.key === 0) return selectedNode;
  186 + if (item.key === key) {
  187 + selectedNode = item;
  188 + return;
  189 + }
  190 + if (item.children && item.children.length) {
  191 + selectedNode = getSelectedNode(key, item.children, selectedNode);
  192 + }
  193 + });
  194 + return selectedNode || null;
  195 + }
179 196 return {
180 197 deleteNodeByKey,
181 198 insertNodeByKey,
... ... @@ -185,5 +202,6 @@ export function useTree(treeDataRef: Ref&lt;TreeDataItem[]&gt;, getFieldNames: Compute
185 202 getAllKeys,
186 203 getChildrenKeys,
187 204 getEnabledKeys,
  205 + getSelectedNode,
188 206 };
189 207 }
... ...
src/views/demo/tree/ActionTree.vue
  View file @5ad93c6
... ... @@ -13,6 +13,7 @@
13 13 <a-button @click="handleGetCheckData" class="mr-2"> 获取勾选数据 </a-button>
14 14 <a-button @click="handleSetSelectData" class="mr-2"> 设置选中数据 </a-button>
15 15 <a-button @click="handleGetSelectData" class="mr-2"> 获取选中数据 </a-button>
  16 + <a-button @click="handleGetSelectNode" class="mr-2"> 获取选中节点 </a-button>
16 17  
17 18 <a-button @click="handleSetExpandData" class="mr-2"> 设置展开数据 </a-button>
18 19 <a-button @click="handleGetExpandData" class="mr-2"> 获取展开数据 </a-button>
... ... @@ -69,6 +70,12 @@
69 70 createMessage.success(JSON.stringify(keys));
70 71 }
71 72  
  73 + function handleGetSelectNode() {
  74 + const keys = getTree().getSelectedKeys();
  75 + const node = getTree().getSelectedNode(keys[0]);
  76 + createMessage.success(node !== null ? JSON.stringify(node) : null);
  77 + }
  78 +
72 79 function handleSetExpandData() {
73 80 getTree().setExpandedKeys(['0-0']);
74 81 }
... ... @@ -120,6 +127,7 @@
120 127 handleGetSelectData,
121 128 handleSetExpandData,
122 129 handleGetExpandData,
  130 + handleGetSelectNode,
123 131 appendNodeByKey,
124 132 deleteNodeByKey,
125 133 updateNodeByKey,
... ...