328 lines
8.9 KiB
Vue
328 lines
8.9 KiB
Vue
<template>
|
|
<el-dialog :visible.sync="visible" :title="title" :fullscreen="true" append-to-body
|
|
custom-class="base-dialog-wrapper" :before-close="handleClose">
|
|
<div v-loading="loading" class="img-container" v-if="visible">
|
|
<el-card class="box-card left">
|
|
<div class="title">
|
|
{{ $t('dictionary:signature:fileList') }}
|
|
</div>
|
|
<div class="left-content">
|
|
<!-- 检查层级 -->
|
|
<div id="imgList" style="height: 100%; overflow: hidden">
|
|
<template v-for="(item, index) in list">
|
|
<div :id="`img${item.Id}`" :key="item.Id" :class="{
|
|
'is-boxActive': item.Id === rowData.Id,
|
|
}" class="img-box" @click="selected(item)">
|
|
<div class="file-image">
|
|
<el-image v-if="
|
|
[
|
|
'jpeg',
|
|
'jpg',
|
|
'png',
|
|
].includes(item.FileFormat)
|
|
" style="width: 100%; height: 100%"
|
|
:src="`${OSSclientConfig.basePath}${item.FilePath}?x-oss-process=image/resize,w_50,h_50/format,png`"
|
|
fit="contain" crossorigin="anonymous" />
|
|
<el-image v-else style="width: 100%; height: 100%" :src="getsrc(item.FileFormat)"
|
|
fit="contain" crossorigin="anonymous" />
|
|
</div>
|
|
<div v-if="item.Name.length < 15" class="img-text">
|
|
{{ `${index + 1}. ${item.Name}` }}
|
|
</div>
|
|
<el-tooltip v-else :content="item.Name" placement="bottom">
|
|
<div class="img-text">
|
|
{{ `${index + 1}. ${item.Name}` }}
|
|
</div>
|
|
</el-tooltip>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<!-- 预览图像 -->
|
|
<el-card class="box-card right">
|
|
<div style="width: 100%; height: 100%" v-if="[
|
|
'jpeg',
|
|
'jpg',
|
|
'png',
|
|
].includes(rowData.FileFormat)">
|
|
<imageViewer :rowData="rowData" />
|
|
</div>
|
|
<div style="width: 100%; height: 100%" v-else>
|
|
<PreviewFile v-if='rowData.FilePath' :file-path="rowData.FilePath" :file-type="rowData.FileFormat"
|
|
:title="rowData.Name" />
|
|
</div>
|
|
</el-card>
|
|
|
|
<!-- <el-card class="box-card" style="width:300px;height:100%;padding: 10px;margin-left:10px;">
|
|
<CheckForm />
|
|
</el-card> -->
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import pdf from '@/assets/file_icon/pdf.png'
|
|
import zip from '@/assets/file_icon/zip.png'
|
|
import doc from '@/assets/file_icon/doc.png'
|
|
import docx from '@/assets/file_icon/docx.png'
|
|
import ppt from '@/assets/file_icon/ppt.png'
|
|
import pptx from '@/assets/file_icon/pptx.png'
|
|
import xls from '@/assets/file_icon/xls.png'
|
|
import xlsx from '@/assets/file_icon/xlsx.png'
|
|
import mp4 from '@/assets/file_icon/mp4.png'
|
|
import PreviewFile from '@/components/PreviewFile'
|
|
import imageViewer from './image-viewer'
|
|
import { getSystemDocumentAttachmentList } from '@/api/dictionary'
|
|
import { getTrialDocumentAttachmentList } from '@/api/trials'
|
|
const defaultSearchData = () => {
|
|
return {
|
|
PageIndex: 1,
|
|
PageSize: 1000,
|
|
Asc: false,
|
|
OffLine: null,
|
|
SortField: null
|
|
}
|
|
}
|
|
export default {
|
|
name: 'Notice',
|
|
components: {
|
|
PreviewFile,
|
|
imageViewer
|
|
},
|
|
props: {
|
|
SystemDocumentId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isView: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isTrial: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
pdf,
|
|
zip,
|
|
doc,
|
|
docx,
|
|
ppt,
|
|
pptx,
|
|
xls,
|
|
xlsx,
|
|
mp4,
|
|
rowData: {},
|
|
list: [],
|
|
searchData: defaultSearchData(),
|
|
title: this.$t('dictionary:signature:fileList')
|
|
}
|
|
},
|
|
watch: {
|
|
SystemDocumentId: {
|
|
handler() {
|
|
this.getList()
|
|
},
|
|
immediate: true,
|
|
}
|
|
},
|
|
methods: {
|
|
getsrc(type) {
|
|
return this[type.toLowerCase()]
|
|
},
|
|
selected(row) {
|
|
this.rowData = row
|
|
},
|
|
handleClose() {
|
|
this.$emit("update:visible", false)
|
|
},
|
|
async getList() {
|
|
try {
|
|
if (!this.SystemDocumentId) return false
|
|
this.loading = true
|
|
if (!this.isTrial) {
|
|
this.searchData.SystemDocumentId = this.SystemDocumentId
|
|
} else {
|
|
this.searchData.TrialDocumentId = this.SystemDocumentId
|
|
}
|
|
if (this.isView) {
|
|
this.searchData.OffLine = false
|
|
}
|
|
let res = null
|
|
if (!this.isTrial) {
|
|
res = await getSystemDocumentAttachmentList(this.searchData)
|
|
} else {
|
|
res = await getTrialDocumentAttachmentList(this.searchData)
|
|
}
|
|
this.loading = false
|
|
if (res.IsSuccess) {
|
|
this.list = res.Result.CurrentPageData
|
|
this.rowData = this.list[0] || {}
|
|
}
|
|
} catch (err) {
|
|
this.loading = false
|
|
console.log(err)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.img-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px;
|
|
display: flex;
|
|
|
|
::-webkit-scrollbar {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background: #d0d0d0;
|
|
}
|
|
|
|
::v-deep .el-card__body {
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
.study-desc {
|
|
padding: 10px 5px;
|
|
line-height: 20px;
|
|
background-color: #d5d5d5;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.left {
|
|
width: 220px;
|
|
height: 100%;
|
|
|
|
::v-deep .el-card__body {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.title {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border: 1ppx solid;
|
|
border: 1px solid #ebe7e7;
|
|
padding-left: 10px;
|
|
background-color: #4e4e4e;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.left-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
// ::v-deep .el-tabs{
|
|
// height: 100%;
|
|
// }
|
|
// ::v-deep .el-tabs__header{
|
|
// height: 40px;
|
|
// }
|
|
// ::v-deep .el-tabs__content{
|
|
// flex: 1;
|
|
// overflow-y: auto;
|
|
// padding: 0;
|
|
// }
|
|
.img-box {
|
|
// position: relative;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
border-bottom: 2px solid #f3f3f3;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
padding: 5px 10px;
|
|
|
|
cursor: pointer;
|
|
// margin-bottom: 5px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.img-text {
|
|
display: inline-block;
|
|
width: calc(100% - 60px);
|
|
margin-left: 5px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
/* 用省略号表示溢出的文本 */
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.img-box:nth-last-child(1) {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.is-boxActive {
|
|
// border-color: #409eff;
|
|
color: #409eff;
|
|
}
|
|
|
|
.is-boxActiv:after {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
height: 100%;
|
|
margin-left: 10px;
|
|
|
|
::v-deep .el-card__body {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.switchBox {
|
|
width: 100%;
|
|
margin: 5px 0;
|
|
color: #4e4e4e;
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
.file-image {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
::v-deep .el-collapse-item__header {
|
|
background-color: #d5d5d5;
|
|
}
|
|
|
|
::v-deep .el-collapse-item__header {
|
|
min-height: 48px;
|
|
height: auto;
|
|
}
|
|
|
|
::v-deep .el-collapse-item__content {
|
|
padding-bottom: 0;
|
|
}
|
|
</style> |