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-change="handleCheckChange"
    >
        <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 } 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 activeName = ref('')
const childActiveName = ref('')
const activeIndex = ref()
const handleNodeClick = (data, node) => {
    console.log('handleNodeClick', props.treeData)
    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) {
        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)) {
    //         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
}

function handleCheckChange(data, checked) {
  if (checked) {
    // Uncheck all other nodes
    console.log('handleCheckChange', data.id)
    props.treeData.forEach((node) => {
      if (node.id !== data.id) {
        node.checked = false;
      }
    });
  }
}
// // 对外映射
// 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>