fix: tree.ts 报错,在 dept-tree.vue 无法加载的问题
parent
17f947016d
commit
5b60c93e4e
|
@ -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;
|
||||||
};
|
}
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in New Issue