diff --git a/package.json b/package.json index 61eb438..224927f 100644 --- a/package.json +++ b/package.json @@ -11,12 +11,14 @@ "type-check": "vue-tsc --noEmit" }, "dependencies": { - "vue": "^3.3.4", - "vue-router": "^4.2.4", + "@vant/touch-emulator": "^1.4.0", + "axios": "^1.5.0", + "pdfjs-dist": "^5.4.449", "pinia": "^2.1.6", "vant": "^4.6.6", - "axios": "^1.5.0", - "@vant/touch-emulator": "^1.4.0" + "vue": "^3.3.4", + "vue-pdf-embed": "^2.1.3", + "vue-router": "^4.2.4" }, "devDependencies": { "@types/node": "^20.5.9", @@ -29,9 +31,9 @@ "prettier": "^3.0.2", "sass": "^1.66.1", "typescript": "~5.1.6", - "vite": "^4.4.9", - "vue-tsc": "^1.8.8", "unplugin-auto-import": "^0.16.6", - "unplugin-vue-components": "^0.25.2" + "unplugin-vue-components": "^0.25.2", + "vite": "^4.4.9", + "vue-tsc": "^1.8.8" } -} \ No newline at end of file +} diff --git a/src/views/PurchaseDetail/index.vue b/src/views/PurchaseDetail/index.vue index 564622f..130cccb 100644 --- a/src/views/PurchaseDetail/index.vue +++ b/src/views/PurchaseDetail/index.vue @@ -276,6 +276,26 @@ + + +
+
+ +
+
+
@@ -288,6 +308,13 @@ import { usePurchaseStore } from '@/store/purchase' import { getPurchaseApprovalHistory, submitPurchaseApproval } from '@/api/purchase' import { formatAmount, formatDate, getApprovalStatusColor, getFilePreviewUrl } from '@/utils' import type {ApprovalStatus, ApproveBtn, AttachmentFile, FileType} from '@/types' +import VuePdfEmbed from 'vue-pdf-embed' +import * as pdfjsLib from 'pdfjs-dist' + +// 设置 PDF worker +// 使用 import.meta.url 来确保在 Vite 环境下正确加载 worker +const workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString() +pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc const route = useRoute() const router = useRouter() @@ -302,6 +329,9 @@ const approvalHistory = ref([]) // 审批相关 const approvalDialogVisible = ref(false) +const pdfPreviewVisible = ref(false) +const pdfUrl = ref('') +const pdfLoading = ref(false) const approvalOpinion = ref('') const currentApprovalStatus = ref(3) const submitting = ref(false) @@ -347,7 +377,25 @@ const previewFile = (file: AttachmentFile) => { } const url = getFilePreviewUrl(file.filePath) - window.open(url, '_blank') + const isPdf = file.fileName?.toLowerCase().endsWith('.pdf') || file.filePath?.toLowerCase().endsWith('.pdf') + + if (isPdf) { + pdfUrl.value = url + pdfPreviewVisible.value = true + pdfLoading.value = true + } else { + window.open(url, '_blank') + } +} + +const handlePdfLoaded = () => { + pdfLoading.value = true +} + +const handlePdfError = (error: any) => { + console.error('PDF加载失败:', error) + pdfLoading.value = false + showToast('PDF加载失败') } // 计算总金额 @@ -887,4 +935,31 @@ onMounted(async () => { background: var(--background-color-secondary); } } + +.pdf-preview-container { + height: 100%; + padding-top: 40px; + background: var(--background-color-secondary); + overflow-y: auto; + -webkit-overflow-scrolling: touch; + position: relative; +} + +.pdf-loading { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; +} + +.pdf-content { + min-height: 100%; + background: white; +} + +.vue-pdf-embed { + width: 100%; + display: block; +}