<a-directory-tree
v-model:checkedKeys="selectedKeysVal"
style="width: 100%"
:dropdown-style="{
maxHeight: '400px',
overflow: 'auto',
}"
checkable
:tree-data="serverLayerSelect"
:field-names="fieldNames"
@click="getServiceLayerDataEvt"
@select="onCheckEvt"
></a-directory-tree>
const fieldNames: any = {
children: 'children',
title: 'name',
};
const selectedKeysVal: any = ref([]);// 选中选项的数组
//获取最初目录
const serverLayerSelect: Ref<Array<any>> = ref([]);
// 显示目录时调用该函数
const addMapLayerEvt = () => {
serverLayerSelect.value = [];
getSelectCatalogTrees().then((res: any) => {
if (res.code == 200) {
serverLayerSelect.value = res.data.map((it: any) => {
it.disableCheckbox = true;
return it;
});
}
});
};
// 点击目录获取子目录
const getServiceLayerDataEvt = (checkedKeys: any,e: any) => {
if (e.children.length == 0) {
getCatalogLists({ id: e.id }).then((res: any) => {
if (res.code == 200) {
let list = res.data.map((it: any) => {
it.children = it.list;
it.disableCheckbox = true;
return it;
});
e.children = list.map((item: any) => {
item.disableCheckbox = true;
return item;
});
searchTree(serverLayerSelect.value, e.id, list);
}
});
}
}
function searchTree(nodes: any, id: string, list: any) {
for (let _i = 0; _i < nodes.length; _i++) {
if (nodes[_i].id === id) {
nodes[_i].children = list.map((it) => {
it.disableCheckbox = true;
return it;
});
} else {
if (nodes[_i].children && nodes[_i].children.length > 0) {
searchTree(nodes[_i].children, id, list);
}
}
}
}
// 勾选显示
const onCheckEvt = (checkedKeys: string[], e: any) => {
dealData(e.node);
};
const dealData = (data: any) => {
if (data.children) {
for (let i = 0; i < data.children.length; i++) {
const data1 = data.children[i];
if (data1) {
dealData(data1);
}
}
} else {
// 不需要显示勾选的项
if (data.id == '1574318899918864385') {
selectedKeysVal.value = [];
return;
}
if (data.id == '1582940878267809794') {
return;
}
if (!selectedKeysVal.value.includes(data.key)) {
selectedKeysVal.value.push(data.key);
} else {
selectedKeysVal.value.splice(
selectedKeysVal.value.indexOf(data.key),
1,
);
}
}
};