<template>
|
<el-dialog
|
:title="title"
|
:visible.sync="visible"
|
width="90%"
|
top="5vh"
|
:close-on-click-modal="true"
|
class="attachment-preview-dialog"
|
@close="handleClose"
|
>
|
<div class="attachment-preview">
|
<el-tabs v-model="activeTab" type="card">
|
<el-tab-pane
|
v-for="(file, index) in fileList"
|
:key="index"
|
:label="getTabLabel(file)"
|
:name="index.toString()"
|
>
|
<div class="preview-content">
|
<!-- PDF预览 -->
|
<PdfPreview
|
v-if="getFileType(file.fileName) === 'pdf'"
|
:pdf-url="file.fileUrl"
|
:file-name="file.fileName"
|
/>
|
|
<!-- 图片预览 -->
|
<ImagePreview
|
v-else-if="getFileType(file.fileName) === 'image'"
|
:image-url="file.fileUrl"
|
:file-name="file.fileName"
|
/>
|
|
<!-- 不支持预览的文件类型 -->
|
<div v-else class="unsupported-preview">
|
<el-alert
|
title="该文件格式不支持在线预览，请下载后查看"
|
type="warning"
|
show-icon
|
:closable="false"
|
/>
|
<div class="download-action">
|
<el-button type="primary" @click="handleDownload(file)">
|
<i class="el-icon-download"></i> 下载文件
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="$emit('close')">关闭</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
import PdfPreview from "./PdfPreview";
|
import ImagePreview from "./ImagePreview";
|
|
export default {
|
name: "AttachmentPreview",
|
components: { PdfPreview, ImagePreview },
|
props: {
|
visible: Boolean,
|
fileList: {
|
type: Array,
|
default: () => []
|
},
|
title: String
|
},
|
data() {
|
return {
|
activeTab: "0"
|
};
|
},
|
methods: {
|
getFileType(fileName) {
|
const extension = fileName.split('.').pop().toLowerCase();
|
const imageTypes = ["jpg", "jpeg", "png", "gif", "bmp", "webp"];
|
const pdfTypes = ["pdf"];
|
|
if (imageTypes.includes(extension)) return "image";
|
if (pdfTypes.includes(extension)) return "pdf";
|
return "other";
|
},
|
|
getTabLabel(file) {
|
const type = this.getFileType(file.fileName);
|
const icon = type === 'pdf' ? 'el-icon-document' :
|
type === 'image' ? 'el-icon-picture' : 'el-icon-files';
|
return `${file.fileName}`;
|
},
|
|
handleDownload(file) {
|
const link = document.createElement("a");
|
link.href = file.fileUrl;
|
link.download = file.fileName;
|
link.style.display = "none";
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
this.$message.success("开始下载文件");
|
},
|
|
handleClose() {
|
this.activeTab = "0";
|
this.$emit('close');
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.attachment-preview-dialog >>> .el-dialog {
|
min-height: 80vh;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.attachment-preview-dialog >>> .el-dialog__body {
|
flex: 1;
|
padding: 0;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.attachment-preview {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.preview-content {
|
flex: 1;
|
height: 800px;
|
padding: 0;
|
}
|
|
.unsupported-preview {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
padding: 40px;
|
}
|
|
.download-action {
|
margin-top: 20px;
|
}
|
</style>
|
