59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
Vue
<template>
|
|
<div class="w-10 h-10 grid place-items-center rounded-full mt-2 hover:cursor-pointer">
|
|
<div class="flex flex-row w-96">
|
|
<Icon name="magnifying-glass" class="hidden sm:block" @click="searchMenuVisiable = true" />
|
|
|
|
<Teleport to="body">
|
|
<el-dialog v-model="searchMenuVisiable" width="30%" draggable>
|
|
<el-cascader :filterable="true" :options="options" @change="toWhere" placeholder="请输入菜单名称" clearable class="w-full" :show-all-levels="false" />
|
|
</el-dialog>
|
|
</Teleport>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { usePermissionsStore } from '/admin/stores/modules/user/permissions'
|
|
import { Menu } from '/admin/types/Menu'
|
|
import router from '/admin/router'
|
|
import { ref, computed } from 'vue'
|
|
|
|
const searchMenuVisiable = ref(false)
|
|
|
|
const permissionStore = usePermissionsStore()
|
|
const options = computed(() => {
|
|
return filterMenus(permissionStore.getMenus)
|
|
})
|
|
const toWhere = (value: string[]) => {
|
|
if (value.length) {
|
|
router.push({ path: value[value.length - 1] })
|
|
}
|
|
|
|
searchMenuVisiable.value = false
|
|
}
|
|
|
|
/**
|
|
* filter menus
|
|
*
|
|
* @param menus
|
|
*/
|
|
function filterMenus(menus: Menu[] | undefined): Object[] {
|
|
const cascaderMenus: Object[] = []
|
|
|
|
menus?.forEach(menu => {
|
|
if (menu.meta === undefined) {
|
|
const child = menu.children?.pop()
|
|
cascaderMenus.push(Object.assign({ label: child?.meta?.title, value: child?.path }))
|
|
} else {
|
|
const cascaderMenu = Object.assign({ label: menu.meta?.title, value: menu.path, children: [] })
|
|
|
|
cascaderMenu.children = filterMenus(menu.children)
|
|
|
|
cascaderMenus.push(cascaderMenu)
|
|
}
|
|
})
|
|
|
|
return cascaderMenus
|
|
}
|
|
</script>
|