新增：动态修改标题的 api；⭐ #150

feat: add api of dynamic modify tab title;

.env

@@ -5,4 +5,5 @@ VUE_APP_ROLES_KEY=admin.roles
 VUE_APP_USER_KEY=admin.user
 VUE_APP_SETTING_KEY=admin.setting
 VUE_APP_TBAS_KEY=admin.tabs
+VUE_APP_TBAS_TITLES_KEY=admin.tabs.titles
 VUE_APP_API_BASE_URL=http://api.iczer.com

src/layouts/PageLayout.vue

@@ -60,10 +60,10 @@ export default {
     this.updatePageHeight(0)
   },
   computed: {
-    ...mapState('setting', ['layout', 'multiPage', 'pageMinHeight', 'pageWidth']),
+    ...mapState('setting', ['layout', 'multiPage', 'pageMinHeight', 'pageWidth', 'customTitles']),
     pageTitle() {
       let pageTitle = this.page && this.page.title
-      return pageTitle === undefined ? (this.title || this.routeName) : this.$t(pageTitle)
+      return this.customTitle || (pageTitle && this.$t(pageTitle)) || this.title || this.routeName
     },
     routeName() {
       const route = this.$route
@@ -96,8 +96,8 @@ export default {
         breadcrumb.push(this.$t(getI18nKey(path)))
       })
       let pageTitle = this.page && this.page.title
-      if (pageTitle) {
-        breadcrumb[breadcrumb.length - 1] = pageTitle
+      if (this.customTitle || pageTitle) {
+        breadcrumb[breadcrumb.length - 1] = this.customTitle || pageTitle
       }
       return breadcrumb
     },

src/layouts/tabs/TabsHead.vue

@@ -63,7 +63,7 @@
       this.affixed = this.fixedTabs
     },
     computed: {
-      ...mapState('setting', ['layout', 'pageWidth', 'fixedHeader', 'fixedTabs']),
+      ...mapState('setting', ['layout', 'pageWidth', 'fixedHeader', 'fixedTabs', 'customTitles']),
       lockTitle() {
         return this.$t(this.fixedTabs ? 'unlock' : 'lock')
       }
@@ -95,7 +95,8 @@
         this.$emit('contextmenu', pageKey, e)
       },
       pageName(page) {
-        return page.title || this.$t(getI18nKey(page.keyPath))
+        const custom = this.customTitles.find(item => item.path === page.fullPath)
+        return (custom && custom.title) || page.title || this.$t(getI18nKey(page.keyPath))
       }
     }
   }

src/plugins/tabs-page-plugin.js

@@ -9,6 +9,24 @@ const TabsPagePlugin = {
         $refreshPage(pageKey) {
           const event = new CustomEvent('page:refresh', {detail:{pageKey}})
           window.dispatchEvent(event)
+        },
+        $openPage(route, title) {
+          this.$setPageTitle(route, title)
+          this.$router.push(route)
+        },
+        $setPageTitle(route, title) {
+          if (title) {
+            const fullPath = typeof route === 'object' ? route.fullPath : route
+            this.$store.commit('setting/setCustomTitle', {path: fullPath, title})
+          }
+        }
+      },
+      computed: {
+        customTitle() {
+          const customTitles = this.$store.state.setting.customTitles
+          const fullPath = this.$route.fullPath
+          const custom = customTitles.find(item => item.path === fullPath)
+          return custom && custom.title
         }
       }
     })

src/store/modules/setting.js

@@ -5,6 +5,8 @@ import {filterMenu} from '@/utils/authority-utils'
 import {getLocalSetting} from '@/utils/themeUtil'
 
 const localSetting = getLocalSetting(true)
+const customTitlesStr = sessionStorage.getItem(process.env.VUE_APP_TBAS_TITLES_KEY)
+const customTitles = (customTitlesStr && JSON.parse(customTitlesStr)) || []
 
 export default {
   namespaced: true,
@@ -15,6 +17,7 @@ export default {
     pageMinHeight: 0,
     menuData: [],
     activatedFirst: undefined,
+    customTitles,
     ...config,
     ...localSetting
   },
@@ -94,6 +97,17 @@ export default {
     },
     setFixedTabs(state, fixedTabs) {
       state.fixedTabs = fixedTabs
+    },
+    setCustomTitle(state, {path, title}) {
+      if (title) {
+        const obj = state.customTitles.find(item => item.path === path)
+        if (obj) {
+          obj.title = title
+        } else {
+          state.customTitles.push({path, title})
+        }
+        sessionStorage.setItem(process.env.VUE_APP_TBAS_TITLES_KEY, JSON.stringify(state.customTitles))
+      }
     }
   }
 }