contract-business-web/src/views/contract/components/printPaymentForm.vue

<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>