irc_web/src/views/none-dicom-show/multiple.vue

<template>
  <div class="preview-wrapper">
    <div class="left-wrapper">
      <div v-for="item in noneDicomStudyList" :key="item.Id">
        <div class="study-info">
          <h4>{{ `${item.CodeView} (Modality: ${item.Modality})` }}</h4>
        </div>
        <ul>
          <li v-for="file in item.NoneDicomStudyFileList" :key="file.Id">
            <el-button :class="{activeBtn:file.Id === fileInfo.currentId}" plain style="width:100%;text-align:left;" @click="preview(file)">{{ file.FileName }}</el-button>
          </li>
        </ul>
      </div>
    </div>
    <div class="right-wrapper">
      <iframe
        v-if="fileInfo.currentFileType === 0"
        frameborder="0"
        :src="fileInfo.currentFilePath"
        width="100%"
        height="100%"
      />
      <!-- <embed v-else-if="fileInfo.currentFileType === 1" :src="fileInfo.currentFilePath" style="width: 100%; height: 100%"> -->
      <!-- <iframe v-else-if="fileInfo.currentFileType === 1" :src="fileInfo.currentFilePath+'#toolbar=0'" width="100%" height="100%" frameborder="0" /> -->
      <iframe v-else-if="fileInfo.currentFileType === 1" :src="`/static/pdfjs/web/viewer.html?file=${fileInfo.currentFilePath}`" width="100%" height="100%" frameborder="0" />

      <div v-else-if="fileInfo.currentFileType === 2">
        {{ $t('common:message:downloadFile') }}
        <el-link type="primary" @click="downLoadFile(fileInfo.currentFilePath)">{{ $t('common:button:download') }}</el-link>
      </div>
    </div>
  </div>
</template>
<script>
import { getNoneDicomStudyList } from '@/api/trials'
import store from '@/store'
import { changeURLStatic } from '@/utils/history.js'
export default {
  name: 'MultipleNoneDicom',
  data() {
    return {
      fileInfo: {
        currentId: '',
        currentFileName: '',
        currentFilePath: '',
        currentFileType: null // 0:图片；1：pdf; 2:其他
      },
      noneDicomStudyList: [],
      subjectVisitId: ''
    }
  },
  mounted() {
    if (this.$router.currentRoute.query.TokenKey) {
      store.dispatch('user/setToken', this.$router.currentRoute.query.TokenKey)
      changeURLStatic('TokenKey', '')
    }

    this.subjectVisitId = this.$router.currentRoute.query.Id
    this.getNoneDicomList()
  },
  methods: {
    // 获取非Dicom检查信息
    getNoneDicomList() {
      this.loading = true
      getNoneDicomStudyList(this.subjectVisitId, '', true).then(res => {
        this.noneDicomStudyList = res.Result
        this.loading = false
        const study = this.noneDicomStudyList.find((item, index) => {
          return item.NoneDicomStudyFileList.length > 0
        })
        if (study !== undefined) {
          this.preview(study.NoneDicomStudyFileList[0])
        }
      }).catch(() => { this.loading = false })
    },
    downLoadFile(filePath) {
      if (!filePath) return
      window.open(this.OSSclientConfig.basePath + filePath, '_blank')
    },
    preview(file) {
      this.$set(this.fileInfo, 'currentId', file.Id)
      this.$set(this.fileInfo, 'currentFileName', file.FileName)
      this.$set(this.fileInfo, 'currentFileType', this.getFileType(file.FileName))
      this.$set(this.fileInfo, 'currentFilePath', file.FullFilePath)
    },
    getFileType(fileName) {
      if (!fileName) return null
      const fn = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
      if (fn.indexOf('jpg') !== -1 || fn.indexOf('png') !== -1) {
        return 0
      } else if (fn.indexOf('pdf') !== -1) {
        return 1
      } else {
        return 2
      }
    }
  }
}
</script>
<style lang="scss">
.preview-wrapper{
  height: 100%;
  display: flex;
  flex-direction: row !important;
  width: 100%;
  height: 100%;
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }
  .left-wrapper{
    margin-right: 10px;
    height: 100%;
    width: 300px;
    border: 1px solid #ddd;
    overflow: auto;
    .study-info{
      background-color: #eee;
      padding: 2px;
      h4{
        padding-left: 5px;
      }
    }
    ul{
      list-style: none;
      margin: 0px;
      padding: 2px;
      border: 1px solid #ddd;
      li{
        padding: 2px 0px;
      }
    }
    .activeBtn{
      color: #428bca;
      border-color: #428bca;
    }
  }
  .right-wrapper{
    flex: 1;
    height: 100%;
    padding: 5px;
    border: 1px solid #ddd;
  }

}
</style>