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

<template>
  <div>
    <xy-dialog title="打印预览" :is-show.sync="isShow" :width="70" @on-ok="print" ok-text="打印">
      <template v-slot:normalContent>
        <div class="white-container" ref="printtable">
          <div class="form-container">
            <h2 class="form-title">苏州市河道管理处会议审批表</h2>
            <div class="date-container">
              <div class="date-field">
                <span>{{ getYear }}</span>年
                <span>{{ getMonth }}</span>月
                <span>{{ getDay }}</span>日
              </div>
            </div>
            <table class="approval-table">
              <tbody>
                <tr>
                  <td class="label">申请部门</td>
                  <td class="content">{{ getDepartment }}</td>
                </tr>
                <tr>
                  <td class="label">会议名称</td>
                  <td class="content">{{ getMeetingName }}</td>
                </tr>
                <tr>
                  <td class="label">会议类别</td>
                  <td class="content">（{{ getMeetingType }}）类会议</td>
                </tr>
                <tr>
                  <td class="label">会议起止日期及天数</td>
                  <td class="content">{{ getDuration }}</td>
                </tr>
                <tr>
                  <td class="label">会议地点</td>
                  <td class="content">{{ getLocation }}</td>
                </tr>
                <tr>
                  <td class="label">会议规模</td>
                  <td class="content">代表人数：{{ getRepresentativeCount }} 工作人员数：{{ getStaffCount }}</td>
                </tr>
                <tr>
                  <td class="label">会议经费预算（元）</td>
                  <td class="content">{{ getTotalBudget }}</td>
                </tr>
                <tr>
                  <td class="label">其中：住宿费</td>
                  <td class="content">{{ getAccommodationFee }}</td>
                </tr>
                <tr>
                  <td class="label">伙食费</td>
                  <td class="content">{{ getMealsFee }}</td>
                </tr>
                <tr>
                  <td class="label">租场费</td>
                  <td class="content">{{ getVenueFee }}</td>
                </tr>
                <tr>
                  <td class="label">其他费用</td>
                  <td class="content">{{ getOtherFees }}</td>
                </tr>
                <tr>
                  <td class="label">科室负责人审核</td>
                  <td class="content">{{ getDepartmentApproval }}</td>
                </tr>
                <tr>
                  <td class="label">分管领导审核</td>
                  <td class="content">{{ getSectionApproval }}</td>
                </tr>
                <tr>
                  <td class="label">综合科审核</td>
                  <td class="content">{{ getComprehensiveApproval }}</td>
                </tr>
                <tr>
                  <td class="label">单位负责人审核</td>
                  <td class="content">{{ getUnitApproval }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import * as printJS from "print-js";

export default {
  name: 'PrintMeetingApproval',
  data() {
    return {
      isShow: false,
      meetingData: null
    }
  },
  computed: {
    getYear() { return this.meetingData?.year || '' },
    getMonth() { return this.meetingData?.month || '' },
    getDay() { return this.meetingData?.day || '' },
    getDepartment() { return this.meetingData?.department || '' },
    getMeetingName() { return this.meetingData?.meetingName || '' },
    getMeetingType() { return this.meetingData?.meetingType || '' },
    getDuration() { return this.meetingData?.duration || '' },
    getLocation() { return this.meetingData?.location || '' },
    getRepresentativeCount() { return this.meetingData?.representativeCount || '' },
    getStaffCount() { return this.meetingData?.staffCount || '' },
    getTotalBudget() { return this.meetingData?.totalBudget || '' },
    getAccommodationFee() { return this.meetingData?.accommodationFee || '' },
    getMealsFee() { return this.meetingData?.mealsFee || '' },
    getVenueFee() { return this.meetingData?.venueFee || '' },
    getOtherFees() { return this.meetingData?.otherFees || '' },
    getDepartmentApproval() { return this.meetingData?.departmentApproval || '' },
    getSectionApproval() { return this.meetingData?.sectionApproval || '' },
    getComprehensiveApproval() { return this.meetingData?.comprehensiveApproval || '' },
    getUnitApproval() { return this.meetingData?.unitApproval || '' }
  },
  methods: {
    getMeetingData(id) {
      // 临时测试数据
      this.meetingData = {
        year: '2024',
        month: '3',
        day: '14',
        department: '测试部门',
        meetingName: '测试会议',
        meetingType: '测试',
        duration: '2024-03-14至2024-03-15，共2天',
        location: '会议室',
        representativeCount: '10',
        staffCount: '5',
        totalBudget: '10000',
        accommodationFee: '3000',
        mealsFee: '2000',
        venueFee: '1000',
        otherFees: '4000'
      }
    },
    async print() {
      try {
        let canvas = await html2canvas(this.$refs['printtable'], {
          backgroundColor: null,
          useCORS: true,
        })
        printJS({
          printable: canvas.toDataURL(),
          type: 'image',
          documentTitle: '苏州市河道管理处会议审批表',
          style: '@page{margin:auto;}'
        })
      } catch (error) {
        console.error('打印失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.white-container {
  background: #fff;
  padding: 20px;
}

.form-container {
  position: relative;
  width: 100%;
  padding: 20px;
}

.form-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.date-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  padding-right: 50px;
}

.date-field {
  font-size: 16px;
  position: static;
}

.approval-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-family: SimSun, serif;
}

.approval-table td {
  border: 1px solid #000;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.5;
}

.approval-table .label {
  width: 200px;
  background-color: #fff;
  text-align: left;
  font-weight: normal;
}

.approval-table .content {
  text-align: left;
  min-height: 24px;
}

@media print {
  .white-container {
    padding: 0;
  }
  
  .form-container {
    padding: 0;
  }
  
  .approval-table td {
    border: 1px solid #000;
  }
}
</style>