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

<template>
    <div class="apf-tree">
        <div class="cn-tree" :style="{ height: `calc(100vh - 125px - ${height}px)` }">
            <div style="display: flex; align-items: center" class="mb10">
                <el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
                    <template #prefix>
                        <Icon name="el-icon-Search" style="font-size: 16px" />
                    </template>
                </el-input>
            </div>
            <el-tree style="flex: 1; overflow: auto" :props="defaultProps" highlight-current
                :filter-node-method="filterNode" node-key="id" default-expand-all :data="tree" ref="treRef"
                @node-click="clickNode" :expand-on-click-node="false">
                <template #default="{ node, data: nodeData }">
                    <span class="custom-tree-node">
                        <Icon :name="nodeData.icon" style="font-size: 16px" :style="{ color: nodeData.color }"
                            v-if="nodeData.icon" />
                        <span style="margin-left: 5px">{{ node.label }}</span>
                    </span>
                </template>
            </el-tree>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch, nextTick } from 'vue'
import { ElTree } from 'element-plus'
import { getUserDevTree } from '@/api/cs-device-boot/csLedger'
import { useConfig } from '@/stores/config'
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
import { useDictData } from '@/stores/dictData'
import { createLineTreeDecorators } from './lineTreeUtils'
import { bootstrapWithTemplate } from './treeCommonUtils'
import { createTreeFilterNode } from './treeFilterUtils'

interface Props {
    template?: boolean
    type?: string
    height?: number
}

const props = withDefaults(defineProps<Props>(), { template: false, type: 'apf', height: 0 })

defineOptions({ name: 'govern/APFTree', inheritAttrs: false })

const emit = defineEmits(['init', 'node-click', 'deviceTypeChange', 'Policy'])

const config = useConfig()
const dictData = useDictData()
const tree = ref<any[]>([])
const treRef = ref<InstanceType<typeof ElTree>>()
const filterText = ref('')

const defaultProps = { children: 'children', label: 'governName', value: 'id' }
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
const filterNode = createTreeFilterNode()

watch(filterText, val => treRef.value?.filter(val))

/** 将 { 用户名: 设备[] | null } 转为两级树 */
function transformUserDevTree(data: Record<string, any[] | null>) {
    const nodes: any[] = []
    const devices: any[] = []
    const { primary, statusColor, applyMeta } = decorators

    if (!data || typeof data !== 'object') {
        return { nodes, devices }
    }

    Object.entries(data).forEach(([userName, deviceList]) => {
        const hasDevices = Array.isArray(deviceList) && deviceList.length > 0
        const userId = hasDevices ? deviceList[0]?.monitorUser || userName : `apf-user-${userName}`

        const children = hasDevices
            ? deviceList.map((device: any) => {
                const node = {
                    ...device,
                    level: 2,
                    pid: userId,
                    pname: userName,
                   
                }
                applyMeta(node, {
                    icon: 'el-icon-Document',
                    color: primary(), 
                })
                devices.push(node)
                return node
            })
            : undefined

        const userNode: any = {
            id: userId,
            governName: userName,
            level: 1,
            ...(children ? { children } : {})
        }
        applyMeta(userNode, { icon: 'el-icon-User', color: primary(), disabled: true })
        nodes.push(userNode)
    })

    return { nodes, devices }
}

async function selectFirstDevice(devices: any[]) {
    const node = devices[0]
    if (!node) {
        emit('init', { ...node })
        return
    }

    await nextTick()
    treRef.value?.setCurrentKey(node.id)
    emit('init', { level: 2, ...node })
}

async function loadTree() {
    tree.value = []
    const res = await getUserDevTree({ type: props.type })
    const { nodes, devices } = transformUserDevTree(res.data)
    tree.value = nodes
    await selectFirstDevice(devices)
}

const clickNode = (node: any) => {
    if (node?.children?.length) return
    emit('node-click', node)
}

bootstrapWithTemplate(
    props.template,
    loadTree,
    () => querySysExcel({ id: dictData.state.area[0]?.id }),
    data => emit('Policy', data)
)

watch(() => props.type, () => {
    loadTree()
})
</script>

<style lang="scss" scoped>
.apf-tree {
    width: 280px;
    flex-shrink: 0;
}

.cn-tree {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 10px;

    overflow-y: auto;

    :deep(.el-tree) {
        border: 1px solid var(--el-border-color);
    }

    :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
        background-color: var(--el-color-primary-light-7);
    }

    .custom-tree-node {
        display: flex;
    }
}
</style>