fix: tree.ts 报错,在 dept-tree.vue 无法加载的问题

pull/71/head
YunaiV 2025-04-07 22:47:30 +08:00
parent 17f947016d
commit 5b60c93e4e
2 changed files with 44 additions and 35 deletions

View File

@ -1,61 +1,70 @@
// TODO @芋艿1代码优化2是不是抽到公共的 // todo @芋艿:公用逻辑
interface TreeNode {
[key: string]: any;
children?: TreeNode[];
}
/** /**
* *
*
* @param {*} data * @param {*} data
* @param {*} id id 'id' * @param {*} id id 'id'
* @param {*} parentId 'parentId' * @param {*} parentId 'parentId'
* @param {*} children 'children' * @param {*} children 'children'
*/ */
export const handleTree = ( export const handleTree = (
data: any[], data: TreeNode[],
id?: string, id: string = 'id',
parentId?: string, parentId: string = 'parentId',
children?: string, children: string = 'children'
) => { ): TreeNode[] => {
if (!Array.isArray(data)) { if (!Array.isArray(data)) {
console.warn('data must be an array'); console.warn('data must be an array');
return []; return [];
} }
const config = { const config = {
id: id || 'id', id,
parentId: parentId || 'parentId', parentId,
childrenList: children || 'children', childrenList: children
}; };
const childrenListMap: Record<string | number, TreeNode[]> = {};
const nodeIds: Record<string | number, TreeNode> = {};
const tree: TreeNode[] = [];
const childrenListMap: any = {}; // 1. 数据预处理
const nodeIds: any = {}; // 1.1 第一次遍历,生成 childrenListMap 和 nodeIds 映射
const tree: any[] = [];
for (const d of data) { for (const d of data) {
const parentId = d[config.parentId]; const pId = d[config.parentId];
if (childrenListMap[parentId] === null) { if (childrenListMap[pId] === undefined) {
childrenListMap[parentId] = []; childrenListMap[pId] = [];
} }
nodeIds[d[config.id]] = d; nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d); childrenListMap[pId].push(d);
} }
// 1.2 第二次遍历,找出根节点
for (const d of data) { for (const d of data) {
const parentId = d[config.parentId]; const pId = d[config.parentId];
if (nodeIds[parentId] === null) { if (nodeIds[pId] === undefined) {
tree.push(d); tree.push(d);
} }
} }
for (const t of tree) { // 2. 构建树结:递归构建子节点
adaptToChildrenList(t); const adaptToChildrenList = (node: TreeNode): void => {
} const nodeId = node[config.id];
if (childrenListMap[nodeId]) {
function adaptToChildrenList(o: any) { node[config.childrenList] = childrenListMap[nodeId];
if (childrenListMap[o[config.id]] !== null) { // 递归处理子节点
o[config.childrenList] = childrenListMap[o[config.id]]; for (const child of node[config.childrenList]) {
} adaptToChildrenList(child);
if (o[config.childrenList]) {
for (const c of o[config.childrenList]) {
adaptToChildrenList(c);
} }
} }
};
// 3. 从根节点开始构建完整树
for (const rootNode of tree) {
adaptToChildrenList(rootNode);
} }
return tree; return tree;
}; }

View File

@ -1,11 +1,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { SystemDeptApi } from '#/api/system/dept'; import { type SystemDeptApi} from '#/api/system/dept';
import { Tree, Input, Spin } from 'ant-design-vue'; import { Tree, Input, Spin } from 'ant-design-vue';
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { Search } from '@vben/icons'; import { Search } from '@vben/icons';
import { getDeptList } from '#/api/system/dept'; import { getSimpleDeptList } from '#/api/system/dept';
import { handleTree } from '#/utils/tree'; import { handleTree } from '#/utils/tree';
const emit = defineEmits(['select']); const emit = defineEmits(['select']);
@ -36,7 +36,7 @@ const handleSelect = (_selectedKeys: any[], info: any) => {
onMounted(async () => { onMounted(async () => {
try { try {
loading.value = true; loading.value = true;
const data = await getDeptList(); const data = await getSimpleDeptList();
deptList.value = data; deptList.value = data;
deptTree.value = handleTree(data); deptTree.value = handleTree(data);
} catch (error) { } catch (error) {