Parcourir la source

fix: 润天翻页连续序号

wuzh il y a 1 semaine
Parent
commit
cd3921cb87

+ 9 - 1
src/views/material/BOMmanage/components/detailedList.vue

@@ -77,7 +77,9 @@
       </template>
 
       <!-- 序号:前端自己渲染行号 -->
-      <template v-slot:rowIndex="{ $index }">{{ $index + 1 }}</template>
+      <template v-slot:rowIndex="{ $index }">{{
+        (currentPage - 1) * currentLimit + $index + 1
+      }}</template>
 
       <!-- 总重:前端按 用量 × 单重 计算(用量/单重改了立即跟着变) -->
       <template v-slot:totalWeight="{ row }">{{ totalWeightOf(row) }}</template>
@@ -298,6 +300,9 @@
 
     data() {
       return {
+        // 当前分页位置:序号跨页连续(第 2 页从 21 开始,不重置)
+        currentPage: 1,
+        currentLimit: 20,
         produceTypeList,
         clientEnvironmentId: this.$store.state.user.info.clientEnvironmentId,
         // 是否启用新 columns 方案(true=新方案,false=老方案)
@@ -984,6 +989,9 @@
 
       /* 表格数据源 */
       async datasource({ where, page, limit }) {
+        // 序号跨页连续用
+        this.currentPage = page || 1;
+        this.currentLimit = limit || 20;
         // let that = this;
         // console.log(getBomPageCategoryId({
         //   ...where,

+ 20 - 10
src/views/material/BOMmanage/index.vue

@@ -37,7 +37,9 @@
           </template>
 
           <!-- 序号:前端自己渲染行号 -->
-          <template v-slot:rowIndex="{ $index }">{{ $index + 1 }}</template>
+          <template v-slot:rowIndex="{ $index }">{{
+            (currentPage - 1) * currentLimit + $index + 1
+          }}</template>
 
           <!-- 总重:前端按 用量 × 单重 计算(用量/单重改了立即跟着变) -->
           <template v-slot:totalWeight="{ row }">{{ totalWeightOf(row) }}</template>
@@ -498,6 +500,9 @@
           // }
         ],
         sort: {},
+        // 当前分页位置:序号要跨页连续(第 2 页从 21 开始,不重置)
+        currentPage: 1,
+        currentLimit: 20,
         rootCategoryLevelIdList: [
           {
             label: '产品',
@@ -826,7 +831,17 @@
       },
 
       /* 表格数据源 */
-      datasource({ where, page, limit }) {
+      datasource({ where, page, limit, sorter }) {
+        // 序号跨页连续用
+        this.currentPage = page || 1;
+        this.currentLimit = limit || this.pageSize || 20;
+        // 排序用表格维护的 sorter:翻页时 ele-pro-table 会把它一起带过来,不会被重置
+        const sortProp =
+          sorter && sorter.order
+            ? sorter.prop || (sorter.column && sorter.column.prop)
+            : null;
+        const sortOrder = sorter && sorter.order ? sorter.order : null;
+        this.sort = sortProp && sortOrder ? { orderBy: sortOrder, sortName: sortProp } : {};
         return getBomPageList({
           ...where,
           ...this.sort,
@@ -860,14 +875,9 @@
       },
 
       onSortChange(e) {
-        console.log(111111111, e);
-
-        let sort = {
-          orderBy: e.order,
-          sortName: e.prop
-        };
-        this.sort = sort;
-        this.reload();
+        // 排序状态交给表格保存:翻页时 ele-pro-table 会把 sorter 一起带下来,
+        // 这样“点了表头排序、翻页后又变回默认顺序”的问题就没了。
+        this.$refs.table.reload({ sorter: { prop: e.prop, order: e.order } });
       },
 
       handDel(row) {