agentManagement add total

src/views/agnetManagement/index.vue

         <el-input style='width:100px;' placeholder="輸入檔案名稱" prefix-icon="el-icon-document" v-model="filename"></el-input>
         <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">匯出 excel</el-button>
       </div>
-      <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
+      <el-table show-summary :summary-method="getSummaries" :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
         style="width: 100%">
         <!-- <el-table-column align="center" label='ID' >
           <template slot-scope="scope">
             {{scope.row.feeRatio}}
           </template>
         </el-table-column>        
-        <el-table-column label="代理商上繳金額" align="center">
+        <el-table-column label="代理商上繳金額" prop="all" align="center">
             <template slot-scope="scope">
               <span :style="moneyColor(scope.row.all)">{{scope.row.all}}</span>
             </template>
         </el-table-column>
-        <el-table-column label="上繳工作室金額70%" align="center">
+        <el-table-column label="上繳工作室金額70%" prop="all70" align="center">
           <template slot-scope="scope">
             <span :style="moneyColor(scope.row.all70)">{{scope.row.all70}}</span>
           </template>
         </el-table-column>
-        <el-table-column label="總逞罰" align="center">
+        <el-table-column label="總逞罰" prop="fredPunishment" align="center">
           <template slot-scope="scope">
             {{scope.row.fredPunishment}}
           </template>
     ]),
     async getList() {
       this.listLoading = true
-      await fetchList(this.listQuery).then(response => {
+      fetchList(this.listQuery).then(async response => {
 
-        response.data.rows.map(agent => {
+        // response.data.rows.map(agent => {
+          console.log('eeeee', response.data.rows)
+        for(const agent of response.data.rows) {
           let combine = []
           this.list = []   
-          this.visible.firstLayer === true ? fetchGroupAll(agent, this.listQuery).then(response => {
-            console.log('response' , response.data.all)
-            this.list.push({
-              // id: agent.GambleMember.id,
-              // GambleMember: {
-              //   id: agent.GambleMember.id,
-              //   name: agent.GambleMember.name
-              // },
-              id: agent.GambleMember.id,
-              name: agent.GambleMember.name.slice(19),
-              createdAt: agent.GambleMember.createdAt,
-              feeRatio: response.data.feeRatio,
-              all: response.data.all,
-              all70: response.data.all70,
-              fredPunishment: response.data.fredPunishment
+          if(this.visible.firstLayer === true) {
+            fetchGroupAll(agent, this.listQuery).then(response => {
+              console.log('response' , response.data.all)
+              this.list.push({
+                // id: agent.GambleMember.id,
+                // GambleMember: {
+                //   id: agent.GambleMember.id,
+                //   name: agent.GambleMember.name
+                // },
+                id: agent.GambleMember.id,
+                name: agent.GambleMember.name.slice(19),
+                createdAt: agent.GambleMember.createdAt,
+                feeRatio: response.data.feeRatio,
+                all: response.data.all,
+                all70: response.data.all70,
+                fredPunishment: response.data.fredPunishment
+              })
             })
-          }) : false
+          }
           // fetchMemberList(agent, this.listQuery).then(response => {
           //   response.data.rows.map(member => {
           //     let row = {
             
           //   this.listLoading = false
           // })
-        })
-        this.list.sort(function compare(a, b) {
-          const dateA = new Date(a.createdAt);
-          const dateB = new Date(b.createdAt);
-          return  dateB - dateA;
-        })
+        // })
+        }
         // this.total = response.data.count
         this.listLoading = false
+        console.log('list', this.list)
       })
     },
     resetCreateData() {
     moneyColor(money) {
       return money >= 0 ? { color: '#67C23A' } : { color: '#FA5555' }
     },
+    getSummaries(param) {
+        let { columns, data } = param;
+        let sums = [];
+        data = data.filter(item => item.name !== '文')        
+        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))) {
+            sums[index] = values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return new Decimal(prev).plus(curr);
+              } else {
+                return new Decimal(prev);
+              }
+            }, 0).valueOf();
+            sums[index];
+          } else {
+            sums[index] = 'N/A';
+          }
+        });
+        // this.allCombine.push({
+        //   name: (this.data.secondLayer.GambleMember.name).slice(19),
+        //   allUp: sums[2],
+        //   allDown: sums[3],
+        //   allChips: sums[1],
+        //   allEarned: sums[6],
+        //   allServiceFees: sums[13],
+        // });
+        // console.log('ewqewqeqweq', this.sums)
+        return sums;
+    }
   },
 }
 </script>