菜单加载数据

src/components/common-form-control/index.vue

@@ -49,7 +49,6 @@ const inputType = computed(() => {
 })
 
 const modelAttrs = computed(() => {
-  console.info(inputType.value)
   if (['input', 'select', 'autocomplete', 'cascader'].includes(props.option.type || 'input')) {
     return Object.assign({ clearable: true }, props.option.attrs || {})
   }
@@ -68,14 +67,12 @@ const formModel = computed(() => props.option.model || props.model)
 
 const modelValue = computed({
   get () {
-    console.info('=================', formModel.value)
     if (formModel.value && props.option.prop) {
       return formModel.value[props.option.prop]
     }
     return null
   },
   set (val) {
-    console.info('set===============', formModel.value)
     if (formModel.value && props.option.prop) {
       formModel.value[props.option.prop] = val
     }

src/layout/LeftMenu.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
-import { useBusinessMenus } from '@/services/global/GlobalService'
+import { useMenuStore } from '@/stores/MenuStore'
 const globalConfigStore = useGlobalConfigStore()
-const businessMenus = useBusinessMenus()
+const menuStore = useMenuStore()
 </script>
 
 <template>
@@ -10,7 +10,7 @@ const businessMenus = useBusinessMenus()
     <common-menu
       class="el-menu-left"
       :collapse="globalConfigStore.isCollapseLeft"
-      :menus="businessMenus"
+      :menus="menuStore.businessMenus"
       :default-openeds="['1']"
     />
   </el-scrollbar>

src/layout/TopNav.vue

@@ -1,17 +1,18 @@
 <script setup>
-import { useBaseTopMenus, useBusinessMenus } from '@/services/global/GlobalService'
 import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
+import { useMenuStore } from '@/stores/MenuStore'
 import { GlobalLayoutMode } from '@/consts/GlobalConstants'
 import { computed } from 'vue'
 const globalConfigStore = useGlobalConfigStore()
-const topMenus = useBaseTopMenus()
-const businessMenus = useBusinessMenus()
+const menuStore = useMenuStore()
 
 const allMenus = computed(() => {
+  const topMenus = menuStore.baseTopMenus
+  const businessMenus = menuStore.businessMenus
   if (globalConfigStore.layoutMode === GlobalLayoutMode.TOP) {
-    return [...businessMenus.value, ...topMenus.value.slice(1)]
+    return [...businessMenus, ...topMenus.slice(1)]
   }
-  return topMenus.value
+  return topMenus
 })
 
 </script>

src/services/global/GlobalService.js

@@ -1,11 +1,10 @@
 import { GlobalLocales } from '@/consts/GlobalConstants'
 import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
-import { ref } from 'vue'
-import { $i18nBundle } from '@/messages'
+import { loadBusinessMenus } from '@/services/mock/MockGlobalService'
 
 export const useBaseTopMenus = () => {
   const globalConfigStore = useGlobalConfigStore()
-  return ref([
+  return [
     {
       iconIf: () => globalConfigStore.isCollapseLeft ? 'expand' : 'fold',
       click: globalConfigStore.collapseLeft
@@ -58,71 +57,9 @@ export const useBaseTopMenus = () => {
         }
       ]
     }
-  ])
+  ]
 }
 
 export const useBusinessMenus = () => {
-  return ref([
-    {
-      icon: 'HomeFilled',
-      index: '/',
-      labelIf: () => $i18nBundle('common.label.title')
-    },
-    {
-      icon: 'setting',
-      labelKey: 'menu.label.systemManagement',
-      children: [
-        {
-          index: '/admin/users',
-          icon: 'user',
-          labelKey: 'menu.label.userManagement'
-        },
-        {
-          index: '/admin/roles',
-          icon: 'GroupFilled',
-          labelKey: 'menu.label.roleManagement'
-        },
-        {
-          index: '/admin/authority',
-          icon: 'lock',
-          labelKey: 'menu.label.authorityManagement'
-        },
-        {
-          index: '/admin/menus',
-          icon: 'menu',
-          labelKey: 'menu.label.menuManagement'
-        }
-      ]
-    },
-    {
-      icon: 'BuildFilled',
-      labelKey: 'menu.label.toolsManagement',
-      children: [
-        {
-          index: '/not-found',
-          icon: 'WarningFilled',
-          labelKey: 'menu.label.errorPage404'
-        },
-        {
-          index: '/icons',
-          icon: 'InsertEmoticonOutlined',
-          labelKey: 'menu.label.toolsIcons'
-        },
-        {
-          index: '/forms',
-          icon: 'TableRowsFilled',
-          labelKey: 'menu.label.toolsForms'
-        },
-        {
-          index: '/tables',
-          icon: 'Grid',
-          labelKey: 'menu.label.toolsTables'
-        },
-        {
-          index: '/tests',
-          icon: 'TipsAndUpdatesOutlined',
-          labelKey: 'menu.label.toolsTests'
-        }
-      ]
-    }])
+  return loadBusinessMenus()
 }

src/services/mock/MockGlobalService.js

@@ -0,0 +1,76 @@
+import { $i18nBundle } from '@/messages'
+
+/**
+ * 测试假数据
+ * @returns {Promise<unknown>}
+ */
+export const loadBusinessMenus = () => {
+  // 模拟加载业务数据
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve([
+        {
+          icon: 'HomeFilled',
+          index: '/',
+          labelIf: () => $i18nBundle('common.label.title')
+        },
+        {
+          icon: 'setting',
+          labelKey: 'menu.label.systemManagement',
+          children: [
+            {
+              index: '/admin/users',
+              icon: 'user',
+              labelKey: 'menu.label.userManagement'
+            },
+            {
+              index: '/admin/roles',
+              icon: 'GroupFilled',
+              labelKey: 'menu.label.roleManagement'
+            },
+            {
+              index: '/admin/authority',
+              icon: 'lock',
+              labelKey: 'menu.label.authorityManagement'
+            },
+            {
+              index: '/admin/menus',
+              icon: 'menu',
+              labelKey: 'menu.label.menuManagement'
+            }
+          ]
+        },
+        {
+          icon: 'BuildFilled',
+          labelKey: 'menu.label.toolsManagement',
+          children: [
+            {
+              index: '/not-found',
+              icon: 'WarningFilled',
+              labelKey: 'menu.label.errorPage404'
+            },
+            {
+              index: '/icons',
+              icon: 'InsertEmoticonOutlined',
+              labelKey: 'menu.label.toolsIcons'
+            },
+            {
+              index: '/forms',
+              icon: 'TableRowsFilled',
+              labelKey: 'menu.label.toolsForms'
+            },
+            {
+              index: '/tables',
+              icon: 'Grid',
+              labelKey: 'menu.label.toolsTables'
+            },
+            {
+              index: '/tests',
+              icon: 'TipsAndUpdatesOutlined',
+              labelKey: 'menu.label.toolsTests'
+            }
+          ]
+        }])
+    })
+  })
+}

src/stores/MenuStore.js

@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { useBaseTopMenus, useBusinessMenus } from '@/services/global/GlobalService'
+
+export const useMenuStore = defineStore('menu', () => {
+  /**
+   * @type {[CommonMenuItem]}
+   */
+  const baseTopMenus = ref([])
+  /**
+   * @type {[CommonMenuItem]}
+   */
+  const businessMenus = ref([])
+  return {
+    baseTopMenus,
+    businessMenus,
+    loadBaseTopMenus () {
+      baseTopMenus.value = useBaseTopMenus()
+      console.info('顶部数据', businessMenus.value)
+    },
+    async loadBusinessMenus () {
+      businessMenus.value = await useBusinessMenus()
+      console.info('菜单数据', businessMenus.value)
+    }
+  }
+}, {
+  persist: true
+})

src/views/HomeView.vue

@@ -3,14 +3,18 @@ import LeftMenu from '@/layout/LeftMenu.vue'
 import TopNav from '@/layout/TopNav.vue'
 import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
 import { useTabsViewStore } from '@/stores/TabsViewStore'
+import { useMenuStore } from '@/stores/MenuStore'
 import { GlobalLayoutMode } from '@/consts/GlobalConstants'
 import { computed } from 'vue'
 import GlobalSettings from '@/views/components/global/GlobalSettings.vue'
 const globalConfigStore = useGlobalConfigStore()
+const menuStore = useMenuStore()
 const tabsViewStore = useTabsViewStore()
 const showLeftMenu = computed(() => {
   return globalConfigStore.layoutMode === GlobalLayoutMode.LEFT
 })
+menuStore.loadBaseTopMenus()
+menuStore.loadBusinessMenus()
 </script>
 
 <template>