解决报告模块刷新重置

src/components/common/Pagination.vue

@@ -23,6 +23,7 @@
 <script>
 import { defaultPageSize } from '@/utils/constants'
 import { storageKey } from '@/utils/constants'
+import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 
 export default {
   name: 'pagination',
@@ -58,6 +59,17 @@ export default {
     }
   },
   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);
+      }
+      overwriteUrl(newUrl)
+    },
     popperVisible: function (visible) {
       if (visible == true) {
         this.$nextTick(() => {
@@ -96,12 +108,29 @@ export default {
       this.$emit('pageNo', val)
       this.backgroundColor()
       this.scrollbarToTop()
+
+      sessionStorage.setItem('report_pagination_current', JSON.stringify(val));
+      if(val != null) {
+        let newParam = {
+          currentPage: val
+        }
+        this.reloadUrl(newParam);
+      }
     },
+    /**
+     * 更改页码大小
+     */
     size (val) {
       // eslint-disable-next-line vue/no-mutating-props
       this.pageObj.pageNo = 1
       this.$emit('pageSize', val)
       this.backgroundColor()
+
+      sessionStorage.setItem('report_pagination_size', JSON.stringify(val));
+      let newParam = {
+        pageSize: val
+      }
+      this.reloadUrl(newParam);
     },
     scrollbarToTop () {
       this.$nextTick(() => {
@@ -122,10 +151,10 @@ export default {
     },
     // 设置当前页的样式
     backgroundColor () {
-      this.list = this.$refs.page.$el.children[2].children
+      // this.list = this.$refs.page.$el.children[2].children
-      for (let i = 0; i < this.list.length; i++) {
+      // for (let i = 0; i < this.list.length; i++) {
-        // const element = this.list[i]
+      //   // const element = this.list[i]
-      }
+      // }
     }
   },
   mounted () {
@@ -138,6 +167,19 @@ export default {
         this.pageSize = parseInt(pageSize)
       }
     }
+
+    let pageSize = sessionStorage.getItem('report_pagination_size'); // 缓存的每页个数
+    let currentPage = sessionStorage.getItem('report_pagination_current'); // 当前页码
+
+    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

@@ -6,9 +6,10 @@
       :height="height"
       :expand-row-keys="expandedIds"
       empty-text=" "
-      row-key="id"
       border
       tooltip-effect="light"
+      :row-key="(row) => { return row.id }"
+      :reserve-selection="true"
       @header-dragend="dragend"
       @sort-change="tableDataSort"
       @expand-change="dropExpandChange"
@@ -197,7 +198,7 @@
     </el-table-column>
   </el-table>
   <div class="table-operation-all">
-    <el-checkbox v-model="checkboxAll" @change="selectAll(tableData)"></el-checkbox>
+    <el-checkbox v-model="checkboxAll" :indeterminate="isIndeterminate" @change="selectAll(tableData)"></el-checkbox>
     <div class="table-operation-all-span">
       <span>{{ $t('overall.all') }}</span>
       <div class="table-operation-back-down" :class="{'table-operation-all-checkbox': batchDow, 'table-operation-all-loading': loading}" @click="checkboxIds.id ? tableOperation(['delete', checkboxIds]) : ''">
@@ -214,6 +215,7 @@ import Loading from '@/components/common/Loading'
 import { del, get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { storageKey, report } from '@/utils/constants'
+import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import { ref } from 'vue'
 import { dateFormatToUTC, getNowTime } from '@/utils/date-util'
 import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
@@ -281,6 +283,7 @@ export default {
         }
       ],
       checkboxAll: false,
+      isIndeterminate: false,
       checkboxIds: {},
       batchDow: false,
       builtinId: '',
@@ -314,7 +317,15 @@ export default {
       monthList: report.monthList,
       weekOptions: report.weekOptions,
       configPeriod: '',
-      configCustom: ''
+      configCustom: '',
+      selectIds: [], // 单行选中的id列表
+    }
+  },
+  watch: {
+    'tableData'(newVal, oldVal) {
+        if(newVal) {
+          this.showSelectedRow();
+        }
     }
   },
   computed: {
@@ -355,7 +366,41 @@ export default {
       }
     }
   },
+  mounted() {
+    this.expandTable();    
+  },
   methods: {
+    /**
+     * 进入页面判断是否需要展开表格
+     * 即展开表格后刷新界面，保持展开效果
+     */
+     expandTable() {
+      let expandInfo = sessionStorage.getItem('report_expand_table');
+      expandInfo = JSON.parse(expandInfo);
+      
+      if(expandInfo !== null && expandInfo !== undefined) {
+        let obj = {
+          id: expandInfo[0]
+        }
+        this.dropExpandChange(obj, expandInfo);
+      }      
+    },
+    /**
+     * 显示选中的行，即分页后依旧显示
+     */
+    showSelectedRow() {
+      let selectIds = this.selectIds;
+
+      this.$nextTick(() => {
+        if(selectIds.length>0) {
+          this.tableData.forEach(item =>{
+            if(selectIds.includes(item.id)) {
+              this.$refs.dataTable.toggleRowSelection(item);
+            }
+          })
+        }
+      });      
+    },
     getJobStatus (report) {
       if (report.state === 1 && report.upload === 1) {
         return this.$t('overall.completed')
@@ -368,27 +413,82 @@ export default {
         this.tableOperation(arr)
       }
     },
-    selectionChange (objs) {
+    /**
+     * 单行选中
+     */
+     selectionChange (objs) {
       this.$emit('selectionChange', objs)
-      this.checkboxIds.id = objs.map(item => { return item.id }).join(',')
+      this.checkboxIds.id = objs.map(item => { return item.id }).join(',');
-      this.checkboxAll = objs.length > 0 || objs.length === this.tableData.length
+
-      this.batchDow = objs.length > 0
+      this.batchDow = objs.length > 0;
+
+      this.checkboxAll = objs.length === this.tableData.length;
+      this.isIndeterminate = objs.length > 0 && objs.length < this.tableData.length;
+      
+      // 选中状态回显
+      let selectIds = [];
+      if(objs.length > 0) {
+        objs.forEach(item => {
+          selectIds.push(item.id);
+        })
+        this.selectIds = selectIds;
+      }
     },
+    /**
+     * 全选按钮
+     */
     selectAll (objs) {
+      let selectIds = [];
+      this.isIndeterminate = false;
+
       if (objs) {
         objs.forEach(item => {
-          this.$refs.dataTable.toggleAllSelection(item)
+          this.$refs.dataTable.toggleAllSelection(item);
+          // this.checkboxAll = true;
+          selectIds.push(item.id);
         })
       } else {
         this.$refs.dataTable.clearSelection()
       }
+
+      this.selectIds = selectIds;
     },
+    /**
+     * 向地址栏添加/删除参数
+     */
+    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);
+      }
+      overwriteUrl(newUrl)
+    },
+    /**
+     * 表格左侧点击展开收起
+     */
     dropExpandChange (row, expandedRows) {
       this.expandedIds = []
       clearInterval(this.interval)
       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) {

src/views/charts/charts/chartDetectionPagination.vue

@@ -1,47 +1,83 @@
 <template>
   <el-pagination
-      small
+    small
-      ref="pagination"
+    ref="pagination"
-      :current-page="pageObj.pageNo"
+    :current-page="pageObj.pageNo"
-      :page-size="pageObj.pageSize"
+    :page-size="pageObj.pageSize"
-      layout="total,prev,jumper,slot,next"
+    layout="total,prev,jumper,slot,next"
-      class="chart-table-pagination"
+    class="chart-table-pagination"
-      :total="pageObj.total"
+    :total="pageObj.total"
-      @current-change="currentChange"
+    @current-change="currentChange"
   >
     <span>/&nbsp;{{totalPage}}</span>
   </el-pagination>
 </template>
 
 <script>
+import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
+import { useRoute } from 'vue-router'
+import { ref, shallowRef } from 'vue'
 export default {
   name: 'chartDetectionPagination',
   props: {
-    pageObj: Object
+    pageObj: Object,
   },
-  data () {
+  data() {
     return {
-
+      newPageObj: {},
     }
   },
+  // setup () {
+  //   const { query } = useRoute()
+  //   const pagination = ref(query.expandPaginaTionPage || 1)
+  //   return {
+  //     pagination
+  //   }
+  // },
   computed: {
-    totalPage () {
+    totalPage() {
       const remainder = this.pageObj.total % this.pageObj.pageSize
       if (remainder) {
         return parseInt(this.pageObj.total / this.pageObj.pageSize) + 1
       } else {
         return parseInt(this.pageObj.total / this.pageObj.pageSize)
       }
-    }
+    },
   },
   methods: {
-    currentChange: function (val) {
+    /**
+     * 当前页改变
+     */
+    currentChange: function(val) {
       this.$emit('pageJump', val)
       this.pageObj.pageNo = val
-    }
+
+      sessionStorage.setItem('report_select_expand_pagination', JSON.stringify(val))
+
+      let newParam = {
+        expandPaginaTionPage: val,
+      }
+      const { query } = this.$route
+      let newUrl = urlParamsHandler(window.location.href, query, newParam)
+      overwriteUrl(newUrl)
+    },
+    initData() {
+      let pageNo = sessionStorage.getItem('report_select_expand_pagination');
+      if (pageNo != null) {
+        pageNo = JSON.parse(pageNo)
+        this.pageObj.pageNo = pageNo
+        this.currentChange(pageNo, 'init')
+      }
+    },
   },
-  mounted () {
+  mounted() {
     this.$el.querySelector('.el-pagination__jump').childNodes[0].nodeValue = ''
-  }
+
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.initData()
+      }, 100)
+    })
+  },
 }
 </script>

src/views/report/reportTest.vue

@@ -75,6 +75,7 @@ import builtinReportTable from '@/components/table/report/reportTestTable'
 import cnDataList from '@/components/table/CnDataList'
 import dataListMixin from '@/mixins/data-list'
 import { api } from '@/utils/api'
+import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import ReportBox from '@/components/rightBox/report/ReportBox'
 import Loading from '@/components/common/Loading'
 
@@ -84,7 +85,7 @@ export default {
     return {
       builtinReportLeftMenu: [], // 左侧列表菜单数据
       builtinColor: false,
-      builtinId: '',
+      builtinId: -1,
       url: api.reportTemp,
       blankObject: {
         id: '',
@@ -154,7 +155,23 @@ export default {
     builtinReportTable,
     ReportBox
   },
+  mounted () {
+    this.$nextTick(() => {
+      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);
+      }
+      overwriteUrl(newUrl)
+    },
     queryGetTempData () {
       this.builtinLeftLoading = true
       get(api.reportCategory).then(res => {
@@ -165,6 +182,15 @@ 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);            
+          } else {
+            this.builtinId = null;
+            this.getTableData();
+          }
         }
         this.builtinLeftLoading = false
       })
@@ -180,26 +206,51 @@ export default {
       if (this.listUrl) {
         listUrl = this.listUrl
       }
-      get(listUrl, this.searchLabel).then(response => {
+
-        // this.tools.loading = false
+      let urlTabId = this.$route.query.tabId;
-        if (response.code === 200) {
+
-          for (let i = 0; i < response.data.list.length; i++) {
+      // 该请求不知道为什么会走2次，此处留个记录，后续解决。为避免请求两次，所以加上判断保证请求一次
-            response.data.list[i].status = response.data.list[i].status + ''
+      // 前面条件是第一次进来时，左侧菜单栏点击缓存为null的情况；
-          }
+      // 后面条件是点击菜单栏后刷新界面的情况
-          this.tableData = response.data.list.map(item => {
+      if((this.builtinId === null) || (this.builtinId > -1 && urlTabId !== undefined)) {
-            return {
+        get(listUrl, this.searchLabel).then(response => {
-              ...item,
+          // this.tools.loading = false
-              config: item.config ? JSON.parse(item.config) : {}
+          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 => {
-          this.pageObj.total = response.data.total
+              return {
-          // TODO 回到顶部
+                ...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');
+      }
     },
     edit (u) {
       this.initConfig(u)
@@ -245,9 +296,6 @@ export default {
         }
       }
     }
-  },
-  mounted () {
-    this.queryGetTempData()
   }
 }
 </script>