149 lines
4.0 KiB
Vue
149 lines
4.0 KiB
Vue
<template>
|
|
<div class="menu-path-selector">
|
|
<el-input
|
|
:model-value="modelValue"
|
|
placeholder="点击从菜单中选择路径，或手动输入"
|
|
clearable
|
|
@input="$emit('update:modelValue', $event)"
|
|
>
|
|
<template #append>
|
|
<el-button @click="dialogVisible = true">
|
|
<el-icon><FolderOpened /></el-icon>
|
|
</el-button>
|
|
</template>
|
|
</el-input>
|
|
|
|
<el-dialog v-model="dialogVisible" title="选择菜单路径" width="550px" append-to-body>
|
|
<el-input v-model="searchKey" placeholder="搜索菜单名称或路径" clearable class="path-search">
|
|
<template #prefix>
|
|
<el-icon><Search /></el-icon>
|
|
</template>
|
|
</el-input>
|
|
<div class="menu-tree">
|
|
<el-tree
|
|
:data="filteredMenuTree"
|
|
:props="{ label: 'label', children: 'children' }"
|
|
node-key="path"
|
|
:default-expand-all="!!searchKey"
|
|
:expand-on-click-node="false"
|
|
highlight-current
|
|
@node-click="handleNodeClick"
|
|
>
|
|
<template #default="{ data }">
|
|
<div class="tree-node" :class="{ 'is-selected': modelValue === data.path, 'no-path': !data.path }">
|
|
<el-icon v-if="data.icon" :size="16" style="margin-right: 6px; flex-shrink: 0;">
|
|
<component :is="data.icon" />
|
|
</el-icon>
|
|
<span class="node-title">{{ data.title }}</span>
|
|
<el-tag v-if="data.path" size="small" type="info" class="node-path">{{ data.path }}</el-tag>
|
|
</div>
|
|
</template>
|
|
</el-tree>
|
|
</div>
|
|
<div v-if="filteredMenuTree.length === 0" class="tree-empty">
|
|
未找到匹配的菜单
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { Search, FolderOpened } from '@element-plus/icons-vue'
|
|
import { menus } from '@/config/menus'
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: String, default: '' }
|
|
})
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const dialogVisible = ref(false)
|
|
const searchKey = ref('')
|
|
|
|
const buildTreeData = (menuList) => {
|
|
return menuList.map(item => {
|
|
const node = {
|
|
path: item.path || '',
|
|
title: item.title,
|
|
icon: item.icon || '',
|
|
label: item.title
|
|
}
|
|
if (item.children?.length) {
|
|
node.children = buildTreeData(item.children)
|
|
}
|
|
return node
|
|
})
|
|
}
|
|
|
|
const menuTree = computed(() => buildTreeData(menus))
|
|
|
|
const filterTree = (nodes, keyword) => {
|
|
const key = keyword.toLowerCase()
|
|
const result = []
|
|
for (const node of nodes) {
|
|
const titleMatch = node.title?.toLowerCase().includes(key)
|
|
const pathMatch = node.path?.toLowerCase().includes(key)
|
|
let filteredChildren = []
|
|
if (node.children?.length) {
|
|
filteredChildren = filterTree(node.children, keyword)
|
|
}
|
|
if (titleMatch || pathMatch || filteredChildren.length > 0) {
|
|
result.push({
|
|
...node,
|
|
children: filteredChildren.length > 0 ? filteredChildren : node.children
|
|
})
|
|
}
|
|
}
|
|
return result
|
|
}
|
|
|
|
const filteredMenuTree = computed(() => {
|
|
if (!searchKey.value) return menuTree.value
|
|
return filterTree(menuTree.value, searchKey.value)
|
|
})
|
|
|
|
const handleNodeClick = (data) => {
|
|
if (!data.path) return
|
|
emit('update:modelValue', data.path)
|
|
dialogVisible.value = false
|
|
searchKey.value = ''
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.menu-path-selector { width: 100%; }
|
|
.path-search { margin-bottom: 12px; }
|
|
.menu-tree {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 4px;
|
|
padding: 8px 0;
|
|
}
|
|
.tree-node {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 2px 4px;
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
}
|
|
.tree-node.is-selected {
|
|
background: #ecf5ff;
|
|
color: #409eff;
|
|
}
|
|
.tree-node.no-path {
|
|
color: #909399;
|
|
cursor: default;
|
|
}
|
|
.node-title { margin-right: 8px; font-size: 13px; }
|
|
.node-path { flex-shrink: 0; }
|
|
.tree-empty {
|
|
text-align: center;
|
|
color: #909399;
|
|
padding: 40px 0;
|
|
font-size: 14px;
|
|
}
|
|
:deep(.el-tree-node__content) { height: 36px; }
|
|
:deep(.el-tree-node__content:hover) { background-color: #f5f7fa; }
|
|
</style>
|