改用统一分页组件

src/page/STB/appversion/index.vue

@@ -37,12 +37,11 @@
           height="100%"
           :data="tableData"
         >
-          <el-table-column
-            type="index"
-            width="120"
-            label="序号"
-            align="center"
-          ></el-table-column>
+          <el-table-column type="index" width="120" label="序号" align="center">
+            <template slot-scope="scope">
+              <span>{{ (page._index - 1) * 10 + scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
           <el-table-column
             label="app版本号"
             prop="appVersion"
@@ -53,8 +52,16 @@
               <span>{{ scope.row.isCurrent ? "是" : "否" }}</span>
             </template>
           </el-table-column>
-          <el-table-column align="center" label="上传时间" prop="createTime"></el-table-column>
-          <el-table-column align="center" label="操作者" prop="userName"></el-table-column>
+          <el-table-column
+            align="center"
+            label="上传时间"
+            prop="createTime"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="操作者"
+            prop="userName"
+          ></el-table-column>
           <el-table-column align="center" label="操作" header-align="center">
             <template slot-scope="scope" width="220">
               <div class="table-btn-group">
@@ -73,31 +80,22 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="partyt-pagination">
-        <el-pagination
-          background
-          @current-change="handleCurrentChange"
-          :current-page="page.currentPage"
-          :page-size="page.pageSize"
-          layout="prev, pager, next, jumper"
-          :total="page.total"
-        ></el-pagination>
-      </div>
+      <party-pagination :page="page" @changePage="handleCurrentChange" />
     </div>
     <add-dialog ref="addDialog" @refreshFn="onSearch" />
     <detail-dialog ref="detailDialog" />
   </div>
 </template>
 <script>
-import { partyPagination, partyTable } from "@/components/index";
+import { partyPagination } from "@/components/index";
 import { addDialog, detailDialog } from "./components/index";
 export default {
   data() {
     return {
-      page: { 
-        currentPage: 1, 
-        pageSize: 10, 
-        total: 0 
+      page: {
+        _index: 1,
+        _size: 10,
+        total: 0,
       },
       form: {
         dateRange: [],
@@ -112,15 +110,15 @@ export default {
   methods: {
     // 查询
     onSearch() {
-      this.page.currentPage = 1;
+      this.page._index = 1;
       this.getTableData();
     },
     // 获得数据接口
     getTableData() {
-      let vm = this
+      let vm = this;
       let param = {
-        _index: this.page.currentPage,
-        _size: this.page.pageSize,
+        _index: this.page._index,
+        _size: this.page._size,
         startDate: this.form.dateRange.length ? this.form.dateRange[0] : "",
         endDate: this.form.dateRange.length ? this.form.dateRange[1] : "",
       };
@@ -134,15 +132,15 @@ export default {
       )
         .then((res) => {
           if (res.data.resultCode === "200") {
-            let data = res.data.data
-            vm.page.total = data.total
-            vm.tableData = data.records
+            let data = res.data.data;
+            vm.page.total = data.total;
+            vm.tableData = data.records;
           } else {
-            this.$message.error(res.data.message)
+            this.$message.error(res.data.message);
           }
         })
         .catch(function (err) {
-          console.log(err)
+          console.log(err);
         });
     },
     // 新增弹框打开
@@ -171,7 +169,7 @@ export default {
     },
     // 启用
     updateVersion(row) {
-      let vm = this
+      let vm = this;
       let param = {
         id: row.id,
         isCurrent: 1,
@@ -186,14 +184,14 @@ export default {
       )
         .then((res) => {
           if (res.data.resultCode === "200") {
-            this.$message.success("操作成功")
-            this.onSearch()
+            this.$message.success("操作成功");
+            this.onSearch();
           } else {
-            this.$message.error(res.data.message)
+            this.$message.error(res.data.message);
           }
         })
         .catch(function (err) {
-          console.log(err)
+          console.log(err);
         });
     },
     // 重置
@@ -201,12 +199,12 @@ export default {
       this.form = {
         dateRange: [],
       };
-      this.onSearch()
+      this.onSearch();
     },
     // 分页
     handleCurrentChange(val) {
-      this.page.currentPage = val
-      this.getTableData()
+      this.page._index = val;
+      this.getTableData();
     },
   },
 };

src/page/STB/base/index.vue

@@ -38,24 +38,14 @@
       <div class="btn-group">
         <el-button type="primary" @click="addBox">新建机顶盒账号</el-button>
       </div>
-      <party-table :feildList="feildList" :list="tableData"/>
-      <div class="partyt-pagination" style="margin: 0 20px">
-        <el-pagination
-          background
-          @current-change="handleCurrentChange"
-          :current-page="page.currentPage"
-          :page-size="page.pageSize"
-          layout="prev, pager, next, jumper"
-          :total="page.total"
-        ></el-pagination>
-      </div>
+      <party-table :currentPage="page._index" :feildList="feildList" :list="tableData"/>
+      <party-pagination :page="page" @changePage="handleCurrentChange"/>
     </div>
     <custom-dialog ref="formItem" @refreshFn="onSearch" />
   </div>
 </template>
 <script>
-import { partyPagination } from "@/components/index";
-import partyTable from "@/components/table.vue";
+import { partyPagination,partyTable} from "@/components/index";
 import customDialog from "./components/dialog.vue";
 import { getAreas } from "@/config/area.js";
 import { getOrgListWithOutPage } from "@/config/organ.js";
@@ -64,8 +54,8 @@ export default {
   data() {
     return {
       page: { 
-        currentPage: 1, 
-        pageSize: 10, 
+        _index: 1, 
+        _size: 10, 
         total: 0 
       },
       feildList: [
@@ -103,15 +93,15 @@ export default {
     },
     // 查询
     onSearch() {
-      this.page.currentPage = 1
+      this.page._index = 1
       this.getTableData()
     },
     // 获得数据接口
     getTableData() {
       let vm = this;
       let param = {
-        _index: this.page.currentPage,
-        _size: this.page.pageSize,
+        _index: this.page._index,
+        _size: this.page._size,
         areaId: this.form.areaId.length ? this.form.areaId[this.form.areaId.length - 1] : '',
         organId: this.form.orgId
       };
@@ -150,7 +140,7 @@ export default {
     },
     // 分页
     handleCurrentChange(val) {
-      this.page.currentPage = val;
+      this.page._index = val;
       this.getTableData();
     },
   },
@@ -158,5 +148,4 @@ export default {
 </script>
 <style lang="less">
 @import "~@/style/table.less";
-@import "~@/style/pagination.less";
 </style>
\ No newline at end of file

src/page/STB/interactive/index.vue

@@ -56,27 +56,20 @@
           </div>
         </div>
       </div>
-      <div class="partyt-pagination" style="margin: 0 20px"  v-show="tableData.length">
-        <el-pagination
-          background
-          @current-change="handleCurrentChange"
-          :current-page="page.currentPage"
-          :page-size="page.pageSize"
-          layout="prev, pager, next, jumper"
-          :total="page.total"
-        ></el-pagination>
-      </div>
+      <party-pagination v-show="tableData.length" :page="page" @changePage="handleCurrentChange"/>
     </el-card>
   </div>
 </template>
 <script>
+import { partyPagination} from "@/components/index";
 export default {
+  components: { partyPagination },
   data() {
     return {
       filterText: "",
       page: {
-        currentPage: 1,
-        pageSize: 10,
+        _index: 1,
+        _size: 10,
         total: 0,
       },
       treeData: [],
@@ -101,7 +94,7 @@ export default {
   methods: {
     // 查询
     onSearch() {
-      this.page.currentPage = 1;
+      this.page._index = 1;
       this.getTableData();
     },
     // 获得数据接口
@@ -109,8 +102,8 @@ export default {
       let vm = this;
       vm.tableData = [];
       let param = {
-        _index: this.page.currentPage,
-        _size: this.page.pageSize,
+        _index: this.page._index,
+        _size: this.page._size,
         orgId: this.selectAreaId,
       };
       vm.$https(
@@ -181,7 +174,7 @@ export default {
     },
     // 分页
     handleCurrentChange(val) {
-      this.page.currentPage = val;
+      this.page._index = val;
       this.getTableData();
     },
   },

src/page/STB/operation/index.vue

@@ -52,43 +52,43 @@
           height="100%"
           :data="tableData"
         >
+          <el-table-column type="index" width="120" label="序号" align="center">
+            <template slot-scope="scope">
+              <span>{{ (page._index - 1) * 10 + scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
           <el-table-column
-            type="index"
-            width="120"
-            label="序号"
             align="center"
+            label="mac地址"
+            prop="mac"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="所属单位"
+            prop="organName"
           ></el-table-column>
-          <el-table-column align="center" label="mac地址" prop="mac"></el-table-column>
-          <el-table-column align="center" label="所属单位" prop="organName"></el-table-column>
           <el-table-column align="center" label="机顶盒状态" prop="status">
             <template slot-scope="scope">
-              <span>{{statusOptions[scope.row.status-1].label}}</span>
+              <span>{{ statusOptions[scope.row.status - 1].label }}</span>
             </template>
           </el-table-column>
         </el-table>
       </div>
-      <div class="partyt-pagination" style="margin: 0 20px">
-        <el-pagination
-          background
-          @current-change="handleCurrentChange"
-          :current-page="page.currentPage"
-          :page-size="page.pageSize"
-          layout="prev, pager, next, jumper"
-          :total="page.total"
-        ></el-pagination>
-      </div>
+      <party-pagination :page="page" @changePage="handleCurrentChange" />
     </div>
   </div>
 </template>
 <script>
+import { partyPagination } from "@/components/index";
 import { getAreas } from "@/config/area.js";
 import { getOrgListWithOutPage } from "@/config/organ.js";
 export default {
+  components: { partyPagination },
   data() {
     return {
       page: {
-        currentPage: 1,
-        pageSize: 10,
+        _index: 1,
+        _size: 10,
         total: 0,
       },
       orgOptions: [], // 单位信息
@@ -137,15 +137,15 @@ export default {
     },
     // 查询
     onSearch() {
-      this.page.currentPage = 1;
+      this.page._index = 1;
       this.getTableData();
     },
     // 获得数据接口
     getTableData() {
       let vm = this;
       let param = {
-        _index: this.page.currentPage,
-        _size: this.page.pageSize,
+        _index: this.page._index,
+        _size: this.page._size,
         areaId: this.form.areaId.length
           ? this.form.areaId[this.form.areaId.length - 1]
           : "",
@@ -184,7 +184,7 @@ export default {
     },
     // 分页
     handleCurrentChange(val) {
-      this.page.currentPage = val;
+      this.page._index = val;
       this.getTableData();
     },
   },