irc_web/.svn/pristine/67/6708a7f81b0014da00d86a49dfe...

101 lines
2.9 KiB
Plaintext

<template>
<div v-loading="loading" class="preview-wrapper">
<el-tabs tab-position="right" type="card">
<el-tab-pane v-for="file in fileList" :key="file.Id" :label="file.FileName">
<iframe
v-if="file.Type.indexOf('jpg') !== -1 || file.Type.indexOf('png') !== -1"
frameborder="0"
:src="file.FullFilePath"
width="100%"
height="100%"
/>
<!-- <embed v-else-if="file.Type.indexOf('pdf') !== -1" :src="file.FullFilePath" style="width: 100%; height: 100%"> -->
<!-- <iframe v-else-if="file.Type.indexOf('pdf') !== -1" :src="file.FullFilePath+'#toolbar=0'" width="100%" height="100%" frameborder="0" /> -->
<iframe v-else-if="file.Type.indexOf('pdf') !== -1" :src="`/static/pdfjs/web/viewer.html?file=${file.FullFilePath}`" width="100%" height="100%" frameborder="0" />
<div v-else>
{{ $t('common:message:downloadFile') }}
<el-link type="primary" @click="downLoadFile(file.FullFilePath)">{{ $t('common:button:download') }}</el-link>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { getNoneDicomStudyFileList } from '@/api/trials'
import store from '@/store'
import { changeURLStatic } from '@/utils/history.js'
export default {
name: 'SingleNoneDicom',
data() {
return {
fileType: '',
fileUrl: '',
loading: false,
fileList: [],
noneDicomId: ''
}
},
mounted() {
if (this.$router.currentRoute.query.TokenKey) {
store.dispatch('user/setToken', this.$router.currentRoute.query.TokenKey)
changeURLStatic('TokenKey', '')
}
this.noneDicomId = this.$router.currentRoute.query.Id
this.getFileList()
},
methods: {
getFileList() {
this.loading = true
getNoneDicomStudyFileList(this.noneDicomId).then(res => {
this.fileList = res.Result
this.fileList.forEach(file => {
const fileName = file.FileName
file.Type = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
})
this.loading = false
}).catch(() => { this.loading = false })
},
downLoadFile(filePath) {
if (!filePath) return
window.open(filePath, '_blank')
}
}
}
</script>
<style lang="scss">
.preview-wrapper{
height: 100%;
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #d0d0d0;
}
.el-tabs{
display: flex;
flex-direction: row !important;
width: 100%;
height: 100%;
.el-tabs__header{
margin-right: 10px !important;
height: 100% !important;
width: 300px;
border: 2px solid #E4E7ED;
overflow: auto;
}
.el-tabs__content{
flex: 1;
height: 100%;
.el-tab-pane{
height: 100%;
}
}
}
}
</style>