irc_web/.svn/pristine/03/03fb2ec2ae3beb54582efda7a4a949364288542b.svn-base

<template>
  <div class="study-info">
    <div class="functions" style="text-align:right">
      <!-- 预览 -->
      <el-button
        type="primary"
        size="small"
        :disabled="studyList.length === 0"
        icon="el-icon-view"
        @click="handlePreviewAllFiles"
      >
        {{ $t('trials:audit:action:preview') }}
      </el-button>
    </div>
    <el-table
      v-loading="studyLoading"
      :data="studyList"
      style="width: 100%"
      height="300"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
    >
      <!-- 检查编号 -->
      <el-table-column
        prop="StudyCode"
        :label="$t('trials:audit:table:studyId')"
        min-width="80"
        show-overflow-tooltip
      />
      <!-- 检查类型 -->
      <el-table-column
        prop="Modalities"
        :label="$t('trials:audit:table:modality')"
        min-width="80"
        show-overflow-tooltip
      />
      <!-- 检查部位 -->
      <el-table-column
        prop="BodyPartExamined"
        :label="$t('trials:audit:table:bodyPart')"
        min-width="100"
        show-overflow-tooltip
      />
      <!-- 序列数量 -->
      <el-table-column
        prop="SeriesCount"
        :label="$t('trials:audit:table:seriesCount')"
        min-width="100"
        show-overflow-tooltip
      />
      <!-- 图像数量 -->
      <el-table-column
        prop="InstanceCount"
        :label="$t('trials:audit:table:instanceCount')"
        min-width="100"
        show-overflow-tooltip
      />
      <!-- 检查日期 -->
      <el-table-column
        prop="StudyTime"
        :label="$t('trials:audit:table:studyDate')"
        min-width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ moment(scope.row.StudyTime).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <!-- 上传时间 -->
      <el-table-column
        prop="UploadedTime"
        :label="$t('trials:audit:table:studyUploadTime')"
        min-width="80"
        show-overflow-tooltip
      />
      <el-table-column :label="$t('common:action:action')" min-width="100" fixed="right">
        <template slot-scope="scope">
          <!-- 预览 -->
          <el-button
            icon="el-icon-view"
            :disabled="scope.row.SeriesCount === 0 || scope.row.IsDeleted"
            :title="$t('trials:audit:action:preview')"
            circle
            @click="handleViewStudy(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getSubjectVisitUploadedStudyList, deleteStudyList } from '@/api/trials'
import { getToken } from '@/utils/auth'
import moment from 'moment'
export default {
  name: 'StudyInfo',
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      userTypeEnumInt: zzSessionStorage.getItem('userTypeEnumInt') * 1,
      deleteArr: [],
      studyLoading: false,
      studyList: [],
      trialId: this.$route.query.trialId,
      moment
    }
  },
  mounted() {
    this.getStudyInfo()
  },
  methods: {
    getStudyInfo() {
      this.studyLoading = true
      getSubjectVisitUploadedStudyList(this.data.Id).then(res => {
        this.studyList = res.Result
        this.studyLoading = false
      }).catch(() => { this.studyLoading = false })
    },
    // 批量删除
    handleBatchDelete() {
      this.$confirm(this.$t('trials:qcCheck:message:delete'), {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          this.studyLoading = true
          deleteStudyList(this.trialId, this.data.Id, this.deleteArr)
            .then(res => {
              if (res.IsSuccess) {
                this.getStudyInfo()
                this.$emit('getList')
                this.$message.success(this.$t('trials:qcCheck:message:deletedSuccessfully'))
              }
            }).catch(() => {
              this.studyLoading = true
            })
        }).catch(() => {})
    },
    // 预览所有影像
    handlePreviewAllFiles() {
      var token = getToken()
      const routeData = this.$router.resolve({
        path: `/showvisitdicoms?trialId=${this.data.TrialId}&visitInfo=${this.data.VisitName}(${this.data.VisitNum})&subjectVisitId=${this.data.Id}&TokenKey=${token}`
      })
      window.open(routeData.href, '_blank')
    },
    // 预览影像
    handleViewStudy(row) {
      var token = getToken()
      const routeData = this.$router.resolve({
        path: `/showdicom?studyId=${row.StudyId}&TokenKey=${token}&type=Study`
      })
      window.open(routeData.href, '_blank')
    },
    // 获取勾选项
    handleSelectionChange(val) {
      this.deleteArr = []
      val.forEach(item => {
        this.deleteArr.push(item.StudyId)
      })
    },
    // 设置已删除行勾选状态
    hasDeleted(row) {
      if (row.IsDeleted) {
        return false
      } else {
        return true
      }
    },
    // 设置已删除序列行样式
    tableRowClassName({ row, rowIndex }) {
      if (row.IsDeleted) {
        return 'delete-row'
      } else {
        return ''
      }
    }
  }
}
</script>
<style lang="scss">
.study-info{
  .delete-row{
      text-decoration-line: line-through;
      color: #c0c4cc;
    }
}
</style>