feat: 对除dashboard外的列表每页记录数进行缓存记录

nezha-fronted/src/components/common/language/cn.js

@@ -48,6 +48,7 @@ const cn = {
     downloadButtonTitle:'下载',
     filePath:'文件路径',
   },
+  pageSize: '条/页',
   login: {
     username: '登录名',
     password: '密码',

nezha-fronted/src/components/common/language/en.js

@@ -64,6 +64,7 @@ const en = {
       failedDetail:'Failed Detail'
     }
   },
+  pageSize: '/page',
   webshell:{
     shellTitle:'Local Shell',
     upload:'Upload',

nezha-fronted/src/components/common/pagination.vue

@@ -8,7 +8,7 @@
       @current-change="current"
       :current-page="pageObj.pageNo"
       :page-sizes="pageSizes?pageSizes:[20, 50, 100]"
-      :page-size="20"
+      :page-size="pageSize"
       layout="total, prev, pager, next,sizes,jumper"
       :total="this.pageObj.total"
     ></el-pagination>
@@ -18,9 +18,11 @@
 <script>
 export default {
   name: "pagination",
-  props: ['pageObj','pageSizes'],
+  props: ['pageObj','pageSizes', 'tableId'],
   data() {
-    return {};
+    return {
+      pageSize: 20
+    };
   },
   methods: {
     background() {
@@ -51,6 +53,14 @@ export default {
         //console.info(element)
       }
     },
+  },
+  mounted() {
+    let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+    this.pageSize = pageSize ? pageSize : 20;
+    this.$nextTick(() => {
+      let input = document.querySelector(".el-pagination .el-select .el-input__inner");
+      input.value = this.pageSize + this.$t('pageSize');
+    });
   }
 };
 </script>

nezha-fronted/src/components/page/alert/config.vue

@@ -84,7 +84,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
     <alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
@@ -107,6 +107,7 @@
     name: "alert-config",
     data() {
       return {
+        tableId: 'alertRuleTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         searchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
@@ -355,6 +356,7 @@
       },
       pageSize(val) {
         this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
       },
       search: function (searchObj) {
@@ -407,6 +409,12 @@
       }
     },
     mounted() {
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize) {
+        this.pageObj.pageSize = pageSize
+      }
+
       this.getTableData();
       this.$nextTick(() => {
         //绑定滚动条事件，控制top按钮

nezha-fronted/src/components/page/alert/list.vue

@@ -91,7 +91,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       <button class="to-top" v-show="showTopBtn" @click="toTop()"><i class="nz-icon nz-icon-top"></i></button>
     </div>
     <alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
@@ -114,6 +114,7 @@
     name: "alertList",
     data() {
       return {
+        tableId: 'alertListTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         pageObj: {
           pageNo: 1,
@@ -294,6 +295,7 @@
       },
       pageSize(val) {
         this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getAlertList();
         this.$nextTick(() => {
           this.gutterHandler(".nz-table");
@@ -358,6 +360,12 @@
       }
     },
     mounted() {
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize) {
+        this.pageObj.pageSize = pageSize
+      }
+
       this.getAlertList();
       this.$nextTick(() => {
         //绑定滚动条事件，控制top按钮

nezha-fronted/src/components/page/asset/asset.vue

@@ -181,7 +181,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
@@ -215,6 +215,7 @@
     },
     data() {
       return {
+        tableId: 'assetTable', //需要分页的table的id，用于记录每页数量
         searchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
           searchLabelList: [{
@@ -708,6 +709,7 @@
       ,
       pageSize(val) {
         this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getAssetData()
       },
       getPrincipalName(data) {
@@ -772,6 +774,12 @@
       this.getIDCOptionData();
     },
     mounted() {
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize) {
+        this.pageObj.pageSize = pageSize
+      }
+
       this.$nextTick(() => {
         //左侧dc列表初始选中状态
         if (this.$store.state.assetData.selectedData.length > 0) {

nezha-fronted/src/components/page/config/account.vue

@@ -86,7 +86,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
@@ -177,6 +177,7 @@
     name: "account",
     data() {
       return {
+        tableId: 'accountTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         rightBox: { //弹出框相关
           show: false,
@@ -492,6 +493,7 @@
       },
       pageSize(val) {
         this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
       },
       search: function (searchObj) {
@@ -513,6 +515,12 @@
       }
     },
     mounted() {
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize) {
+        this.pageObj.pageSize = pageSize
+      }
+
       this.getTableData();
       this.initReceiverData();
       this.$nextTick(() => {

nezha-fronted/src/components/page/config/dc.vue

@@ -69,7 +69,7 @@
           :data="tableData"
           border
           v-scrollBar:el-table
-          height="calc(100% - 125px)"
+          :height="$tableHeight.normal"
           ref="dcTable"
           style="width: 100%;">
           <el-table-column
@@ -128,7 +128,7 @@
             </template>
           </el-table-column>
         </el-table>
-        <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+        <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         <button class="to-top" v-show="showTopBtn1" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
         <!--dc table end-->
       <element-set
@@ -232,6 +232,7 @@
     },
     data() {
       return {
+        tableId: 'dcTable', //需要分页的table的id，用于记录每页数量
         showTopBtn1: false,
         showTopBtn2: false,
         currentDc: {
@@ -492,6 +493,7 @@
         this.getTableData();
       },
       pageSize(val) {
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.pageObj.pageSize = val;
         this.getTableData();
       },
@@ -563,6 +565,12 @@
       }
     },
     mounted() {
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize) {
+        this.pageObj.pageSize = pageSize
+      }
+
       this.getTableData();
       this.$nextTick(function(){
         this.getUserData();//绑定滚动条事件，控制top按钮

nezha-fronted/src/components/page/config/model.vue

@@ -70,7 +70,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
@@ -90,6 +90,7 @@
     name: "model",
     data() {
       return {
+        tableId: 'modelTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         model: {
           id: '',
@@ -248,6 +249,7 @@
       },
       pageSize(val) {
         this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
       },
       search: function (searchObj) {
@@ -274,6 +276,12 @@
       }
     },
     mounted: function () {
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize) {
+        this.pageObj.pageSize = pageSize
+      }
+
       this.getTableData();
       this.$nextTick(() => {
         //绑定滚动条事件，控制top按钮

nezha-fronted/src/components/page/config/promServer.vue

@@ -77,7 +77,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
@@ -198,6 +198,7 @@
     name: "prom",
     data() {
       return {
+        tableId: 'promTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         rightBox: { //弹出框相关
           show: false,
@@ -559,6 +560,7 @@
       },
       pageSize(val) {
         this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
       },
       search: function (searchObj) {
@@ -643,6 +645,12 @@
       },
     },
     mounted: function () {
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize) {
+        this.pageObj.pageSize = pageSize
+      }
+
       this.getIdcData();
       this.getUserData();
       this.$nextTick(() => {

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -784,7 +784,6 @@
             }
           }
         }
-        console.info(data);
         callback(data);
       },
 

nezha-fronted/src/components/page/project/project.vue

@@ -168,7 +168,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <Pagination v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
+      <Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
       <button class="to-top" v-show="showTopBtn1" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
@@ -347,6 +347,7 @@
     data() {
       let temp=this;
       return {
+        tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
         tableShow: 1, // 1.endpoint; 2.metrics
         showTopBtn1: false,
         showTopBtn2: false,
@@ -954,6 +955,7 @@
       },
       endpointPageSize(val) {
         this.endpointPageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getEndpointTableData();
         this.$nextTick(() => {
           this.gutterHandler(".endpoint-table");
@@ -1608,6 +1610,12 @@
       this.getMetricsTableData();
     },
     mounted() {
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize) {
+        this.endpointPageObj.pageSize = pageSize
+      }
+
       this.getPanelData();
       setTimeout(()=>{
         this.getEndpointTableData();