对账明细：合计统计处理

src/views/finance/Statements/StatementsIndexNew.vue

@@ -99,48 +99,50 @@
             :data="tableDataList" 
             border 
             row-key="orderNo" 
+            :summary-method="getSummaries"
+            show-summary
             class="cust-table"
-            height="100%"
+            max-height="480px"
             >
               <el-table-column label="业务订单号" align="center" width="200" fixed="left">
                 <template slot-scope="scope">
                   <div style="display: inline-block">{{ scope.row.id }}</div>
                 </template>
               </el-table-column>
-              <el-table-column label="支付单号" align="center" width="200" prop="paymentId" fixed="left" />
-              <el-table-column label="银联单号" align="center" width="200" prop="trackId" fixed="left" />
-              <el-table-column label="演出日期" align="center" width="200" prop="performDate" />
-              <el-table-column label="演出时段" align="center" width="200" prop="performTime" />
-              <el-table-column label="交易总额(元)" align="center" width="200" prop="orderPrice" />
-              <el-table-column label="核销金额(元)" align="center" width="200" prop="usePriceTotal" />
-              <el-table-column label="应到账金额(元)" align="center" width="200" prop="realPrice" />
-              <el-table-column label="佣金(元)" align="center" width="200" prop="retailPriceTotal" />
-              <el-table-column label="费率(%)" align="center" width="200" prop="withdrawRate" />
-              <el-table-column label="手续费(元)" align="center" width="200" prop="proceMoney" />
-              <el-table-column label="退款金额(元)" align="center" width="200" prop="refundPriceTotal" />
+              <el-table-column label="支付单号" align="center" width="200" prop="paymentId" fixed="left" show-overflow-tooltip />
+              <el-table-column label="银联单号" align="center" width="200" prop="trackId" fixed="left" show-overflow-tooltip />
+              <el-table-column label="演出日期" align="center" width="150" prop="performDate" />
+              <el-table-column label="演出时段" align="center" width="150" prop="performTime" />
+              <el-table-column label="交易总额(元)" align="center" width="150" prop="orderPrice" />
+              <el-table-column label="核销金额(元)" align="center" width="150" prop="usePriceTotal" />
+              <el-table-column label="应到账金额(元)" align="center" width="150" prop="realPrice" />
+              <el-table-column label="佣金(元)" align="center" width="150" prop="retailPriceTotal" />
+              <el-table-column label="费率(%)" align="center" width="150" prop="withdrawRate" />
+              <el-table-column label="手续费(元)" align="center" width="150" prop="proceMoney" />
+              <el-table-column label="退款金额(元)" align="center" width="150" prop="refundPriceTotal" />
               <el-table-column label="下单时间" align="center" width="200" prop="createTime" />
               <el-table-column label="支付时间" align="center" width="200" prop="payTime" />
-              <el-table-column label="支付渠道" align="center" width="200" prop="payWay">
+              <el-table-column label="支付渠道" align="center" width="150" prop="payWay">
                 <template slot-scope="scope">
                   <dict-tag :options="dict.type.pay_way_type" :value="scope.row.payWay" />
                 </template>
               </el-table-column>
-              <el-table-column label="提现状态" align="center" width="200" prop="orderWithdrawStatus">
+              <el-table-column label="提现状态" align="center" width="150" prop="orderWithdrawStatus">
                 <template slot-scope="scope">
                   <dict-tag :options="dict.type.order_withdraw_status" :value="scope.row.orderWithdrawStatus" />
                 </template>
               </el-table-column>
-              <el-table-column label="提现金额(元)" align="center" width="200" prop="orderWithdrawRealPrice" />
+              <el-table-column label="提现金额(元)" align="center" width="150" prop="orderWithdrawRealPrice" />
               <el-table-column label="提现账户" align="center" width="200" prop="orderWithdrawAccount" />
-              <el-table-column label="分销状态" align="center" width="200" prop="personWithdrawStatus">
+              <el-table-column label="分销状态" align="center" width="150" prop="personWithdrawStatus">
                 <template slot-scope="scope">
                   <dict-tag :options="dict.type.person_withdraw_status" :value="scope.row.personWithdrawStatus" />
                 </template>
               </el-table-column>
-              <el-table-column label="分销税率(%)" align="center" width="200" prop="personRetailRate" />
-              <el-table-column label="分销提现金额(元)" align="center" width="200" prop="personWithdrawRealPrice" />
-              <el-table-column label="分销账户" align="center" width="200" prop="personUnionMid" />
-              <el-table-column label="存在对账单" align="center" width="100" prop="hasBill">
+              <el-table-column label="分销税率(%)" align="center" width="150" prop="personRetailRate" />
+              <el-table-column label="分销提现金额(元)" align="center" width="150" prop="personWithdrawRealPrice" />
+              <el-table-column label="分销账户" align="center" width="150" prop="personUnionMid" />
+              <el-table-column label="存在对账单" align="center" width="160" prop="hasBill">
                 <template slot-scope="scope">
                   <dict-tag :options="dict.type.has_bill" :value="scope.row.hasBill" />
                 </template>
@@ -238,6 +240,45 @@ export default {
     this.initData();
   },
   methods: {
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计';
+          return;
+        }
+        if (column.property == 'paymentId' ||
+         column.property == 'trackId' ||
+         column.property == 'withdrawRate' ||
+         column.property == 'orderWithdrawStatus' ||
+         column.property == 'personWithdrawStatus' ||
+         column.property == 'personUnionMid' ||
+         column.property == 'personRetailRate' ||
+         column.property == 'hasBill' ||
+         column.property == 'orderWithdrawAccount'
+        ) {
+          sums[index] = '';
+          return;
+        }
+        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] += '';
+          sums[index] = Number(sums[index].toFixed(2));
+        } else {
+          sums[index] = '';
+        }
+      });
+      return sums;
+    },
     /** 初始化数据 */
     async initData() {
       this.loading = true;