From 002e29081a3e9ddfd54120141029bcd6f806d054 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 9 Aug 2024 10:54:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=85=A8=E5=B1=80=E6=96=B9?=
 =?UTF-8?q?=E6=B3=95=EF=BC=8C=E5=A4=84=E7=90=86=E8=A1=A8=E6=A0=BC=E7=BF=BB?=
 =?UTF-8?q?=E9=A1=B5=E5=90=8E=EF=BC=8Cindex=E5=BA=8F=E5=8F=B7=E5=BB=B6?=
 =?UTF-8?q?=E7=BB=AD=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableModel/index.vue | 45 +++++++++++++++++++----------
 src/main.js                         |  3 +-
 src/utils/bonus.js                  |  7 ++++-
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/components/TableModel/index.vue b/src/components/TableModel/index.vue
index b5951b8..480b582 100644
--- a/src/components/TableModel/index.vue
+++ b/src/components/TableModel/index.vue
@@ -109,6 +109,9 @@
                 align="center"
                 label="序号"
                 type="index"
+                :index="
+                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
+                "
                 v-if="indexNumShow"
             />
             <el-table-column
@@ -143,6 +146,14 @@
                 </template>
             </el-table-column>
         </el-table>
+
+        <!-- 分页 -->
+        <pagination
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getTableList"
+        />
     </div>
 </template>
 
@@ -170,7 +181,7 @@ export default {
     computed: {
         /* 根据操作栏控制表头是否显示 */
         tableColumCheckProps() {
-            return this.columCheckList.filter((e) => {
+            return this.columCheckList.filter(e => {
                 return e.checked != false
             })
         },
@@ -187,7 +198,18 @@ export default {
     data() {
         return {
             // 列表接口查询参数
-            queryParams: {},
+            queryParams: {
+                pageNum: 1,
+                pageSize: 20,
+            },
+            // 列表数据源
+            tableList: [
+                { scrapNum: '测试' },
+                { scrapNum: '123' },
+                { scrapNum: '测试' },
+            ],
+            // 列表数据条数
+            total: 0,
             // 搜索区域是否隐藏
             showSearch: true,
             // 是否显示复选框
@@ -198,25 +220,18 @@ export default {
             handleShow: true,
             // 列表每列 label
             columCheckList: [],
-            // 列表数据源
-            tableList: [
-                { scrapNum: '测试' },
-                { scrapNum: '123' },
-                { scrapNum: '测试' },
-            ],
             // 操作列最小宽度
             dynamicWidth: 0,
         }
     },
 
     created() {
-        this.columCheckList = this.columnsList
-        this.columCheckList = this.columCheckList.map((e) => {
+        this.columCheckList = this.columnsList.map(e => {
             this.$set(e, 'checked', true)
             return e
         })
         /* 生成查询参数 */
-        this.formLabel.map((e) => {
+        this.formLabel.map(e => {
             this.$set(this.queryParams, e.f_model, '')
         })
         this.getTableList()
@@ -228,7 +243,7 @@ export default {
     methods: {
         /** 获取列表数据 */
         async getTableList() {
-            const res = await this.requestApi({ ...this.queryParams })
+            const res = await this.requestApi(this.queryParams)
             console.log(res, '列表数据')
         },
         /** 查询按钮 */
@@ -238,6 +253,8 @@ export default {
         /** 重置按钮 */
         resetQuery() {
             this.$refs.queryFormRef.resetFields()
+            this.queryParams.pageNum = 1
+            this.queryParams.pageSize = 10
             this.getTableList()
         },
         /** 动态设置操作列的列宽 */
@@ -263,10 +280,6 @@ export default {
                             ? buttonCount
                             : buttons.length
                 })
-                // 如果按钮数量大于2，宽度要加上边距*（按钮数量-1）
-                // if (buttonCount > 2) {
-                //     width += paddingSpacing * (buttonCount - 1)
-                // }
                 return width
             }
         },
diff --git a/src/main.js b/src/main.js
index 86212e0..5e14d9e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,7 +18,7 @@ import './assets/icons' // icon
 import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/bonus";
+import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree, indexContinuation } from "@/utils/bonus";
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
@@ -53,6 +53,7 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
+Vue.prototype.indexContinuation = indexContinuation
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
diff --git a/src/utils/bonus.js b/src/utils/bonus.js
index 6087aba..1fd33a7 100644
--- a/src/utils/bonus.js
+++ b/src/utils/bonus.js
@@ -88,7 +88,7 @@ export function selectDictLabel(datas, value) {
 
 // 回显数据字典（字符串、数组）
 export function selectDictLabels(datas, value, separator) {
-  if (value === undefined || value.length ===0) {
+  if (value === undefined || value.length === 0) {
     return "";
   }
   if (Array.isArray(value)) {
@@ -233,3 +233,8 @@ export function tansParams(params) {
 export function blobValidate(data) {
   return data.type !== 'application/json'
 }
+
+// 解决表格翻页时 index 索引延续问题
+export function indexContinuation(num, size) {
+  return (num - 1) * size + 1
+}