136 lines
4.4 KiB
Vue
136 lines
4.4 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog title="报价明细" :visible.sync="dialogVisible" width="60%">
|
|
<el-table :data="list" style="width: 100%">
|
|
<el-table-column prop="subjectName" label="报价方"/>
|
|
<el-table-column prop="subjectMobile" label="联系方式"/>
|
|
<el-table-column prop="totalPrice" label="金额"/>
|
|
<el-table-column label="附件">
|
|
<template v-slot="{ row }">
|
|
<a
|
|
style="margin-right: 10px"
|
|
v-for="(item, index) in row.files"
|
|
:key="index"
|
|
href="javascript:;"
|
|
@click="previewFile(item)"
|
|
>预览: 文件{{ index + 1 }}</a>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="remark" label="备注"/>
|
|
<el-table-column prop="_add_time_str" label="报价时间"/>
|
|
</el-table>
|
|
</el-dialog>
|
|
<el-dialog title="图片预览" :visible.sync="showImagePreview" width="80%" append-to-body>
|
|
<img v-if="previewImageUrl" class="preview-image" :src="previewImageUrl" alt="附件预览"/>
|
|
</el-dialog>
|
|
<el-dialog title="PDF预览" :visible.sync="showPdfPreview" width="80%" append-to-body @closed="revokePdfPreviewUrl">
|
|
<iframe v-if="pdfPreviewUrl" class="pdf-preview-frame" :src="pdfPreviewUrl"></iframe>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "EnquiryQuoteList",
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
list: [],
|
|
showImagePreview: false,
|
|
previewImageUrl: '',
|
|
showPdfPreview: false,
|
|
pdfPreviewUrl: '',
|
|
pdfObjectUrl: '',
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
this.revokePdfPreviewUrl()
|
|
},
|
|
methods: {
|
|
open(sheetId){
|
|
this.getList(sheetId)
|
|
},
|
|
async getList(sheetId){
|
|
const {rows} = await vk.callFunction({
|
|
url: 'admin/enquiry/quote/kh/getList',
|
|
data: {
|
|
sheetId
|
|
}
|
|
})
|
|
this.dialogVisible = true
|
|
this.list = rows
|
|
},
|
|
getFileExt(url = "") {
|
|
const cleanUrl = String(url).split("?")[0].split("#")[0]
|
|
const match = cleanUrl.match(/\.([a-z0-9]+)$/i)
|
|
return match ? match[1].toLowerCase() : ""
|
|
},
|
|
isImageFile(url) {
|
|
return ["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg"].includes(this.getFileExt(url))
|
|
},
|
|
isPdfFile(url) {
|
|
return this.getFileExt(url) === "pdf"
|
|
},
|
|
isOfficeFile(url) {
|
|
return ["doc", "docx", "xls", "xlsx", "ppt", "pptx"].includes(this.getFileExt(url))
|
|
},
|
|
getOfficePreviewUrl(url) {
|
|
return `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`
|
|
},
|
|
revokePdfPreviewUrl() {
|
|
if (this.pdfObjectUrl) {
|
|
URL.revokeObjectURL(this.pdfObjectUrl)
|
|
this.pdfObjectUrl = ''
|
|
}
|
|
this.pdfPreviewUrl = ''
|
|
},
|
|
async previewPdfFile(url) {
|
|
this.revokePdfPreviewUrl()
|
|
try {
|
|
const response = await fetch(url)
|
|
if (!response.ok) throw new Error('PDF加载失败')
|
|
const blob = await response.blob()
|
|
this.pdfObjectUrl = URL.createObjectURL(new Blob([blob], {type: 'application/pdf'}))
|
|
this.pdfPreviewUrl = this.pdfObjectUrl
|
|
} catch (e) {
|
|
this.pdfPreviewUrl = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${encodeURIComponent(url)}`
|
|
}
|
|
this.showPdfPreview = true
|
|
},
|
|
previewFile(url) {
|
|
if (!url) return
|
|
if (this.isImageFile(url)) {
|
|
this.previewImageUrl = url
|
|
this.showImagePreview = true
|
|
return
|
|
}
|
|
if (this.isPdfFile(url)) {
|
|
this.previewPdfFile(url)
|
|
return
|
|
}
|
|
if (this.isOfficeFile(url)) {
|
|
window.open(this.getOfficePreviewUrl(url), "_blank")
|
|
return
|
|
}
|
|
window.open(url, "_blank")
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.preview-image {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 75vh;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.pdf-preview-frame {
|
|
display: block;
|
|
width: 100%;
|
|
height: 75vh;
|
|
border: 0;
|
|
}
|
|
</style>
|