菜单搜索功能优化

src/components/RouterSearch/index.vue

@@ -37,6 +37,8 @@
 <script lang="ts" setup>
 import { usePermissionStore } from '@/store/modules/permission'
 import { filterBreadcrumb } from '@/layout/components/Breadcrumb/src/helper'
+import { filter, treeToList } from '@/utils/tree'
+import type { RouteLocationNormalizedLoaded, RouteMeta } from 'vue-router'
 
 defineProps({
   isModal: {
@@ -51,9 +53,9 @@ const routersa = permissionStore.getRouters
 const analyzeRouters = (routers:any) => {
   return recursion(routers, [])
 }
-// 递归
+// 递归 查询菜单路由
 const recursion = (routers:any, rs) => {
-  routers.forEach(item => {
+  routers.forEach((item) => {
     if (item.children?.length > 0) {
       recursion(item.children, rs)
     } else {
@@ -62,11 +64,29 @@ const recursion = (routers:any, rs) => {
   })
   return rs
 }
+
+// 递归 查询上级目录名称
+const recursionParentName = (routers:any, rs) => {
+    let routerParent = router.getRoutes().find(itemRouter => 
+      itemRouter.path == routers.path.substring(0,routers.path.lastIndexOf('/'))
+    )
+    if (routerParent) {
+      recursionParentName(routerParent, rs)
+    } else {
+      rs.push(routers.meta.title)
+    }
+  return rs
+}
+
 const router = useRouter() // 路由对象
 const showSearch = ref(false) // 是否显示弹框
 const showTopSearch = ref(false) // 是否显示顶部搜索框
 const value: Ref = ref('') // 用户输入的值
-// const routers = router.getRoutes() // 路由对象
+const levelList = ref<AppRouteRecordRaw[]>([])
+const menuRouters = computed(() => {
+  const routers = permissionStore.getRouters
+  return filterBreadcrumb(routers)
+})
 // 20240111 cxm 修改 根据当前登录人获取有效路由 并解析展开所有菜单路由过滤目录路由
 const routers = analyzeRouters(filterBreadcrumb(routersa))
 const options = computed(() => {
@@ -75,14 +95,23 @@ const options = computed(() => {
     return []
   }
  
-  const list = routers.filter((item: any) => {
+  let list = routers.filter((item: any) => {
     if (item.meta.title?.indexOf(value.value) > -1 || item.path.indexOf(value.value) > -1) {
       return true
     }
   })
+
   return list.map((item) => {
+    let menuName = ''
+    levelList.value = filter<AppRouteRecordRaw>(unref(menuRouters), (node: AppRouteRecordRaw) => {
+      return node.path === item.path
+    })
+    const breadcrumbList = treeToList<AppRouteRecordRaw[]>(unref(levelList))
+    breadcrumbList.map((v) => {
+      menuName += v?.meta?.title + ' / '
+    })
     return {
-      label: `${item.meta.title}${item.path}`,
+      label: `${item.meta.title} ----> ${menuName.substring(0,menuName.length-3)}`,
       value: item.path
     }
   })