irc_web/.svn/pristine/34/34b060e75e08572beda52b1f5992182cd4717ed7.svn-base

<template>
  <div class="app-container payment-detail">
    <div class="el-form-item el-form-item--small">
      <label class="el-form-item__label">Name:</label>
      <el-input v-model="name" size="small" readonly style="width:160px" />
    </div>
    <div ref="listContainer" class="list-container">
      <el-table
        v-if="tableHeight"
        v-loading="listLoading"
        size="small"
        stripe
        :data="list"
        height="99%"
        show-summary
        :summary-method="getSummaries"
        @sort-change="sortByColumn"
      >
        <el-table-column type="index" width="40" />

        <el-table-column
          prop="Month"
          sortable="custom"
          label="Month"
          min-width="80"
          show-overflow-tooltip
          :formatter="monthFormatter"
        />
        <el-table-column label="Trial ID" align="center">
          <el-table-column v-for="(val,i) in configHeader" :key="i" :label="val.TrialCode">
            <template
              slot-scope="scope"
            >{{ scope.row.TrialPaymentList?scope.row.TrialPaymentList.filter(item=>item.TrialCode==val.TrialCode)[0]==null?0:scope.row.TrialPaymentList.filter(item=>item.TrialCode==val.TrialCode)[0].TrialPayment:0 }}</template>
          </el-table-column>
        </el-table-column>

        <el-table-column
          prop="VolumeReward"
          label="Volume Reward($)"
          min-width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.VolumeReward | rounding }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="AdjustmentUSD"
          label="Adjustment($)"
          min-width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.AdjustmentUSD | rounding }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="TotalUSD" label="Total($)" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.TotalUSD | rounding }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="ExchangeRate"
          label="Exchange Rate"
          min-width="80"
          show-overflow-tooltip
        />
        <el-table-column
          prop="TotalCNY"
          label="Total(¥)"
          min-width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.TotalCNY }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination :total="total" :page.sync="listQuery.PageIndex" :limit.sync="listQuery.PageSize" @pagination="getList" />
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { getPaymentHistoryDetailList } from '@/api/financials'
import { FormatTime } from '@/utils/formatter'
export default {
  components: { Pagination },
  filters: {
    rounding(value) {
      return value ? Number(value).toFixed(2) : value
    }
  },
  data() {
    return {
      list: [],
      listQuery: {},
      listLoading: false,
      total: 0,
      name: '',
      configHeader: [],
      tableHeight: 0
    }
  },
  mounted() {
    this.tableHeight = this.$refs.listContainer.clientHeight - 50 + 'px'
    this.name = this.$router.currentRoute.query.name
    this.listQuery.BeginMonth = this.$router.currentRoute.query.beginMonth
    this.listQuery.EndMonth = this.$router.currentRoute.query.endMonth
    this.listQuery.ReviewerId = this.$router.currentRoute.query.reviewerId
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getPaymentHistoryDetailList(this.listQuery).then(res => {
        this.listLoading = false
        this.list = res.Result
        this.total = res.Result.length
        this.handelColumnHeader()
      }).catch(() => { this.listLoading = false })
    },
    handelColumnHeader(currentPageData) {
      var tempHeader = []
      this.list.forEach(item => tempHeader.push.apply(tempHeader, item.TrialPaymentList))
      const res = new Map()
      this.configHeader = tempHeader.filter(item => !res.has(item.TrialCode) && res.set(item.TrialCode, 1))
    },
    sortByColumn(column) {
      if (column.order === 'ascending') {
        this.search.Asc = true
      } else {
        this.search.Asc = false
      }
      this.listQuery.SortField = column.prop
      this.listQuery.PageIndex = 1
      this.getList()
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = 'Total (Current Page)'
          return
        }
        if (column.property !== 'ExchangeRate' && column.property !== 'TotalCNY') {
          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)
              .toFixed(2)
          }
        }
        if (column.property === 'TotalCNY') {
          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)
          }
        }
      })

      return sums
    },
    monthFormatter(row) { return row.Month ? FormatTime(new Date(row.Month), 'yyyy-MM') : '' }
  }
}
</script>
<style lang="scss" scoped>
.payment-detail{
  height: 100%;
  display: flex;
  flex-direction: column;
  .list-container{
    padding: 5px 0px;
    flex: 1;
    .el-table{
      overflow:visible !important;
    }
  }
  .pagination{
    text-align: right;
  }
}
</style>