批量支付增加分页功能

src/views/business/payDetail/rePay.vue

@@ -193,6 +193,9 @@ export default {
                 return prev;
               }
             }, 0);
+            if (sums[index]) {
+              sums[index] = sums[index].toFixed(2)
+            }
             sums[index] += ' 元';
           } else {
             sums[index] = 'N/A';

src/views/business/payOrder/batchToBank.vue

@@ -56,10 +56,8 @@
                      v-hasPermi="['business:outPersonal:add']">导入</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="loading" :data="transList" @selection-change="handleSelectionChange" :height="640"
-                :summary-method="getSummaries" :key="formTableKey"
-                :highlight-current-row="true"
-                show-summary :highlight-selection-row="true" :stripe="true">
+      <el-table v-loading="loading" :data="page.rows" @selection-change="handleSelectionChange"
+                :highlight-current-row="true" :highlight-selection-row="true" :stripe="true">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="收款账户" align="center">
           <el-table-column label="户名" align="center" prop="payeeAccName" />
@@ -82,19 +80,33 @@
         <el-table-column label="支付类型" align="center" prop="payTitle" />
         <el-table-column label="备注" align="center" prop="payRemark" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot="header" slot-scope="scope">
+            <el-input
+              v-model="page.search"
+              size="mini"
+              @change="searchEvt"
+              placeholder="输入姓名搜索"/>
+          </template>
           <template slot-scope="scope">
             <el-button
               size="mini"
               type="text"
               icon="el-icon-delete"
-              @click="handleDelete(scope.$index, 'delRow')"
+              @click="handleDelete(scope.row.indexKey, 'delRow')"
             >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
+      <el-pagination style="margin-top: 10px"
+                     v-show="page.total && page.total > 0"
+                     @current-change="handleCurrentChange"
+                     :page-size="page.pageSize"
+                     layout="total, sizes, prev, pager, next, jumper"
+                     :total="page.total">
+      </el-pagination>
       <el-row :gutter="10" class="mb8" style="margin-top: 15px">
         <el-col :span="1.5" style="float: right">
-          <span v-if="this.transList">明细条数： {{ this.transList.length }} 条</span>
+          <span v-if="page.total">合计： {{ page.countAmount }} 元</span>
           <el-button style="margin-left: 100px" type="primary" icon="el-icon-s-promotion" size="mini" @click="confirmPay">确认支付</el-button>
         </el-col>
       </el-row>
@@ -173,7 +185,14 @@ export default {
   dicts: ['pay_type_title', 'payee_acc_type'],
   data() {
     return {
-      formTableKey: 1,
+      page: {
+        search: '',
+        rows: [],
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+        countAmount: 0
+      },
       upload: {
         // 是否显示弹出层（用户导入）
         open: false,
@@ -202,7 +221,7 @@ export default {
       // 非多个禁用
       multiple: true,
       loading: false,
-      transList: [],
+      transMap: new Map(),
       form: {
 
       },
@@ -249,7 +268,7 @@ export default {
     },
     // 新增明细
     handleAdd() {
-      if (this.transList && this.transList >= 1000) {
+      if (this.transMap && this.transMap.size >= 1000) {
         return this.$modal.msgWarning("单次支付不能超过1000条")
       }
       this.addPanelOpen = true
@@ -263,33 +282,30 @@ export default {
       }
     },
     // 删除明细
-    handleDelete(index, pStr) {
+    handleDelete(indexKey, pStr) {
       this.$confirm('确定执行删除操作吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
+        console.log(pStr, indexKey)
         if (pStr && pStr === 'delRow') {
-          this.transList.splice(index, 1)
+          this.transMap.delete(indexKey)
+          this.getList()
         } else if (this.indexList && this.indexList.length > 0) {
-          let transMap = new Map();
-          this.transList.forEach((item, _index) => {
-            transMap.set(_index, item)
-          })
           this.indexList.forEach(item => {
-            transMap.delete(item)
+            this.transMap.delete(item)
           })
-          this.transList = [...transMap.values()]
           this.indexList = [];
+          this.getList()
         }
-        this.formTableKey += 1
       }).catch(() => {});
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.indexList = []
       selection.map(item => {
-        this.indexList.push(this.transList.findIndex(dataItem => dataItem === item))
+        this.indexList.push(item.indexKey)
       });
       this.single = selection.length !== 1
       this.multiple = !selection.length
@@ -297,10 +313,11 @@ export default {
     addDetail() {
       this.$refs["form"].validate(valid => {
         if (valid) {
-          this.transList.push(this.form)
+          this.form.indexKey = this.form.payeeAccNo + '' + this.transMap.size;
+          this.transMap.set(this.form.indexKey, this.form)
           this.addPanelOpen = false
+          this.getList()
         }
-        this.formTableKey += 1
       });
     },
     importClick() {
@@ -321,7 +338,9 @@ export default {
       this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
       if (response.data && response.data.length > 0) {
         response.data.forEach((item, index) => {
-          this.transList.push({
+          let indexKey = item.payeeAccNo + '' + this.transMap.size;
+          this.transMap.set(indexKey, {
+            indexKey: indexKey,
             payTitle: this.batchForm.payTitle,
             payeeAccName: item.payeeAccName,
             payeeAccNo: item.payeeAccNo,
@@ -331,42 +350,16 @@ export default {
             payRemark: item.payRemark
           })
         })
+        this.getList()
       }
-      this.formTableKey += 1
     },
     importByExcel() {
       this.$refs.upload.submit();
     },
-    getSummaries(param) {
-      const { columns, data } = param;
-      const sums = [];
-      columns.forEach((column, index) => {
-        if (index === 0) {
-          sums[index] = '合计';
-          return;
-        } else if (index === 4) {
-          const values = data.map(item => Number(item[column.property]));
-          if (!values.every(value => isNaN(value))) {
-            sums[index] = values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
-              }
-            }, 0);
-            sums[index] += ' 元';
-          } else {
-            sums[index] = 'N/A';
-          }
-        }
-      });
-      return sums;
-    },
     confirmPay() {
-      if (!this.transList) {
+      if (!this.transMap || this.transMap.size < 1) {
         return this.$modal.msgWarning("支付明细列表不能为空!");
-      } else if (this.transList >= 1000) {
+      } else if (this.transMap.size >= 1000) {
         return this.$modal.msgWarning("单次支付不能超过1000条")
       }
       this.$refs["batchForm"].validate(valid => {
@@ -376,7 +369,7 @@ export default {
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
-            this.batchForm.details = this.transList;
+            this.batchForm.details = this.transMap.values();
             addPayOrder(this.batchForm).then(resp => {
               if (200 === resp.code) {
                 this.$modal.msgSuccess("操作成功");
@@ -386,6 +379,35 @@ export default {
           }).catch(() => {});
         }
       });
+    },
+    handleCurrentChange(val) {
+      this.page.pageNum = val
+      this.getList()
+    },
+    searchEvt() {
+      this.getList()
+    },
+    getList() {
+      if (this.transMap && this.transMap.size > 0) {
+        let rows = [...this.transMap.values()]
+        if (this.page.search) {
+          rows = rows.filter(item => item.payeeAccName.indexOf(this.page.search) > -1)
+        }
+        this.page.rows = rows.slice(this.page.pageNum * this.page.pageSize - this.page.pageSize, this.page.pageNum * this.page.pageSize);
+        let countAmount = 0;
+        rows.forEach((item, index) => {
+          countAmount += item.amount
+        })
+        this.page.countAmount = countAmount.toFixed(2)
+        this.page.total = rows.length
+      } else {
+        this.page.rows = [];
+        this.page = {
+          countAmount: 0,
+          pageNum: 1,
+          pageSize: 10
+        }
+      }
     }
   }
 };