调拨分页

src/views/manufacture/cylinderCondition.vue

@@ -20,9 +20,10 @@
         </div>
         <div v-else><el-empty :image="require('../../assets/image/empty.png')" description="暂无燃气瓶"></el-empty></div>
         <div class="card_pagination center_in" v-if="bottleData.length > 0">
-          <pagination :total="Pagination.Total" :pagerCountnum="5" layout="prev, pager, next, jumper"
-            :currentPage="Pagination.PageIndex" @changeSize="changeSize" @changeCurrent="changeCurrent">
-          </pagination>
+          <el-pagination :total="Pagination.Total" :page-size="Pagination.PageSize" :pager-count="5"
+            layout="prev, pager, next, jumper" :current-page="Pagination.PageIndex" @size-change="changeSize"
+            @current-change="changeCurrent">
+          </el-pagination>
         </div>
       </div>
     </div>
@@ -45,9 +46,10 @@
         </div>
         <div v-else><el-empty :image="require('../../assets/image/empty.png')" description="暂无燃气瓶"></el-empty></div>
         <div class="card_pagination center_in" v-if="bottleData1.length > 0">
-          <pagination :total="Pagination1.Total" :pagerCountnum="5" layout="prev, pager, next, jumper"
-            :currentPage="Pagination1.PageIndex" @changeSize="changeSize1" @changeCurrent="changeCurrent1">
-          </pagination>
+          <el-pagination :total="Pagination1.Total" :page-size="Pagination1.PageSize" :pager-count="5"
+            layout="prev, pager, next, jumper" :current-page="Pagination1.PageIndex" @size-change="changeSize1"
+            @current-change="changeCurrent1">
+          </el-pagination>
         </div>
       </div>
     </div>
@@ -70,9 +72,10 @@
         </div>
         <div v-else><el-empty :image="require('../../assets/image/empty.png')" description="暂无燃气瓶"></el-empty></div>
         <div class="card_pagination center_in" v-if="bottleData2.length > 0">
-          <pagination :total="Pagination2.Total" :pagerCountnum="5" layout="prev, pager, next, jumper"
-            :currentPage="Pagination2.PageIndex" @changeSize="changeSize2" @changeCurrent="changeCurrent2">
-          </pagination>
+          <el-pagination :total="Pagination2.Total" :page-size="Pagination2.PageSize" :pager-count="5"
+            layout="prev, pager, next, jumper" :current-page="Pagination2.PageIndex" @size-change="changeSize2"
+            @changeCurrent="changeCurrent1">
+          </el-pagination>
         </div>
       </div>
     </div>
@@ -141,21 +144,21 @@
         // 重瓶
         Pagination: {
           PageIndex: 1,
-          PageSize: 10,
+          PageSize: 14,
           Total: 0,
         },
         bottleData: [],
         // 空瓶
         Pagination1: {
           PageIndex: 1,
-          PageSize: 10,
+          PageSize: 14,
           Total: 0,
         },
         bottleData1: [],
         // 不合格瓶区
         Pagination2: {
           PageIndex: 1,
-          PageSize: 10,
+          PageSize: 14,
           Total: 0,
         },
         bottleData2: [],
@@ -171,7 +174,7 @@
             message: '请输入单位内编码',
             trigger: 'blur'
           }]
-        }, ],
+        }],
         ruleForm: {
           code: '',
         },
@@ -191,6 +194,8 @@
     methods: {
       getList(state) {
         getCylinderStatus({
+          page: this.Pagination.PageIndex,
+          pageSize: this.Pagination.PageSize,
           status: state,
         }).then(res => {
           if (res.code == 200) {
@@ -201,6 +206,8 @@
       },
       getList1(state) {
         getCylinderStatus({
+          page: this.Pagination1.PageIndex,
+          pageSize: this.Pagination1.PageSize,
           status: state,
         }).then(res => {
           if (res.code == 200) {
@@ -211,11 +218,14 @@
       },
       getList2(state) {
         getCylinderStatus({
+          page: this.Pagination2.PageIndex,
+          pageSize: this.Pagination2.PageSize,
           status: state,
         }).then(res => {
           if (res.code == 200) {
             this.bottleData2 = res.data.list
             this.Pagination2.Total = res.data.count
+            console.log(this.Pagination1, 2566)
           }
         })
       },
@@ -350,10 +360,22 @@
                 type: 'success'
               });
               if (type == 1) {
+                const precisePage = Math.ceil((this.Pagination.Total - 1) / this.Pagination.PageSize)
+                this.Pagination.PageIndex > precisePage ? precisePage : this
+                  .Pagination.PageIndex
+                this.Pagination.PageIndex = this.Pagination.PageIndex < 1 ? 1 : this.Pagination.PageIndex
                 this.getList(1)
               } else if (type == 2) {
+                const precisePage = Math.ceil((this.Pagination1.Total - 1) / this.Pagination1.PageSize)
+                this.Pagination1.PageIndex > precisePage ? precisePage : this
+                  .Pagination1.PageIndex
+                this.Pagination1.PageIndex = this.Pagination1.PageIndex < 1 ? 1 : this.Pagination1.PageIndex
                 this.getList1(2)
               } else if (type == 3) {
+                const precisePage = Math.ceil((this.Pagination2.Total - 1) / this.Pagination2.PageSize)
+                this.Pagination2.PageIndex > precisePage ? precisePage : this
+                  .Pagination2.PageIndex
+                this.Pagination2.PageIndex = this.Pagination2.PageIndex < 1 ? 1 : this.Pagination2.PageIndex
                 this.getList2(3)
               }
             }
@@ -368,29 +390,29 @@
       // 重瓶区域
       changeSize(val) {
         this.Pagination.PageSize = val
-        this.getList()
+        this.getList(1)
       },
       changeCurrent(val) {
         this.Pagination.PageIndex = val
-        this.getList()
+        this.getList(1)
       },
       // 空瓶区
       changeSize1(val) {
         this.Pagination1.PageSize = val
-        this.getList1()
+        this.getList1(2)
       },
       changeCurrent1(val) {
         this.Pagination1.PageIndex = val
-        this.getList1()
+        this.getList1(2)
       },
       // 不合格瓶区
       changeSize2(val) {
         this.Pagination2.PageSize = val
-        this.getList2()
+        this.getList2(3)
       },
       changeCurrent2(val) {
         this.Pagination2.PageIndex = val
-        this.getList2()
+        this.getList2(3)
       },
       // 弹窗关闭
       closeDialog() {
@@ -526,4 +548,52 @@
   .title_red {
     color: #F56C6C;
   }
+
+
+
+  ::v-deep .el-pagination .el-select .el-input .el-input__inner {
+    background-color: rgba(2, 59, 115, .8);
+  }
+
+  ::v-deep .el-pagination__jump .el-input__inner {
+    border: 1px solid rgba(139, 191, 216, .5) !important;
+  }
+
+  .el-pagination {
+    background-color: rgba(2, 59, 115, .5);
+    margin-top: 10px;
+    color: #fff;
+    border: 1px solid rgba(2, 59, 115, .8);
+    padding: 5px 10px;
+    border-radius: 3px;
+  }
+
+  ::v-deep .el-pagination__editor.el-input .el-input__inner {
+    border: 1px solid rgba(139, 191, 216, .5) !important;
+    background-color: unset;
+    color: #fff;
+  }
+
+  ::v-deep .el-pagination .el-select .el-input .el-input__inner {
+    border: 1px solid rgba(139, 191, 216, .5) !important;
+    background-color: unset;
+    color: #fff;
+  }
+
+  ::v-deep .el-pagination button {
+    color: #fff !important;
+    background-color: unset;
+  }
+
+  ::v-deep .el-pager li.btn-quicknext {
+    color: #fff !important;
+  }
+
+  ::v-deep .el-pager li.btn-quickprev {
+    color: #fff !important;
+  }
+
+  ::v-deep .el-pager li:hover {
+    color: #409EFF !important;
+  }
 </style>