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

<template>
  <div  v-loading="exporting" ref="pdfTemplate" id="xzcfgzs" 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>

      <p class="MsoNormal" ><span class="MsoNormal-span">案件名称：<span class="font-underline">&nbsp;{{documenContent.ajmc}}&nbsp;&nbsp; </span></span></p>

    <p class="MsoNormal"><span class="MsoNormal-span">承办单位：&nbsp;{{documenContent.cbdw}}</span></p>

    <p class="MsoNormal"><span class="MsoNormal-span">案    号：&nbsp;{{documenContent.ah}}</span></p>

    <p style=" margin-bottom:10px;mso-para-margin-bottom:2.0gd;text-align:left; text-indent:24.0pt;line-height:22.0pt; mso-line-height-rule:exactly;text-autospace:ideograph-numeric;font-size: 18px;font-family: 黑体;font-weight: bold;color: black">一、当事人基本情况</p>
    <p class="MsoNormal" ><span class="MsoNormal-span">{{documenContent.spotReason}},统一社会信用代码{{documenContent.uscc}}，法定代表人为{{documenContent.fddbr}}，系该公司{{documenContent.zw}}，公司地址为{{documenContent.dz}}，联系电话为{{documenContent.lxdh}}。经营范围为{{documenContent.jyfw}}。</span></p>

    <p style=" margin-bottom:10px;mso-para-margin-bottom:2.0gd;text-align:left; text-indent:24.0pt;line-height:22.0pt; mso-line-height-rule:exactly;text-autospace:ideograph-numeric;font-size: 18px;font-family: 黑体;font-weight: bold;color: black">二、案件来源和调查经过</p>
    <p class="MsoNormal" ><span class="MsoNormal-span">{{documenContent.dcjg}}</span></p>
    <p style=" margin-bottom:10px;mso-para-margin-bottom:2.0gd;text-align:left; text-indent:24.0pt;line-height:22.0pt; mso-line-height-rule:exactly;text-autospace:ideograph-numeric;font-size: 18px;font-family: 黑体;font-weight: bold;color: black">三、主要证据材料</p>

    <p v-for="(item, index) in documenContent.evidence" :key="index" class="MsoNormal"><span  class="MsoNormal-span">证据{{index+1}}：{{item.name}}</span></p>
    <p style=" margin-bottom:10px;mso-para-margin-bottom:2.0gd;text-align:left; text-indent:24.0pt;line-height:22.0pt; mso-line-height-rule:exactly;text-autospace:ideograph-numeric;font-size: 18px;font-family: 黑体;font-weight: bold;color: black">四、案件定性分析</p>
    <p class="MsoNormal" ><span class="MsoNormal-span">{{documenContent.ajdxfx}}</span></p>
    <p style=" margin-bottom:10px;mso-para-margin-bottom:2.0gd;text-align:left; text-indent:24.0pt;line-height:22.0pt; mso-line-height-rule:exactly;text-autospace:ideograph-numeric;font-size: 18px;font-family: 黑体;font-weight: bold;color: black">五、处罚依据和裁量建议</p>
    <p class="MsoNormal" ><span class="MsoNormal-span">{{documenContent.cfyjjy}}</span></p>
    <p style=" margin-bottom:10px;mso-para-margin-bottom:2.0gd;text-align:left; text-indent:24.0pt;line-height:22.0pt; mso-line-height-rule:exactly;text-autospace:ideograph-numeric;font-size: 18px;font-family: 黑体;font-weight: bold;color: black">六、其他需要说明的问题</p>
    <p class="MsoNormal" ><span class="MsoNormal-span">{{documenContent.qtysmwt}}</span></p>
  </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";
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, "xzcfgzs")
  Print({
    printable:  document.getElementById('xzcfgzs'),
    type: 'html',
    honorMarginPadding: false,
    targetStyles: ['*']
  })
}

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


</script>
<style lang="scss" scoped>
.ws-container {
  display: flex;
  flex-direction: column;
  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-foot {
  border-top: 3px solid #111111;
  font-size: 18px;
  font-family: 仿宋;
  margin-top: auto;
}

.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 {
  margin-bottom:10px;
  mso-para-margin-bottom:2.0gd;
  text-align:left;
  text-indent:24.0pt;
  line-height:22.0pt;
  mso-line-height-rule:exactly;
  text-autospace:ideograph-numeric;
}
.MsoNormal-span {
  font-size: 18px;
  font-family:仿宋;
}
.font-underline {
  text-decoration:underline;text-underline-position: under;text-underline-offset: 1px;
}

</style>