irc_web/.svn/pristine/b8/b80fc95c15725a928bf9f46f351...

135 lines
3.1 KiB
Plaintext

<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=${selected.filePath}?userName=${currentUser}`" width="100%" height="100%" frameborder="0" />
</div>
</div>
</div>
</template>
<script>
import { getManualList } from '@/api/trials'
export default {
name: 'Manuals',
props: {
trialId: {
type: String,
required: true
}
},
data() {
return {
selected: {
id: '',
filePath: ''
},
fileList: [],
loading: false,
currentUser: zzSessionStorage.getItem('userName')
}
},
mounted() {
this.getList()
},
methods: {
getList() {
this.loading = true
var param = {
trialId: this.trialId
}
getManualList(param).then(res => {
this.fileList = res.Result
if (this.fileList.length > 0) {
this.preview(this.fileList[0])
}
this.loading = false
}).catch(() => { this.loading = false })
},
preview(file) {
this.$set(this.selected, 'filePath', file.Path)
this.$set(this.selected, 'id', file.Id)
}
}
}
</script>
<style lang="scss">
.manuals-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-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: #00bca0 !important;
border-bottom: 1px solid #f3f3f3 !important;
}
}
.right-wrapper{
flex: 1;
height: 100%;
border: 1px solid #ddd;
}
.right-content{
height:100%;
}
}
</style>