update: 优化ProLayout

2023-03-13 19:33:16 +08:00 · 2023-03-13 19:33:16 +08:00 · 3b04286842
parent 34d3ff7419
commit 3b04286842
6 changed files with 117 additions and 49 deletions
--- a/src/components/Layout/BasicLayoutPage.vue
+++ b/src/components/Layout/BasicLayoutPage.vue
@ -8,10 +8,13 @@
        :breadcrumb="{ routes: breadcrumb }"
    >
        <template #breadcrumbRender="slotProps">
-            <a v-if="slotProps.route.index !== 0">{{
-                slotProps.route.breadcrumbName
-            }}</a>
-            <span v-else>{{ slotProps.route.breadcrumbName }}</span>
+            <a
+              v-if="slotProps.route.index !== 0 && !slotProps.route.isLast"
+              @click='() => jumpPage(slotProps.route.path)'
+            >
+              {{ slotProps.route.breadcrumbName }}
+            </a>
+            <span v-else >{{ slotProps.route.breadcrumbName }}</span>
        </template>
        <template #rightContentRender>
            <div class="right-content">
@ -32,6 +35,7 @@ import Notice from './components/Notice.vue';
 import DefaultSetting from '../../../config/config';
 import { useMenuStore } from '@/store/menu';
 import { clearMenuItem } from 'jetlinks-ui-components/es/ProLayout/util';
+import { AccountMenu } from '@/router/menu'

 type StateType = {
    collapsed: boolean;
@ -50,7 +54,8 @@ const layoutConf = reactive({
    siderWidth: DefaultSetting.layout.siderWidth,
    logo: DefaultSetting.layout.logo,
    title: DefaultSetting.layout.title,
-    menuData: clearMenuItem(menu.siderMenus),
+    menuData: [...clearMenuItem(menu.siderMenus), AccountMenu],
+    // menuData: menu.siderMenus,
    splitMenus: true,
 });

@ -61,26 +66,49 @@ const state = reactive<StateType>({
    selectedKeys: [],
 });

+const findRouteMeta = (code: string) => {
+  let meta = []
+  let menuItem: any = menu.menus[code]
+  while (menuItem) {
+    meta.unshift(menuItem)
+    if (menuItem.parentName) {
+      menuItem = menu.menus[menuItem.parentName]
+    } else {
+      menuItem = false
+    }
+  }
+  return meta
+}
+
+const jumpPage = (path: string) => {
+  console.log(path)
+  router.push(path)
+}
+
 const breadcrumb = computed(() =>
-    router.currentRoute.value.matched.concat().map((item, index) => {
-        return {
-            index,
-            path: item.path,
-            breadcrumbName: item.meta.title || '',
-        };
-    }),
+  {
+    const paths = router.currentRoute.value.name as string
+    const metas = findRouteMeta(paths)
+    return metas.map((item, index) => {
+      return {
+        index,
+        isLast: index === (metas.length - 1),
+        path: item.path,
+        breadcrumbName: item.title || '',
+      };
+    })
+  }
 );

 watchEffect(() => {
    if (router.currentRoute) {
-        const matched = router.currentRoute.value.matched.concat();
-        state.selectedKeys = matched.map((r) => r.path);
-        state.openKeys = matched
-            .filter((r) => r.path !== router.currentRoute.value.path)
-            .map((r) => r.path);
-        console.log(state.selectedKeys);
+      const paths = router.currentRoute.value.name as string
+      if (paths) {
+        const _metas = findRouteMeta(paths)
+        state.selectedKeys = _metas.map(item => item.path)
+        state.openKeys = _metas.filter((r) => r !== router.currentRoute.value.path).map(item => item.path)
+      }
    }
-    // TODO 获取当前路由中参数，用于控制pure
 });

 watchEffect(() => {
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@ -5,6 +5,7 @@ export const AccountMenu = {
    component: () => import('@/components/Layout/BasicLayoutPage.vue'),
    redirect: '/account/center',
    name: 'account',
+    code: 'account',
    meta: {
        title: '个人中心',
        icon: '',
@ -14,6 +15,7 @@ export const AccountMenu = {
        {
            path: '/account/center',
            name: 'account/center',
+            code: 'account/center',
            meta: {
                title: '基本设置',
                icon: '',
@ -24,6 +26,7 @@ export const AccountMenu = {
        {
            path: '/account/NotificationSubscription',
            name: 'account/NotificationSubscription',
+            code: 'account/NotificationSubscription',
            meta: {
                title: '通知订阅',
                icon: '',
@ -34,6 +37,7 @@ export const AccountMenu = {
        {
            path: '/account/NotificationRecord',
            name: 'account/NotificationRecord',
+            code: 'account/NotificationRecord',
            meta: {
                title: '通知记录',
                icon: '',
--- a/src/store/menu.ts
+++ b/src/store/menu.ts
@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { queryOwnThree } from '@/api/system/menu'
-import { filterAsnycRouter, MenuItem } from '@/utils/menu'
+import { filterAsyncRouter, findCodeRoute, MenuItem } from '@/utils/menu'
 import { isArray } from 'lodash-es'
 import { usePermissionStore } from './permission'
 import router from '@/router'
@ -33,6 +33,8 @@ type MenuStateType = {
  menus: {
    [key: string]: {
      buttons?: string[]
+      title: string
+      parentName: string
      path: string
    }
  }
@ -98,24 +100,15 @@ export const useMenuStore = defineStore({
        if (resp.success) {
          const permission = usePermissionStore()
          permission.permissions = {}
-          const { menusData, silderMenus } = filterAsnycRouter(resp.result)
-          this.menus = {}
-          const handleMenuItem = (menu: any) => {
-            if (isArray(menu)) {
-              menu.forEach(menuItem => {
-                this.menus[menuItem.name] = {
-                  path: menuItem.path,
-                  buttons: menuItem.meta.buttons
-                }
-                permission.permissions[menuItem.name] = menuItem.meta.buttons
-                if (menuItem.children && menuItem.children.length) {
-                  handleMenuItem(menuItem.children)
-                }
-              })
+          const { menusData, silderMenus } = filterAsyncRouter(resp.result)
+          this.menus = findCodeRoute([...resp.result, AccountMenu])
+          Object.keys(this.menus).forEach((item) => {
+            const _item = this.menus[item]
+            if (_item.buttons?.length) {
+              permission.permissions[item] = _item.buttons
            }
-          }
+          })

-          handleMenuItem(menusData)
          menusData.push({
            path: '/',
            redirect: menusData[0]?.path,
@ -124,10 +117,7 @@ export const useMenuStore = defineStore({
            }
          })
          menusData.push(AccountMenu)
-          silderMenus.push(AccountMenu)
          this.siderMenus = silderMenus
-          console.log('menusData', menusData)
-          console.log('silderMenus', silderMenus)
          res(menusData)
        }
      })
--- a/src/store/permission.ts
+++ b/src/store/permission.ts
@ -3,11 +3,12 @@ import { defineStore } from "pinia";
 export const usePermissionStore = defineStore({
  id: 'permission',
  state: () => ({
-    permissions: {} as {[key: string]: string},
+    permissions: {} as {[key: string]: string[]},
  }),
  getters:  {
    check(state) {
      return (permissionCode: string) => {
+
        if (!permissionCode) {
          return true
        }
@ -16,6 +17,7 @@ export const usePermissionStore = defineStore({
        }
        const code = permissionCode.split(":")[0]
        const value = permissionCode.split(":")[1]
+
        const _buttonArray = state.permissions[code]
        if (!_buttonArray) {
          return false
--- a/src/utils/menu.ts
+++ b/src/utils/menu.ts
@ -151,7 +151,6 @@ const extraRouteObj = {
 const resolveComponent = (name: any) => {
  const importPage = pagesComponent[`../views/${name}/index.vue`];
  if (!importPage) {
-    console.warn(`Unknown page ${name}. Is it located under Pages with a .vue extension?`)
    return undefined
  } else {
    const res = () => importPage()
@ -201,7 +200,52 @@ const findDetailRoutes = (routes: any[]): any[] => {
  return newRoutes
 }

-export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1): { menusData: any, silderMenus: any } {
+export const findCodeRoute = (asyncRouterMap: any[]) => {
+  const routeMeta = {}
+
+  function findChildren (data: any[], code: string = '') {
+    data.forEach(route => {
+      routeMeta[route.code] = {
+        path: route.url || route.path,
+        title: route.meta?.title || route.name,
+        parentName: code,
+        buttons: route.buttons?.map((b: any) => b.id) || []
+      }
+      const detail = findDetailRouteItem(route.code, route.url)
+      if (detail) {
+        routeMeta[(detail as MenuItem).code] = {
+          path: detail.url,
+          title: detail.name,
+          parentName: route.code,
+          buttons: detail.buttons?.map((b: any) => b.id) || []
+        }
+      }
+
+      const otherRoutes = extraRouteObj[route.code]
+      if (otherRoutes) {
+        otherRoutes.children.map((item: any) => {
+          const _code = `${route.code}/${item.code}`
+          routeMeta[_code] = {
+            path: `${route.url}/${item.code}`,
+            title: item.name,
+            parentName: route.code,
+            buttons: item.buttons?.map((b: any) => b.id) || []
+          }
+        })
+      }
+
+      if (route.children) {
+        findChildren(route.children, route.code)
+      }
+    })
+  }
+
+  findChildren(asyncRouterMap)
+
+  return routeMeta
+}
+
+export function filterAsyncRouter(asyncRouterMap: any, parentCode = '', level = 1): { menusData: any, silderMenus: any} {
  const _asyncRouterMap = cloneDeep(asyncRouterMap)
  const menusData: any[] = []
  const silderMenus: any[] = []
@ -224,7 +268,7 @@ export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level =
    route.children = findDetailRoutes(route.children)
    if (route.children && route.children.length) {
      // TODO 查看是否具有详情页
-      const { menusData: _menusData, silderMenus: _silderMenus } = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1)
+      const { menusData: _menusData, silderMenus: _silderMenus } = filterAsyncRouter(route.children, `${parentCode}/${route.code}`, level + 1)
      _route.children = _menusData
      silder.children = _silderMenus
      const showChildren = _route.children.some((r: any) => !r.meta.hideInMenu)
@ -251,6 +295,6 @@ export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level =
  })
  return {
    menusData,
-    silderMenus
+    silderMenus,
  }
 }
--- a/src/views/iot-card/Home/index.vue
+++ b/src/views/iot-card/Home/index.vue
@ -95,6 +95,7 @@ import { queryFlow, list } from '@/api/iot-card/home';
 import * as echarts from 'echarts';
 import { useMenuStore } from '@/store/menu';
 import { usePermissionStore } from '@/store/permission';
+import { message } from 'jetlinks-ui-components'

 const { proxy } = <any>getCurrentInstance();

@ -178,11 +179,10 @@ const pieChartData = ref<any[]>([
 ]);

 const jumpPage = (data: GuideItemProps) => {
-    // if (data.url && data.auth) {
-    //     router.push({ path: `${data.url}`, ...data.param });
-    // } else {
-    //     message.warning('暂无权限，请联系管理员');
-    // }
+    if (!data.auth){
+        message.warning('暂无权限，请联系管理员');
+        return
+    }
    if (data.key === 'EQUIPMENT') {
        menuStory.jumpPage(data.url, { id: 'add' });
    } else {