298 lines
		
	
	
		
			9.1 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			298 lines
		
	
	
		
			9.1 KiB
		
	
	
	
		
			Plaintext
		
	
	
<template>
 | 
						||
  <div v-loading="loading" class="preview-wrapper">
 | 
						||
    <div class="left-wrapper">
 | 
						||
      <div class="basic-info">
 | 
						||
        <span v-if="otherInfo.SubjectCode">{{ `${otherInfo.SubjectCode}` }}</span>
 | 
						||
        <span v-if="otherInfo.ReadingNameOrTaskBlindName">({{ `${otherInfo.ReadingNameOrTaskBlindName}` }})</span>
 | 
						||
      </div>
 | 
						||
      <div v-if="cdList.length>0" class="basic-content">
 | 
						||
        <div v-for="item in cdList" :key="item.Id" class="cd-wrapper">
 | 
						||
          <div class="cd-name-wrapper">{{ item.ClinicalDataSetName }}</div>
 | 
						||
          <template v-if="item.ClinicalUploadType===1">
 | 
						||
            <div
 | 
						||
              v-for="file in item.FileList"
 | 
						||
              :key="file.Id"
 | 
						||
              class="cd-item"
 | 
						||
              :class="{activeBtn:file.Id === selected.id}"
 | 
						||
              @click.prevent="preview(file,1)"
 | 
						||
            >
 | 
						||
              {{ file.FileName }}
 | 
						||
            </div>
 | 
						||
          </template>
 | 
						||
          <div v-else class="cd-item" :class="{activeBtn:item.Id === selected.id}" @click.prevent="preview(item,0)">
 | 
						||
            表格
 | 
						||
          </div>
 | 
						||
        </div>
 | 
						||
      </div>
 | 
						||
      <div v-else class="basic-content-empty">
 | 
						||
        <span>暂无数据</span>
 | 
						||
      </div>
 | 
						||
    </div>
 | 
						||
    <div class="right-wrapper">
 | 
						||
      <div v-if="selected.type===1" class="right-content">
 | 
						||
        <iframe :src="`/static/pdfjs/web/viewer.html?file=${selected.filePath}`" width="100%" height="100%" frameborder="0" />
 | 
						||
      </div>
 | 
						||
      <div
 | 
						||
        v-else-if="selected.type===0"
 | 
						||
        style="padding:10px;overflow-y: auto;"
 | 
						||
        class="right-content"
 | 
						||
      >
 | 
						||
        <!-- 既往放疗史 -->
 | 
						||
        <h4>{{ $t('trials:uploadClinicalData:title:pastTreatment') }}</h4>
 | 
						||
        <el-table
 | 
						||
          :data="selected.clinicalTableData.PreviousHistoryList"
 | 
						||
          style="width: 100%"
 | 
						||
        >
 | 
						||
          <el-table-column
 | 
						||
            type="index"
 | 
						||
            width="50"
 | 
						||
          />
 | 
						||
          <!-- 放疗部位 -->
 | 
						||
          <el-table-column
 | 
						||
            prop="Position"
 | 
						||
            :label="$t('trials:uploadClinicalData:table:bodyPart')"
 | 
						||
            width="180"
 | 
						||
          />
 | 
						||
          <!-- 开始日期 -->
 | 
						||
          <el-table-column
 | 
						||
            prop="StartTime"
 | 
						||
            :label="$t('trials:uploadClinicalData:table:beginDate')"
 | 
						||
            width="180"
 | 
						||
          >
 | 
						||
            <template slot-scope="scope">
 | 
						||
              {{ scope.row.StartTime?moment(scope.row.StartTime).format('YYYY-MM-DD'):'' }}
 | 
						||
            </template>
 | 
						||
          </el-table-column>
 | 
						||
          <!-- 结束日期 -->
 | 
						||
          <el-table-column
 | 
						||
            prop="EndTime"
 | 
						||
            :label="$t('trials:uploadClinicalData:table:endDate')"
 | 
						||
            width="180"
 | 
						||
          >
 | 
						||
            <template slot-scope="scope">
 | 
						||
              {{ scope.row.EndTime?moment(scope.row.EndTime).format('YYYY-MM-DD'):'' }}
 | 
						||
            </template>
 | 
						||
          </el-table-column>
 | 
						||
          <!-- 病灶是否PD -->
 | 
						||
          <el-table-column
 | 
						||
            prop="IsPD"
 | 
						||
            :label="$t('trials:uploadClinicalData:table:isPD')"
 | 
						||
            width="180"
 | 
						||
          >
 | 
						||
            <template slot-scope="scope">
 | 
						||
              {{ $fd('IsPdEnum', scope.row.IsPD) }}
 | 
						||
            </template>
 | 
						||
          </el-table-column>
 | 
						||
        </el-table>
 | 
						||
        <!-- 既往手术史 -->
 | 
						||
        <h4>{{ $t('trials:uploadClinicalData:title:pastSurgery') }}</h4>
 | 
						||
        <el-table
 | 
						||
          :data="selected.clinicalTableData.PreviousSurgeryList"
 | 
						||
          style="width: 100%"
 | 
						||
        >
 | 
						||
          <el-table-column
 | 
						||
            type="index"
 | 
						||
            width="50"
 | 
						||
          />
 | 
						||
          <!-- 手术名称 -->
 | 
						||
          <el-table-column
 | 
						||
            prop="OperationName"
 | 
						||
            :label="$t('trials:uploadClinicalData:table:surgeryName')"
 | 
						||
            width="180"
 | 
						||
          />
 | 
						||
          <!-- 手术日期 -->
 | 
						||
          <el-table-column
 | 
						||
            prop="OperationTime"
 | 
						||
            :label="$t('trials:uploadClinicalData:table:surgeryDate')"
 | 
						||
            width="180"
 | 
						||
          >
 | 
						||
            <template slot-scope="scope">
 | 
						||
              {{ scope.row.OperationTime?moment(scope.row.OperationTime).format('YYYY-MM-DD'):'' }}
 | 
						||
            </template>
 | 
						||
          </el-table-column>
 | 
						||
        </el-table>
 | 
						||
        <!-- 既往其他治疗史 -->
 | 
						||
        <h4>{{ $t('trials:uploadClinicalData:title:others') }}</h4>
 | 
						||
        <el-table
 | 
						||
          :data="selected.clinicalTableData.PreviousOtherList"
 | 
						||
          style="width: 100%"
 | 
						||
        >
 | 
						||
          <el-table-column
 | 
						||
            type="index"
 | 
						||
            width="50"
 | 
						||
          />
 | 
						||
          <!-- 治疗类型 -->
 | 
						||
          <el-table-column
 | 
						||
            prop="TreatmentType"
 | 
						||
            :label="$t('trials:uploadClinicalData:table:treatmentType')"
 | 
						||
            width="180"
 | 
						||
          />
 | 
						||
          <!-- 开始日期 -->
 | 
						||
          <el-table-column
 | 
						||
            prop="StartTime"
 | 
						||
            :label="$t('trials:uploadClinicalData:table:treatmentbeginDate')"
 | 
						||
            width="180"
 | 
						||
          >
 | 
						||
            <template slot-scope="scope">
 | 
						||
              {{ scope.row.StartTime?moment(scope.row.StartTime).format('YYYY-MM-DD'):'' }}
 | 
						||
            </template>
 | 
						||
          </el-table-column>
 | 
						||
          <!-- 结束日期 -->
 | 
						||
          <el-table-column
 | 
						||
            prop="EndTime"
 | 
						||
            :label="$t('trials:uploadClinicalData:table:treatmentendDate')"
 | 
						||
            width="180"
 | 
						||
          >
 | 
						||
            <template slot-scope="scope">
 | 
						||
              {{ scope.row.EndTime?moment(scope.row.EndTime).format('YYYY-MM-DD'):'' }}
 | 
						||
            </template>
 | 
						||
          </el-table-column>
 | 
						||
        </el-table>
 | 
						||
 | 
						||
      </div>
 | 
						||
    </div>
 | 
						||
  </div>
 | 
						||
</template>
 | 
						||
<script>
 | 
						||
import { getReadingOrTaskClinicalDataList } from '@/api/trials'
 | 
						||
import store from '@/store'
 | 
						||
import { changeURLStatic } from '@/utils/history.js'
 | 
						||
import moment from 'moment'
 | 
						||
export default {
 | 
						||
  name: 'MultipleNoneDicom',
 | 
						||
  data() {
 | 
						||
    return {
 | 
						||
      selected: {
 | 
						||
        id: '',
 | 
						||
        type: null, // 0:格式化录入;1:pdf; 2:其他
 | 
						||
        fileName: '',
 | 
						||
        filePath: '',
 | 
						||
        clinicalTableData: []
 | 
						||
      },
 | 
						||
      cdList: [],
 | 
						||
      otherInfo: {},
 | 
						||
      moment,
 | 
						||
      loading: false
 | 
						||
    }
 | 
						||
  },
 | 
						||
  mounted() {
 | 
						||
    if (this.$router.currentRoute.query.TokenKey) {
 | 
						||
      store.dispatch('user/setToken', this.$router.currentRoute.query.TokenKey)
 | 
						||
      changeURLStatic('TokenKey', '')
 | 
						||
    }
 | 
						||
    this.getList()
 | 
						||
  },
 | 
						||
  methods: {
 | 
						||
    // 获取非Dicom检查信息
 | 
						||
    getList() {
 | 
						||
      this.loading = true
 | 
						||
      var param = {
 | 
						||
        subjectId: this.$router.currentRoute.query.subjectId,
 | 
						||
        trialId: this.$router.currentRoute.query.trialId,
 | 
						||
        readingId: this.$router.currentRoute.query.readingId ? this.$router.currentRoute.query.readingId : '',
 | 
						||
        visitTaskId: this.$router.currentRoute.query.visitTaskId ? this.$router.currentRoute.query.visitTaskId : '',
 | 
						||
        readingClinicalDataId: this.$router.currentRoute.query.readingClinicalDataId ? this.$router.currentRoute.query.readingClinicalDataId : ''
 | 
						||
      }
 | 
						||
      getReadingOrTaskClinicalDataList(param).then(res => {
 | 
						||
        this.cdList = res.Result
 | 
						||
        this.otherInfo = res.OtherInfo
 | 
						||
        this.loading = false
 | 
						||
        if (this.cdList.length > 0) {
 | 
						||
          var type = this.cdList[0].ClinicalUploadType === 1 ? 1 : 0
 | 
						||
          var obj = type === 1 ? this.cdList[0].FileList[0] : this.cdList[0]
 | 
						||
          this.preview(obj, type)
 | 
						||
        }
 | 
						||
      }).catch(() => { this.loading = false })
 | 
						||
    },
 | 
						||
    preview(obj, type) {
 | 
						||
      this.$set(this.selected, 'id', obj.Id)
 | 
						||
      this.$set(this.selected, 'type', type)
 | 
						||
      if (type === 1) {
 | 
						||
        // PDF
 | 
						||
        this.$set(this.selected, 'fileName', obj.FileName)
 | 
						||
        this.$set(this.selected, 'filePath', obj.Path)
 | 
						||
      } else {
 | 
						||
        // 格式化录入
 | 
						||
        this.$set(this.selected, 'clinicalTableData', obj.ClinicalTableData)
 | 
						||
      }
 | 
						||
    }
 | 
						||
  }
 | 
						||
}
 | 
						||
</script>
 | 
						||
<style lang="scss">
 | 
						||
.preview-wrapper{
 | 
						||
  display: flex;
 | 
						||
  flex-direction: row !important;
 | 
						||
  width: 100%;
 | 
						||
  height: 100%;
 | 
						||
  padding: 5px;
 | 
						||
  overflow: hidden;
 | 
						||
  ::-webkit-scrollbar {
 | 
						||
    width: 7px;
 | 
						||
    height: 7px;
 | 
						||
  }
 | 
						||
  ::-webkit-scrollbar-thumb {
 | 
						||
    border-radius: 10px;
 | 
						||
    background: #d0d0d0;
 | 
						||
  }
 | 
						||
  .left-wrapper{
 | 
						||
    box-sizing: border-box;
 | 
						||
    margin-right: 10px;
 | 
						||
    height: 100%;
 | 
						||
    width: 300px;
 | 
						||
    border: 1px solid #ddd;
 | 
						||
 | 
						||
    .basic-info{
 | 
						||
      height: 50px;
 | 
						||
      line-height: 40px;
 | 
						||
      padding: 5px 10px;
 | 
						||
      font-size: 20px;
 | 
						||
      font-weight: bold;
 | 
						||
      background-color: #4e4e4e;
 | 
						||
      color: #fbfbfb;
 | 
						||
    }
 | 
						||
    .activeBtn{
 | 
						||
      color: #00bca0;
 | 
						||
      border-color: #00bca0;
 | 
						||
    }
 | 
						||
    .basic-content{
 | 
						||
      height: 100%;
 | 
						||
      overflow: auto;
 | 
						||
    }
 | 
						||
    .basic-content-empty{
 | 
						||
      padding: 5px;
 | 
						||
      font-size: 16px;
 | 
						||
    }
 | 
						||
    .cd-wrapper{
 | 
						||
      padding: 5px;
 | 
						||
 | 
						||
    }
 | 
						||
    .cd-name-wrapper{
 | 
						||
      height: 40px;
 | 
						||
      line-height: 40px;
 | 
						||
      padding-left: 5px;
 | 
						||
      font-size: 15px;
 | 
						||
      font-weight: bold;
 | 
						||
      background-color: #eee;
 | 
						||
    }
 | 
						||
    .cd-item{
 | 
						||
      box-sizing: border-box;
 | 
						||
      border-bottom: 2px solid #f3f3f3;
 | 
						||
      height: 50px;
 | 
						||
      line-height: 50px;
 | 
						||
      cursor: pointer;
 | 
						||
      padding-left: 5px;
 | 
						||
    }
 | 
						||
  }
 | 
						||
  .right-wrapper{
 | 
						||
    flex: 1;
 | 
						||
    height: 100%;
 | 
						||
    border: 1px solid #ddd;
 | 
						||
  }
 | 
						||
  .right-content{
 | 
						||
    height:100%;
 | 
						||
  }
 | 
						||
 | 
						||
}
 | 
						||
</style>
 |