GambleAdmin/src/views/gambleGameBu.../detail/index.vue

<template>
<div class="app-container calendar-list-container">
  <div class="app-container">
    <el-table :data="detail" :span-method="objectSpanMethod" border style="width: 100% margin-top: 20px">
      <el-table-column prop="MemberRecord.GambleMember.name" label="玩家" width="180">
      </el-table-column>
      <el-table-column prop="MemberRecord.door" label="押">
      </el-table-column>
      <el-table-column prop="MemberRecord.wager" label="額度">
      </el-table-column>
      <el-table-column prop="DealingRecord.totalPoints" label="點數">
      </el-table-column>
      <el-table-column prop="MemberRecord.earned" label="輸贏">
      </el-table-column>
      <el-table-column prop="amount3" label="抽水">
      </el-table-column>
      <el-table-column prop="Membehips" label="輸贏合計">
      </el-table-column>
      <el-table-column prop="amount3" label="福利">
      </el-table-column>
      <el-table-column prop="MemberRecord.GambleMember.chips" label="最終積分">
      </el-table-column>
    </el-table>
  </div>
</div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'
import { fetchDetails, fetchMemberRecords, fetchDealingRecords } from '@/api/gambleGameBucket'
import _ from 'lodash'

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      total: null,
      memberRecords: [],
      dealingRecords: [],
      groupMember: [],
      detail: [],
      group: [],
      statement: '',
      row: 0,
      col: 0,
      func: '',
      rowIndex: 0,
      colIndex: 0
    }
  },
  props: [ 'bucket' ],
  created() {
    this.SetListVisble(false)    
    this.getList()
  },
  computed: {
    ...mapGetters([
      'listVisble',
    ])
  },
  methods: {
    ...mapActions([
      'SetListVisble',
    ]),    
    getList() {
      this.listLoading = true
      let group ,detailTemp

      fetchDetails(this.bucket).then(reponse => {
        let group, dealingTemp
        dealingTemp = reponse.data.rows.filter(record => {
          return  record.DealingRecord.door !== -1 && 
            record.MemberRecord.door !== -1 &&
            record.MemberRecord.door === record.DealingRecord.door
        })

        group = _.groupBy(dealingTemp, record => {
          return record.MemberRecord.GambleMember.name;
        });

        this.group = _.values(group)
        const sum = (i) => {
          let count = 0
          for(let j=0 ;j<i ;j++){
            count += this.group[j].length
          }
          return count
        }
        for(let i = 0 ;i < this.group.length ;i++){
          if(i === 0) {
            this.statement = 
            `if(this.rowIndex === ${i}){
              this.row = ${this.group[i].length},
              this.col = 1
            }`
          }else if(i === this.group.length-1){
            this.statement += 
            `else if(this.rowIndex === ${sum(i)}){
              this.row = ${this.group[i].length},
              this.col = 1
            }else {
              this.row = 0,
              this.col = 0
            }`
          }else {
            this.statement += 
            `else if(this.rowIndex === ${sum(i)}){
              this.row = ${this.group[i].length},
              this.col = 1 
            }`
          }
        }
        this.func = eval(`(function() {${this.statement}})`)
        dealingTemp.map(record => {
          this.detail.push(record)
        })
        this.detail =  _.sortBy(this.detail, 'MemberRecord.GambleMember.name');
      })

      this.listLoading = false
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 5|| columnIndex === 6|| columnIndex === 7|| columnIndex === 8) {
        this.rowIndex = rowIndex
        this.columnIndex = columnIndex
        const that = this

        this.func()      
        return {
          rowspan: this.row,
          colspan: this.col
        }
      }
    }
  },
  destroyed() {
    this.SetListVisble(true)
  }
}
</script>