irc_web/.svn/pristine/30/30073293060fb097afe1656d01736130e7bf4a92.svn-base

<template>
  <box-content class="stats-wrapper">
    <div class="search">
      <SearchForm
        size="mini"
        :that="this"
        :search-data="searchData"
        :search-form="participate_form"
        :search-handle="participate_handle"
        @search="handleSearch"
        @reset="handleReset"
      />

    </div>
    <el-table
      ref="workloadStats"
      v-adaptive="{bottomOffset:45}"
      v-loading="listLoading"
      stripe
      height="100"
      :data="list"
      @sort-change="sortByColumn"
    >
      <!-- <el-table-column type="selection" /> -->
      <el-table-column type="index" width="40" />

      <el-table-column
        prop="OrganizationName"
        sortable="custom"
        label="Organization"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="Name"
        sortable="custom"
        label="Name"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="UserName"
        sortable="custom"
        label="User Name"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="Phone"
        show-overflow-tooltip
        min-width="100"
        prop="Phone"
        sortable="custom"
      />
      <el-table-column
        prop="Email"
        sortable="custom"
        label="Email"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="TrialCount"
        label="Trial Count"
        min-width="150"
        sortable="custom"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-popover trigger="click" placement="bottom-start">
            <el-table v-loading="trialListLoading" :data="trialList" height="300" size="small" class="trial-list">
              <el-table-column type="index" width="40" />
              <el-table-column
                prop="Code"
                label="Trial ID"
                min-width="90"
                show-overflow-tooltip
              />
              <el-table-column
                prop="Expedited"
                label="Expedited"
                min-width="90"
                show-overflow-tooltip
              >
                <template slot-scope="trialInfo">
                  {{ trialInfo.row.Expedited===0?'No':trialInfo.row.Expedited===1?'24H':'48H' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="Indication"
                label="Indication"
                min-width="90"
                show-overflow-tooltip
              />
              <el-table-column
                prop="CROName"
                label="CRO"
                min-width="90"
                show-overflow-tooltip
              />
              <el-table-column
                prop="UserType"
                label="Role"
                min-width="90"
                show-overflow-tooltip
              />
            </el-table>
            <div slot="reference" class="name-wrapper">
              <span style="color:#00d1b2;cursor:pointer;" @click="handleGetTrialList(scope.row.UserId)">
                {{ scope.row.TrialCount }}
              </span>
            </div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
  </box-content>
</template>
<script>
import { getParticipateTrialStats, getParticipateTrialList } from '@/api/statistics'
import { participate_form, participate_handle } from '../statistics'
import Pagination from '@/components/Pagination'

import BoxContent from '@/components/BoxContent'
import SearchForm from '@/components/BaseForm/search-form'
const searchDataDefault = () => {
  return {
    PageSize: 20,
    PageIndex: 1,
    Asc: true,
    SortField: '',
    UserInfo: '',
    OrganizationName: ''
  }
}
export default {
  name: 'WorkloadStats',
  components: { Pagination, BoxContent, SearchForm },
  data() {
    return {
      participate_form,
      participate_handle,
      searchData: searchDataDefault(),
      list: [],
      trialList: [],
      listLoading: false,
      trialListLoading: false,
      total: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取参与者信息列表
    getList() {
      this.listLoading = true
      getParticipateTrialStats(this.searchData).then(res => {
        this.listLoading = false
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
      }).catch(() => { this.listLoading = false })
    },
    // 根据用户ID获取参与的项目信息
    handleGetTrialList(userId) {
      this.trialList = []
      this.trialListLoading = true
      getParticipateTrialList(userId).then((res) => {
        this.trialListLoading = false
        this.trialList = res.Result
      }).catch(() => {
        this.trialListLoading = false
      })
    },
    // 重置
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
    },
    // 查询
    handleSearch() {
      this.searchData.PageIndex = 1
      this.getList()
    },
    // 排序
    sortByColumn(column) {
      if (column.order === 'ascending') {
        this.searchData.Asc = true
      } else {
        this.searchData.Asc = false
      }
      this.searchData.SortField = column.prop
      this.searchData.PageIndex = 1
      this.getList()
    }
  }
}
</script>