增加tab模式以及tab缓存

src/components/common-tabs-view/index.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { useTabsViewStore } from '@/stores/TabsViewStore'
+import { useRoute, useRouter } from 'vue-router'
+import { onMounted, ref, watch } from 'vue'
+import isString from 'lodash/isString'
+import TabsViewItem from '@/components/common-tabs-view/tabs-view-item.vue'
+
+const router = useRouter()
+const route = useRoute()
+const tabsViewStore = useTabsViewStore()
+const currentTabValue = ref('')
+watch(route, () => {
+  if (route.path) {
+    tabsViewStore.addHistoryTab(route)
+    currentTabValue.value = route.path
+  }
+})
+
+onMounted(() => {
+  if (!tabsViewStore.historyTabs.length) {
+    tabsViewStore.addHistoryTab(route)
+  }
+  currentTabValue.value = route.path
+})
+
+const selectHistoryTab = path => {
+  const tab = isString(path) ? tabsViewStore.findHistoryTab(path) : path
+  if (tab) {
+    router.push(tab)
+  }
+}
+
+const removeHistoryTab = path => {
+  const lastTab = tabsViewStore.removeHistoryTab(path)
+  if (lastTab) {
+    selectHistoryTab(lastTab)
+  }
+}
+
+</script>
+
+<template>
+  <el-tabs
+    v-bind="$attrs"
+    v-model="currentTabValue"
+    type="card"
+    :closable="tabsViewStore.historyTabs.length>1"
+    @tab-change="selectHistoryTab"
+    @tab-remove="removeHistoryTab"
+  >
+    <tabs-view-item
+      v-for="item in tabsViewStore.historyTabs"
+      :key="item.path"
+      :tab-item="item"
+    />
+  </el-tabs>
+</template>
+
+<style scoped>
+
+</style>

src/components/common-tabs-view/tabs-view-item.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { useMenuName } from '@/components/utils'
+import { computed } from 'vue'
+
+const props = defineProps({
+  tabItem: {
+    type: Object,
+    required: true
+  }
+})
+
+const menuName = computed(() => {
+  if (props.tabItem) {
+    return useMenuName(props.tabItem)
+  }
+})
+</script>
+
+<template>
+  <el-tab-pane
+    :label="menuName"
+    :name="tabItem.path"
+  />
+</template>
+
+<style scoped>
+
+</style>

src/components/index.js

@@ -2,6 +2,7 @@ import CommonIcon from '@/components/common-icon/index.vue'
 import CommonInput from '@/components/common-form-input/index.vue'
 import CommonMenu from '@/components/common-menu/index.vue'
 import CommonMenuItem from '@/components/common-menu-item/index.vue'
+import CommonTabsView from '@/components/common-tabs-view/index.vue'
 
 /**
  * 自定义通用组件自动注册
@@ -15,5 +16,6 @@ export default {
     Vue.component('CommonInput', CommonInput)
     Vue.component('CommonMenu', CommonMenu)
     Vue.component('CommonMenuItem', CommonMenuItem)
+    Vue.component('CommonTabsView', CommonTabsView)
   }
 }

src/components/utils/index.js

@@ -1,3 +1,6 @@
+import { ref } from 'vue'
+import { $i18nBundle } from '@/messages'
+
 const calcWithIf = menuItem => {
   ['icon', 'labelKey', 'label', 'html'].forEach(key => {
     const keyIf = menuItem[`${key}If`]
@@ -6,9 +9,37 @@ const calcWithIf = menuItem => {
     }
   })
 }
+
+export const MENU_INFO_LIST = ref({})
+
+export const useMenuInfo = path => {
+  const menuInfo = MENU_INFO_LIST.value[path]
+  console.info('================', MENU_INFO_LIST.value)
+  return menuInfo
+}
+
+export const useMenuName = item => {
+  const menuInfo = useMenuInfo(item.path)
+  if (menuInfo) {
+    if (menuInfo.label) {
+      return menuInfo.label
+    }
+    if (menuInfo.labelKey) {
+      return $i18nBundle(menuInfo.labelKey)
+    }
+  }
+  if (item.meta && item.meta.labelKey) {
+    return $i18nBundle(item.meta.labelKey)
+  }
+  return item.name || 'No Name'
+}
+
 export const filterMenus = menus => menus.filter(menu => !menu.disabled)
   .map(menu => {
     calcWithIf(menu)
+    if (menu.index) { // 把菜单存储下来，后面需要使用名字
+      MENU_INFO_LIST.value[menu.index] = menu
+    }
     if (menu.children && menu.children.length) {
       menu.children = filterMenus(menu.children)
     }