UI3/src/stores/_menu.ts

import { ref } from "vue"
import { defineStore } from "pinia"
import Stroage from "@/core/utils/storages"
import type { RouteRecordRaw } from "vue-router"
import type { MenuItem, MenuRouteMap, FunctionMenu } from "@/core/config/MainMenuConfig"
import { MenuRouteMaps } from "@/router/menuMap"
import router, { to404 } from "@/router"
import apis from "@/api"
import configs from "@/core/config/Index"

export const useMenuStore = defineStore("meun", () => {
  const MENU_KEY = "fun_menu"
  let menuData: Array<FunctionMenu> = JSON.parse(Stroage.getItem(MENU_KEY) || "[]")
  const menus = ref<Array<FunctionMenu>>([])
  const sidebarMenus = ref<Array<MenuItem>>([] as Array<MenuItem>)
  const headMenus = ref<Array<MenuItem>>([] as Array<MenuItem>)
  const routes = ref<Array<RouteRecordRaw>>([] as Array<RouteRecordRaw>)

  const getSidebarMenus = (): Array<MenuItem> => {
    return sidebarMenus.value
  }

  const getHeadMenus = (): Array<MenuItem> => {
    return headMenus.value
  }

  const formatterMenus = (menus: Array<FunctionMenu>) => {
    const parent: MenuItem = {
      pages: [],
    }
    menus.forEach((v) => {
      const item = formatterMenuItem(v)
      parent.pages?.push(item)
    })
    sidebarMenus.value.push(parent)

    headMenus.value.push({
      sectionTitle: "数据大屏",
      route: "/DataCenter",
      fontIcon: "fas fa-home",
    })
  }
  const formatterMenuItem = (fun: FunctionMenu) => {
    menus.value.push(fun)
    const menu: MenuRouteMap | undefined = MenuRouteMaps.find(
      (v) => v.path.toLocaleLowerCase() == fun.url.trimEnd().toLocaleLowerCase()
    )
    const item: MenuItem = {
      //sectionTitle: fun.displayName,
      parentName: fun.parentName,
      fontIcon: menu?.icon ?? "fas fa-cog",
      svgIcon: menu?.svg,
    }
    // if (menu?.path) {
    //   item.route = menu?.path
    // }
    item.route = fun.url
    if (fun.children && fun.children.length) {
      item.sectionTitle = fun.name
      item.sub = []
      fun.children.forEach((v) => {
        item.sub?.push(formatterMenuItem(v))
      })
    } else {
      item.heading = fun.name
    }
    return item
  }
  const getBreadcrumbs = (fun: FunctionMenu, breadcrumbs?: Array<string>): Array<string> => {
    breadcrumbs = breadcrumbs || []
    // if (fun.url == homeRouter.path) {
    //   return breadcrumbs
    // }
    breadcrumbs.unshift(fun.name)
    const parent = menus.value.find((a) => a.id == fun.parentId)
    if (parent) {
      return getBreadcrumbs(parent, breadcrumbs)
    }
    return breadcrumbs
  }
  const formatterRoutes = (funs: Array<FunctionMenu>, withChild = true) => {
    //router.addRoute(configs.MAIN_ROUTER_NAME, homeRouter)
    if (funs && funs.length) {
      funs.forEach((v) => {
        formatterRouteItem(v, withChild)
      })
    }
    router.addRoute(to404)
    //console.log("===========", router.getRoutes());
  }
  const formatterRouteItem = (fun: FunctionMenu, withChild = true) => {
    const menu: MenuRouteMap | undefined = MenuRouteMaps.find((v) => v.path == fun.url)
    if (menu?.component == null) {
      if (withChild && fun.children && fun.children.length) {
        fun.children.forEach((v) => {
          formatterRouteItem(v)
        })
      }
      return
    }
    const item: RouteRecordRaw = {
      name: fun.name,
      path: menu?.path ?? "",
      component: menu?.component,
      meta: {
        permission: menu?.auth == undefined ? true : !!menu?.auth,
        pageTitle: fun.name,
        breadcrumbs: getBreadcrumbs(fun),
      },
    }
    routes.value.push(item)

    router.addRoute(configs.MAIN_ROUTER_NAME, item)
  }

  const formatter = (funs: Array<FunctionMenu>) => {
    sidebarMenus.value = []
    headMenus.value = []
    menus.value = []
    routes.value = []
    formatterMenus(funs)
    formatterRoutes(funs)
    //console.log("----------", routes.value)
  }
  function loadMenus() {
    return new Promise((reslove, redirect) => {
      if (menuData && menuData.length) {
        formatter(menuData)
        reslove("")
      } else {
        apis.authApi
          .getMenus()
          .then(({ data }) => {
            formatter(data || [])
            menuData = data
            Stroage.setItem(MENU_KEY, JSON.stringify(data))
            reslove("")
          })
          .catch((e) => {
            console.error("菜单加载失败！", e.message)
            redirect(e)
            //router.push({ name: "sign-in" })
          })
      }
    })
  }
  function reLoadMenus() {
    removeMenus()
    return loadMenus()
  }

  function removeMenus() {
    Stroage.removeItem(MENU_KEY)
    menuData = []
  }
  return {
    getSidebarMenus,
    getHeadMenus,
    getBreadcrumbs,
    loadMenus,
    reLoadMenus,
    removeMenus,
  }
})