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

src/components/common/Pagination.vue

@@ -24,6 +24,9 @@
 import { defaultPageSize } from '@/utils/constants'
 import { storageKey } from '@/utils/constants'
 import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { parseInt } from 'lodash'
 
 export default {
   name: 'pagination',
@@ -39,9 +42,23 @@ export default {
       default: 'total, prev, pager, next, slot'
     }
   },
+  /**
+   * 添加vue3的setup，目的是添加/获取地址栏的参数
+   */
+  setup () {
+    const { query } = useRoute()
+    const pageSize = ref(defaultPageSize)
+    console.log('初始化路由信息', query);
+    let currentPageNo = ref(query.pageNo || 1)
+
+    return {
+      pageSize,
+      currentPageNo
+    }
+  },
   data () {
     return {
-      pageSize: defaultPageSize,
+      // pageSize: defaultPageSize,
       pageSizes: [
         {
           label: '20' + this.$t('pageSize'),
@@ -108,25 +125,22 @@ export default {
       this.$emit('pageNo', val)
       this.backgroundColor()
       this.scrollbarToTop()
+      // this.currentPageNo = val;
 
-      sessionStorage.setItem('report_pagination_current', JSON.stringify(val));
-      if(val != null) {
       let newParam = {
-          currentPage: val
+        pageNo: val
       }
       this.reloadUrl(newParam);
-      }
     },
     /**
      * 更改页码大小
      */
     size (val) {
       // eslint-disable-next-line vue/no-mutating-props
-      this.pageObj.pageNo = 1
+      // this.pageObj.pageNo = 1
       this.$emit('pageSize', val)
       this.backgroundColor()
 
-      sessionStorage.setItem('report_pagination_size', JSON.stringify(val));
       let newParam = {
         pageSize: val
       }
@@ -168,18 +182,9 @@ export default {
       }
     }
     
-    let pageSize = sessionStorage.getItem('report_pagination_size'); // 缓存的每页个数
+    this.size(this.pageSize);
-    let currentPage = sessionStorage.getItem('report_pagination_current'); // 当前页码
+    this.currentPageNo = parseInt(this.currentPageNo);
-
+    this.current(this.currentPageNo);
-    if(pageSize !== undefined && pageSize !== null) {
-      pageSize = JSON.parse(pageSize);
-      this.size(pageSize);
-    }
-
-    if(currentPage !== undefined && currentPage !== null) {
-      currentPage = JSON.parse(currentPage);
-      this.current(currentPage);
-    }
   },
   watch: {
     postPageSizes: {

src/components/table/report/reportTestTable.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <el-table
       id="reportTable"
       ref="dataTable"
@@ -207,6 +208,7 @@
         </div>
       </div>
     </div>
+  </div>  
 </template>
 
 <script>
@@ -220,6 +222,8 @@ import { ref } from 'vue'
 import { dateFormatToUTC, getNowTime } from '@/utils/date-util'
 import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
+import { useRoute } from 'vue-router'
+
 export default {
   name: 'builtinReportTable',
   mixins: [table],
@@ -299,7 +303,7 @@ export default {
         total: 0,
         resetPageNo: true
       },
-      expandedIds: [],
+      // expandedIds: [],
       interval: null,
       typeMappings: [
         { key: 'day', value: this.$t('report.daily') },
@@ -321,11 +325,44 @@ export default {
       selectIds: [], // 单行选中的id列表
     }
   },
+  /**
+   * 添加vue3的setup，目的是添加/获取地址栏的参数
+   */
+  setup () {
+    const { startTime, endTime } = getNowTime(60 * 24 * 30)
+    const timeRange = ref([startTime, endTime])
+
+    const { query } = useRoute()
+    let expandedId = [];
+    if(query.expandId) {
+      expandedId.push(parseInt(query.expandId))
+    }
+    const expandedIds = ref(expandedId || [])
+
+    return {
+      timeRange,
+      expandedIds
+    }
+  },
   watch: {
     'tableData'(newVal, oldVal) {
         if(newVal) {
           this.showSelectedRow();
         }
+    },
+    expandedIds(newVal, oldVal) {
+        if(newVal != undefined && newVal.length>0) {
+          let newParam = {
+            expandId: newVal[0]
+          }
+          this.reloadUrl(newParam);
+        } else {
+          // 删除地址栏参数，然后删除缓存
+          let newQuery = this.$route.query // 深拷贝路由数据
+          delete newQuery.expandId;
+          delete newQuery.expandPaginaTionPage;
+          this.reloadUrl(newQuery, 'cleanOldParams');
+        }
     }
   },
   computed: {
@@ -375,10 +412,9 @@ export default {
      * 即展开表格后刷新界面，保持展开效果
      */
      expandTable() {
-      let expandInfo = sessionStorage.getItem('report_expand_table');
+      let expandInfo = this.expandedIds;
-      expandInfo = JSON.parse(expandInfo);
       
-      if(expandInfo !== null && expandInfo !== undefined) {
+      if(expandInfo !== undefined && expandInfo.length>0) {
         let obj = {
           id: expandInfo[0]
         }
@@ -473,22 +509,6 @@ export default {
       if (expandedRows.length > 0 && row) {
         this.expandedIds.push(row.id)
         this.datePickerChange(row)
-        // 存入缓存，随后向地址栏添加参数
-        sessionStorage.setItem('report_expand_table', JSON.stringify(this.expandedIds));
-
-        let newParam = {
-          expandId: row.id
-        }
-        this.reloadUrl(newParam);
-      } else {
-        // 删除地址栏参数，然后删除缓存
-        let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 深拷贝路由数据
-        delete newQuery.expandId;
-        delete newQuery.expandPaginaTionPage;
-        this.reloadUrl(newQuery, 'cleanOldParams');
-
-        sessionStorage.setItem('report_expand_table', null);
-        sessionStorage.setItem('report_select_expand_pagination', null);
       }
     },
     datePickerChange (row, show) {
@@ -644,13 +664,6 @@ export default {
   },
   beforeUnmount () {
     clearInterval(this.interval)
-  },
-  setup () {
-    const { startTime, endTime } = getNowTime(60 * 24 * 30)
-    const timeRange = ref([startTime, endTime])
-    return {
-      timeRange
-    }
   }
 }
 </script>

src/views/charts/charts/chartDetectionPagination.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+    <loading :loading="loading"></loading>
     <el-pagination
       small
       ref="pagination"
@@ -11,29 +13,37 @@
     >
       <span>/&nbsp;{{totalPage}}</span>
     </el-pagination>
+  </div>  
 </template>
 
 <script>
 import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import { useRoute } from 'vue-router'
 import { ref, shallowRef } from 'vue'
+import { parseInt } from 'lodash'
+import Loading from '@/components/common/Loading'
 export default {
   name: 'chartDetectionPagination',
   props: {
     pageObj: Object,
   },
+  components: {
+    Loading
+  },
   data() {
     return {
-      newPageObj: {},
+      initNum: -1,
+      loading: false,
+      timer: null
+    }
+  },
+  setup () {
+    const { query } = useRoute()
+    const pageNo = ref(query.expandPaginaTionPage || 1)
+    return {
+      pageNo
     }
   },
-  // setup () {
-  //   const { query } = useRoute()
-  //   const pagination = ref(query.expandPaginaTionPage || 1)
-  //   return {
-  //     pagination
-  //   }
-  // },
   computed: {
     totalPage() {
       const remainder = this.pageObj.total % this.pageObj.pageSize
@@ -49,10 +59,8 @@ export default {
      * 当前页改变
      */
     currentChange: function(val) {
-      this.$emit('pageJump', val)
       this.pageObj.pageNo = val
-
+      this.$emit('pageJump', val)
-      sessionStorage.setItem('report_select_expand_pagination', JSON.stringify(val))
 
       let newParam = {
         expandPaginaTionPage: val,
@@ -62,22 +70,25 @@ export default {
       overwriteUrl(newUrl)
     },
     initData() {
-      let pageNo = sessionStorage.getItem('report_select_expand_pagination');
+        let pageNo = this.pageNo;
-      if (pageNo != null) {
+        this.timer = setTimeout(() => {
-        pageNo = JSON.parse(pageNo)
+          this.currentChange(parseInt(pageNo));
-        this.pageObj.pageNo = pageNo
+        }, 500);
-        this.currentChange(pageNo, 'init')
+        
-      }
     },
   },
   mounted() {
     this.$el.querySelector('.el-pagination__jump').childNodes[0].nodeValue = ''
 
+    this.initNum = this.initNum+1;
+    if(this.initNum === 0) {
       this.$nextTick(()=>{
-      setTimeout(() => {
         this.initData()
-      }, 100)
       })
+    }
   },
+  beforeDestroy(to, from, next) {
+    clearTimeout(this.timer);
+  }
 }
 </script>

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: {
+  watch: {
-    /**
+    builtinId (n) {
-     * 向地址栏添加/删除参数
+      const { query } = this.$route
-     */
+      let newUrl = urlParamsHandler(window.location.href, query, {
-     reloadUrl (newParam, clean) {
+        ategoryId: n
-      const { query } = this.$route;
+      })
-      let newUrl = urlParamsHandler(window.location.href, query, newParam);
+
-      if(clean) {
+      // 点击“全部”或者首次进入界面时，不显示左侧菜单栏参数
-        newUrl = urlParamsHandler(window.location.href, query, newParam, clean);
+      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) {
+          if(this.builtinId !== '') {
-            tabId = JSON.parse(tabId);
-            this.builtinId = tabId;
             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,18 +226,21 @@ export default {
         listUrl = this.listUrl
       }
 
-      let urlTabId = this.$route.query.tabId;
+      if(this.builtinId !== '') {
+        this.searchLabel.categoryId = this.builtinId;
+      }
 
-      // 该请求不知道为什么会走2次，此处留个记录，后续解决。为避免请求两次，所以加上判断保证请求一次
+      // 该请求不知道为什么会走2次，此处留个记录，后续解决。
-      // 前面条件是第一次进来时，左侧菜单栏点击缓存为null的情况；
+      this.getNum = this.getNum + 1;
-      // 后面条件是点击菜单栏后刷新界面的情况
+      if(this.getNum >0) {
-      if((this.builtinId === null) || (this.builtinId > -1 && urlTabId !== undefined)) {
         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.$nextTick(()=>{
+              this.tableData = [];
               this.tableData = response.data.list.map(item => {
                 return {
                   ...item,
@@ -226,31 +248,18 @@ export default {
                 }
               })
               this.pageObj.total = response.data.total;              
+            })            
             // TODO 回到顶部
           }
         })
       }
-
     },
     /**
      * 点击左侧tab页
      */
     builtinTabs (id) {
-      this.getTableData({ categoryId: id })
       this.builtinId = id
-
+      this.getTableData({ categoryId: 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');
-      }
     },
     edit (u) {
       this.initConfig(u)
@@ -296,6 +305,9 @@ export default {
         }
       }
     }
+  },
+  beforeDestroy(to, from, next) {
+    this.getNum = null;
   }
 }
 </script>