irc_web/.svn/pristine/81/8119c94409c3adb894bff1f3d3909c6b3710cb73.svn-base

<template>
  <div class="tp-list data-list">
    <div class="filter-container">
      <!-- <el-select v-model="listQuery.WorkloadType" size="small" class="mr" @change="handleWorkLoadTypeChange">
        <el-option v-for="item in types" :key="item.Value" :label="item.Type" :value="item.Value" />
      </el-select> -->

      <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="handleEdit(scope.row)">Edit</el-button> -->
            <el-button type="text" size="small" @click="goAdReport(scope.row)">Detail</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: 3,
    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
        })
    },

    // handleWorkLoadTypeChange() {
    //   this.$emit("children-event",  this.listQuery.WorkloadType);
    // },

    goAdReport(row) {
      this.$router.push({ name: 'adTask', query: row })
    },

    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>