irc_web/.svn/pristine/ad/ad90f3772f34c9659457d00d85e59d7ef78aec11.svn-base

<template>
  <div class="app-container revenues">
    <div class="filter-container">
      <el-input v-model="listQuery.KeyWord" size="small" placeholder="Trial ID or Indication" clearable class="mr" />
      <el-select
        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-button type="text" size="small" @click="handleReset">Reset</el-button>
      <el-button type="primary" size="small" @click="handleSearch">Search</el-button>
    </div>
    <div ref="listContainer" class="list-container clearfix">
      <el-table
        ref="revenusList"
        v-loading="listLoading"
        size="small"
        stripe
        :data="list"
        height="100%"
        @sort-change="sortByColumn"
      >
        <el-table-column type="index" width="40" />
        <el-table-column
          prop="TrialCode"
          sortable="custom"
          label="Trial ID"
          min-width="90"
          show-overflow-tooltip
        />
        <el-table-column
          prop="Indication"
          sortable="custom"
          label="Indication"
          min-width="110"
          show-overflow-tooltip
        />
        <el-table-column
          prop="ReviewMode"
          sortable="custom"
          label="Review Mode"
          min-width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="Cro"
          sortable="custom"
          label="CRO"
          min-width="80"
          show-overflow-tooltip
        />
        <el-table-column
          prop="Expedited"
          sortable="custom"
          label="Expedited"
          min-width="110"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.Expedited === 0? 'No':scope.row.Expedited === 1? '24-Hour':'48-Hour' }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="Training" label="Training" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.Training | rounding }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="RefresherTraining" label="Refresher Training" min-width="130" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.RefresherTraining | rounding }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Timepoint" align="center">
          <el-table-column prop="Timepoint" label="Regular" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.Timepoint | rounding }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="TimepointIn48H"
            label="48-hour"
            min-width="90"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row.TimepointIn48H | rounding }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="TimepointIn24H"
            label="24-hour"
            min-width="90"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row.TimepointIn24H | rounding }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="Adjudication" align="center">
          <el-table-column prop="Adjudication" label="Regular" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.Adjudication | rounding }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="AdjudicationIn48H"
            label="48-hour"
            min-width="90"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row.AdjudicationIn48H | rounding }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="AdjudicationIn24H"
            label="24-hour"
            min-width="90"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row.AdjudicationIn24H | rounding }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="Global" label="Global" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.Global | rounding }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="Downtime" label="Downtime" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.Downtime | rounding }}</span>
          </template>
        </el-table-column>

        <el-table-column label="Action" min-width="80" fixed="right" align="left">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleEdit(scope.row)">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination :total="total" :page.sync="listQuery.PageIndex" :limit.sync="listQuery.PageSize" @pagination="getList" />
    </div>
    <el-dialog
      :key="timer"
      size="small"
      title="Edit"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
    >
      <RevenuesForm :form="row" @getList="getList" @closeDialog="closeDialog" />
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import RevenuesForm from './components/RevenusForm'
import store from '@/store'
import { mapGetters } from 'vuex'
import { getTrialRevenuesPriceList } from '@/api/financials'
const getListQueryDefault = () => {
  return {
    KeyWord: '',
    CroId: '',
    PageIndex: 1,
    PageSize: 20,
    Asc: false,
    SortField: ''
  }
}
export default {
  components: { Pagination, RevenuesForm },
  filters: {
    rounding(value) {
      return value ? Number(value).toFixed(2) : value
    }
  },
  data() {
    return {
      listQuery: getListQueryDefault(),
      list: [],
      total: 0,
      listLoading: false,
      dialogVisible: false,
      row: {},
      timer: ''
    }
  },
  computed: {
    ...mapGetters(['croList'])
  },
  mounted() {
    store.dispatch('global/getCROList')
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getTrialRevenuesPriceList(this.listQuery).then(res => {
        this.listLoading = false
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
      }).catch(() => { this.listLoading = false })
    },
    handleSearch() {
      this.listQuery.PageIndex = 1
      this.getList()
    },
    handleReset() {
      this.listQuery = getListQueryDefault()
      this.getList()
    },
    handleEdit(row) {
      this.timer = new Date().getTime()
      this.row = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    closeDialog() { this.dialogVisible = false },
    sortByColumn(column) {
      if (column.order === 'ascending') {
        this.listQuery.Asc = true
      } else {
        this.listQuery.Asc = false
      }
      this.listQuery.SortField = column.prop
      this.listQuery.PageIndex = 1
      this.getList()
    }
  }

}
</script>
<style lang="scss" scoped>
.revenues{
  height: 100%;
  display: flex;
  flex-direction: column;
  .filter-container{
    display:flex;
    align-items: center;
  }
  .mr{
    margin-right: 5px;
    width: 180px;
  }
  .el-table {
    overflow: visible !important;
  }
  .el-table .cell {
    white-space: nowrap;
  }
  .list-container{
    padding: 5px 0px;
    flex: 1;
  }
  .pagination{
    text-align: right;
  }
}
</style>