feat(approve): 实现审批单据PDF导出功能

- 引入通用PDF导出工具函数exportElementToPDF
- 在多个审批组件中添加PDF导出按钮和相关逻辑
- 优化导出时的样式显示，隐藏不必要的交互元素
- 统一处理PDF文件命名规则
- 移除原有的html2canvas和jsPDF直接调用代码
- 添加导出状态loading效果和异常处理提示

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="收票单详情">
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
-          <invoice-receipt-detail :data="form"></invoice-receipt-detail>
+          <el-button
-          <template #footer>
+            type="primary"
-            <span>收票编号: {{ form.receiptBillCode }}</span>
+            size="small"
-          </template>
+            icon="el-icon-download"
-        </ApproveLayout>
+            @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>

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="收票单详情">
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
-          <invoice-receipt-detail :data="form"></invoice-receipt-detail>
+          <el-button
-          <template #footer>
+            type="primary"
-            <span>收票编号: {{ form.ticketBillCode }}</span>
+            size="small"
-          </template>
+            icon="el-icon-download"
-        </ApproveLayout>
+            @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>

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="红冲发票详情">
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
-          <invoice-red-detail :data="form"></invoice-red-detail>
+          <el-button
-          <template #footer>
+            type="primary"
-            <span>收票编号: {{ form.receiptBillCode }}</span>
+            size="small"
-          </template>
+            icon="el-icon-download"
-        </ApproveLayout>
+            @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>

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="红冲发票详情">
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
-          <invoice-red-detail :data="form"></invoice-red-detail>
+          <el-button
-          <template #footer>
+            type="primary"
-            <span>收票编号: {{ form.ticketBillCode }}</span>
+            size="small"
-          </template>
+            icon="el-icon-download"
-        </ApproveLayout>
+            @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>

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="付款单详情">
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
-          <payment-detail :data="form"></payment-detail>
+          <el-button
-          <template #footer>
+            type="primary"
-            <span>付款编号: {{ form.paymentBillCode }}</span>
+            size="small"
-          </template>
+            icon="el-icon-download"
-        </ApproveLayout>
+            @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-timeline-item v-for="(log, index) in approveLogs" :key="index" :timestamp="log.approveTime" placement="top">
-                  <el-card>
+              <el-card>
-                      <h4>{{ log.approveOpinion }}</h4>
+                <h4>{{ log.approveOpinion }}</h4>
-                      <p><b>操作人:</b> {{ log.approveUserName }} </p>
+                <p><b>操作人:</b> {{ log.approveUserName }} </p>
-                      <p><b>审批状态:</b> <el-tag size="small">{{ getStatusText(log.approveStatus) }}</el-tag></p>
+                <p><b>审批状态:</b> <el-tag size="small">{{ getStatusText(log.approveStatus) }}</el-tag></p>
-                  </el-card>
+              </el-card>
-              </el-timeline-item>
+            </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>

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="付款单详情">
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
-          <payment-detail :data="form"></payment-detail>
+          <el-button
-          <template #footer>
+            type="primary"
-            <span>付款编号: {{ form.paymentBillCode }}</span>
+            size="small"
-          </template>
+            icon="el-icon-download"
-        </ApproveLayout>
+            @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>

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="付款单详情">
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
-          <payment-detail :data="form"></payment-detail>
+          <el-button
-          <template #footer>
+            type="primary"
-            <span>付款编号: {{ form.paymentBillCode }}</span>
+            size="small"
-          </template>
+            icon="el-icon-download"
-        </ApproveLayout>
+            @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>

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="付款单详情">
+        <div style="display: flex;flex-direction: row-reverse; margin-bottom: 10px;">
-          <payment-detail :data="form"></payment-detail>
+          <el-button
-          <template #footer>
+            type="primary"
-            <span>付款编号: {{ form.paymentBillCode }}</span>
+            size="small"
-          </template>
+            icon="el-icon-download"
-        </ApproveLayout>
+            @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-timeline-item v-for="(log, index) in approveLogs" :key="index" :timestamp="log.approveTime" placement="top">
-              <el-card>
+                  <el-card>
-                <h4>{{ log.approveOpinion }}</h4>
+                      <h4>{{ log.approveOpinion }}</h4>
-                <p><b>操作人:</b> {{ log.approveUserName }} </p>
+                      <p><b>操作人:</b> {{ log.approveUserName }} </p>
-                <p><b>审批状态:</b> <el-tag size="small">{{ getStatusText(log.approveStatus) }}</el-tag></p>
+                      <p><b>审批状态:</b> <el-tag size="small">{{ getStatusText(log.approveStatus) }}</el-tag></p>
-              </el-card>
+                  </el-card>
-            </el-timeline-item>
+              </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>

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 { exportElementToPDF } from "@/views/approve/finance/pdfUtils";
-import jsPDF from 'jspdf';
 
 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
-        pdf.save(fileName);
+        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;
       }
     }