完成合同打印功能

src/views/contract/components/printPaymentForm.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <xy-dialog title="打印预览" :is-show.sync="isShow" :width="90" @on-ok="print" ok-text="打印">
+      <template v-slot:normalContent>
+        <div class="form-switch">
+          <RadioGroup v-model="currentForm" type="button">
+            <Radio label="pre" :disabled="!getBeforeForms">事前支付表格</Radio>
+            <Radio label="post" :disabled="!getForms">事后支付表格</Radio>
+          </RadioGroup>
+        </div>
+        
+        <div class="white-container" ref="printtable">
+          <div class="form-container">
+            <!-- Pre-payment Form -->
+            <div v-if="currentForm === 'pre'" class="payment-form">
+              <div v-if="getBeforeForms" v-html="getBeforeForms"></div>
+              <div v-else class="no-form-message">暂无事前支付表格内容</div>
+            </div>
+
+            <!-- Post-payment Form -->
+            <div v-else class="payment-form">
+              <div v-if="getForms" v-html="getForms"></div>
+              <div v-else class="no-form-message">暂无事后支付表格内容</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </xy-dialog>
+  </div>
+</template>
+
+<script>
+import { detailFundLog } from "@/api/paymentRegistration/fundLog"
+import html2canvas from 'html2canvas'
+import * as printJS from "print-js"
+
+export default {
+  name: 'PrintPaymentForm',
+  data() {
+    return {
+      isShow: false,
+      currentForm: 'post',
+      fundLog: null
+    }
+  },
+  computed: {
+    getBeforeForms() {
+      return this.fundLog && this.fundLog.contract && this.fundLog.contract.before_forms
+    },
+    getForms() {
+      return this.fundLog && this.fundLog.contract && this.fundLog.contract.forms
+    }
+  },
+  methods: {
+    async getDetailFundLog(id) {
+      try {
+        const res = await detailFundLog({ id })
+        this.fundLog = res
+        // 如果没有事前支付表格，默认显示事后支付表格
+        if (!this.getBeforeForms) {
+          this.currentForm = 'post'
+        }
+      } catch (error) {
+        console.error('获取付款详情失败:', error)
+        this.$Message.error('获取付款详情失败')
+      }
+    },
+    async print() {
+      try {
+        const canvas = await html2canvas(this.$refs['printtable'], {
+          backgroundColor: null,
+          useCORS: true,
+        })
+        printJS({
+          printable: canvas.toDataURL(),
+          type: 'image',
+          documentTitle: `苏州市河道管理处${this.currentForm === 'pre' ? '事前' : '事后'}支付表格`,
+          style: '@page{margin:auto;}'
+        })
+      } catch (error) {
+        console.error('打印失败:', error)
+        this.$Message.error('打印失败')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.form-switch {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.white-container {
+  background: #fff;
+  padding: 20px;
+}
+
+.form-container {
+  position: relative;
+  width: 100%;
+  padding: 20px;
+  font-family: SimSun, serif;
+}
+
+.payment-form {
+  border: 1px solid #000;
+  padding: 20px;
+}
+
+.no-form-message {
+  text-align: center;
+  padding: 40px;
+  color: #999;
+  font-size: 16px;
+}
+
+@media print {
+  .white-container {
+    padding: 0;
+  }
+  
+  .form-container {
+    padding: 0;
+  }
+  
+  .payment-form {
+    border: 1px solid #000;
+  }
+}
+</style> 

src/views/contract/components/printReimbursement.vue

@@ -49,7 +49,7 @@
                   <td class="content">{{ getChildrenRatio }}</td>
                   <td class="content">{{ getChildrenActual }}</td>
                   <td class="label">财审科审核</td>
-                  <td class="content" colspan="3">{{ getFinanceApproval }}</td>
+                  <td class="content" colspan="3">{{  }}</td>
                 </tr>
                 <tr>
                   <td class="label">幼托费用</td>
@@ -57,7 +57,7 @@
                   <td class="content">无</td>
                   <td class="content">{{ getNurseryActual }}</td>
                   <td class="label">分管领导审核</td>
-                  <td class="content" colspan="3">{{ getLeaderApproval }}</td>
+                  <td class="content" colspan="3">{{  }}</td>
                 </tr>
                 <tr>
                   <td class="label">子女保险费</td>
@@ -65,13 +65,13 @@
                   <td class="content">无</td>
                   <td class="content">{{ getChildInsuranceActual }}</td>
                   <td class="label">财务分管领导审核</td>
-                  <td class="content" colspan="3">{{ getFinanceLeaderApproval }}</td>
+                  <td class="content" colspan="3">{{  }}</td>
                 </tr>
                 <tr>
                   <td class="label">合计</td>
                   <td class="content" colspan="3">{{ getTotalFee }} {{ getTotalActual }}</td>
                   <td class="label" rowspan="2">单位负责人审批</td>
-                  <td class="content" colspan="3" rowspan="2">{{ getUnitApproval }}</td>
+                  <td class="content" colspan="3" rowspan="2">{{  }}</td>
                 </tr>
                 <tr>
                   <td class="label">报销金额(大写)</td>

src/views/contract/paymentRegistrationList.vue

@@ -159,6 +159,7 @@
     <printMeetingSettlement ref="printMeetingSettlement"></printMeetingSettlement>
     <printFundApproval ref="printFundApproval"></printFundApproval>
     <detailPaymentRegistration ref="detailPaymentRegistration" @success="getFundLogs"></detailPaymentRegistration>
+    <printPaymentForm ref="printPaymentForm"></printPaymentForm>
   </div>
 </template>
 
@@ -181,6 +182,7 @@ import printUtilityBill from "./components/printUtilityBill";
 import printReimbursementSimple from "./components/printReimbursementSimple";
 import printMeetingSettlement from "./components/printMeetingSettlement";
 import printFundApproval from "./components/printFundApproval";
+import printPaymentForm from "./components/printPaymentForm";
 
 export default {
   components: {
@@ -195,6 +197,7 @@ export default {
     printMeetingSettlement,
     printFundApproval,
     detailPaymentRegistration,
+    printPaymentForm,
   },
   data() {
     return {
@@ -551,9 +554,18 @@ export default {
     },
     async handlePrint(row) {
       try {
-        const rowIndex = this.list.findIndex(item => item.id === row.id);
-        console.log('当前行号:', rowIndex);
+        // 检查合同信息中的forms和before_forms
+        if (row.contract) {
+          // 如果有forms或before_forms,显示支付表格打印窗口
+          if (row.contract.forms || row.contract.before_forms) {
+            this.$refs['printPaymentForm'].getDetailFundLog(row.id);
+            this.$refs['printPaymentForm'].isShow = true;
+            return;
+          }
+        }
         
+        // 如果没有forms和before_forms,则按原来的逻辑处理
+        const rowIndex = this.list.findIndex(item => item.id === row.id);
         if(rowIndex === 0) {  // 第一行
           this.$refs['printRegistration'].getDetailFundLog(row.id);
           this.$refs['printRegistration'].isShow = true;