irc_web/.svn/pristine/26/264b70a3b103794e2fb4d51a741b5ae377a62d86.svn-base

<template>
  <div class="app-container analysis">
    <div class="filter-container">
      <el-select v-model="type" style="width:110px" size="small" class="mr" @change="handleTypeChange">
        <el-option v-for="item in types" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-show="type=='Trial'" ref="croSelection" v-model="listQuery.CroId" style="width:110px" size="small" placeholder="CRO" clearable class="mr">
        <el-option v-for="item of croList" :key="item.Id" :label="item.CROName" :value="item.Id" />
      </el-select>
      <el-select v-show="type=='Reviewer'" v-model="listQuery.Nation" placeholder="Nation" size="small" style="width:110px;margin-right:5px;" clearable>
        <el-option label="CN" value="0" />
        <el-option label="US" value="1" />
      </el-select>
      <el-input v-show="type=='Reviewer'" v-model="listQuery.Reviewer" style="width:120px" size="small" placeholder="Reviewer ID" clearable class="mr" />
      <el-select
        v-show="type=='Trial'"
        v-model="listQuery.AttendedReviewerType"
        placeholder="Attended Type"
        size="small"
        style="width:150px;margin-right:5px;"
        clearable
      >
        <el-option label="CN" value="0" />
        <el-option label="US" value="1" />
        <el-option label="CN&US" value="2" />
      </el-select>
      <el-input v-show="type=='Trial'" v-model="listQuery.TrialCode" style="width:120px" size="small" placeholder="Trial ID" clearable class="mr" />
      <el-date-picker
        v-model="listQuery.BeginDate"
        size="small"
        placeholder="Beginning Month"
        value-format="yyyy-MM"
        format="yyyy-MM"
        type="month"
        style="width:120px;margin-right:5px"
        :picker-options="beginPickerOption"
        :clearable="false"
      />To
      <el-date-picker
        v-model="listQuery.EndDate"
        size="small"
        placeholder="End Month"
        value-format="yyyy-MM"
        format="yyyy-MM"
        type="month"
        style="width:120px;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>
      <el-button :loading="dialogLoading" type="primary" size="small" @click="handleVerify">Verify</el-button>
    </div>
    <div ref="listContainer" class="list-container clearfix">
      <reviewer-analysis v-if="type=='Reviewer'" ref="Reviewer" :param="listQuery" @selectMore="selectMore" />
      <trial-ananlysis v-if="type=='Trial'" ref="Trial" :param="listQuery" @selectMore="selectMore" />
    </div>
    <el-dialog title="Analysis Verification" :visible.sync="dialogVisible" size="small" width="600px">
      <div v-for="(item, index) in monthVerifyList" :key="index" style="margin-bottom:5px;word-break:keep-all;word-wrap:break-word;">
        Month:
        <span style="font-weight:bold;margin-right:5px">{{ item.YearMonth }}</span>
        <span>({{ item.ReviewerNameList.join(', ') }} <span style="color:red;">not locked</span>)</span>

      </div>
      <el-divider />
      <div v-for="(item) in verifyList" :key="item.trialCode" style="margin-bottom:5px">
        Trial ID:
        <span style="font-weight:bold;margin-right:5px">{{ item.trialCode }}</span>
        <span>({{ item.priceType.join(', ') }} <span style="color:red;">did not set unit price</span>)</span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ReviewerAnalysis from './components/ReviewerAnalysis'
import TrialAnanlysis from './components/TrialAnanlysis'
// eslint-disable-next-line no-unused-vars
import { FormatTime } from '@/utils/formatter'
import store from '@/store'
import { mapGetters } from 'vuex'
import { getAnalysisVerifyList } from '@/api/financials'
export default {
  components: { ReviewerAnalysis, TrialAnanlysis },
  data() {
    return {
      listQuery: { Reviewer: '', CroId: '', TrialCode: '', BeginDate: new Date(new Date().setMonth(new Date().getMonth() - 5)).format('yyyy-MM'), EndDate: new Date().format('yyyy-MM'), Nation: '', AttendedReviewerType: '' },
      types: ['Reviewer', 'Trial'],
      type: 'Reviewer',
      exportDisabled: true,
      dialogVisible: false,
      dialogLoading: false,
      verifyList: [],
      monthVerifyList: [],
      beginPickerOption: {
        disabledDate: time => {
          if (this.listQuery.EndDate) {
            return time.getTime() > new Date(this.listQuery.EndDate).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      endpickerOption: {
        disabledDate: time => {
          if (this.listQuery.BeginDate) {
            return time.getTime() > Date.now() || time.getTime() <= new Date(this.listQuery.BeginDate).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
    }
  },
  computed: {
    ...mapGetters(['croList'])
  },
  created() { store.dispatch('global/getCROList') },
  methods: {
    handleSearch() {
      this.$refs[this.type].getList()
    },
    handleReset() {
      this.listQuery.Reviewer = ''
      this.listQuery.EndDate = new Date().format('yyyy-MM')
      this.listQuery.BeginDate = new Date(new Date().setMonth(new Date().getMonth() - 5)).format('yyyy-MM')
      this.$refs[this.type].resetList()
    },
    handleTypeChange() {
      this.type === 'Trial' ? this.exportDisabled = false : this.exportDisabled = true
      this.listQuery.Reviewer = ''
      this.listQuery.CroId = ''
      this.listQuery.TrialCode = ''
      this.listQuery.EndDate = new Date().format('yyyy-MM')
      this.listQuery.BeginDate = new Date(new Date().setMonth(new Date().getMonth() - 5)).format('yyyy-MM')
    },
    handleExport() {
      this.$refs[this.type].export()
    },
    selectMore(val) {
      this.exportDisabled = val
    },
    handleVerify() {
      this.dialogLoading = true
      const param = {
        beginDate: this.listQuery.BeginDate,
        endDate: this.listQuery.EndDate
      }
      getAnalysisVerifyList(param).then(res => {
        this.dialogVisible = true
        this.dialogLoading = false
        this.monthVerifyList = res.Result.MonthVerifyResult
        this.verifyList = []
        if (res.Result.RevenuesVerifyList) {
          res.Result.RevenuesVerifyList.forEach(item => {
            const obj = {}
            obj.trialCode = item.TrialCode
            obj.priceType = []
            for (var i in item) {
              if (item[i] === false) {
                obj.priceType.push(i)
              }
            }
            this.verifyList.push(obj)
          })
        }
      })
    }
  }
}
</script>
<style lang="scss">
.analysis{
  padding:0px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .list-container{
    padding: 5px 0px;
    flex: 1;
  }

  .el-dialog__header{
    padding: 10px;
  }
  .el-dialog__body{
    padding: 10px;
    min-height: 300px;
    font-size: 13px;
  }
}
</style>