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

<!-- 设备管理使用折叠面板渲染多个tree -->
<template>
    <div
        :style="{ width: menuCollapse ? '40px' : props.width }"
        style="display: flex; transition: all 0.3s; overflow: hidden"
    >
        <Icon
            v-show="menuCollapse"
            @click="onMenuCollapse"
            :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
            :class="menuCollapse ? 'unfold' : ''"
            size="18"
            class="fold ml10 mt20 menu-collapse"
            style="cursor: pointer"
        />
        <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
            <div style="display: flex; align-items: center" class="mb10">
                <el-input v-model="filterText" placeholder="请输入内容" clearable>
                    <template #prefix>
                        <Icon name="el-icon-Search" style="font-size: 16px" />
                    </template>
                </el-input>
                <Icon
                    @click="onMenuCollapse"
                    :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
                    :class="menuCollapse ? 'unfold' : ''"
                    size="18"
                    class="fold ml10 menu-collapse"
                    style="cursor: pointer"
                    v-if="props.canExpand"
                />
            </div>

            <el-collapse accordion v-model="activeName" style="flex: 1; height: 100%" @change="changeDevice">
                <el-collapse-item title="治理设备" :name="0">
                    <el-tree
                        style="height: calc(100vh - 350px); overflow: auto"
                        ref="treeRef1"
                        :props="defaultProps"
                        highlight-current
                        :filter-node-method="filterNode"
                        node-key="id"
                        default-expand-all
                        v-bind="$attrs"
                        :data="zlDeviceData"
                    >
                        <template #default="{ node, data }">
                            <span class="custom-tree-node">
                                <Icon
                                    :name="data.icon"
                                    style="font-size: 16px"
                                    :style="{ color: data.color }"
                                    v-if="data.icon"
                                />
                                <span style="margin-left: 4px">{{ node.label }}</span>
                            </span>
                        </template>
                    </el-tree>
                </el-collapse-item>
                <el-collapse-item title="便携式设备" :name="1">
                    <el-tree
                        style="height: calc(100vh - 290px); overflow: auto"
                        ref="treeRef2"
                        :props="defaultProps"
                        highlight-current
                        default-expand-all
                        :filter-node-method="filterNode"
                        node-key="id"
                        :data="bxsDeviceData"
                        v-bind="$attrs"
                    >
                        <template #default="{ node, data }">
                            <span class="custom-tree-node">
                                <Icon
                                    :name="data.icon"
                                    style="font-size: 16px"
                                    :style="{ color: data.color }"
                                    v-if="data.icon"
                                />
                                <span style="margin-left: 4px">{{ node.label }}</span>
                            </span>
                        </template>
                    </el-tree>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script lang="ts" setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { ref, watch } from 'vue'

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

interface Props {
    width?: string
    canExpand?: boolean
    type?: string
    data?: any
}

const props = withDefaults(defineProps<Props>(), {
    width: '280px',
    canExpand: true,
    type: '',
    data: []
})
const { proxy } = useCurrentInstance()
const menuCollapse = ref(false)
const activeName = ref(0)
const filterText = ref('')
const defaultProps = {
    label: 'name',
    value: 'id'
}
//治理设备数据
const zlDeviceData = ref([])
//便携式设备数据
const bxsDeviceData = ref([])
watch(
    () => props.data,
    (val, oldVal) => {
        if (val && val.length != 0) {
            val.map((item: any) => {
                if (item.name == '治理设备') {
                    item.children.map((vv: any) => {
                        zlDeviceData.value.push(vv)
                    })
                } else if (item.name == '便携式设备') {
                    item.children.map((vv: any) => {
                        bxsDeviceData.value.push(vv)
                    })
                }
            })
        }
    },
    {
        immediate: true,
        deep: true
    }
)

watch(filterText, val => {
    if (activeName.value == 0) {
        treeRef1.value!.filter(val)
    } else {
        treeRef2.value!.filter(val)
    }
})
const onMenuCollapse = () => {
    menuCollapse.value = !menuCollapse.value
    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
}
const filterNode = (value: string, data: any) => {
    if (!value) return true
    return data.name.includes(value)
}

const changeDevice = (val: any) => {
    let arr1: any = []
    zlDeviceData.value.forEach((item: any) => {
        item.children.forEach((item2: any) => {
            item2.children.forEach((item3: any) => {
                arr1.push(item3)
            })
        })
    })
    let arr2: any = []
    bxsDeviceData.value.forEach((item: any) => {
        // item.children.forEach((item2: any) => {
        arr2.push(item)
        // })
    })
    if (val == 0) {
        arr2.map(item => {
            item.checked = false
        })
        treeRef1.value.setCurrentKey(arr1[0].id)
    } else {
        arr1.map(item => {
            item.checked = false
        })
        treeRef2.value.setCurrentKey(arr2[0].id)
    }
}
//治理
const treeRef1 = ref<InstanceType<typeof ElTree>>()
//便携式
const treeRef2 = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef1, treeRef2 })
</script>

<style lang="scss" scoped>
.cn-tree {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 10px;
    height: 100%;
    width: 100%;

    :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);
    }

    .menu-collapse {
        color: var(--el-color-primary);
    }
}

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