admin-govern/src/components/tree/govern/deviceTree.vue

<template>
    <Tree
        ref="treRef"
        @check-change="handleCheckChange"
        :default-checked-keys="defaultCheckedKeys"
        :show-checkbox="props.showCheckbox"
        :data="tree"
        :height="props.height"
        @changeDeviceType="changeDeviceType"
        @changeTreeType="loadTree"
        :engineering="props.engineering"
        leaf-mode="device"
    />
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { throttle } from 'lodash'
import Tree from '../device.vue'
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
import { useConfig } from '@/stores/config'
import { waitForTreeRef, type TreeRefKey } from './lineTreeUtils'
import { createLineTreeDecorators } from './lineTreeUtils'
import { decorateDeviceTree } from './deviceTreeUtils'
import type { LineTreeLeaves } from './lineTreeUtils'

defineOptions({ name: 'govern/deviceTree' })

const props = withDefaults(
    defineProps<{
        showCheckbox?: boolean
        defaultCheckedKeys?: any[]
        height?: number
        engineering?: boolean
    }>(),
    {
        showCheckbox: false,
        defaultCheckedKeys: () => [],
        height: 0,
        engineering: false
    }
)

const emit = defineEmits(['init', 'checkChange', 'deviceTypeChange'])

const config = useConfig()
const tree = ref<any[]>([])
const treRef = ref<InstanceType<typeof Tree>>()
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))

const changeDeviceType = (val: any, obj: any) => emit('deviceTypeChange', val, obj)

async function selectInitialNode(type: string | undefined, leaves: LineTreeLeaves) {
    const candidates: { refKey: TreeRefKey; list: any[]; level: number }[] =
        type === '2'
            ? [{ refKey: 'treeRef4', list: leaves.engineering, level: 2 }]
            : [
                  { refKey: 'treeRef1', list: leaves.govern, level: 2 },
                  { refKey: 'treeRef2', list: leaves.portable, level: 2 },
                  { refKey: 'treeRef3', list: leaves.monitor, level: 2 }
              ]

    for (const { refKey, list, level } of candidates) {
        const node = list[0]
        if (!node) continue
        const treeInstance = await waitForTreeRef(treRef.value, refKey)
        treeInstance?.setCurrentKey(node.id)
        emit('init', { level, ...node })
        return
    }
    emit('init')
}

const loadTree = (type?: string) => {
    getDeviceTree({ type: type === '2' ? 'engineering' : '' }).then(res => {
        const leaves = decorateDeviceTree(res.data, type, decorators)
        tree.value = res.data
        selectInitialNode(type, leaves)
    })
}

onMounted(() => loadTree(props.engineering ? '2' : '1'))

const handleCheckChange = throttle(
    (data: any, checked: any, indeterminate: any) => {
        emit('checkChange', { data, checked, indeterminate })
    },
    300,
    { leading: true, trailing: false }
)

defineExpose({ treRef })
</script>