<script setup>
|
import { ref, onMounted, reactive, nextTick, watch } from "vue";
|
import { getSiteList } from "@/api/common";
|
import { formatAreaTree } from "@/utils/tree";
|
import { format } from "echarts";
|
import { useRoute, useRouter } from "vue-router";
|
const route = useRoute();
|
const router = useRouter();
|
|
const emit = defineEmits(["itemClick"]);
|
const defaultProps = reactive({
|
children: "children",
|
label: "label",
|
});
|
|
const treeRef = ref();
|
const data = ref([]);
|
const defaultSelect = ref([1]);
|
|
const currentId = ref();
|
|
onMounted(() => {
|
getTree();
|
});
|
|
watch(
|
() => currentId.value,
|
() => {
|
treeRef.value.setCurrentKey(currentId.value);
|
}
|
);
|
|
function setCurrent(val) {
|
currentId.value = val;
|
treeRef.value.setCurrentKey(currentId.value);
|
|
}
|
|
function handleNodeClick(data, node, event) {
|
console.log(data);
|
if (data.children) {
|
treeRef.value.setCurrentKey(currentId.value);
|
return;
|
} else {
|
|
// 设置当前点击的叶子节点为选中状态
|
currentId.value = node.data.id;
|
console.log('点击了叶子节点:', data.label, node.data.id);
|
}
|
emit("itemClick", data);
|
}
|
|
// 查找第一个叶子节点的函数
|
function findFirstLeafNode(data) {
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i];
|
if (!node.children || node.children.length === 0) {
|
return node.id || node.stationId;
|
}
|
const leafId = findFirstLeafNode(node.children);
|
if (leafId) {
|
return leafId;
|
}
|
}
|
return null;
|
}
|
|
async function getTree() {
|
try {
|
const res = await getSiteList();
|
let _data = [];
|
if (res.code === 1 && res.data) {
|
_data = res.data2;
|
}
|
console.log('_data', _data, '=============');
|
|
const treeList = formatAreaTree(_data);
|
console.log(treeList, "treeList");
|
data.value = treeList;
|
await nextTick();
|
const firstLeafId = currentId.value || findFirstLeafNode(treeList);
|
|
if (firstLeafId) {
|
const node = treeRef.value.getNode(firstLeafId);
|
expandParentNodes(firstLeafId);
|
treeRef.value.setCurrentKey(firstLeafId);
|
// treeRef.value.setCurrentNode(node);
|
|
handleNodeClick(node.data, node, treeRef.value);
|
|
// handleNodeClick(node.data);
|
}
|
} catch (e) {
|
console.log(e);
|
}
|
}
|
|
|
const expandParentNodes = (nodeId) => {
|
if (treeRef.value) {
|
const node = treeRef.value.getNode(nodeId);
|
node.expanded = true;
|
// const expandedKeys = [];
|
function expandParents(currentNode) {
|
if (currentNode.parent) {
|
// expandedKeys.push(currentNode.parent.data.id);
|
currentNode.parent.expanded = true;
|
expandParents(currentNode.parent);
|
}
|
}
|
expandParents(node);
|
// const currentExpandedKeys = treeRef.value.getExpandedKeys();
|
// const newExpandedKeys = [...new Set([...currentExpandedKeys, ...expandedKeys])];
|
// treeRef.value.setExpandedKeys(newExpandedKeys);
|
}
|
}
|
|
defineExpose({ setCurrent });
|
|
</script>
|
|
<template>
|
<el-scrollbar>
|
<el-tree
|
style="max-width: 600px"
|
ref="treeRef"
|
:data="data"
|
:props="defaultProps"
|
node-key="id"
|
:expand-on-click-node="false"
|
:default-checked-keys="defaultSelect"
|
@node-click="handleNodeClick"
|
/>
|
</el-scrollbar>
|
</template>
|
|
<style scoped lang="less"></style>
|
