166 lines
4.8 KiB
Vue
166 lines
4.8 KiB
Vue
<template>
|
||
<el-tree
|
||
node-key="id"
|
||
default-expand-all
|
||
:data="props.treeData"
|
||
:props="defaultProps"
|
||
style="width: 100%"
|
||
:expand-on-click-node="false"
|
||
:highlight-current="true"
|
||
@node-click="handleNodeClick"
|
||
show-checkbox
|
||
:check-strictly="true"
|
||
@check-change="handleCheckChange"
|
||
ref="treeRef"
|
||
>
|
||
<template #default="{ node, data }">
|
||
<el-tooltip effect="dark" :content="data.sourceDesc || data.scriptTypeName" placement="top" :hide-after="0">
|
||
<div class="custom-tree-node">
|
||
{{ data.scriptTypeName || data.sourceDesc }}
|
||
</div>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-tree>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
|
||
|
||
import { CheckData } from '@/api/check/interface'
|
||
import { da } from 'element-plus/es/locale'
|
||
import { on } from 'events'
|
||
const props = defineProps({
|
||
treeData: {
|
||
type: Array,
|
||
required: true
|
||
}
|
||
|
||
})
|
||
const emit = defineEmits(['setTab'])
|
||
const dataTree = ref<CheckData.TreeItem[]>([])
|
||
const defaultProps = {
|
||
children: 'children',
|
||
label: 'scriptTypeName',
|
||
pid: 'pid'
|
||
}
|
||
const activeName = ref('')
|
||
const childActiveName = ref('')
|
||
const activeIndex = ref()
|
||
const treeRef = ref()
|
||
const handleNodeClick = (data, node) => {
|
||
if(data.index!= null){
|
||
let code = ['Base', 'VOL', 'Freq', 'Harm', 'Base_0_10', 'Base_20_85', 'Base_110_200']
|
||
const parents = getParentNodes(node, [])
|
||
parents.pop()
|
||
parents.unshift(node.data)
|
||
parents.reverse()
|
||
let active = parents[0].scriptTypeCode
|
||
let childActive = findTargetCodes(parents, code)[0] || ''
|
||
// 获取当前节点的直接父节点
|
||
if (activeName.value != active || childActiveName.value != childActive || activeIndex.value != data.index) {
|
||
activeName.value = active
|
||
childActiveName.value = childActive
|
||
emit('setTab', {
|
||
activeName: active,
|
||
childActiveName: childActive,
|
||
activeIndex:data.index
|
||
})
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
|
||
// 返回父级
|
||
const getParentNodes = (node, parents) => {
|
||
if (node.parent) {
|
||
// 将父节点添加到数组中
|
||
parents.push(node.parent.data)
|
||
// 递归获取更高层级的父节点
|
||
getParentNodes(node.parent, parents)
|
||
}
|
||
return parents
|
||
}
|
||
// 判断childActiveName值
|
||
function findTargetCodes(data: any[], targetCodes: string[]) {
|
||
let result: string[] = []
|
||
data.forEach(item => {
|
||
if (item.scriptTypeCode != null) {
|
||
if (targetCodes.includes(item.scriptTypeCode)) {
|
||
result.push(item.scriptTypeCode)
|
||
}
|
||
}
|
||
})
|
||
return result
|
||
// for (let item of data) {
|
||
// // 判断当前项的 scriptTypeCode 是否包含目标值
|
||
// if (item.scriptTypeCode !=null && targetCodes.includes(item.scriptTypeCode)) {
|
||
// result.push(item.scriptTypeCode)
|
||
// return result
|
||
// }
|
||
// // 如果存在 children，递归检查
|
||
// if (item.children && item.children.length > 0) {
|
||
// result = result.concat(findTargetCodes(item.children, targetCodes))
|
||
// }
|
||
// }
|
||
// return result
|
||
}
|
||
|
||
function handleCheckChange(data,isChecked) {
|
||
if (isChecked)
|
||
{
|
||
// 如果没有子节点，允许勾选
|
||
const checked = [data.id]; // id为tree的node-key属性
|
||
treeRef.value?.setCheckedKeys(checked);
|
||
emit('setTab', {
|
||
activeName: data.scriptType,
|
||
childActiveName: data.scriptTypeCode,
|
||
activeIndex:data.index
|
||
})
|
||
}
|
||
}
|
||
|
||
|
||
// 递归查找第一个节点的最后一层子节点
|
||
function findFirstLeafNode(node: any): any {
|
||
if (node.children && node.children.length > 0) {
|
||
return findFirstLeafNode(node.children[0]);
|
||
}
|
||
return node;
|
||
}
|
||
|
||
const checkTree = () => {
|
||
console.log('checkTree11')
|
||
console.log('checkTree22',props.treeData.length)
|
||
console.log('checkTree33',treeRef.value)
|
||
if (props.treeData.length > 0 && treeRef.value) {
|
||
console.log('checkTree44')
|
||
const firstNode = props.treeData[0];
|
||
const firstLeafNode = findFirstLeafNode(firstNode);
|
||
const firstLeafNodeId = firstLeafNode.id;
|
||
treeRef.value.setCheckedKeys([firstLeafNodeId]);
|
||
}
|
||
}
|
||
|
||
// 确保在组件挂载后也执行一次
|
||
onMounted(() => {
|
||
console.log('onMounted',props.treeData);
|
||
nextTick(() => {
|
||
checkTree()
|
||
});
|
||
});
|
||
|
||
|
||
|
||
|
||
// // 对外映射
|
||
defineExpose({ checkTree })
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.custom-tree-node {
|
||
max-width: 230px;
|
||
overflow-x: hidden !important;
|
||
white-space: nowrap !important;
|
||
text-overflow: ellipsis !important;
|
||
}
|
||
</style>
|