pqs-9100_client/frontend/src/views/machine/testScript/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"
        @node-click="handleNodeClick"
    >
        <template #default="{ node, data }">
            <el-tooltip effect="dark" :content="data.scriptTypeName || data.sourceDesc" 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 } from 'vue'

import { CheckData } from '@/api/check/interface'
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 handleNodeClick = (data, node) => {
    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()
    // 获取当前节点的直接父节点

    emit('setTab', {
        activeName: parents[0].scriptTypeCode,
        childActiveName: findTargetCodes(parents, code)[0] || ''
    })
}
// 返回父级
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)) {
    //         console.log("🚀 ~ findTargetCodes ~ targetCodes.includes(item.scriptTypeCode):",item.scriptTypeCode, 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
}

onMounted(() => {})
// // 对外映射
// defineExpose({ init })
</script>
<style lang="scss" scoped>
.custom-tree-node {
    max-width: 230px;
    overflow-x: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
</style>