From 6613b3612c50cc22f8bd990cd94049b3bf41dbb9 Mon Sep 17 00:00:00 2001
From: chenhao <chenhao2@unisinsight.com>
Date: Tue, 16 Dec 2025 16:35:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(approve):=20=E5=AE=9E=E7=8E=B0=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E5=8D=95=E6=8D=AEPDF=E5=AF=BC=E5=87=BA=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入通用PDF导出工具函数exportElementToPDF
- 在多个审批组件中添加PDF导出按钮和相关逻辑
- 优化导出时的样式显示，隐藏不必要的交互元素
- 统一处理PDF文件命名规则
- 移除原有的html2canvas和jsPDF直接调用代码
- 添加导出状态loading效果和异常处理提示
---
 .../finance/invoiceReceipt/approved/index.vue | 58 +++++++++++++--
 .../approve/finance/invoiceReceipt/index.vue  | 58 +++++++++++++--
 .../finance/invoiceRed/approved/index.vue     | 60 +++++++++++++---
 .../approve/finance/invoiceRed/index.vue      | 62 +++++++++++++---
 .../finance/payment/approved/index.vue        | 72 +++++++++++++++----
 .../views/approve/finance/payment/index.vue   | 58 +++++++++++++--
 .../finance/paymentRefund/approved/index.vue  | 58 +++++++++++++--
 .../approve/finance/paymentRefund/index.vue   | 72 +++++++++++++++----
 .../src/views/approve/order/Approve.vue       | 51 +------------
 9 files changed, 428 insertions(+), 121 deletions(-)

diff --git a/oms_web/oms_vue/src/views/approve/finance/invoiceReceipt/approved/index.vue b/oms_web/oms_vue/src/views/approve/finance/invoiceReceipt/approved/index.vue
index edfd1b14..d68741c5 100644
--- a/oms_web/oms_vue/src/views/approve/finance/invoiceReceipt/approved/index.vue
+++ b/oms_web/oms_vue/src/views/approve/finance/invoiceReceipt/approved/index.vue
@@ -34,12 +34,23 @@
     <!-- 详情对话框 -->
     <el-dialog title="收票单详情" :visible.sync="detailDialogVisible" width="80%" append-to-body>
       <div v-loading="detailLoading" style="max-height: 70vh; overflow-y: auto; padding: 20px;">
-        <ApproveLayout title="收票单详情">
-          <invoice-receipt-detail :data="form"></invoice-receipt-detail>
-          <template #footer>
-            <span>收票编号: {{ form.receiptBillCode }}</span>
-          </template>
-        </ApproveLayout>
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-download"
+            @click="exportPDF"
+            :loading="pdfExporting"
+          >导出PDF</el-button>
+        </div>
+        <div class="approve-container" :class="{ 'exporting-pdf': pdfExporting }">
+          <ApproveLayout ref="approveLayout" title="收票单详情">
+            <invoice-receipt-detail :data="form"></invoice-receipt-detail>
+            <template #footer>
+              <span>收票编号: {{ form.receiptBillCode }}</span>
+            </template>
+          </ApproveLayout>
+        </div>
 
         <el-divider content-position="left">流转意见</el-divider>
         <div class="process-container">
@@ -67,6 +78,7 @@ import { listInvoiceReceiptApproved, getInvoiceReceipt } from "@/api/finance/inv
 import { listCompletedFlows } from "@/api/flow";
 import InvoiceReceiptDetail from "../components/InvoiceReceiptDetail";
 import ApproveLayout from "@/views/approve/ApproveLayout";
+import { exportElementToPDF } from "@/views/approve/finance/pdfUtils";
 
 export default {
   name: "InvoiceReceiptApproved",
@@ -89,7 +101,8 @@ export default {
       detailLoading: false,
       form: {},
       approveLogs: [],
-      currentInvoiceReceiptId: null
+      currentInvoiceReceiptId: null,
+      pdfExporting: false
     };
   },
   created() {
@@ -137,6 +150,20 @@ export default {
     getStatusText(status) {
       const map = { '1': '提交审批', '2': '驳回', '3': '批准' };
       return map[status] || '提交审批';
+    },
+    async exportPDF() {
+      this.pdfExporting = true;
+      try {
+        const element = this.$refs.approveLayout.$el;
+        const fileName = `收票单-${this.form.receiptBillCode || ''}.pdf`;
+        await exportElementToPDF(element, fileName);
+        this.$modal.msgSuccess('PDF导出成功');
+      } catch (error) {
+        console.error('PDF导出失败:', error);
+        this.$modal.msgError('PDF导出失败，请稍后重试');
+      } finally {
+        this.pdfExporting = false;
+      }
     }
   }
 };
@@ -146,4 +173,21 @@ export default {
 .process-container {
   padding: 10px;
 }
+
+/* 导出PDF时的特殊样式 */
+.approve-container.exporting-pdf ::v-deep .el-button--primary,
+.approve-container.exporting-pdf ::v-deep .el-button--text {
+  display: none;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__inner,
+.approve-container.exporting-pdf ::v-deep .el-textarea__inner {
+  border: none !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+  resize: none !important;
+  padding: 0 !important;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__suffix {
+  display: none;
+}
 </style>
diff --git a/oms_web/oms_vue/src/views/approve/finance/invoiceReceipt/index.vue b/oms_web/oms_vue/src/views/approve/finance/invoiceReceipt/index.vue
index d517ea0f..4f1c4584 100644
--- a/oms_web/oms_vue/src/views/approve/finance/invoiceReceipt/index.vue
+++ b/oms_web/oms_vue/src/views/approve/finance/invoiceReceipt/index.vue
@@ -48,12 +48,23 @@
     <!-- 审批详情主对话框 -->
     <el-dialog title="收票单审批" :visible.sync="detailDialogVisible" width="80%" append-to-body>
       <div v-loading="detailLoading" style="max-height: 70vh; overflow-y: auto; padding: 20px;">
-        <ApproveLayout title="收票单详情">
-          <invoice-receipt-detail :data="form"></invoice-receipt-detail>
-          <template #footer>
-            <span>收票编号: {{ form.ticketBillCode }}</span>
-          </template>
-        </ApproveLayout>
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-download"
+            @click="exportPDF"
+            :loading="pdfExporting"
+          >导出PDF</el-button>
+        </div>
+        <div class="approve-container" :class="{ 'exporting-pdf': pdfExporting }">
+          <ApproveLayout ref="approveLayout" title="收票单详情">
+            <invoice-receipt-detail :data="form"></invoice-receipt-detail>
+            <template #footer>
+              <span>收票编号: {{ form.ticketBillCode }}</span>
+            </template>
+          </ApproveLayout>
+        </div>
 
         <el-divider content-position="left">流转意见</el-divider>
         <div class="process-container">
@@ -96,6 +107,7 @@ import { listInvoiceReceiptApprove, getInvoiceReceipt } from "@/api/finance/invo
 import { approveTask, listCompletedFlows } from "@/api/flow";
 import InvoiceReceiptDetail from "./components/InvoiceReceiptDetail";
 import ApproveLayout from "@/views/approve/ApproveLayout";
+import { exportElementToPDF } from "@/views/approve/finance/pdfUtils";
 
 export default {
   name: "InvoiceReceiptApprove",
@@ -129,7 +141,8 @@ export default {
       },
       processKey: 'fianance_ticket',
       taskId: null,
-      currentInvoiceReceiptId: null
+      currentInvoiceReceiptId: null,
+      pdfExporting: false
     };
   },
   created() {
@@ -226,6 +239,20 @@ export default {
       }
       const map = { '1': '提交审批', '2': '驳回', '3': '批准' };
       return map[status] || '提交审批';
+    },
+    async exportPDF() {
+      this.pdfExporting = true;
+      try {
+        const element = this.$refs.approveLayout.$el;
+        const fileName = `收票单-${this.form.ticketBillCode || ''}.pdf`;
+        await exportElementToPDF(element, fileName);
+        this.$modal.msgSuccess('PDF导出成功');
+      } catch (error) {
+        console.error('PDF导出失败:', error);
+        this.$modal.msgError('PDF导出失败，请稍后重试');
+      } finally {
+        this.pdfExporting = false;
+      }
     }
   }
 };
@@ -235,4 +262,21 @@ export default {
 .process-container {
   padding: 10px;
 }
+
+/* 导出PDF时的特殊样式 */
+.approve-container.exporting-pdf ::v-deep .el-button--primary,
+.approve-container.exporting-pdf ::v-deep .el-button--text {
+  display: none;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__inner,
+.approve-container.exporting-pdf ::v-deep .el-textarea__inner {
+  border: none !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+  resize: none !important;
+  padding: 0 !important;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__suffix {
+  display: none;
+}
 </style>
diff --git a/oms_web/oms_vue/src/views/approve/finance/invoiceRed/approved/index.vue b/oms_web/oms_vue/src/views/approve/finance/invoiceRed/approved/index.vue
index daf1d964..ab996be4 100644
--- a/oms_web/oms_vue/src/views/approve/finance/invoiceRed/approved/index.vue
+++ b/oms_web/oms_vue/src/views/approve/finance/invoiceRed/approved/index.vue
@@ -36,12 +36,23 @@
     <!-- 详情对话框 -->
     <el-dialog title="红冲发票详情" :visible.sync="detailDialogVisible" width="80%" append-to-body>
       <div v-loading="detailLoading" style="max-height: 70vh; overflow-y: auto; padding: 20px;">
-        <ApproveLayout title="红冲发票详情">
-          <invoice-red-detail :data="form"></invoice-red-detail>
-          <template #footer>
-            <span>收票编号: {{ form.receiptBillCode }}</span>
-          </template>
-        </ApproveLayout>
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-download"
+            @click="exportPDF"
+            :loading="pdfExporting"
+          >导出PDF</el-button>
+        </div>
+        <div class="approve-container" :class="{ 'exporting-pdf': pdfExporting }">
+          <ApproveLayout ref="approveLayout" title="红冲发票详情">
+            <invoice-red-detail :data="form"></invoice-red-detail>
+            <template #footer>
+              <span>收票编号: {{ form.receiptBillCode }}</span>
+            </template>
+          </ApproveLayout>
+        </div>
 
         <el-divider content-position="left">流转意见</el-divider>
         <div class="process-container">
@@ -69,6 +80,7 @@ import { listInvoiceReceiptApproved, getInvoiceReceipt } from "@/api/finance/inv
 import { listCompletedFlows } from "@/api/flow";
 import InvoiceRedDetail from "../components/InvoiceRedDetail";
 import ApproveLayout from "@/views/approve/ApproveLayout";
+import { exportElementToPDF } from "@/views/approve/finance/pdfUtils";
 
 export default {
   name: "InvoiceRedApproved",
@@ -84,14 +96,15 @@ export default {
         pageSize: 10,
         receiptNo: null,
         vendorName: null,
-        processKey: 'finance_ticket_refound',
+        processKey: 'fianance_ticket_red',
         projectName: null
       },
       detailDialogVisible: false,
       detailLoading: false,
       form: {},
       approveLogs: [],
-      currentInvoiceReceiptId: null
+      currentInvoiceReceiptId: null,
+      pdfExporting: false
     };
   },
   created() {
@@ -139,6 +152,20 @@ export default {
     getStatusText(status) {
       const map = { '1': '提交审批', '2': '驳回', '3': '批准' };
       return map[status] || '提交审批';
+    },
+    async exportPDF() {
+      this.pdfExporting = true;
+      try {
+        const element = this.$refs.approveLayout.$el;
+        const fileName = `红冲发票-${this.form.receiptBillCode || ''}.pdf`;
+        await exportElementToPDF(element, fileName);
+        this.$modal.msgSuccess('PDF导出成功');
+      } catch (error) {
+        console.error('PDF导出失败:', error);
+        this.$modal.msgError('PDF导出失败，请稍后重试');
+      } finally {
+        this.pdfExporting = false;
+      }
     }
   }
 };
@@ -148,4 +175,21 @@ export default {
 .process-container {
   padding: 10px;
 }
+
+/* 导出PDF时的特殊样式 */
+.approve-container.exporting-pdf ::v-deep .el-button--primary,
+.approve-container.exporting-pdf ::v-deep .el-button--text {
+  display: none;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__inner,
+.approve-container.exporting-pdf ::v-deep .el-textarea__inner {
+  border: none !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+  resize: none !important;
+  padding: 0 !important;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__suffix {
+  display: none;
+}
 </style>
diff --git a/oms_web/oms_vue/src/views/approve/finance/invoiceRed/index.vue b/oms_web/oms_vue/src/views/approve/finance/invoiceRed/index.vue
index cd419488..1fc2789e 100644
--- a/oms_web/oms_vue/src/views/approve/finance/invoiceRed/index.vue
+++ b/oms_web/oms_vue/src/views/approve/finance/invoiceRed/index.vue
@@ -48,12 +48,23 @@
     <!-- 审批详情主对话框 -->
     <el-dialog title="红冲发票审批" :visible.sync="detailDialogVisible" width="80%" append-to-body>
       <div v-loading="detailLoading" style="max-height: 70vh; overflow-y: auto; padding: 20px;">
-        <ApproveLayout title="红冲发票详情">
-          <invoice-red-detail :data="form"></invoice-red-detail>
-          <template #footer>
-            <span>收票编号: {{ form.ticketBillCode }}</span>
-          </template>
-        </ApproveLayout>
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-download"
+            @click="exportPDF"
+            :loading="pdfExporting"
+          >导出PDF</el-button>
+        </div>
+        <div class="approve-container" :class="{ 'exporting-pdf': pdfExporting }">
+          <ApproveLayout ref="approveLayout" title="红冲发票详情">
+            <invoice-red-detail :data="form"></invoice-red-detail>
+            <template #footer>
+              <span>收票编号: {{ form.ticketBillCode }}</span>
+            </template>
+          </ApproveLayout>
+        </div>
 
         <el-divider content-position="left">流转意见</el-divider>
         <div class="process-container">
@@ -96,6 +107,7 @@ import { listInvoiceReceiptApprove, getInvoiceReceipt } from "@/api/finance/invo
 import { approveTask, listCompletedFlows } from "@/api/flow";
 import InvoiceRedDetail from "./components/InvoiceRedDetail";
 import ApproveLayout from "@/views/approve/ApproveLayout";
+import { exportElementToPDF } from "@/views/approve/finance/pdfUtils";
 
 export default {
   name: "InvoiceRedApprove",
@@ -111,7 +123,7 @@ export default {
         pageSize: 10,
         receiptNo: null,
         vendorName: null,
-        processKey: 'finance_ticket_refound',
+        processKey: 'fianance_ticket_red',
         projectName: null
       },
       detailDialogVisible: false,
@@ -127,9 +139,10 @@ export default {
       opinionRules: {
         approveOpinion: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
       },
-      processKey: 'finance_ticket_refound',
+      processKey: 'fianance_ticket_red',
       taskId: null,
-      currentInvoiceReceiptId: null
+      currentInvoiceReceiptId: null,
+      pdfExporting: false
     };
   },
   created() {
@@ -226,6 +239,20 @@ export default {
       }
       const map = { '1': '提交审批', '2': '驳回', '3': '批准' };
       return map[status] || '提交审批';
+    },
+    async exportPDF() {
+      this.pdfExporting = true;
+      try {
+        const element = this.$refs.approveLayout.$el;
+        const fileName = `红冲发票-${this.form.ticketBillCode || ''}.pdf`;
+        await exportElementToPDF(element, fileName);
+        this.$modal.msgSuccess('PDF导出成功');
+      } catch (error) {
+        console.error('PDF导出失败:', error);
+        this.$modal.msgError('PDF导出失败，请稍后重试');
+      } finally {
+        this.pdfExporting = false;
+      }
     }
   }
 };
@@ -235,4 +262,21 @@ export default {
 .process-container {
   padding: 10px;
 }
+
+/* 导出PDF时的特殊样式 */
+.approve-container.exporting-pdf ::v-deep .el-button--primary,
+.approve-container.exporting-pdf ::v-deep .el-button--text {
+  display: none;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__inner,
+.approve-container.exporting-pdf ::v-deep .el-textarea__inner {
+  border: none !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+  resize: none !important;
+  padding: 0 !important;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__suffix {
+  display: none;
+}
 </style>
diff --git a/oms_web/oms_vue/src/views/approve/finance/payment/approved/index.vue b/oms_web/oms_vue/src/views/approve/finance/payment/approved/index.vue
index e794b165..a99c5b79 100644
--- a/oms_web/oms_vue/src/views/approve/finance/payment/approved/index.vue
+++ b/oms_web/oms_vue/src/views/approve/finance/payment/approved/index.vue
@@ -36,23 +36,34 @@
     <!-- 详情对话框 -->
     <el-dialog title="付款单详情" :visible.sync="detailDialogVisible" width="80%" append-to-body>
       <div v-loading="detailLoading" style="max-height: 70vh; overflow-y: auto; padding: 20px;">
-        <ApproveLayout title="付款单详情">
-          <payment-detail :data="form"></payment-detail>
-          <template #footer>
-            <span>付款编号: {{ form.paymentBillCode }}</span>
-          </template>
-        </ApproveLayout>
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-download"
+            @click="exportPDF"
+            :loading="pdfExporting"
+          >导出PDF</el-button>
+        </div>
+        <div class="approve-container" :class="{ 'exporting-pdf': pdfExporting }">
+          <ApproveLayout ref="approveLayout" title="付款单详情">
+            <payment-detail :data="form"></payment-detail>
+            <template #footer>
+              <span>付款编号: {{ form.paymentBillCode }}</span>
+            </template>
+          </ApproveLayout>
+        </div>
 
         <el-divider content-position="left">流转意见</el-divider>
         <div class="process-container">
           <el-timeline>
-              <el-timeline-item v-for="(log, index) in approveLogs" :key="index" :timestamp="log.approveTime" placement="top">
-                  <el-card>
-                      <h4>{{ log.approveOpinion }}</h4>
-                      <p><b>操作人:</b> {{ log.approveUserName }} </p>
-                      <p><b>审批状态:</b> <el-tag size="small">{{ getStatusText(log.approveStatus) }}</el-tag></p>
-                  </el-card>
-              </el-timeline-item>
+            <el-timeline-item v-for="(log, index) in approveLogs" :key="index" :timestamp="log.approveTime" placement="top">
+              <el-card>
+                <h4>{{ log.approveOpinion }}</h4>
+                <p><b>操作人:</b> {{ log.approveUserName }} </p>
+                <p><b>审批状态:</b> <el-tag size="small">{{ getStatusText(log.approveStatus) }}</el-tag></p>
+              </el-card>
+            </el-timeline-item>
           </el-timeline>
           <div v-if="!approveLogs || approveLogs.length === 0">暂无流转过程数据。</div>
         </div>
@@ -69,6 +80,7 @@ import { listPaymentApproved, getPayment } from "@/api/finance/payment";
 import { listCompletedFlows } from "@/api/flow";
 import PaymentDetail from "../components/PaymentDetail"; // Relative path adjustment
 import ApproveLayout from "@/views/approve/ApproveLayout";
+import { exportElementToPDF } from "@/views/approve/finance/pdfUtils";
 
 export default {
   name: "PaymentApproved",
@@ -91,7 +103,8 @@ export default {
       detailLoading: false,
       form: {},
       approveLogs: [],
-      currentPaymentId: null
+      currentPaymentId: null,
+      pdfExporting: false
     };
   },
   created() {
@@ -139,6 +152,20 @@ export default {
     getStatusText(status) {
       const map = { '1': '提交审批', '2': '驳回', '3': '批准' };
       return map[status] || '提交审批';
+    },
+    async exportPDF() {
+      this.pdfExporting = true;
+      try {
+        const element = this.$refs.approveLayout.$el;
+        const fileName = `付款单-${this.form.paymentBillCode || ''}.pdf`;
+        await exportElementToPDF(element, fileName);
+        this.$modal.msgSuccess('PDF导出成功');
+      } catch (error) {
+        console.error('PDF导出失败:', error);
+        this.$modal.msgError('PDF导出失败，请稍后重试');
+      } finally {
+        this.pdfExporting = false;
+      }
     }
   }
 };
@@ -148,4 +175,21 @@ export default {
 .process-container {
   padding: 10px;
 }
+
+/* 导出PDF时的特殊样式 */
+.approve-container.exporting-pdf ::v-deep .el-button--primary,
+.approve-container.exporting-pdf ::v-deep .el-button--text {
+  display: none;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__inner,
+.approve-container.exporting-pdf ::v-deep .el-textarea__inner {
+  border: none !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+  resize: none !important;
+  padding: 0 !important;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__suffix {
+  display: none;
+}
 </style>
diff --git a/oms_web/oms_vue/src/views/approve/finance/payment/index.vue b/oms_web/oms_vue/src/views/approve/finance/payment/index.vue
index c03e05be..1b00a8ba 100644
--- a/oms_web/oms_vue/src/views/approve/finance/payment/index.vue
+++ b/oms_web/oms_vue/src/views/approve/finance/payment/index.vue
@@ -48,12 +48,23 @@
     <!-- 审批详情主对话框 -->
     <el-dialog title="付款单审批" :visible.sync="detailDialogVisible" width="80%" append-to-body>
       <div v-loading="detailLoading" style="max-height: 70vh; overflow-y: auto; padding: 20px;">
-        <ApproveLayout title="付款单详情">
-          <payment-detail :data="form"></payment-detail>
-          <template #footer>
-            <span>付款编号: {{ form.paymentBillCode }}</span>
-          </template>
-        </ApproveLayout>
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-download"
+            @click="exportPDF"
+            :loading="pdfExporting"
+          >导出PDF</el-button>
+        </div>
+        <div class="approve-container" :class="{ 'exporting-pdf': pdfExporting }">
+          <ApproveLayout ref="approveLayout" title="付款单详情">
+            <payment-detail :data="form"></payment-detail>
+            <template #footer>
+              <span>付款编号: {{ form.paymentBillCode }}</span>
+            </template>
+          </ApproveLayout>
+        </div>
 
         <el-divider content-position="left">流转意见</el-divider>
         <div class="process-container">
@@ -96,6 +107,7 @@ import { listPaymentApprove, getPayment } from "@/api/finance/payment";
 import { approveTask, listCompletedFlows } from "@/api/flow";
 import PaymentDetail from "./components/PaymentDetail";
 import ApproveLayout from "@/views/approve/ApproveLayout";
+import { exportElementToPDF } from "@/views/approve/finance/pdfUtils";
 
 export default {
   name: "PaymentApprove",
@@ -129,7 +141,8 @@ export default {
       },
       processKey: 'finance_payment',
       taskId: null,
-      currentPaymentId: null
+      currentPaymentId: null,
+      pdfExporting: false
     };
   },
   created() {
@@ -235,6 +248,20 @@ export default {
       // Map status codes to text
       const map = { '1': '提交审批', '2': '驳回', '3': '批准' };
       return map[status] || '提交审批';
+    },
+    async exportPDF() {
+      this.pdfExporting = true;
+      try {
+        const element = this.$refs.approveLayout.$el;
+        const fileName = `付款单-${this.form.paymentBillCode || ''}.pdf`;
+        await exportElementToPDF(element, fileName);
+        this.$modal.msgSuccess('PDF导出成功');
+      } catch (error) {
+        console.error('PDF导出失败:', error);
+        this.$modal.msgError('PDF导出失败，请稍后重试');
+      } finally {
+        this.pdfExporting = false;
+      }
     }
   }
 };
@@ -244,4 +271,21 @@ export default {
 .process-container {
   padding: 10px;
 }
+
+/* 导出PDF时的特殊样式 */
+.approve-container.exporting-pdf ::v-deep .el-button--primary,
+.approve-container.exporting-pdf ::v-deep .el-button--text {
+  display: none;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__inner,
+.approve-container.exporting-pdf ::v-deep .el-textarea__inner {
+  border: none !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+  resize: none !important;
+  padding: 0 !important;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__suffix {
+  display: none;
+}
 </style>
diff --git a/oms_web/oms_vue/src/views/approve/finance/paymentRefund/approved/index.vue b/oms_web/oms_vue/src/views/approve/finance/paymentRefund/approved/index.vue
index d0589de7..e5789320 100644
--- a/oms_web/oms_vue/src/views/approve/finance/paymentRefund/approved/index.vue
+++ b/oms_web/oms_vue/src/views/approve/finance/paymentRefund/approved/index.vue
@@ -36,12 +36,23 @@
     <!-- 详情对话框 -->
     <el-dialog title="付款单详情" :visible.sync="detailDialogVisible" width="80%" append-to-body>
       <div v-loading="detailLoading" style="max-height: 70vh; overflow-y: auto; padding: 20px;">
-        <ApproveLayout title="付款单详情">
-          <payment-detail :data="form"></payment-detail>
-          <template #footer>
-            <span>付款编号: {{ form.paymentBillCode }}</span>
-          </template>
-        </ApproveLayout>
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-download"
+            @click="exportPDF"
+            :loading="pdfExporting"
+          >导出PDF</el-button>
+        </div>
+        <div class="approve-container" :class="{ 'exporting-pdf': pdfExporting }">
+          <ApproveLayout ref="approveLayout" title="付款单详情">
+            <payment-detail :data="form"></payment-detail>
+            <template #footer>
+              <span>付款编号: {{ form.paymentBillCode }}</span>
+            </template>
+          </ApproveLayout>
+        </div>
 
         <el-divider content-position="left">流转意见</el-divider>
         <div class="process-container">
@@ -69,6 +80,7 @@ import { listPaymentApproved, getPayment } from "@/api/finance/payment";
 import { listCompletedFlows } from "@/api/flow";
 import PaymentDetail from "../components/PaymentRefundDetail.vue"; // Relative path adjustment
 import ApproveLayout from "@/views/approve/ApproveLayout";
+import { exportElementToPDF } from "@/views/approve/finance/pdfUtils";
 
 export default {
   name: "PaymentApproved",
@@ -91,7 +103,8 @@ export default {
       detailLoading: false,
       form: {},
       approveLogs: [],
-      currentPaymentId: null
+      currentPaymentId: null,
+      pdfExporting: false
     };
   },
   created() {
@@ -139,6 +152,20 @@ export default {
     getStatusText(status) {
       const map = { '1': '提交审批', '2': '驳回', '3': '批准' };
       return map[status] || '提交审批';
+    },
+    async exportPDF() {
+      this.pdfExporting = true;
+      try {
+        const element = this.$refs.approveLayout.$el;
+        const fileName = `付款单-${this.form.paymentBillCode || ''}.pdf`;
+        await exportElementToPDF(element, fileName);
+        this.$modal.msgSuccess('PDF导出成功');
+      } catch (error) {
+        console.error('PDF导出失败:', error);
+        this.$modal.msgError('PDF导出失败，请稍后重试');
+      } finally {
+        this.pdfExporting = false;
+      }
     }
   }
 };
@@ -148,4 +175,21 @@ export default {
 .process-container {
   padding: 10px;
 }
+
+/* 导出PDF时的特殊样式 */
+.approve-container.exporting-pdf ::v-deep .el-button--primary,
+.approve-container.exporting-pdf ::v-deep .el-button--text {
+  display: none;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__inner,
+.approve-container.exporting-pdf ::v-deep .el-textarea__inner {
+  border: none !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+  resize: none !important;
+  padding: 0 !important;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__suffix {
+  display: none;
+}
 </style>
diff --git a/oms_web/oms_vue/src/views/approve/finance/paymentRefund/index.vue b/oms_web/oms_vue/src/views/approve/finance/paymentRefund/index.vue
index 29ff67db..268d7d48 100644
--- a/oms_web/oms_vue/src/views/approve/finance/paymentRefund/index.vue
+++ b/oms_web/oms_vue/src/views/approve/finance/paymentRefund/index.vue
@@ -48,23 +48,34 @@
     <!-- 审批详情主对话框 -->
     <el-dialog title="付款单审批" :visible.sync="detailDialogVisible" width="80%" append-to-body>
       <div v-loading="detailLoading" style="max-height: 70vh; overflow-y: auto; padding: 20px;">
-        <ApproveLayout title="付款单详情">
-          <payment-detail :data="form"></payment-detail>
-          <template #footer>
-            <span>付款编号: {{ form.paymentBillCode }}</span>
-          </template>
-        </ApproveLayout>
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-download"
+            @click="exportPDF"
+            :loading="pdfExporting"
+          >导出PDF</el-button>
+        </div>
+        <div class="approve-container" :class="{ 'exporting-pdf': pdfExporting }">
+          <ApproveLayout ref="approveLayout" title="付款单详情">
+            <payment-detail :data="form"></payment-detail>
+            <template #footer>
+              <span>付款编号: {{ form.paymentBillCode }}</span>
+            </template>
+          </ApproveLayout>
+        </div>
 
         <el-divider content-position="left">流转意见</el-divider>
         <div class="process-container">
           <el-timeline>
-            <el-timeline-item v-for="(log, index) in approveLogs" :key="index" :timestamp="log.approveTime" placement="top">
-              <el-card>
-                <h4>{{ log.approveOpinion }}</h4>
-                <p><b>操作人:</b> {{ log.approveUserName }} </p>
-                <p><b>审批状态:</b> <el-tag size="small">{{ getStatusText(log.approveStatus) }}</el-tag></p>
-              </el-card>
-            </el-timeline-item>
+              <el-timeline-item v-for="(log, index) in approveLogs" :key="index" :timestamp="log.approveTime" placement="top">
+                  <el-card>
+                      <h4>{{ log.approveOpinion }}</h4>
+                      <p><b>操作人:</b> {{ log.approveUserName }} </p>
+                      <p><b>审批状态:</b> <el-tag size="small">{{ getStatusText(log.approveStatus) }}</el-tag></p>
+                  </el-card>
+              </el-timeline-item>
           </el-timeline>
           <div v-if="!approveLogs || approveLogs.length === 0">暂无流转过程数据。</div>
         </div>
@@ -96,6 +107,7 @@ import { listPaymentApprove, getPayment } from "@/api/finance/payment";
 import { approveTask, listCompletedFlows } from "@/api/flow";
 import PaymentDetail from "./components/PaymentRefundDetail.vue";
 import ApproveLayout from "@/views/approve/ApproveLayout";
+import { exportElementToPDF } from "@/views/approve/finance/pdfUtils";
 
 export default {
   name: "PaymentApprove",
@@ -129,7 +141,8 @@ export default {
       },
       processKey: 'finance_refund',
       taskId: null,
-      currentPaymentId: null
+      currentPaymentId: null,
+      pdfExporting: false
     };
   },
   created() {
@@ -235,6 +248,20 @@ export default {
       // Map status codes to text
       const map = { '1': '提交审批', '2': '驳回', '3': '批准' };
       return map[status] || '提交审批';
+    },
+    async exportPDF() {
+      this.pdfExporting = true;
+      try {
+        const element = this.$refs.approveLayout.$el;
+        const fileName = `付款单-${this.form.paymentBillCode || ''}.pdf`;
+        await exportElementToPDF(element, fileName);
+        this.$modal.msgSuccess('PDF导出成功');
+      } catch (error) {
+        console.error('PDF导出失败:', error);
+        this.$modal.msgError('PDF导出失败，请稍后重试');
+      } finally {
+        this.pdfExporting = false;
+      }
     }
   }
 };
@@ -244,4 +271,21 @@ export default {
 .process-container {
   padding: 10px;
 }
+
+/* 导出PDF时的特殊样式 */
+.approve-container.exporting-pdf ::v-deep .el-button--primary,
+.approve-container.exporting-pdf ::v-deep .el-button--text {
+  display: none;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__inner,
+.approve-container.exporting-pdf ::v-deep .el-textarea__inner {
+  border: none !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+  resize: none !important;
+  padding: 0 !important;
+}
+.approve-container.exporting-pdf ::v-deep .el-input__suffix {
+  display: none;
+}
 </style>
diff --git a/oms_web/oms_vue/src/views/approve/order/Approve.vue b/oms_web/oms_vue/src/views/approve/order/Approve.vue
index c622cfe2..2f9c2ecf 100644
--- a/oms_web/oms_vue/src/views/approve/order/Approve.vue
+++ b/oms_web/oms_vue/src/views/approve/order/Approve.vue
@@ -135,8 +135,7 @@
 import { approveOrder,getOrder } from "@/api/approve/order";
 import ConfigInfo from './ConfigInfo.vue';
 import ApproveLayout from '@/views/approve/ApproveLayout.vue';
-import html2canvas from 'html2canvas';
-import jsPDF from 'jspdf';
+import { exportElementToPDF } from "@/views/approve/finance/pdfUtils";
 
 import OrderInfoDisplay from '@/views/project/order/components/OrderInfoDisplay.vue';
 
@@ -468,65 +467,21 @@ export default {
     // 导出PDF
     async exportPDF() {
       this.pdfExporting = true;
-      const disabledElements = [];
       try {
         // 获取ApproveLayout组件的DOM元素
         const element = this.$refs.approveLayout.$el;
 
-        // 移除所有输入框的 disabled 属性，以便在PDF中正确显示
-        element.querySelectorAll('input:disabled, textarea:disabled').forEach(el => {
-          disabledElements.push(el);
-          el.disabled = false;
-        });
-
-        // 使用html2canvas捕获内容
-        const canvas = await html2canvas(element, {
-          scale: 2, // 提高清晰度
-          useCORS: true, // 允许跨域图片
-          logging: false, // 关闭日志
-          backgroundColor: '#F8F5F0' // 设置背景色
-        });
-
-        // 计算PDF页面尺寸
-        const imgWidth = 210; // A4纸宽度（mm）
-        const pageHeight = 297; // A4纸高度（mm）
-        const imgHeight = (canvas.height * imgWidth) / canvas.width;
-        let heightLeft = imgHeight;
-
-        // 创建PDF
-        const pdf = new jsPDF('p', 'mm', 'a4');
-        let position = 0;
-
-        // 将canvas转换为图片
-        const imgData = canvas.toDataURL('image/jpeg');
-
-        // 添加第一页
-        pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight);
-        heightLeft -= pageHeight;
-
-        // 如果内容超过一页，添加更多页
-        while (heightLeft > 0) {
-          position = heightLeft - imgHeight;
-          pdf.addPage();
-          pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight);
-          heightLeft -= pageHeight;
-        }
-
         // 生成文件名
         const fileName = `${this.order.projectCode || '订单'}-${this.order.orderCode || ''}-Rev.${this.order.versionCode || '1'}.pdf`;
 
-        // 保存PDF
-        pdf.save(fileName);
+        // 调用通用方法导出PDF
+        await exportElementToPDF(element, fileName);
 
         this.$modal.msgSuccess('PDF导出成功');
       } catch (error) {
         console.error('PDF导出失败:', error);
         this.$modal.msgError('PDF导出失败，请稍后重试');
       } finally {
-        // 恢复之前移除的 disabled 属性
-        disabledElements.forEach(el => {
-          el.disabled = true;
-        });
         this.pdfExporting = false;
       }
     }