fix：修复report页点击tab栏，地址栏和分页刷新的问题

src/components/common/Pagination.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pagination">
-      <el-pagination
+    <el-pagination
         ref="page"
         @size-change="size"
         @prev-click="prev"
@@ -11,12 +11,14 @@
         :page-size="Number(pageObj.pageSize)"
         :layout="layout"
         :total="pageObj.total"
-      >
+    >
-        <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"  :popper-append-to-body="appendToBody" class="pagination-size-select" @change="size" :popper-class="popClass" @visible-change="popperVisible">
+      <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"
-          <el-option v-for="(item, index) in pageSizes" :key="index" :label="item.label" :value="item.value"></el-option>
+                 :popper-append-to-body="appendToBody" class="pagination-size-select" @change="size"
-        </el-select>
+                 :popper-class="popClass" @visible-change="popperVisible">
+        <el-option v-for="(item, index) in pageSizes" :key="index" :label="item.label" :value="item.value"></el-option>
+      </el-select>
 
-      </el-pagination>
+    </el-pagination>
   </div>
 </template>
 
@@ -48,8 +50,7 @@ export default {
   setup () {
     const { query } = useRoute()
     const pageSize = ref(defaultPageSize)
-    console.log('初始化路由信息', query);
+    const currentPageNo = ref(query.pageNo || 1)
-    let currentPageNo = ref(query.pageNo || 1)
 
     return {
       pageSize,
@@ -80,10 +81,10 @@ export default {
      * 向地址栏添加/删除参数
      */
     reloadUrl (newParam, clean) {
-      const { query } = this.$route;
+      const { query } = this.$route
-      let newUrl = urlParamsHandler(window.location.href, query, newParam);
+      let newUrl = urlParamsHandler(window.location.href, query, newParam)
-      if(clean) {
+      if (clean) {
-        newUrl = urlParamsHandler(window.location.href, query, newParam, clean);
+        newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
       }
       overwriteUrl(newUrl)
     },
@@ -127,10 +128,10 @@ export default {
       this.scrollbarToTop()
       // this.currentPageNo = val;
 
-      let newParam = {
+      const newParam = {
         pageNo: val
       }
-      this.reloadUrl(newParam);
+      this.reloadUrl(newParam)
     },
     /**
      * 更改页码大小
@@ -141,10 +142,10 @@ export default {
       this.$emit('pageSize', val)
       this.backgroundColor()
 
-      let newParam = {
+      const newParam = {
         pageSize: val
       }
-      this.reloadUrl(newParam);
+      this.reloadUrl(newParam)
     },
     scrollbarToTop () {
       this.$nextTick(() => {
@@ -159,7 +160,10 @@ export default {
     resetPageSizes: function () {
       if (this.postPageSizes) {
         this.pageSizes = this.postPageSizes.map((item) => {
-          return { label: item + this.$t('pageSize'), value: item }
+          return {
+            label: item + this.$t('pageSize'),
+            value: item
+          }
         })
       }
     },
@@ -182,9 +186,9 @@ export default {
       }
     }
 
-    this.size(this.pageSize);
+    this.size(this.pageSize)
-    this.currentPageNo = parseInt(this.currentPageNo);
+    this.currentPageNo = parseInt(this.currentPageNo)
-    this.current(this.currentPageNo);
+    this.current(this.currentPageNo)
   },
   watch: {
     postPageSizes: {

src/views/report/reportTest.vue

@@ -40,6 +40,7 @@
               :category-list="builtinReportLeftMenu"
               :height="mainTableHeight"
               :table-data="tableData"
+              :category-id="builtinId"
               @delete="del"
               @edit="edit"
               @download="download"
@@ -156,7 +157,7 @@ export default {
    */
   setup () {
     const { query } = useRoute()
-    const builtinId = ref(parseInt(query.ategoryId) || '')
+    const builtinId = ref(parseInt(query.categoryId) || '')
     const urlPageNo = ref(parseInt(query.pageNo) || 1)
 
     return {
@@ -173,22 +174,34 @@ export default {
   },
   mounted () {
     this.$nextTick(() => {
-      this.queryGetTempData();      
+      this.queryGetTempData()
-    });    
+    })
   },
   watch: {
     builtinId (n) {
       const { query } = this.$route
       let newUrl = urlParamsHandler(window.location.href, query, {
-        ategoryId: n
+        categoryId: n,
+        pageNo: 1,
+        pageSize: 20
       })
 
       // 点击“全部”或者首次进入界面时，不显示左侧菜单栏参数
-      if(n === null) {
+      const newQuery = JSON.parse(JSON.stringify(query)) // 深拷贝路由数据
-        let newQuery = JSON.parse(JSON.stringify(query)) // 深拷贝路由数据
+
-        delete newQuery.ategoryId;
+      if (n === null) {
-        newUrl = urlParamsHandler(window.location.href, query, newQuery, 'clean')
+        delete newQuery.categoryId
+      } else {
+        delete newQuery.startTime
+        delete newQuery.endTime
+        delete newQuery.expandId
+        delete newQuery.expandPage
+        delete newQuery.pageNo
+        delete newQuery.pageSize
       }
+
+      newUrl = urlParamsHandler(window.location.href, query, newQuery, 'clean')
+
       overwriteUrl(newUrl)
     }
   },
@@ -204,17 +217,17 @@ export default {
             }
           })
 
-          if(this.builtinId !== '') {
+          if (this.builtinId !== '') {
-            this.builtinTabs (this.builtinId);
+            this.builtinTabs(this.builtinId, 'init')
           } else {
-            this.getTableData();
+            this.getTableData()
           }
         }
         this.builtinLeftLoading = false
       })
     },
     getTableData (params) {
-      this.searchLabel = null;
+      this.searchLabel = null
       if (params) {
         this.searchLabel = { ...this.searchLabel, ...params }
       }
@@ -226,28 +239,28 @@ export default {
         listUrl = this.listUrl
       }
 
-      if(this.builtinId !== '') {
+      if (this.builtinId !== '') {
-        this.searchLabel.categoryId = this.builtinId;
+        this.searchLabel.categoryId = this.builtinId
       }
 
       // 该请求不知道为什么会走2次，此处留个记录，后续解决。
-      this.getNum = this.getNum + 1;
+      this.getNum = this.getNum + 1
-      if(this.getNum >0) {
+      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.$nextTick(()=>{
+            this.$nextTick(() => {
-              this.tableData = [];
+              this.tableData = []
               this.tableData = response.data.list.map(item => {
                 return {
                   ...item,
                   config: item.config ? JSON.parse(item.config) : {}
                 }
               })
-              this.pageObj.total = response.data.total;              
+              this.pageObj.total = response.data.total
             })            
             // TODO 回到顶部
           }
@@ -257,9 +270,13 @@ export default {
     /**
      * 点击左侧tab页
      */
-    builtinTabs (id) {
+    builtinTabs (id, flag) {
       this.builtinId = id
-      this.getTableData({ categoryId: id });
+      if (flag === undefined) {
+        this.pageObj.pageNo = 1
+        this.pageObj.pageSize = 20
+      }
+      this.getTableData({ categoryId: id })
     },
     edit (u) {
       this.initConfig(u)
@@ -305,9 +322,6 @@ export default {
         }
       }
     }
-  },
-  beforeDestroy(to, from, next) {
-    this.getNum = null;
   }
 }
 </script>