<template>
|
<el-dialog v-model="visible" title="报告预览" width="90vw" :fullscreen="fullscreen"
|
append-to-body destroy-on-close :close-on-click-modal="false" @close="reset">
|
<div class="report-preview-toolbar">
|
<el-radio-group v-if="variants.length > 1" :model-value="selectedKey" @change="selectReport">
|
<el-radio-button v-for="item in variants" :key="item.key" :value="item.key">{{ item.label }}</el-radio-button>
|
</el-radio-group>
|
<span class="report-preview-name">{{ current?.filename }}</span>
|
<el-button @click="fullscreen = !fullscreen">{{ fullscreen ? '退出全屏' : '全屏查看' }}</el-button>
|
<el-button type="primary" :disabled="!blob || loading" :loading="downloading" @click="download">下载当前报告</el-button>
|
</div>
|
<div v-loading="loading" element-loading-text="正在加载报告…" class="report-preview-content"
|
:class="{ 'is-fullscreen': fullscreen }">
|
<el-result v-if="error" icon="warning" title="报告预览失败" :sub-title="error">
|
<template #extra><el-button @click="selectReport(selectedKey, true)">重试</el-button></template>
|
</el-result>
|
<pdf-viewer v-else-if="blob" :source="blob" />
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { validateReportPreview } from '@/utils/reportPreview'
|
import PdfViewer from './PdfViewer.vue'
|
|
export default {
|
name: 'ReportPreview',
|
components: { PdfViewer },
|
data() {
|
return {
|
visible: false, fullscreen: false, variants: [], selectedKey: null,
|
loading: false, downloading: false, error: '', blob: null, objectUrl: '',
|
generation: 0, controller: null, downloadController: null, cache: new Map()
|
}
|
},
|
computed: {
|
current() { return this.variants.find(item => item.key === this.selectedKey) }
|
},
|
beforeUnmount() { this.reset() },
|
methods: {
|
open(variants, selectedKey = variants[0].key) {
|
this.reset()
|
this.variants = variants
|
this.fullscreen = false
|
this.visible = true
|
return this.selectReport(selectedKey)
|
},
|
releaseUrl() {
|
if (this.objectUrl) URL.revokeObjectURL(this.objectUrl)
|
this.objectUrl = ''
|
this.blob = null
|
},
|
reset() {
|
this.generation++
|
this.controller?.abort()
|
this.downloadController?.abort()
|
this.controller = null
|
this.downloadController = null
|
this.releaseUrl()
|
this.cache.clear()
|
this.loading = false
|
this.downloading = false
|
this.error = ''
|
},
|
async selectReport(key, retry = false) {
|
this.controller?.abort()
|
this.downloadController?.abort()
|
this.downloading = false
|
const generation = ++this.generation
|
this.selectedKey = key
|
this.releaseUrl()
|
this.error = ''
|
this.loading = true
|
const controller = new AbortController()
|
this.controller = controller
|
const item = this.current
|
try {
|
let blob = retry ? null : this.cache.get(key)
|
if (!blob) blob = await validateReportPreview(await item.load(controller.signal), 'pdf')
|
// 关闭弹窗、快速切换报告或打开另一行后，旧请求不得覆盖当前内容。
|
if (generation !== this.generation) return
|
this.cache.set(key, blob)
|
this.blob = blob
|
this.objectUrl = URL.createObjectURL(blob)
|
} catch (error) {
|
if (generation !== this.generation) return
|
const status = error.response?.status
|
this.error = status === 404 ? '报告文件不存在，请联系管理员'
|
: status === 401 || status === 403 ? '登录已过期或没有报告查看权限'
|
: error.message || '报告加载失败，请稍后重试'
|
} finally {
|
if (generation === this.generation) this.loading = false
|
}
|
},
|
async download() {
|
if (!this.blob || this.loading || this.downloading) return
|
const generation = this.generation
|
const item = this.current
|
this.downloading = true
|
const controller = new AbortController()
|
this.downloadController = controller
|
try {
|
// 预览统一显示 PDF；报告编制仍下载原 Word，其他入口复用已加载的 PDF。
|
const blob = item.download
|
? await validateReportPreview(await item.download(controller.signal), item.downloadFormat || 'docx')
|
: this.blob
|
if (generation === this.generation) this.$download.saveAs(blob, item.filename)
|
} catch (error) {
|
if (generation === this.generation) this.$message.error(error.message || '报告下载失败')
|
} finally {
|
if (generation === this.generation) this.downloading = false
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.report-preview-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
|
.report-preview-name { flex: 1; min-width: 120px; overflow-wrap: anywhere; color: var(--el-text-color-secondary); }
|
.report-preview-content { height: 75vh; min-height: 300px; overflow: auto; background: #fff; }
|
.report-preview-content.is-fullscreen { height: calc(100vh - 160px); }
|
</style>
|
