<template>
|
<div>
|
<a-sub-menu :key="item.key" :open="isOpen">
|
<template #title>
|
<div>
|
<div v-if="!isSearch" class="my-display">
|
<span>{{ item.title }}</span>
|
<div class="handle-icon">
|
<SearchOutlined v-if="item.key == 'moduleBelowA'" @click.stop="handleSearch(item)" />
|
<MoreOutlined />
|
</div>
|
</div>
|
<a-select
|
v-if="isSearch"
|
ref="inputRef"
|
v-model:value="value"
|
style="width: 100%"
|
show-search
|
placeholder="请输入文件夹关键字搜索"
|
:options="options"
|
:field-names="{ label: 'title', value: 'key' }"
|
@change="handleChange"
|
@blur="blurSearch"
|
></a-select>
|
</div>
|
</template>
|
<template v-for="child in item.children" :key="child.key">
|
<template v-if="!child.children || child.children.length === 0">
|
<a-menu-item :key="child.key" @click="$emit('click', child)">
|
<span>{{ child.title }}</span>
|
<span v-if="child.total > 0" class="my-left">{{ child.total }}</span>
|
</a-menu-item>
|
</template>
|
<template v-else>
|
<!-- 递归调用自身 -->
|
<MyMenu :item="child" @click="$emit('click', child)" />
|
</template>
|
</template>
|
</a-sub-menu>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { defineProps, defineEmits, ref, computed } from 'vue';
|
import { SearchOutlined, MoreOutlined } from '@ant-design/icons-vue';
|
|
interface MenuItem {
|
title: string;
|
key: string;
|
total: number;
|
children?: MenuItem[];
|
}
|
|
const props = defineProps<{ item: MenuItem }>();
|
const emit = defineEmits();
|
const options = ref([]);
|
const isSearch = ref(false);
|
const inputRef = ref();
|
const value = ref();
|
|
// 计算属性，判断当前菜单项是否应展开
|
const isOpen = computed(() => {
|
return true; // 默认为展开状态
|
});
|
|
function handleSearch(item: MenuItem) {
|
console.log('handleSearch', item);
|
options.value = flattenMenuItems(item.children);
|
console.log('options', options.value);
|
isSearch.value = true;
|
setTimeout(() => {
|
inputRef.value.focus();
|
}, 100);
|
emit('handleSearch', item);
|
}
|
|
function blurSearch() {
|
isSearch.value = false;
|
}
|
|
const handleChange = (value: string) => {
|
console.log(`selected ${value}`, isSearch.value);
|
isSearch.value = false;
|
emit('updateSelectedKeys', value);
|
};
|
|
const flattenMenuItems = (items: MenuItem[]): MenuItem[] => {
|
let result: MenuItem[] = [];
|
const recursiveFlatten = (items: MenuItem[]) => {
|
for (const item of items) {
|
result.push({ ...item, children: undefined }); // 不保留 children
|
if (item.children && item.children.length > 0) {
|
recursiveFlatten(item.children);
|
}
|
}
|
};
|
recursiveFlatten(items);
|
return result;
|
};
|
</script>
|
|
<style scoped>
|
.my-display {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.my-left {
|
margin-left: 5px;
|
}
|
|
.handle-icon {
|
display: none;
|
font-size: 16px;
|
}
|
|
.my-display:hover .handle-icon {
|
display: block;
|
}
|
</style>
|
