115 lines
2.8 KiB
Vue
115 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<!-- 预览文件 -->
|
||
|
|
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
|
||
|
|
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
|
||
|
|
<div style="text-align:center">
|
||
|
|
<!-- 图片预览 -->
|
||
|
|
<template v-if="isImage">
|
||
|
|
<el-image
|
||
|
|
:src="fileUrl"
|
||
|
|
:preview-src-list="previewList"
|
||
|
|
fit="contain"
|
||
|
|
style="max-width:100%;max-height:70vh"
|
||
|
|
>
|
||
|
|
<div slot="error" class="image-slot">
|
||
|
|
<i class="el-icon-picture-outline"></i>
|
||
|
|
</div>
|
||
|
|
</el-image>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<!-- PDF 预览 -->
|
||
|
|
<template v-else>
|
||
|
|
<pdf :src="fileUrl" style="width:100%;height:70vh" />
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import pdf from 'vue-pdf'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'ViewFile',
|
||
|
|
props: ['width','hight','dataForm','title','disabled','isAdd','rowData','projectId'],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dialogVisible: true,
|
||
|
|
lDialog: this.width > 500 ? "w700" : "w500",
|
||
|
|
fileUrl: '', // 实际文件地址
|
||
|
|
fileName: '', // 用于从文件名判断类型
|
||
|
|
previewList: [] // 预览组（可只放当前图片）
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
isImage() {
|
||
|
|
// 允许的图片类型
|
||
|
|
const exts = ['.jpg','.jpeg','.png','.gif','.bmp','.webp']
|
||
|
|
const url = (this.fileUrl || '').toLowerCase()
|
||
|
|
const name = (this.fileName || '').toLowerCase()
|
||
|
|
return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
// 从 rowData 或 dataForm 里取文件信息（根据你现有数据结构调整）
|
||
|
|
// 例如：
|
||
|
|
this.fileUrl = this.rowData?.fileUrl || this.dataForm?.fileUrl || ''
|
||
|
|
this.fileName = this.rowData?.fileName || this.dataForm?.fileName || ''
|
||
|
|
// 预览组（如果你有多张，可放数组；没有就放当前一张）
|
||
|
|
if (this.isImage && this.fileUrl) {
|
||
|
|
this.previewList = [this.fileUrl]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClose() {
|
||
|
|
this.dialogVisible = false
|
||
|
|
this.$emit('closeDialog')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: { pdf }
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
.w700 .el-dialog {
|
||
|
|
width: 700px;
|
||
|
|
height: 800px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.w500 .el-dialog {
|
||
|
|
width: 500px;
|
||
|
|
height: 800px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.w500 .el-dialog__header,
|
||
|
|
.w700 .el-dialog__header {
|
||
|
|
// background: #eeeeee;
|
||
|
|
|
||
|
|
.el-dialog__title {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.yxq .el-range-separator {
|
||
|
|
margin-right: 7px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-date-editor--daterange.el-input__inner {
|
||
|
|
width: 260px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-item {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select-style {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.image-slot {
|
||
|
|
width: 100%;
|
||
|
|
height: 240px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: #909399;
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
</style>
|