irc_web/.svn/pristine/12/124d8c924a9ef06bff262e57489ab9d04da5c375.svn-base

<template>
  <div class="payment-history data-list">
    <div class="filter-container">
      <el-select v-model="type" size="small" class="mr" @change="handleTypeChange">
        <el-option v-for="item in types" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select
        v-model="listQuery.Nation"
        placeholder="Nation"
        size="small"
        style="width:120px;margin-right:5px;"
        clearable
      >
        <el-option label="CN" value="0" />
        <el-option label="US" value="1" />
      </el-select>
      <el-input
        v-model="listQuery.Reviewer"
        size="small"
        placeholder="Reviewer"
        clearable
        class="mr"
      />
      <el-date-picker
        v-model="listQuery.BeginMonth"
        size="small"
        placeholder="Beginning Month"
        value-format="yyyy-MM"
        format="yyyy-MM"
        type="month"
        style="width:160px;margin-right:5px"
        :picker-options="beginPickerOption"
        :clearable="false"
      />To
      <el-date-picker
        v-model="listQuery.EndMonth"
        size="small"
        placeholder="End Month"
        value-format="yyyy-MM"
        format="yyyy-MM"
        type="month"
        style="width:160px;margin:0 5px"
        :picker-options="endpickerOption"
        :clearable="false"
      />
      <el-button type="text" size="small" @click="handleReset">Reset</el-button>
      <el-button type="primary" size="small" @click="handleSearch">Search</el-button>
      <el-button
        type="primary"
        size="small"
        :disabled="exportDisabled"
        @click="handleExport"
      >Export Excel</el-button>
    </div>
    <div class="data-table">
      <payment-list
        v-if="type=='Payment'"
        ref="Payment"
        :param="listQuery"
        @selectMore="selectMore"
      />
      <adjustment-list
        v-if="type=='Adjustment'"
        ref="Adjustment"
        :param="listQuery"
        @selectMore="selectMore"
      />
    </div>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { FormatTime } from '@/utils/formatter'
import PaymentList from './components/PaymentList'
import AdjustmentList from './components/AdjustmentList'
import { mapGetters, mapMutations } from 'vuex'
export default {
  components: { PaymentList, AdjustmentList },
  data() {
    return {
      listQuery: {
        Reviewer: '',
        Nation: '',
        BeginMonth: new Date(
          new Date().setMonth(new Date().getMonth() - 5)
        ).format('yyyy-MM'),
        EndMonth: new Date(new Date()).format('yyyy-MM')
      },
      beginPickerOption: {
        disabledDate: (time) => {
          if (this.listQuery.EndMonth) {
            return time.getTime() > new Date(this.listQuery.EndMonth).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      endpickerOption: {
        disabledDate: (time) => {
          if (this.listQuery.BeginMonth) {
            return (
              time.getTime() > Date.now() ||
              time.getTime() <= new Date(this.listQuery.BeginMonth).getTime()
            )
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      exportDisabled: true,
      types: ['Payment', 'Adjustment'],
      type: 'Payment'
    }
  },

  computed: {
    ...mapGetters(['paymentHistoryQuery'])
  },
  created() {
    this.paymentHistoryQuery ? (this.listQuery = this.paymentHistoryQuery) : ''
  },
  methods: {
    handleSearch() {
      this.listQuery.PageIndex = 1

      this.setQueryParam(this.listQuery)
      this.$refs[this.type].getList()
    },
    handleReset() {
      this.listQuery.Reviewer = ''
      this.listQuery.Nation = ''
      this.listQuery.EndMonth = new Date().format('yyyy-MM')
      this.listQuery.BeginMonth = new Date(
        new Date().setMonth(new Date().getMonth() - 5)
      ).format('yyyy-MM')

      this.setQueryParam(this.listQuery)
      this.$refs[this.type].resetList()
    },
    handleTypeChange() {
      this.listQuery.Reviewer = ''
    },
    handleExport() {
      this.$refs[this.type].export()
    },
    selectMore(val) {
      this.exportDisabled = val
    },
    ...mapMutations({
      setQueryParam: 'financials/SET_PAYMENTHISTORYQUERYPARAM'
    })
  }
}
</script>
<style lang="scss" scoped>
.payment-history {
  height: 100%;
  .filter-container {
    display: flex;
    align-items: center;
  }
  .mr {
    margin-right: 5px;
    width: 150px;
  }
  .el-table {
    overflow: visible !important;
  }
  .el-table .cell {
    white-space: nowrap;
  }
  .list-container {
    margin-top: 10px;
    height: calc(100% - 50px);
  }
}
</style>