fix: 后退前进功能

2022-10-09 18:47:09 +08:00
parent 313591a5ef
commit 705bc0d58d
11 changed files with 42 additions and 96 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,31 +7,6 @@
 import { storageKey } from '@/utils/constants'
 export default {
  name: 'App',
-  mounted () {
-    // 浏览器控制按钮前进后退触发函数
-    window.addEventListener('popstate', this.popstate, false)
-  },
-  unmounted () {
-    window.removeEventListener('popstate', this.popstate, false)
-  },
-  methods: {
-    popstate () {
-      const historyJSON = sessionStorage.getItem(storageKey.history)
-      if (history) {
-        const history = JSON.parse(historyJSON)
-        if (history.index > -1) {
-          history.index--
-        } else {
-          history.index = history.history.length - 3
-        }
-        sessionStorage.setItem(storageKey.history, JSON.stringify(history))
-        this.$router.push({
-          path: history.history[history.index].path,
-          query: history.history[history.index].query
-        })
-      }
-    }
-  },
  setup () {
    // 处理刷新后  $dayJs的时区变为默认的问题
    const timezone = localStorage.getItem(storageKey.sysTimezone) || ''
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -287,7 +287,6 @@ export default {
      } else {
        result = breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : []
      }
-      console.info(thirdMenu, fourthMenu, result)
      return result
    },
    showEntityTypeSelector () {
@@ -556,36 +555,32 @@ export default {
        if (menus[3]) {
          this.handleCurDrilldownTableConfig(this.breadcrumb[2], this.breadcrumb[3])
        }
-        /* this.$router.push({
+        this.$router.push({
          path: route,
          query: {
            t: +new Date()
          }
-        }) */
-        this.jumpAndCache(route, {})
+        })
      } else if (opeType === 3) {
-        /* this.$router.push({
-          query: { ...this.$route.query, fourthPanel: '' }
-        }) */
-        this.jumpAndCache(route, { ...this.$route.query, fourthPanel: '' })
+        this.$router.push({
+          query: { ...this.$route.query, fourthPanel: '', t: +new Date() }
+        })
      } else if (opeType != 4) {
-        this.jumpAndCache(route, { ...this.$route.query, fourthPanel: '', thirdPanel: '' })
-        /* this.$router.push({
-          query: { ...this.$route.query, fourthPanel: '', thirdPanel: '' }
-        }) */
+        this.$router.push({
+          query: { ...this.$route.query, fourthPanel: '', thirdPanel: '', t: +new Date() }
+        })
      }
      if (route === this.route) {
        this.refresh()
        return
      }
      if (route) {
-        /* this.$router.push({
+        this.$router.push({
          path: route,
          query: {
            t: +new Date()
          }
-        }) */
-        this.jumpAndCache(route, {})
+        })
      }
    },
    dropDownSearch () {
--- a/src/mixins/common.js
+++ b/src/mixins/common.js
@@ -42,19 +42,6 @@ export default {
    },
    dateFormatByAppearance (date) {
      return dateFormatByAppearance(date)
-    },
-    jumpAndCache (path, query) {
-      query.t = new Date().getTime()
-      const historyJSON = sessionStorage.getItem(storageKey.history)
-      if (history) {
-        const history = JSON.parse(historyJSON)
-        history.index = -1
-        sessionStorage.setItem(storageKey.history, JSON.stringify(history))
-        this.$router.push({
-          path: path,
-          query: query
-        })
-      }
    }
  }
 }
--- a/src/permission.js
+++ b/src/permission.js
@@ -2,7 +2,7 @@ import router from './router'
 import store from './store'
 import { ElMessage } from 'element-plus'
 import { getPermission } from '@/utils/api'
-import { loadGeoData, setHistory } from '@/utils/tools'
+import { loadGeoData } from '@/utils/tools'
 import axios from 'axios'
 import { storageKey } from '@/utils/constants'
 import { loadI18n } from '@/i18n'
@@ -27,7 +27,6 @@ router.beforeEach(async (to, from, next) => {
    }
    // 加载权限
    if (permissionWhiteList.indexOf(to.path) !== -1) {
-      setHistory(to)
      next()
    } else {
      if (store.getters.menuList.length === 0) {
@@ -38,7 +37,6 @@ router.beforeEach(async (to, from, next) => {
      }
      if (to.path) {
        if (hasMenu(store.getters.menuList, to.path)) {
-          setHistory(to)
          next()
        } else {
          ElMessage.error('No access') // TODO 国际化
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -976,7 +976,7 @@ export function urlParamsHandler (url, oldParams, newParams, cleanOldParams) {
 }

 export function overwriteUrl (url) {
-  window.history.pushState('', '', url)
+  window.history.replaceState('', '', url)
 }

 /*
@@ -1005,15 +1005,3 @@ export function colorGradientCalculation (startColor, endColor, values) {
 export function colorHexToRgbArr (hex) {
  return [1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16))
 }
-
-export function setHistory (to) {
-  const historyJson = sessionStorage.getItem(storageKey.history)
-  const query = { ...to.query, t: new Date().getTime() }
-  if (historyJson) {
-    const history = JSON.parse(historyJson)
-    history.history.push({ path: to.path, query: query })
-    sessionStorage.setItem(storageKey.history, JSON.stringify(history))
-  } else {
-    sessionStorage.setItem(storageKey.history, JSON.stringify({ index: 0, history: [query] }))
-  }
-}
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -85,13 +85,7 @@ export default {
      deep: true,
      immediate: true,
      handler (n) {
-        console.info(n)
        this.score = n
-        // const curOperationType = this.$store.getters.getTabOperationType
-        // const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
-        // if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
-        // this.score = n
-        // }
      }
    }
  },
--- a/src/views/charts2/charts/linkMonitor/LinkBlock.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkBlock.vue
@@ -327,22 +327,28 @@ export default {
    },
    drillLinkId (item) {
      const queryCondition = `common_egress_link_id = ${item.egressLinkId} AND common_ingress_link_id = ${item.ingressLinkId}`
-      this.jumpAndCache(this.$route.path, {
-        ...this.$route.query,
-        thirdPanel: drillDownPanelTypeMapping.linkMonitor,
-        thirdMenu: `Link ID: ${item.linkId}`,
-        panelName: `Link ID: ${item.linkId}`,
-        queryCondition
+      this.$router.push({
+        query: {
+          ...this.$route.query,
+          thirdPanel: drillDownPanelTypeMapping.linkMonitor,
+          thirdMenu: `Link ID: ${item.linkId}`,
+          panelName: `Link ID: ${item.linkId}`,
+          queryCondition,
+          t: +new Date()
+        }
      })
    },
    drillNextHop (item) {
      const queryCondition = `egress_link_direction = '${item.linkDirection}' AND ingress_link_direction = '${item.linkDirection}'`
-      this.jumpAndCache(this.$route.path, {
-        ...this.$route.query,
-        thirdPanel: drillDownPanelTypeMapping.linkMonitor,
-        thirdMenu: `Link ID: ${item.linkDirection}`,
-        panelName: `Link ID: ${item.linkDirection}`,
-        queryCondition
+      this.$router.push({
+        query: {
+          ...this.$route.query,
+          thirdPanel: drillDownPanelTypeMapping.linkMonitor,
+          thirdMenu: `Link ID: ${item.linkDirection}`,
+          panelName: `Link ID: ${item.linkDirection}`,
+          queryCondition,
+          t: +new Date()
+        }
      })
    }
  }
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -398,7 +398,8 @@ export default {
          query: {
            ...this.$route.query,
            thirdPanel: curTable.panelIdOfThirdMenu ? curTable.panelIdOfThirdMenu : '',
-            fourthPanel: toPanel || ''
+            fourthPanel: toPanel || '',
+            t: +new Date()
          }
        })
      }
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -1158,7 +1158,6 @@ export default {
        })
      }
      this.saveUserLocalConfig()
-      console.log(this.drillDownTableConfigs)
      this.$store.getters.menuList.forEach(menu => {
        if (this.$_.isEmpty(menu.children) && menu.route) {
          if (this.$route.path === menu.route) {
@@ -1183,10 +1182,14 @@ export default {
        }
      })
      this.changeUrlTabState()
-      this.jumpAndCache(this.$route.path, {
-        ...this.$route.query,
-        thirdPanel: this.curTable.panelIdOfThirdMenu,
-        fourthPanel: toPanel
+      this.$router.push({
+        path: this.$route.path,
+        query: {
+          ...this.$route.query,
+          thirdPanel: this.curTable.panelIdOfThirdMenu,
+          fourthPanel: toPanel,
+          t: +new Date()
+        }
      })
    },
    handleSearchParams (columnValue) {
@@ -1550,7 +1553,6 @@ export default {
    async getUserLocalConfig () {
      const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId })
      if (userLocalCongfig) {
-        console.info(userLocalCongfig.config)
        return userLocalCongfig.config
      } else {
        return null
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -326,7 +326,8 @@ export default {
        query: {
          ...this.$route.query,
          thirdPanel: curTable.panelIdOfThirdMenu ? curTable.panelIdOfThirdMenu : '',
-          fourthPanel: toPanel || ''
+          fourthPanel: toPanel || '',
+          t: +new Date()
        }
      })
    },
--- a/src/views/charts2/charts/npm/NpmIpMap.vue
+++ b/src/views/charts2/charts/npm/NpmIpMap.vue
@@ -116,7 +116,6 @@ export default {
                t.score = 6
              }
            })
-            console.info(mapData)
            this.loadMarkerData(imageSeries, mapData)
          })
        }).finally(() => {