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

<template>
    <div>
        <div style="transition: all 0.3s; overflow: hidden; height: 100%">
            <div class="cn-tree">
                <div style="display: flex; align-items: center" class="mb10">
                    <el-input maxlength="32" 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"
                    v-bind="$attrs"
                    default-expand-all
                    :data="tree"
                    ref="treRef"
                    @node-click="clickNode"
                    :expand-on-click-node="false"
                >
                    <template #default="{ node, data }">
                        <span class="custom-tree-node">
                            <div class="left" style="display: flex; align-items: center">
                                <Icon
                                    :name="data.icon"
                                    style="font-size: 16px"
                                    :style="{ color: data.color }"
                                    v-if="data.icon"
                                />
                                <span style="margin-left: 5px">{{ node.label }}</span>
                            </div>
                        </span>
                    </template>
                </el-tree>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, nextTick, watch, defineProps, defineEmits } from 'vue'
import { getSchemeTree, getTestRecordInfo } from '@/api/cs-device-boot/planData'
import { useConfig } from '@/stores/config'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
import { useDictData } from '@/stores/dictData'
defineOptions({
    name: 'govern/schemeTree'
})

interface Props {
    template?: boolean
}
const dictData = useDictData()
const props = withDefaults(defineProps<Props>(), {
    template: false
})
const filterText = ref('')
watch(filterText, val => {
    treRef.value!.filter(val)
})

const filterNode = (value: string, data: any, node: any) => {
    if (!value) return true
    // return data.name.includes(value)
    if (data.name) {
        return chooseNode(value, data, node)
    }
}
const chooseNode = (value: string, data: any, node: any) => {
    if (data.name.indexOf(value) !== -1) {
        return true
    }
    const level = node.level
    // 如果传入的节点本身就是一级节点就不用校验了
    if (level === 1) {
        return false
    }
    // 先取当前节点的父节点
    let parentData = node.parent
    // 遍历当前节点的父节点
    let index = 0
    while (index < level - 1) {
        // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
        if (parentData.data.name.indexOf(value) !== -1) {
            return true
        }
        // 否则的话再往上一层做匹配
        parentData = parentData.parent
        index++
    }
    // 没匹配到返回false
    return false
}
/** 树形结构数据 */
const defaultProps = {
    children: 'children',
    label: 'name',
    value: 'id'
}

const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart', 'Policy'])
const config = useConfig()
const tree = ref()
const treRef = ref()
const id: any = ref(null)
const treeData = ref({})
//获取方案树形数据
const getTreeList = () => {
    getSchemeTree().then(res => {
        let arr: any[] = []

        res.data.forEach((item: any) => {
            item.icon = 'el-icon-Menu'
            item.color = config.getColorVal('elementUiPrimary')
            item?.children.forEach((item2: any) => {
                item2.icon = 'el-icon-Document'
                item2.color = config.getColorVal('elementUiPrimary')
                arr.push(item2)
            })
        })
        tree.value = res.data
        nextTick(() => {
            if (arr.length) {
                treRef.value.setCurrentKey(id.value || arr[0].id)
                let list = id.value ? arr.find((item: any) => item.id == id.value) : arr[0]
                // 注册父组件事件
                emit('init', {
                    level: 2,
                    ...list
                })
            } else {
                emit('init')
            }
        })
    })
}

//方案id
const planId: any = ref('')

const clickNode = (e: anyObj) => {
    e?.children ? (planId.value = e.id) : (planId.value = e.pid)
    id.value = e.id
    emit('nodeChange', e)
}

if (props.template) {
    // id: dictData.state.area[0]?.id
    querySysExcel({})
        .then((res: any) => {
            emit('Policy', res.data)
            getTreeList()
        })
        .catch(err => {
            getTreeList()
        })
} else {
    getTreeList()
}
</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%;
    height: calc(100vh - 125px);
    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);
    }

    .menu-collapse {
        color: var(--el-color-primary);
    }
}
</style>