流水管理：购票数量和变动金额合计处理

src/views/finance/flowingWaterMr/index.vue

@@ -136,27 +136,34 @@
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
         <div class="app-container_table_main">
-          <el-table ref="tables" v-loading="loading" :data="dataList" border height="100%">
+          <el-table 
+            ref="tables" 
+            v-loading="loading" 
+            :data="dataList" border 
+            max-height="520px"
+            :summary-method="getSummaries"
+            show-summary
+          >
             <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
-            <el-table-column label="订单号" align="center" prop="id">
+            <el-table-column label="订单号" align="center" prop="id" width="170">
               <template slot-scope="scope">
                 <span style="color: #1890ff;cursor: pointer;" @click="openDetails(scope.row)">{{ scope.row.id }}</span>
               </template>
             </el-table-column>
             <el-table-column label="购票数量" align="center" prop="quantity" />
             <el-table-column label="实付单价" align="center" prop="price" />
-            <el-table-column label="支付方式" align="center" prop="payWay">
+            <el-table-column label="支付方式" align="center" prop="payWay" width="120">
               <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" prop="incomeExpenses" />
-            <el-table-column label="变动金额(元)" align="center" prop="type">
+            <el-table-column label="变动金额(元)" align="center" prop="orderPrice" width="110">
               <template slot-scope="scope">
                 <span>￥{{ scope.row.orderPrice && scope.row.orderPrice != 0 ? ( (scope.row.incomeExpenses=='支出'?'-':'') + scope.row.orderPrice) : '' }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="业务类型" align="center" prop="businessType" />
+            <el-table-column label="业务类型" align="center" prop="businessType" width="100" />
             <el-table-column label="产生渠道" align="center" prop="refundTime" width="160" >
               <template slot-scope="scope">
                 <!-- <span>{{ sourceMap[scope.row.source] }}</span> -->
@@ -168,8 +175,8 @@
                     <span>{{ parseTime(scope.row.payTime) }}</span>
                   </template>
             </el-table-column>
-            <el-table-column label="场次时间" align="center" prop="performDate" />
-            <el-table-column label="场次" width="120" align="center" prop="performTime" />
+            <el-table-column label="场次时间" width="100" align="center" prop="performDate" />
+            <el-table-column label="场次" width="140" align="center" prop="performTime" />
             <el-table-column label="产生时间" align="center" prop="createTime" width="160" >
               <template slot-scope="scope">
                 <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -321,6 +328,32 @@ export default {
     cancel() {
       this.open = false;
     },
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计';
+          return;
+        }
+        const values = data.map(item => Number(item[column.property]));
+        if (!values.every(value => isNaN(value)) && (column.property == 'quantity' || column.property == 'orderPrice')) {
+          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;
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;