zhzf/client/src/views/xzzfgl/caseMan/laspb.vue

<template>
  <div v-loading="exporting" id="laspb"  ref="pdfTemplate" class="ws-container">
    <div class="ws-title"><span class="ws-title-text">安全生产行政执法文书</span></div>
    <div class="ws-document-name"><span class="ws-document-name-text">{{documentName}}</span></div>
    <div class="ws-document-code"><span class="ws-document-code-text">{{documentCode}}</span></div>
    <div class="ws-main-content">
        <span class="MsoNormal-span">案由<span class="font-underline" >&nbsp;{{documenContent.ay}}</span></span>
    </div>
    <div class="ws-main-content">
      <span class="MsoNormal-span">案件来源<span class="font-underline" >&nbsp;&nbsp;{{documenContent.ajly}}&nbsp;&nbsp;</span>时间<span class="font-underline" >&nbsp;{{documenContent.lasj}}&nbsp;</span></span>
    </div>
    <div class="ws-main-content">
      <span class="MsoNormal-span">案件名称<span class="font-underline" >&nbsp;{{documenContent.ajmc}}</span></span>
    </div>
    <div class="ws-main-content">
      <span class="MsoNormal-span">当事人<span class="font-underline" >&nbsp;&nbsp;{{documenContent.dsr}}&nbsp;&nbsp;</span>统一社会信用代码<span class="font-underline" >&nbsp;{{documenContent.uscc}}&nbsp;</span></span>
    </div>
    <div class="ws-main-content">
      <span class="MsoNormal-span">电话<span class="font-underline" >&nbsp;&nbsp;{{documenContent.phone}}&nbsp;&nbsp;</span>法定代表人/负责人<span class="font-underline" >&nbsp;{{documenContent.fddbr}}&nbsp;</span></span>
    </div>
    <div class="ws-main-content">
      <span class="MsoNormal-span">当事人地址<span class="font-underline" >&nbsp;&nbsp;{{documenContent.dz}}&nbsp;&nbsp;</span>邮政编码<span class="font-underline" >&nbsp;{{documenContent.yzbm}}&nbsp;</span></span>
    </div>
        <table class="case-table">
          <tbody>
          <tr>
            <td class="content-cell" colspan="2">
              案件基本情况:{{documenContent.ajjbqk}}
            </td>
          </tr>
          <tr>
            <td class="content-cell" colspan="2">
              <table>
                <tbody>
                <tr>
                  <td colspan="3"> 承办人意见：{{documenContent.cbryj}}</td>
                </tr>
                <tr>
                  <td style="vertical-align: text-top;width: 350px">承办人：<img :src="documenContent.cbrqm" style="height: 50px; margin-right: 10px;"/></td>
                  <td style="width: 280px;text-align: left;"> 证号：{{documenContent.cbrzjhm}}</td>
                  <td style="vertical-align: bottom;text-align: right">{{ formattedDate }}</td>
                </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr>
            <td class="content-cell">审核意见</td>
            <td class="content-cell">{{documenContent.shyj}}<br>
              <div style="text-align: right;">审核人：&nbsp;<img :src="documenContent.shrqm" style="height: 50px; margin-right: 10px;"/>
                <br>{{formattedDate}}&nbsp;&nbsp;</div>
            </td>
          </tr>
            <tr>
              <td class="content-cell">审批意见</td>
              <td class="content-cell">{{documenContent.spyj}}<br>
                <div style="text-align: right;">审批人：&nbsp;<img :src="documenContent.sprqm" style="height: 50px; margin-right: 10px;"/>
                  <br>{{formattedDate}}&nbsp;&nbsp;</div>
              </td>
            </tr>
          </tbody>
        </table>
  </div>
  <div style="margin-bottom: 10px;text-align: center">
    <el-button :disabled="exporting" type="success" @click="printInfo">打印</el-button>
    <el-button :disabled="exporting" type="danger" @click="generatePDF">导出pdf</el-button>
  </div>
</template>
<script setup>
import {defineProps, reactive, ref,} from 'vue'
import {ElButton, ElMessage} from "element-plus";
import Print from 'print-js'
import {PRINTCSS} from "@/utils/Constants.js";
import { exportPDF } from "@/utils/ExportPdf.js";
import moment from 'moment'
import Docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import { saveAs } from 'file-saver';
import JSZipUtils from "jszip-utils";
const props = defineProps({
  documentCode: String,
  documentNo: Number,
  documentName: String,
  caseInfo: {
    type: Object,
    default: () => ({}),
  },
  documenContent: {
    type: Object,
    default: () => ({}),
  },
})
const printInfo = (e) =>{
  const style = PRINTCSS.replace(/dialog_form_id/g, "laspb")
  Print({
    printable:  document.getElementById('laspb'),
    type: 'html',
    honorMarginPadding: false,
    targetStyles: ['*']
  })
}

const formattedDate = moment().format('YYYY年MM月DD日');
const exporting = ref(false)
const pdfTemplate = ref(null);
const generatePDF = async () => {
  exporting.value = true
  try {
    const result = await exportPDF(pdfTemplate,"立案审批表.pdf");
    if(result.success)
      exporting.value = false
  } catch (error) {
    exporting.value = false
    ElMessage.error(error.message)
  }
}
const porpData = ref(props)
</script>
<style lang="scss" scoped>
.ws-container {
  width: 21cm; /* A4纸宽度 */
  min-height: 29.7cm; /* A4纸高度 */
  padding: 2cm;
  font-family: "仿宋", SimSun;
  line-height: 1.5;
}

.ws-title {
  text-align: center;
  border-bottom-style: double;
  border-bottom-color: #111111;
  border-bottom-width: 2px;
  color: #111111;

  .ws-title-text {
    font-size: 40px;
    font-family: 华文中宋;
    font-weight: bold
  }
}

.ws-document-name {
  text-align: center;
  border-top-style: double;
  border-top-color: #111111;
  border-top-width: 2px;
  margin-top: 2px;
  color: #111111;

  .ws-document-name-text {
    font-size: 40px;
    font-family: 华文中宋;
    font-weight: bold
  }
}
.ws-document-code {
  text-align: center;
  margin-top: 10px;
  .ws-document-code-text {
    font-size: 18px;
    font-family: 仿宋
  }
}
.MsoNormal-span {
  font-size: 18px;
  font-family:仿宋;
}
.font-underline {
  text-decoration:underline;text-underline-position: under;text-underline-offset: 1px;
}

.case-table {
  margin-top: 10px;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
}


.content-cell {
  font-size: 18px;
  font-family: 仿宋;
  padding-top: 10px;
  padding-left: 10px;
  border: 1px solid black;
  vertical-align: center;
  align-content: center;
  line-height: 2;
}


.ws-main-content{
  margin-top: 10px;
  margin-bottom: 13px;
  font-size: 18px;
  font-family: 仿宋;
  display: flex;
  flex-wrap: wrap;  /* 允许换行 */
  justify-content: flex-start; /* 左对齐（默认值） */
}
</style>