admin-sjzx/src/components/tree/pqs/algorithmTree.vue

<template>
    <div class="point-tree">
        <div style="flex: 1; overflow: hidden">
            <Tree
                ref="treeRef"
                :data="tree"
                :canExpand="false"
                style="width: 100%; height: 100%"
                v-bind="$attrs"
                default-expand-all
                @onAddTree="onAddTree"
            />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref, useAttrs } from 'vue'
import Tree from '../index.vue'
import { useAdminInfo } from '@/stores/adminInfo'
import { useDictData } from '@/stores/dictData'
import { useConfig } from '@/stores/config'
import { queryAllAlgorithmLibrary } from '@/api/supervision-boot/database/index'
defineOptions({
    name: 'pms/pointTree'
})
const emit = defineEmits(['init', 'onAddTree'])
const attrs = useAttrs()
const adminInfo = useAdminInfo()
const dictData = useDictData()
const config = useConfig()
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const tree = ref()
const treeRef = ref()

const loadData = (id?: any) => {
   // console.log('🚀 ~ loadData ~ id:', id)
    let nodeKey = ''
    queryAllAlgorithmLibrary().then(res => {
        res.data.forEach((item: any) => {
            item.icon = 'el-icon-FolderOpened'
            item.color = config.getColorVal('elementUiPrimary')
            item.children.forEach((item2: any) => {
                item2.icon = 'el-icon-Document'
                item2.color = config.getColorVal('elementUiPrimary')
                item2.childrens = item2.children
                item2.children = []
                if (item2.id == id) {
                    emit('init', item2)
                }
            })
        })

        nodeKey = res.data[0].children[0].id

        tree.value = res.data
        if (id) {
            setTimeout(() => {
                treeRef.value.treeRef.setCurrentKey(id)
            }, 10)
        } else {
            setTimeout(() => {
                treeRef.value.treeRef.setCurrentKey(nodeKey)
                emit('init', res.data[0].children[0])
            }, 10)
        }
    })
}

const onAddTree = () => {
    emit('onAddTree')
}
const setKey = (id: string) => {
    treeRef.value.treeRef.setCurrentKey(id)
    return findNodeById(tree.value, id)
}
const findNodeById = (tree1: any, targetId: any) => {
    for (const node of tree1) {
        // 1. 当前节点匹配ID，直接返回该节点
        if (node.id === targetId) {
            return node
        }
        // 2. 当前节点有子节点，递归查找子节点
        if (node.children && node.children.length > 0) {
            const result: any = findNodeById(node.children, targetId)
            // 子节点中找到结果，立即返回（终止递归）
            if (result) return result
        }
    }
    // 3. 遍历完未找到，返回null
    return null
}
loadData()
defineExpose({ loadData, setKey })
</script>
<style lang="scss">
.point-tree {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--el-border-color);
}
</style>