jjx-admin/pages/order/components/ProcessQuoteList.vue

<template>
  <div>
    <el-dialog title="报价列表" :visible.sync="dialogVisible" width="60%">
        <el-table :data="list" style="width: 100%">
            <el-table-column label="报价方">
                <template #default="{ row }">
                    <span v-if="row.user.accountType === 2">{{ row.user.company.companyName }}</span>
                    <span v-else>{{ row.user.person.personName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="联系方式">
                <template #default="{ row }">
                    <span v-if="row.user.accountType === 2">{{ row.user.company.mobile }}</span>
                    <span v-else>{{ row.user.person.mobile }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="totalPrice" label="金额"/>
            <el-table-column label="附件">
                <template #default="{ row }">
                    <a
                      href="javascript:;"
                      style="margin-right: 10px"
                      v-for="(item, index) in row.files"
                      :key="index"
                      @click="previewFile(item)"
                    >附件:{{ index + 1 }}</a>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="报价单详情"/>
            <el-table-column prop="supplierExt" 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: "ProcessQuoteList",
    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/process/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>