From 1079de012d65c775e17d6fbe68d87eba0795d748 Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Mon, 16 Mar 2020 15:47:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=88=86=E9=A1=B5=E6=8F=92=E4=BB=B6bug?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-table.vue     |  4 +-
 .../src/components/common/pagination.vue      | 66 ++++++++++++++++---
 .../src/components/page/alert/config.vue      |  2 +-
 .../src/components/page/alert/list.vue        |  2 +-
 .../src/components/page/asset/asset.vue       |  2 +-
 .../src/components/page/config/account.vue    |  2 +-
 .../src/components/page/config/dc.vue         |  2 +-
 .../src/components/page/config/model.vue      |  2 +-
 .../src/components/page/config/promServer.vue |  2 +-
 9 files changed, 67 insertions(+), 17 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index fcf80eb46..9b477602a 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -45,7 +45,7 @@
                   </template>
                 </el-table-column>
             </el-table>
-          <Pagination :pageObj="pageObj" @pageNo='pageNo' :page-sizes="pageSizes" @pageSize='pageSize' ref="Pagination"></Pagination>
+          <Pagination :pageObj="pageObj" @pageNo='pageNo' :post-page-sizes="pageSizes" @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
         <!--全屏-->
           <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenModal = false" >
@@ -72,7 +72,7 @@
                       </template>
                     </el-table-column>
                 </el-table>
-            <Pagination :pageObj="screenPageObj" :page-sizes="pageSizes" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination"></Pagination>
+            <Pagination :pageObj="screenPageObj" :post-page-sizes="pageSizes" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination"></Pagination>
             <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
             <!--
                 <div v-show="showLoadingScreen" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
diff --git a/nezha-fronted/src/components/common/pagination.vue b/nezha-fronted/src/components/common/pagination.vue
index 743840b84..ee5883c6e 100644
--- a/nezha-fronted/src/components/common/pagination.vue
+++ b/nezha-fronted/src/components/common/pagination.vue
@@ -9,19 +9,38 @@
       :current-page="pageObj.pageNo"
       :page-sizes="pageSizes?pageSizes:[20, 50, 100]"
       :page-size="pageSize"
-      layout="total, prev, pager, next,sizes,jumper"
+      layout="total, prev, pager, next,slot,jumper"
       :total="this.pageObj.total"
-    ></el-pagination>
+    >
+      <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"  :popper-append-to-body="false" class="pagination-size-select" @change="size">
+        <el-option v-for="(item,index) in pageSizes" :key="item.value" :label="item.label" :value="item.value"></el-option>
+      </el-select>
+
+    </el-pagination>
   </div>
 </template>
 
 <script>
 export default {
   name: "pagination",
-  props: ['pageObj','pageSizes', 'tableId'],
+  props: ['pageObj', 'tableId','postPageSizes'],
   data() {
     return {
-      pageSize: 20
+      pageSize: 20,
+      pageSizes:[
+        {
+          label:'20'+this.$t('pageSize'),
+          value:20
+        },
+        {
+          label:'50'+this.$t('pageSize'),
+          value:50
+        },
+        {
+          label:'100'+this.$t('pageSize'),
+          value:100
+        },
+      ]
     };
   },
   methods: {
@@ -42,9 +61,17 @@ export default {
       this.backgroundColor();
     },
     size(val) {
+      this.pageObj.pageNo=1;
       this.$emit("pageSize", val);
       this.backgroundColor();
     },
+    resetPageSizes:function(){
+      if(this.postPageSizes){
+        this.pageSizes=this.postPageSizes.map((item)=>{
+          return {label:item+this.$t('pageSize'),value:item}
+        })
+      }
+    },
     //设置当前页的样式
     backgroundColor() {
       this.list = this.$refs.page.$el.children[2].children;
@@ -55,12 +82,28 @@ export default {
     },
   },
   mounted() {
-    let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-    this.pageSize = this.pageSizes && this.pageSizes.length > 0 ? this.pageSizes[0] : (pageSize ? pageSize : 20);
+    if(this.postPageSizes&&this.postPageSizes.length>0){
+       this.pageSize=this.postPageSizes[0];
+       this.resetPageSizes();
+    }else{
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if(pageSize != 'undefined'){
+        this.pageSize=parseInt(pageSize);
+      }
+    }
     this.$nextTick(() => {
-      let input = document.querySelector(".el-pagination .el-select .el-input__inner");
-      input.value = this.pageSize + this.$t('pageSize');
+      // let input = document.querySelector(".el-pagination .el-select .el-input__inner");
+      // input.value = this.pageSize + this.$t('pageSize');
     });
+  },
+  watch:{
+    postPageSizes:{
+      immediate:true,
+      deep:true,
+      handler(n,o){
+        this.resetPageSizes();
+      }
+    }
   }
 };
 </script>
@@ -73,7 +116,14 @@ export default {
     padding-top: 8px;
     text-align: center;
   }
+  .pagination-size-select .el-input--mini .el-input__inner{
+    height: 20px;
+    line-height: 20px;
+    margin: 5px ;
+  }
+  .pagination-size-select input{
 
+  }
   .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
     margin:5px 5px 0px 5px;
     padding: 0 4px;
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index b4cf3433c..0701efe12 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -416,7 +416,7 @@
     mounted() {
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize) {
+      if (pageSize != 'undefined') {
         this.pageObj.pageSize = pageSize
       }
 
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index b81b0ae72..c5ee67a6b 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -363,7 +363,7 @@
     mounted() {
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize) {
+      if (pageSize != 'undefined') {
         this.pageObj.pageSize = pageSize
       }
 
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index ff4d45581..dcd443ed3 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -779,7 +779,7 @@
     mounted() {
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize) {
+      if (pageSize != 'undefined') {
         this.pageObj.pageSize = pageSize
       }
 
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 7738646fb..e2a1ca2f5 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -520,7 +520,7 @@
     mounted() {
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize) {
+      if (pageSize != 'undefined') {
         this.pageObj.pageSize = pageSize
       }
 
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index 6696834aa..540f8e168 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -570,7 +570,7 @@
     mounted() {
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize) {
+      if (pageSize != 'undefined') {
         this.pageObj.pageSize = pageSize
       }
 
diff --git a/nezha-fronted/src/components/page/config/model.vue b/nezha-fronted/src/components/page/config/model.vue
index 6c568f1d0..487614b32 100644
--- a/nezha-fronted/src/components/page/config/model.vue
+++ b/nezha-fronted/src/components/page/config/model.vue
@@ -281,7 +281,7 @@
     mounted: function () {
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize) {
+      if (pageSize != 'undefined') {
         this.pageObj.pageSize = pageSize
       }
 
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index 7bddfcd0e..62c439733 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -651,7 +651,7 @@
     mounted: function () {
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize) {
+      if (pageSize != 'undefined') {
         this.pageObj.pageSize = pageSize
       }