<template>
|
<div>
|
<el-row align="middle" justify="center" @click="previewFile(index)" class="cursor-p">
|
<slot>
|
<el-row style="flex-wrap: nowrap;">
|
<Icon class="mr-1" icon="uis:paperclip" width="20" height="18" style="color:#007AFF;flex-shrink: 0;" />
|
<span style="color:#007AFF">{{ name }}</span>
|
</el-row>
|
</slot>
|
</el-row>
|
<div>
|
|
</div>
|
<ElImageViewer
|
v-if="showImageViewer"
|
:url-list="filterPreviewImgList"
|
:initial-index="initialPreviewImgIndex"
|
teleported
|
@close="showImageViewer=false"
|
>
|
</ElImageViewer>
|
|
<el-dialog
|
v-model="pdfPreviewFlag"
|
top="5vh"
|
:append-to-body="true"
|
>
|
<div style="height: 84vh;">
|
<PdfPreview v-if="previewUrl&&pdfPreviewFlag" :url="previewUrl"></PdfPreview>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getFileUrlType } from '@/utils/tool.js'
|
import PdfPreview from '@/views/components/PdfPreview.vue'
|
|
export default {
|
components: {
|
PdfPreview
|
},
|
data() {
|
return {
|
initialPreviewImgIndex: 0,
|
showImageViewer: false,
|
pdfPreviewFlag: false,
|
previewUrl: ''
|
}
|
},
|
props: {
|
list: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
name: {
|
type: String,
|
default: ""
|
},
|
url: {
|
type: String,
|
default: ""
|
},
|
index: {
|
type: Number,
|
default: 0
|
}
|
},
|
computed: {
|
filterPreviewImgList() {
|
let list = this.list.map(ele => ele.url?.includes('http') ? ele.url : this.$qxueyou.qxyRes + ele.url )
|
return list
|
},
|
},
|
methods: {
|
previewFile() {
|
const fileObj = this.list[this.index] || {}
|
const url = fileObj.url || this.url
|
const type = getFileUrlType(url)
|
if (type == 'img') {
|
this.initialPreviewImgIndex = this.index
|
this.showImageViewer = true
|
} else if (type == 'pdf') {
|
this.pdfPreviewFlag = true
|
this.previewUrl = url ?.includes('http') ? url : this.$qxueyou.qxyRes + url
|
} else {
|
this.$messageBox.confirm('该类型文件暂不支持在线预览，是否下载？', '提示',
|
{ confirmButtonText: '确定', cancelButtonText: '取消', type: '' }).then(res => {
|
if (res == 'confirm') {
|
window.open(url ?.includes('http') ? url : this.$qxueyou.qxyRes + url)
|
}
|
})
|
|
}
|
},
|
}
|
}
|
</script>
|
