CN-701 fix：修复report页刷新不保持状态的bug

src/views/report/reportTest.vue

@@ -78,6 +78,8 @@ import { api } from '@/utils/api'
 import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import ReportBox from '@/components/rightBox/report/ReportBox'
 import Loading from '@/components/common/Loading'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
 
 export default {
   name: 'Report',
@@ -85,7 +87,7 @@ export default {
     return {
       builtinReportLeftMenu: [], // 左侧列表菜单数据
       builtinColor: false,
-      builtinId: -1,
+      // builtinId: '',
       url: api.reportTemp,
       blankObject: {
         id: '',
@@ -145,7 +147,21 @@ export default {
         'report.december'
       ],
       tableId: 'builtinReportTable',
-      builtinLeftLoading: false
+      builtinLeftLoading: false,
+      getNum: -1
+    }
+  },
+  /**
+   * 添加vue3的setup，目的是添加/获取地址栏的参数
+   */
+  setup () {
+    const { query } = useRoute()
+    const builtinId = ref(parseInt(query.ategoryId) || '')
+    const urlPageNo = ref(parseInt(query.pageNo) || 1)
+
+    return {
+      builtinId,
+      urlPageNo
     }
   },
   mixins: [dataListMixin],
@@ -160,18 +176,23 @@ export default {
       this.queryGetTempData();      
     });    
   },
-  methods: {
-    /**
-     * 向地址栏添加/删除参数
-     */
-     reloadUrl (newParam, clean) {
-      const { query } = this.$route;
-      let newUrl = urlParamsHandler(window.location.href, query, newParam);
-      if(clean) {
-        newUrl = urlParamsHandler(window.location.href, query, newParam, clean);
+  watch: {
+    builtinId (n) {
+      const { query } = this.$route
+      let newUrl = urlParamsHandler(window.location.href, query, {
+        ategoryId: n
+      })
+
+      // 点击“全部”或者首次进入界面时，不显示左侧菜单栏参数
+      if(n === null) {
+        let newQuery = JSON.parse(JSON.stringify(query)) // 深拷贝路由数据
+        delete newQuery.ategoryId;
+        newUrl = urlParamsHandler(window.location.href, query, newQuery, 'clean')
       }
       overwriteUrl(newUrl)
-    },
+    }
+  },
+  methods: {
     queryGetTempData () {
       this.builtinLeftLoading = true
       get(api.reportCategory).then(res => {
@@ -182,13 +203,10 @@ export default {
               config: c.config ? JSON.parse(c.config) : {}
             }
           })
-          let tabId = sessionStorage.getItem('report_select_tab');
-          if(tabId != null) {
-            tabId = JSON.parse(tabId);
-            this.builtinId = tabId;
-            this.builtinTabs(this.builtinId);            
+
+          if(this.builtinId !== '') {
+            this.builtinTabs (this.builtinId);
           } else {
-            this.builtinId = null;
             this.getTableData();
           }
         }
@@ -196,6 +214,7 @@ export default {
       })
     },
     getTableData (params) {
+      this.searchLabel = null;
       if (params) {
         this.searchLabel = { ...this.searchLabel, ...params }
       }
@@ -207,50 +226,40 @@ export default {
         listUrl = this.listUrl
       }
 
-      let urlTabId = this.$route.query.tabId;
+      if(this.builtinId !== '') {
+        this.searchLabel.categoryId = this.builtinId;
+      }
 
-      // 该请求不知道为什么会走2次，此处留个记录，后续解决。为避免请求两次，所以加上判断保证请求一次
-      // 前面条件是第一次进来时，左侧菜单栏点击缓存为null的情况；
-      // 后面条件是点击菜单栏后刷新界面的情况
-      if((this.builtinId === null) || (this.builtinId > -1 && urlTabId !== undefined)) {
+      // 该请求不知道为什么会走2次，此处留个记录，后续解决。
+      this.getNum = this.getNum + 1;
+      if(this.getNum >0) {
         get(listUrl, this.searchLabel).then(response => {
           // this.tools.loading = false
           if (response.code === 200) {
             for (let i = 0; i < response.data.list.length; i++) {
               response.data.list[i].status = response.data.list[i].status + ''
             }
-            this.tableData = response.data.list.map(item => {
-              return {
-                ...item,
-                config: item.config ? JSON.parse(item.config) : {}
-              }
-            })
-            this.pageObj.total = response.data.total;
+            this.$nextTick(()=>{
+              this.tableData = [];
+              this.tableData = response.data.list.map(item => {
+                return {
+                  ...item,
+                  config: item.config ? JSON.parse(item.config) : {}
+                }
+              })
+              this.pageObj.total = response.data.total;              
+            })            
             // TODO 回到顶部
           }
         })
       }
-
     },
     /**
      * 点击左侧tab页
      */
     builtinTabs (id) {
-      this.getTableData({ categoryId: id })
       this.builtinId = id
-
-      sessionStorage.setItem('report_select_tab', JSON.stringify(id));
-
-      if(id != null) {
-        let newParam = {
-          tabId: id
-        }
-        this.reloadUrl(newParam);
-      } else {
-        let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 深拷贝路由数据
-        delete newQuery.tabId;
-        this.reloadUrl(newQuery, 'cleanOldParams');
-      }
+      this.getTableData({ categoryId: id });
     },
     edit (u) {
       this.initConfig(u)
@@ -296,6 +305,9 @@ export default {
         }
       }
     }
+  },
+  beforeDestroy(to, from, next) {
+    this.getNum = null;
   }
 }
 </script>