168 lines
3.8 KiB
Vue
168 lines
3.8 KiB
Vue
<template>
|
|
<div v-loading="loading" class="manuals-wrapper">
|
|
<div class="left-wrapper">
|
|
<div v-if="fileList.length > 0" class="basic-content">
|
|
<div v-for="file in fileList" :key="file.Id" class="file-item" :class="{ activeItem: file.Id === selected.id }"
|
|
@click.prevent="preview(file)">
|
|
<!-- {{ file.Name }} -->
|
|
<el-tooltip class="item" :content="file.Name" placement="bottom">
|
|
<span>{{ file.Name }} </span>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
<div v-else class="basic-content-empty">
|
|
<span>{{ $t('trials:clinicaldara:title:nodata') }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="right-wrapper">
|
|
<div class="right-content">
|
|
<iframe v-if="selected.filePath"
|
|
:src="`/static/pdfjs/web/viewer.html?file=${OSSclientConfig.basePath}${selected.filePath}?userName=${currentUser}&COMPANY=${COMPANY}`"
|
|
width="100%" height="100%" frameborder="0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getManualList, getTrialCriterionKeyFileList } from '@/api/trials'
|
|
export default {
|
|
name: 'Manuals',
|
|
props: {
|
|
trialId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
justKeyDoc: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
selected: {
|
|
id: '',
|
|
filePath: ''
|
|
},
|
|
fileList: [],
|
|
loading: false,
|
|
currentUser: zzSessionStorage.getItem('userName'),
|
|
COMPANY: process.env.VUE_APP_COMPANY_NAME
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
async getList() {
|
|
this.loading = true
|
|
this.fileList = []
|
|
try {
|
|
var param = {
|
|
TrialCriterionId: this.$router.currentRoute.query.TrialReadingCriterionId,
|
|
PageIndex: 1,
|
|
PageSize: 1000
|
|
}
|
|
const res = await getTrialCriterionKeyFileList(param)
|
|
if (res.IsSuccess) {
|
|
let list = res.Result.CurrentPageData.map(item => {
|
|
return {
|
|
Id: item.Id,
|
|
Name: item.FileName,
|
|
Path: item.FilePath
|
|
}
|
|
})
|
|
this.fileList = [...this.fileList, ...list]
|
|
}
|
|
if (!this.justKeyDoc) {
|
|
var param = {
|
|
trialId: this.trialId
|
|
}
|
|
const res = await getManualList(param)
|
|
if (res.IsSuccess) {
|
|
this.fileList = [...this.fileList, ...res.Result]
|
|
}
|
|
}
|
|
if (this.fileList.length > 0) {
|
|
this.preview(this.fileList[0])
|
|
}
|
|
this.loading = false
|
|
} catch (e) {
|
|
this.loading = false
|
|
}
|
|
},
|
|
preview(file) {
|
|
this.$set(this.selected, 'filePath', file.Path)
|
|
this.$set(this.selected, 'id', file.Id)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.manuals-wrapper {
|
|
display: flex;
|
|
flex-direction: row !important;
|
|
width: 100%;
|
|
height: 95%;
|
|
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-content {
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.basic-content-empty {
|
|
padding: 5px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.file-item {
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #f3f3f3;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
cursor: pointer;
|
|
padding-left: 5px;
|
|
color: #ddd;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
}
|
|
|
|
.activeItem {
|
|
color: #428bca !important;
|
|
border-bottom: 1px solid #f3f3f3 !important;
|
|
}
|
|
}
|
|
|
|
.right-wrapper {
|
|
flex: 1;
|
|
height: 100%;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.right-content {
|
|
height: 100%;
|
|
}
|
|
|
|
}
|
|
</style>
|