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

- 引入通用PDF导出工具函数exportElementToPDF - 在多个审批组件中添加PDF导出按钮和相关逻辑 - 优化导出时的样式显示，隐藏不必要的交互元素 - 统一处理PDF文件命名规则 - 移除原有的html2canvas和jsPDF直接调用代码 - 添加导出状态loading效果和异常处理提示
2025-12-16 16:35:53 +08:00 · 2025-12-16 16:35:53 +08:00 · 6613b3612c
parent af12674d7b
commit 6613b3612c
9 changed files with 428 additions and 121 deletions
--- 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="收票单详情">
+        <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>
--- 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="收票单详情">
+        <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>
--- 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="红冲发票详情">
+        <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>
--- 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="红冲发票详情">
+        <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>
--- 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,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;">
+          <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/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>
--- 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="付款单详情">
+        <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>
--- 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="付款单详情">
+        <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>
--- 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,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;">
+          <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/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>
--- 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;
      }
    }