104 lines
3.2 KiB
Vue
104 lines
3.2 KiB
Vue
<template>
|
|
<div class="m-4 mr-0 overflow-hidden bg-white">
|
|
<BasicTree
|
|
title="部门列表"
|
|
ref="asyncExpandTreeRef"
|
|
toolbar
|
|
search
|
|
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
|
|
:clickRowToExpand="false"
|
|
:treeData="treeData"
|
|
:fieldNames="{ key: 'id', title: 'name' }"
|
|
@select="handleSelect"
|
|
:load-data="onLoadData"
|
|
:expandedKeys="expandedKeys"
|
|
:loadedKeys="loadedKeys"
|
|
@expand="expand"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref, nextTick, unref } from 'vue';
|
|
|
|
import { BasicTree, TreeItem, TreeActionType } from '@/components/Tree';
|
|
import { getChildrenTree } from '@/api/demo/system';
|
|
|
|
defineOptions({ name: 'DeptTree' });
|
|
|
|
const emit = defineEmits(['select']);
|
|
|
|
const treeData = ref<TreeItem[]>([]);
|
|
const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
|
|
|
|
async function fetch() {
|
|
treeData.value = (await getChildrenTree({ parentId: 0 })) as unknown as TreeItem[];
|
|
// 展开全部
|
|
nextTick(() => {
|
|
unref(asyncExpandTreeRef)?.filterByLevel(1);
|
|
// unref(asyncExpandTreeRef)?.expandAll(true);
|
|
});
|
|
}
|
|
const expandedKeys = ref<any>([]);
|
|
const loadedKeys = ref<any>([]);
|
|
const firstExpandedKeys = ref<any>([]);
|
|
|
|
const getParentIdList = (list, data) => {
|
|
if (data === undefined || data === null) {
|
|
return list;
|
|
}
|
|
list.unshift(data.key);
|
|
return getParentIdList(list, data.parent);
|
|
};
|
|
function handleSelect(keys) {
|
|
emit('select', keys[0]);
|
|
}
|
|
const expand = (expandIdList, data) => {
|
|
if (data.expanded) {
|
|
let parentIdList = getParentIdList([data.node.key], data.node.parent);
|
|
expandedKeys.value = [...parentIdList];
|
|
loadedKeys.value = [...parentIdList];
|
|
console.log(firstExpandedKeys.value, parentIdList);
|
|
let levelData: any = treeData.value[0];
|
|
console.log(levelData);
|
|
for (let i = 1; i < Math.min(firstExpandedKeys.value.length, parentIdList.length); i++) {
|
|
if (firstExpandedKeys.value[i] === parentIdList[i]) {
|
|
levelData = levelData.children.find((item) => item.id === parentIdList[i]);
|
|
console.log(levelData);
|
|
} else {
|
|
let data = levelData.children.find((item) => item.id === firstExpandedKeys.value[i]);
|
|
data.children = null;
|
|
break;
|
|
}
|
|
}
|
|
firstExpandedKeys.value = parentIdList;
|
|
}
|
|
};
|
|
function onLoadData(treeNode) {
|
|
return new Promise((resolve: (value?: unknown) => void) => {
|
|
if (treeNode.children && treeNode.children.length > 0) {
|
|
resolve();
|
|
return;
|
|
}
|
|
getChildrenTree({ parentId: treeNode.id })
|
|
.then((res) => {
|
|
const asyncTreeAction: TreeActionType | null = unref(asyncExpandTreeRef);
|
|
if (asyncTreeAction) {
|
|
const nodeChildren = res;
|
|
asyncTreeAction.updateNodeByKey(treeNode.eventKey, { children: nodeChildren });
|
|
loadedKeys.value.push(treeNode.eventKey);
|
|
}
|
|
resolve();
|
|
return;
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
resolve();
|
|
return;
|
|
});
|
|
});
|
|
}
|
|
onMounted(() => {
|
|
fetch();
|
|
});
|
|
</script>
|