新增：动态修改标题的 api；:star: #150 feat: add api of dynamic modify tab title;

chenghongxing

2020-11-28 ae2b7a86ef8d83141a05b6972c9a03258381ba2f

新增：动态修改标题的 api；:star: #150
feat: add api of dynamic modify tab title;

 .env

@@ -5,4 +5,5 @@
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 @@
    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 @@
        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 @@
        $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 {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 @@
    pageMinHeight: 0,
    menuData: [],
    activatedFirst: undefined,
    customTitles,
    ...config,
    ...localSetting
  },
@@ -94,6 +97,17 @@
    },
    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))
      }
    }
  }
}