refactor(manager/plans): 设计文件查看改 OSS 代理 + 新窗口打开 (与 PublicityDetail 一致)

PDF 体验问题:
- 旧: Preview dialog iframe 内嵌 PDF (70vh 矮, OSS attachment 头让 iframe 强制下载)
- 新: window.open 浏览器原生 PDF viewer (Chrome 工具栏/缩放/分页/搜索全有)

实现:
- 加 proxyUrl() 函数: OSS URL 走 /common/oss/proxy 后端代理重写 inline + #toolbar=0&zoom=page-width
- 加 openDesign(): window.open(proxyUrl(row.designFileUrl), '_blank')
- 删 Preview 组件 import + onFile + previewOpen/Url/Title refs + <Preview> 标签
- 表格"查看"按钮 @click 改 openDesign(row)
- '下载'按钮保留 (downloadFile() 仍用 OSS 原始 URL)
This commit is contained in:
郭庆泰
2026-08-18 01:13:35 +08:00
parent 55f3147463
commit 81e91ee808
+16 -6
View File
@@ -47,7 +47,7 @@
<el-table-column label="设计文件" width="160" align="center"> <el-table-column label="设计文件" width="160" align="center">
<template #default="{ row }"> <template #default="{ row }">
<template v-if="row.designFileUrl"> <template v-if="row.designFileUrl">
<el-button link type="primary" @click="onFile(row)">查看</el-button> <el-button link type="primary" @click="openDesign(row)">查看</el-button>
<el-button link type="primary" @click="downloadFile(row)">下载</el-button> <el-button link type="primary" @click="downloadFile(row)">下载</el-button>
</template> </template>
<span v-else style="color:#c0c4cc">-</span> <span v-else style="color:#c0c4cc">-</span>
@@ -143,8 +143,7 @@
</template> </template>
</el-dialog> </el-dialog>
<Preview v-model="previewOpen" :url="previewUrl" :title="previewTitle" /> </div>
</div>
</template> </template>
<script setup> <script setup>
@@ -152,7 +151,6 @@ import { ref, reactive, watch, onMounted } from 'vue'
import { bizList, bizUpdate } from '@/api/public' import { bizList, bizUpdate } from '@/api/public'
import request from '@/utils/request' import request from '@/utils/request'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import Preview from '@/components/Preview.vue'
import DictSelect from '@/components/DictSelect.vue' import DictSelect from '@/components/DictSelect.vue'
import AuditStatusTag from '@/components/AuditStatusTag.vue' import AuditStatusTag from '@/components/AuditStatusTag.vue'
@@ -291,8 +289,20 @@ async function submitSettle() {
finally { submitting.value = false } finally { submitting.value = false }
} }
const previewOpen = ref(false); const previewUrl = ref(''); const previewTitle = ref('策划方案预览') // OSS bucket 设置了 Content-Disposition: attachment, iframe/embed 直接访问会被强制下载.
function onFile(row) { previewUrl.value = row.designFileUrl; previewTitle.value = `策划方案 - ${row.planName || ''}`; previewOpen.value = true } // 走 /common/oss/proxy 后端代理 (重写为 inline), 浏览器原生 PDF viewer 体验更好 (与 portal/PublicityDetail 一致)
// 必须加 /dev-api 前缀: Vite dev server proxy 只代理 /dev-api/* 到后端, 其他相对 URL 会 SPA fallback
function proxyUrl(url) {
if (!url) return url
if (url.includes('hwtossbamlorgcn.oss-cn-beijing.aliyuncs.com')) {
return '/dev-api/common/oss/proxy?url=' + encodeURIComponent(url) + '#toolbar=0&zoom=page-width'
}
return url
}
function openDesign(row) {
if (!row.designFileUrl) return
window.open(proxyUrl(row.designFileUrl), '_blank')
}
function downloadFile(row) { function downloadFile(row) {
if (!row.designFileUrl) return if (!row.designFileUrl) return
const a = document.createElement('a') const a = document.createElement('a')