pqs-9100_client/frontend/src/views/machine/controlSource/components/tree.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>