irc_web/.svn/pristine/4f/4f7ee26aac6f4e9bc6764c9c4bfc6d318307d252.svn-base

<template>
  <div class="app-container enrollment-stats 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-show="type=='Trial'" ref="croSelection" v-model="listQuery.CroId" 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-input v-show="type=='Trial'" v-model="listQuery.TrialCode" style="width:160px" size="small" placeholder="Trial ID" clearable class="mr" />
      <el-input v-show="type=='Trial'" v-model="listQuery.Indication" style="width:160px" size="small" placeholder="Indication" clearable class="mr" />

      <el-select
        v-show="type=='Reviewer'"
        v-model="listQuery.HospitalId"
        placeholder="Hospital"
        style="width:160px"
        size="small"
        clearable
      >
        <el-option
          v-for="(item,index) in hospitalList"
          :key="index"
          :label="item.HospitalName"
          :value="item.Id"
        />
      </el-select>
      <el-input v-show="type=='Reviewer'" v-model="listQuery.Reviewer" style="width:160px" size="small" placeholder="Reviewer 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:160px;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: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 ref="listContainer" class="data-table clearfix">
      <by-reviewer v-if="type=='Reviewer'" ref="Reviewer" :param="listQuery" @selectMore="selectMore" />
      <by-trial v-if="type=='Trial'" ref="Trial" :param="listQuery" @selectMore="selectMore" />
    </div>
  </div>
</template>
<script>
import ByReviewer from './ByReviewer'
import ByTrial from './ByTrial'
// eslint-disable-next-line no-unused-vars
import { FormatTime } from '@/utils/formatter'
import store from '@/store'
import { mapGetters } from 'vuex'
export default {
  components: { ByReviewer, ByTrial },
  data() {
    return {
      listQuery: { HospitalId: '', Reviewer: '', CroId: '', TrialCode: '', Indication: '', BeginDate: new Date(new Date().setMonth(new Date().getMonth() - 5)).format('yyyy-MM'), EndDate: new Date().format('yyyy-MM') },
      types: ['Reviewer', 'Trial'],
      type: 'Reviewer',
      exportDisabled: true,
      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', 'hospitalList'])
  },
  created() {
    store.dispatch('global/getCROList')
    store.dispatch('global/getHospital')
  },
  methods: {
    handleSearch() {
      this.$refs[this.type].getList()
    },
    handleReset() {
      this.listQuery.HospitalId = ''
      this.listQuery.Reviewer = ''
      this.listQuery.CroId = ''
      this.listQuery.TrialCode = ''
      this.listQuery.Indication = ''
      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.exportDisabled = true
      this.listQuery.HospitalId = ''
      this.listQuery.Reviewer = ''
      this.listQuery.CroId = ''
      this.listQuery.TrialCode = ''
      this.listQuery.Indication = ''
      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
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container{
  padding: 0 10px;
}
.enrollment-stats{
  height: 100%;
  .mr{
    width: 160px;
    margin-right: 5px;
  }
  .list-container{
    margin-top: 10px;
    height: calc(100% - 100px);
  }
}
</style>