CN-697 feat: npm-tab保留状态

src/views/charts2/ChartList.vue

@@ -38,6 +38,8 @@ import _ from 'lodash'
 import Chart from '@/views/charts2/Chart'
 import { panelTypeAndRouteMapping, storageKey, drillDownPanelTypeMapping } from '@/utils/constants'
 import { typeMapping } from '@/views/charts2/chart-tools'
+import { useRoute } from 'vue-router'
+import { ref } from 'vue'
 export default {
   name: 'ChartList',
   props: {
@@ -52,8 +54,7 @@ export default {
     return {
       panelTypeAndRouteMapping,
       typeMapping,
-      layout: [],
+      layout: []
-      npmTabIndex: 0
     }
   },
   components: {
@@ -61,6 +62,14 @@ export default {
     GridItem: VueGridLayout.GridItem,
     Chart
   },
+  setup () {
+    const { query } = useRoute()
+    const tabIndexParam = query.tabIndex
+    const npmTabIndex = ref(tabIndexParam ? parseInt(tabIndexParam) : 0)
+    return {
+      npmTabIndex
+    }
+  },
   watch: {
     chartList (n) {
       if (!_.isEmpty(n)) {

src/views/charts2/charts/npm/NpmTabs.vue

@@ -20,18 +20,41 @@ import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { drillDownPanelTypeMapping } from '@/utils/constants'
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import { useRoute } from 'vue-router'
+import { ref } from 'vue'
 export default {
   name: 'NpmTabs',
   data () {
     return {
-      currentTab: 0,
+      leftOffset: 27
-      leftOffset: 27,
-      tabs: []
     }
   },
   mixins: [chartMixin],
+  setup (props) {
+    const tabs = ref([])
+    if (props.chart.params && props.chart.params.tabs) {
+      tabs.value = [...props.chart.params.tabs]
+      tabs.value.forEach(item => {
+        item.disable = false
+      })
+    }
+    const { query } = useRoute()
+    const tabIndexParam = query.tabIndex
+    const currentTab = ref(tabIndexParam ? parseInt(tabIndexParam) : 0)
+    return {
+      currentTab,
+      tabs
+    }
+  },
   watch: {
     currentTab (n) {
+      const { query } = this.$route
+      const newUrl = urlParamsHandler(window.location.href, query, {
+        tabIndex: n
+      })
+      overwriteUrl(newUrl)
+
       this.$nextTick(() => {
         this.handleActiveBar(n)
       })
@@ -43,22 +66,17 @@ export default {
   methods: {
     handleActiveBar (index) {
       const tabDom = document.getElementById('tab-' + index)
-      const offsetLeft = tabDom.offsetLeft
+      if (tabDom) {
-      const clientWidth = tabDom.clientWidth
+        const offsetLeft = tabDom.offsetLeft
-      const clientLeft = tabDom.clientLeft
+        const clientWidth = tabDom.clientWidth
-      const activeBar = document.querySelector('.npm-tabs .npm-tabs__active-bar')
+        const clientLeft = tabDom.clientLeft
-      activeBar.style.cssText += `width: ${clientWidth + 2}px; left: ${offsetLeft + this.leftOffset + clientLeft - 1}px;`
+        const activeBar = document.querySelector('.npm-tabs .npm-tabs__active-bar')
+        activeBar.style.cssText += `width: ${clientWidth + 2}px; left: ${offsetLeft + this.leftOffset + clientLeft - 1}px;`
+      }
     }
   },
   mounted () {
     this.toggleLoading(false)
-    if (this.chart.params && this.chart.params.tabs) {
-      this.tabs = this.chart.params.tabs
-      this.tabs.forEach(item => {
-        item.disable = false
-      })
-    }
-
     if (this.chart.panelId === drillDownPanelTypeMapping.npmOverviewIp) {
       // 当client或server的session数为0时，对应tab置灰，不可选，默认高亮另一个不为0的tab
       const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
@@ -96,7 +114,7 @@ export default {
       })
     } else {
       setTimeout(() => {
-        this.handleActiveBar(0)
+        this.handleActiveBar(this.currentTab)
       }, 400)
     }
   }