irc_web/.svn/pristine/8d/8d89b92cfc183fc1ae5cb64b4191645665bef9ea.svn-base

<template>
  <div class="tp-list data-list">
    <div class="filter-container">

      <span>Subject ID:</span>
      <el-input v-model="listQuery.SubjectCode" size="small" class="mr" />

      <span>Status:</span>
      <el-select v-model="listQuery.Status" size="small" clearable class="mr">
        <el-option :value="30" label="待读" />
        <!-- <el-option :value="40" label="读片中" /> -->
        <el-option :value="80" label="已读" />
        <!-- <el-option :value="100" label="归档" />  -->
      </el-select>

      <el-button size="small" type="text" @click="handleReset">Reset</el-button>
      <el-button type="primary" size="small" @click="handleSearch">Search</el-button>
    </div>
    <div class="data-table">
      <el-table
        v-loading="listLoading"
        :data="list"
        stripe
        size="small"
        @sort-change="handleSortByColumn"
      >
        <el-table-column type="index" width="60" />
        <el-table-column
          prop="TrialCode"
          label="TrialId"
          sortable="custom"
          show-overflow-tooltip
          min-width="90"
        />
        <el-table-column
          prop="TrialIndication"
          label="Indication"
          sortable="custom"
          show-overflow-tooltip
          min-width="120"
        />
        <el-table-column
          prop="Sponsor"
          label="Sponsor"
          sortable="custom"
          show-overflow-tooltip
          min-width="120"
        />
        <el-table-column
          prop="Expedited"
          min-width="110"
          label="Expedited"
          show-overflow-tooltip
          sortable="custom"
        >
          <template
            slot-scope="scope"
          >{{ scope.row.Expedited==0?'No':scope.row.Expedited==1?'24H':'48H' }}</template>
        </el-table-column>

        <el-table-column
          prop="SubjectCode"
          label="Subject ID"
          show-overflow-tooltip
          sortable="custom"
          min-width="120"
        />

        <el-table-column
          prop="VisitName"
          label="Visit Name"
          show-overflow-tooltip
          sortable="custom"
          min-width="120"
        />
        <el-table-column
          prop="VisitNum"
          label="Visit Num"
          show-overflow-tooltip
          sortable="custom"
          min-width="120"
        />

        <el-table-column
          prop="Status"
          label="Status"
          show-overflow-tooltip
          sortable="custom"
          min-width="100"
        >
          <template slot-scope="scope">{{ handleStatus(scope.row.Status) }}</template>
        </el-table-column>

        <el-table-column
          prop="UpdateTime"
          label="UpdateTime"
          show-overflow-tooltip
          sortable="custom"
          min-width="120"
        />

        <el-table-column label="Action" min-width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDetail(scope.row)">Read</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>

  </div>
</template>
<script>
import {
  getWorkloadList
} from '@/api/trials'
import Pagination from '@/components/Pagination'
const getListQueryDefault = () => {
  return {
    SubjectCode: '',
    Status: 30,
    WorkloadType: 1,
    Expedited: '',
    PageIndex: 1,
    PageSize: 20
  }
}
export default {

  components: { Pagination },
  data() {
    return {
      list: [],
      listQuery: getListQueryDefault(),
      listLoading: false,
      total: 0,
      row: {},
      trialCode: '',

      types: [{ Type: 'TP', Value: 1 }, { Type: 'Global', Value: 2 }, { Type: 'AD', Value: 3 }]
    }
  },

  created() {
    this.listQuery.TrialId = zzSessionStorage.getItem('trialId')
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getWorkloadList(this.listQuery)
        .then((res) => {
          this.listLoading = false
          this.list = res.Result.CurrentPageData
          this.total = res.Result.TotalCount
        })
        .catch(() => {
          this.listLoading = false
        })
    },

    handleDetail(row) {
      if (row.VisitNum === 1) { this.$router.push({ name: 'baselineTask', query: row }) } else this.$router.push({ name: 'VisitTask', query: row })
      const routes = this.$router.resolve({ path: '/showdicom', query: { studyId: row.StudyId, tpCode: row.WorkloadCode, baseLine: row.VisitNum === 1, type: 'TP', token: zzSessionStorage.getItem('TokenKey') }})
      window.setTimeout(function() { window.open(routes.href, '_blank') }, 1000)
    },

    handleStatus(StudyStatus) {
      if (StudyStatus === 30) return '待读'
      else if (StudyStatus === 40) return '待读'// "读片中";
      else if (StudyStatus === 80) return '已读'
      // else if (StudyStatus === 1000) return "归档";
      else return ''
    },
    handleSearch() {
      this.listQuery.PageIndex = 1
      this.getList()
    },
    handleReset() {
      this.listQuery = getListQueryDefault()
      this.getList()
    },
    handleSortByColumn(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>
.tp-list {
  height: 100%;
  .mr {
    margin-right: 5px;
    width: 130px;
  }
  .filter-container {
    display: flex;
    padding: 5px 0px;
    align-items: center;
    span {
      font-size: 13px;
      margin-right: 5px;
    }
  }
}
</style>