admin-sjzx/src/components/tree/index.vue

<template>
    <div :style="{ width: menuCollapse ? '40px' : props.width }" style="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
                    maxlength="10"
                    show-word-limit
                    @input="change"
                >
                    <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"
                />
                <el-button icon="el-icon-Plus" v-if="props.addTree" type="primary" class="ml10" @click="onAddTree">
                    新增
                </el-button>
            </div>
            <el-tree
                style="flex: 1; overflow: auto"
                ref="treeRef"
                :props="defaultProps"
                highlight-current
                :filter-node-method="filterNode"
                node-key="id"
                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"
                        />

                        <el-tooltip
                            class="box-item"
                            effect="customized"
                            placement="bottom-start"
                            :offset="0"
                            v-if="data.level == 6"
                        >
                            <template #content>
                                <el-button type="primary" plain @click="viewDetails(data)">
                                    {{ data.level == 3 ? '变电站详情' : '监测点详情' }}
                                </el-button>
                            </template>
                            <span style="margin-left: 4px">{{ node.label }}</span>
                        </el-tooltip>
                        <span v-else style="margin-left: 4px">{{ node.label }}</span>
                    </span>
                </template>
            </el-tree>
        </div>
        <!-- 变电站详情 -->
        <SubstationDetails ref="SubstationRef" />
        <!-- 监测点详情 -->
        <MonitoringPointDetails ref="MonitoringPointRef" />
    </div>
</template>

<script lang="ts" setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { ref, watch, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import MonitoringPointDetails from './details/monitoringPointDetails.vue'
import SubstationDetails from './details/substationDetails.vue'

defineOptions({
    name: 'govern/tree'
})
const emit = defineEmits(['onAddTree'])
interface Props {
    width?: string
    canExpand?: boolean
    addTree?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    width: '280px',
    canExpand: true,
    addTree: false
})
const { proxy } = useCurrentInstance()
const menuCollapse = ref(false)
const MonitoringPointRef = ref()
const SubstationRef = ref()
const filterText = ref('')
const treeRef = ref()
const defaultProps = {
    label: 'name',
    value: 'id'
}
const specialCharsPattern = /[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g
const change = val => {
    if (specialCharsPattern.test(val)) {
        ElMessage.warning('禁止输入特殊字符!')
        filterText.value = val.replace(
            /[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g,
            ''
        )
        console.log('🚀 ~ change ~ filterText.value:', filterText.value)

        treeRef.value!.filter(filterText.value)
    } else {
        treeRef.value!.filter(filterText.value)
    }
}
// watch(filterText, val => {

//     console.log("🚀 ~ val:", specialCharsPattern.test(val))
//     if (specialCharsPattern.test(val)) {
//         ElMessage.warning('禁止输入特殊字符!')
//         filterText.value = val.replace(/[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g, "")
//         console.log("🚀 ~   filterText.value:",   filterText.value)
//         treeRef.value!.filter(filterText.value)
//     }else{
//         treeRef.value!.filter(filterText.value)
//     }

// })
const onMenuCollapse = () => {
    menuCollapse.value = !menuCollapse.value
    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
}
// 查看详情
const viewDetails = (data: any) => {
    console.log('🚀 ~ viewDetails ~ data:', data)
    if (data.level == 3) {
        // 变电站详情
        // substationDetails
        SubstationRef.value.open(data)
    } else {
        // 监测点详情
        MonitoringPointRef.value.open(data)
    }

    // proxy.eventBus.emit('viewDetails', data)
}
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)
    }
}

// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
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
}

onMounted(async () => {
    // 等待树渲染完成
    await nextTick()
    // 可以等待更长时间确保树完全展开
})

const scrollToNode = (id: string) => {
    console.log("🚀 ~ scrollToNode ~ id:", id)
    if (!treeRef.value) return

    // 获取目标节点的元素
    const targetNode = treeRef.value.getNode(id)
    if (!targetNode) return

    // 获取节点的DOM元素
    const nodeElement = document.querySelector(`[data-key="${id}"]`)
    if (nodeElement) {
        // 滚动到节点位置
        nodeElement.scrollIntoView({
            behavior: 'smooth', // 平滑滚动
            block: 'center', // 垂直方向居中
            inline: 'nearest' // 水平方向最近
        })

        // 如果需要高亮当前节点
        treeRef.value.setCurrentKey(id)
    }
}
// 添加树
const onAddTree = () => {
    emit('onAddTree')
}
defineExpose({ treeRef, scrollToNode })
</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>
<style>
.el-popper.is-customized {
    /* Set padding to ensure the height is 32px */
    padding: 0;
    background: var(--el-color-primary-light-3);
}

.el-popper.is-customized .el-popper__arrow::before {
    background: var(--el-color-primary-light-3);
    right: 0;
    display: none;
}
</style>