<template>
|
<div>
|
<el-dialog title="报告预览/下载" v-model="isShow" width="520px" @closed="$emit('closeDownFileDialog')">
|
<div v-for="item in reports" :key="item.key" class="report-choice">
|
<span>{{ item.label }}</span>
|
<el-button link type="primary" :disabled="!canView(item)" @click="preview(item)">预览</el-button>
|
<el-button link type="primary" :disabled="!canView(item)" @click="download(item)">下载</el-button>
|
<span v-if="!canView(item)" class="report-unavailable">未生成或尚未批准</span>
|
</div>
|
</el-dialog>
|
<report-preview ref="reportPreview" />
|
</div>
|
</template>
|
|
<script>
|
import ReportPreview from '@/components/ReportPreview/index.vue'
|
import { loadReportFile, reportFilename, reportPdfPath } from '@/utils/reportPreview'
|
|
export default {
|
name: 'downFileDialog',
|
components: { ReportPreview },
|
props: {
|
downFileDialogVisible: { type: Boolean, default: false },
|
downLoadInfo: { type: Object, default: () => ({}) }
|
},
|
data() {
|
return { isShow: this.downFileDialogVisible }
|
},
|
computed: {
|
reports() {
|
const info = this.downLoadInfo
|
return [
|
{ key: 'enter', label: '进厂检验报告', url: info.enterUrlS || info.enterUrl, status: info.enterRatifyStatus },
|
{ key: 'quarter', label: '季度检验报告', url: info.quarterUrlS || info.quarterUrl, status: info.quarterRatifyStatus }
|
]
|
}
|
},
|
methods: {
|
canView(item) { return !!item.url && Number(item.status) === 1 },
|
preview(item) {
|
if (!this.canView(item)) return
|
this.$refs.reportPreview.open([{
|
key: item.key, label: item.label, format: 'pdf',
|
filename: reportFilename(item.label, 'pdf'),
|
load: signal => loadReportFile(reportPdfPath(item.url), signal)
|
}])
|
},
|
download(item) {
|
if (this.canView(item)) this.$download.url(reportPdfPath(item.url), item.label + '.pdf')
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.report-choice { display: flex; align-items: center; gap: 12px; padding: 12px 0; flex-wrap: wrap; }
|
.report-unavailable { color: var(--el-text-color-secondary); font-size: 12px; }
|
</style>
|
