单证管理:报关单, 生成横向A4纸的pdf文件

src/main.js

@@ -52,6 +52,7 @@ import {
   getDict,
   getDictOne,
   getPdf,
+  getPdfA3,
   translateIntoEnglish,
   random
 } from '@/utils/util'
@@ -92,6 +93,7 @@ app.config.globalProperties.calculationWeek = calculationWeek
 app.config.globalProperties.getDict = getDict
 app.config.globalProperties.getDictOne = getDictOne
 app.config.globalProperties.getPdf = getPdf
+app.config.globalProperties.getPdfA3 = getPdfA3
 app.config.globalProperties.translateIntoEnglish = translateIntoEnglish
 app.config.globalProperties.random = random
 

src/utils/util.js

@@ -1,10 +1,7 @@
 import moment from "moment";
-import {
-  post,
-  get
-} from "@/utils/request";
+import { post, get } from "@/utils/request";
 import Cookies from "js-cookie";
-import html2canvas from "html2canvas";
+import html2Canvas from "html2canvas";
 import JsPDF from "jspdf";
 import * as toEnglish from "./ACapital.js";
 
@@ -87,7 +84,6 @@ export function getDictOne(key) {
         }
       } else {
         post("/tenantDict/getDict", {
-
           dictCode: element,
         }).then((res) => {
           dictObj[element] = res;
@@ -187,7 +183,7 @@ export function getPdf(title) {
     div.style.height = document.getElementById("pdfDom").scrollHeight + "px";
     div.style.background = "url(" + can.toDataURL("image/png") + ") left top repeat";
     document.getElementById("pdfDom").appendChild(div); // 到页面中
-    html2canvas(element, {
+    html2Canvas(element, {
       allowTaint: true,
       useCORS: true, // 需要注意，element的 高度 宽度一定要在这里定义一下，不然会存在只下载了当前你能看到的页面   避雷避雷！！！
       scale: 2, // 提升画面质量，但是会增加文件大小
@@ -226,6 +222,55 @@ export function getPdf(title) {
     });
   }, 1000);
 }
+export function getPdfA3(title) {
+  html2Canvas(document.getElementById("pdfDom"), {
+    // allowTaint: true,
+    // taintTest: false,
+    // logging: false,
+    // useCORS: true,
+    // dpi: window.devicePixelRatio * 2, // 将分辨率提高到特定的DPI 提高四倍
+    // scale: 2, // 按比例增加分辨率
+    allowTaint: true,
+    useCORS: true, // 需要注意，element的 高度 宽度一定要在这里定义一下，不然会存在只下载了当前你能看到的页面   避雷避雷！！！
+    scale: 2, // 提升画面质量，但是会增加文件大小
+    height: document.getElementById("pdfDom").scrollHeight,
+    windowHeight: document.getElementById("pdfDom").scrollHeight,
+  }).then((canvas) => {
+    // eslint-disable-next-line new-cap
+    var pdf = new JsPDF("l", "mm", "a4"); // A3纸，横向
+    // var pdf = new JsPDF('p', 'mm', 'a4') // A4纸，纵向
+    var ctx = canvas.getContext("2d");
+    // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
+    // var a4w = 190;
+    // var a4h = 277
+    // A3大小，279mm x 420mm，四边各保留10mm的边距，显示区域259x400
+    // var a4w = 259;
+    // var a4h = 400;
+    var a4w = 210;
+    var a4h = 297;
+    // var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度[这个计算方式应该是纵向]
+    var imgHeight = Math.floor((a4w * canvas.width) / a4h); // 按A4显示比例换算一页图像的像素高度[这个是横向打印的计算方法]
+    var renderedHeight = 0;
+    while (renderedHeight < canvas.height) {
+      var page = document.createElement("canvas");
+      page.width = canvas.width;
+      page.height = Math.min(imgHeight, canvas.height - renderedHeight); // 可能内容不足一页
+      // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
+      page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
+      // 添加图像到页面，保留10mm边距 [a4使用]
+      // pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width))
+      // 添加图像到页面，保留10mm边距[a3使用1.414换算比例]
+      // pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w * 1.414, Math.min(a4h, (a4w * page.height) / page.width) * 1.414);
+      pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 0, 0, a4w * 1.414, Math.min(a4h, (a4w * page.height) / page.width) * 1.414);
+      renderedHeight += imgHeight;
+      if (renderedHeight < canvas.height) {
+        pdf.addPage(); // 如果后面还有内容，添加一个空页
+      }
+    }
+    // 保存文件
+    pdf.save(title + ".pdf");
+  });
+}
 
 export function currencyPrefix(key) {
   if (["¥", "￥", "1"].includes(key)) {
@@ -263,4 +308,4 @@ export function random() {
     random += $chars.charAt(Math.floor(Math.random() * maxPos));
   }
   return random;
-}
+}

src/views/salesMange/shipmentMange/document/index.vue

@@ -122,6 +122,7 @@
         <el-button @click="clickPrint(1)" type="primary">装箱单</el-button>
         <el-button @click="clickPrint(2)" type="primary">商业发票</el-button>
         <el-button @click="clickPrint(3)" type="primary">销售确认书</el-button>
+        <el-button @click="clickPrint(4)" type="primary">报关单</el-button>
       </div>
       <template #footer>
         <el-button @click="openSelectPrint = false" size="large">关闭</el-button>
@@ -493,6 +494,394 @@
         <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
       </template>
     </el-dialog>
+
+    <el-dialog title="打印" v-if="openCustomsDeclaration" v-model="openCustomsDeclaration" width="1460">
+      <div id="pdfDom" style="width: 1400px; padding: 16px; font-size: 12px !important">
+        <table cellspacing="0" cellpadding="0" border="0" class="one">
+          <tr>
+            <td colspan="8">
+              <span style="font-weight: 700">出口货物正式报关单草单/申报信息填制模板</span>
+            </td>
+          </tr>
+          <tr>
+            <td colspan="2" style="background-color: #dce6f1">
+              <div>发件公司清关负责人</div>
+              <div>联系电话/手机(必填）：</div>
+            </td>
+            <td colspan="2" style="background-color: #ebf1de">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.contacts }}</div>
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.contactsMobile }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.contacts" size="small" />
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.contactsMobile" size="small" />
+            </td>
+            <td colspan="2" style="background-color: #dce6f1">
+              <span>联系人邮箱：</span>
+            </td>
+            <td colspan="2" style="background-color: #ebf1de; text-align: left">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.contactsEmail }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.contactsEmail" size="small" />
+            </td>
+          </tr>
+          <tr style="background-color: #dce6f1">
+            <td colspan="2">
+              <span>境内发货人名称（填写发货公司中文名称）</span>
+            </td>
+            <td colspan="2">
+              <span>境内发货人代码（填写18位统一社会信用代码,没有信用证代码填报10位海关备案编码）</span>
+            </td>
+            <td colspan="2">
+              <span>出境关别（不用填写）</span>
+            </td>
+            <td colspan="2">
+              <span>备案号（如是手册的请填写）</span>
+            </td>
+          </tr>
+          <tr>
+            <td colspan="2">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.companyNameChinese }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.companyNameChinese" size="small" />
+            </td>
+            <td colspan="2">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.organizationCode }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.organizationCode" size="small" />
+            </td>
+            <td colspan="2">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.exitCustoms }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.exitCustoms" size="small" />
+            </td>
+            <td colspan="2">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.recordNo }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.recordNo" size="small" />
+            </td>
+          </tr>
+          <tr style="background-color: #dce6f1">
+            <td colspan="2">
+              <span>境外收货人（指合同买方或合同指定的收货人公司英文名称）</span>
+            </td>
+            <td colspan="2">
+              <span>境外收货人代码（AEO互认企业需填报AEO编码；不填默认非AEO互认）</span>
+            </td>
+            <td colspan="2">
+              <span>运输方式（不用填写）</span>
+            </td>
+            <td>
+              <span>运输工具名称及航次号（不用填写）</span>
+            </td>
+            <td>
+              <span>提运单号（指12位快递运单号码）</span>
+            </td>
+          </tr>
+          <tr>
+            <td colspan="2" style="background-color: #ebf1de">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.customerCompanyName }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.customerCompanyName" size="small" />
+            </td>
+            <td colspan="2">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.overseasConsigneeCode }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.overseasConsigneeCode" size="small" />
+            </td>
+            <td colspan="2">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.typeOfShipping }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.typeOfShipping" size="small" />
+            </td>
+            <td>
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.meansOfTransport }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.meansOfTransport" size="small" />
+            </td>
+            <td>
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.waybillCode }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.waybillCode" size="small" />
+            </td>
+          </tr>
+          <tr style="background-color: #dce6f1">
+            <td colspan="2">
+              <span>生产销售单位（指生产该产品的公司名称）</span>
+            </td>
+            <td colspan="2">
+              <span>生产销售单位代码（填写18位统一社会信用代码，没有信用证代码填写“NO”）</span>
+            </td>
+            <td colspan="2">
+              <span>监管方式</span>
+            </td>
+            <td>
+              <span>征免性质（与监管方式对应填写）</span>
+            </td>
+            <td>
+              <span>许可证号（如需许可证的请填写）</span>
+            </td>
+          </tr>
+          <tr>
+            <td colspan="2">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.productCompanyNameChinese }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.productCompanyNameChinese" size="small" />
+            </td>
+            <td colspan="2">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.productOrganizationCode }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.productOrganizationCode" size="small" />
+            </td>
+            <td colspan="2">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.supervisionMode }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.supervisionMode" size="small" />
+            </td>
+            <td>
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.exemptionNature }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.exemptionNature" size="small" />
+            </td>
+            <td>
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.licenseKey }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.licenseKey" size="small" />
+            </td>
+          </tr>
+          <tr style="background-color: #dce6f1">
+            <td colspan="2">
+              <span>合同协议号（根据合同填写）</span>
+            </td>
+            <td colspan="2">
+              <span>贸易国（合同买方所在国）</span>
+            </td>
+            <td colspan="2">
+              <span>运抵国</span>
+            </td>
+            <td>
+              <span>指运港（不用填写）</span>
+            </td>
+            <td>
+              <span>离境口岸（不用填写）</span>
+            </td>
+          </tr>
+          <tr>
+            <td colspan="2" style="background-color: #ebf1de">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.contractCode }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.contractCode" size="small" />
+            </td>
+            <td colspan="2" style="background-color: #ebf1de">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.tradingCountry }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.tradingCountry" size="small" />
+            </td>
+            <td colspan="2" style="background-color: #ebf1de">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.arrivalCountry }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.arrivalCountry" size="small" />
+            </td>
+            <td>
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.portOfDestination }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.portOfDestination" size="small" />
+            </td>
+            <td>
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.departurePort }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.departurePort" size="small" />
+            </td>
+          </tr>
+          <tr style="background-color: #dce6f1">
+            <td>
+              <span>包装种类</span>
+            </td>
+            <td>
+              <span>件数（运单和装箱单一致）</span>
+            </td>
+            <td>
+              <span>毛重（千克）</span>
+            </td>
+            <td>
+              <span>净重（千克）</span>
+            </td>
+            <td>
+              <span>成交方式</span>
+            </td>
+            <td>
+              <span>运费</span>
+            </td>
+            <td>
+              <span>保费</span>
+            </td>
+            <td>
+              <span>杂费（如有请填写）</span>
+            </td>
+          </tr>
+          <tr>
+            <td style="background-color: #ebf1de">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.packageType }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.packageType" size="small" />
+            </td>
+            <td style="background-color: #ebf1de">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.sumPackQuantity }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.sumPackQuantity" size="small" />
+            </td>
+            <td style="background-color: #ebf1de">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.sumRoughWeight }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.sumRoughWeight" size="small" />
+            </td>
+            <td style="background-color: #ebf1de">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.sumNetWeight }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.sumNetWeight" size="small" />
+            </td>
+            <td style="background-color: #ebf1de">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.tradeModeName }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.tradeModeName" size="small" />
+            </td>
+            <td>
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.freightPrice }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.freightPrice" size="small" />
+            </td>
+            <td>
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.premiumPrice }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.premiumPrice" size="small" />
+            </td>
+            <td>
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.incidentalPrice }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.incidentalPrice" size="small" />
+            </td>
+          </tr>
+          <tr>
+            <td colspan="3" style="background-color: #dce6f1">
+              <span>随附单证及编号（常见如通关单号、原进口报关单号）：</span>
+            </td>
+            <td colspan="5">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.documentsAttached }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.documentsAttached" size="small" />
+            </td>
+          </tr>
+          <tr>
+            <td colspan="2" style="background-color: #dce6f1">
+              <span>标记唛码及备注：</span>
+            </td>
+            <td colspan="2" style="background-color: #ebf1de">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.shippingMark }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.shippingMark" size="small" />
+            </td>
+            <td style="background-color: #dce6f1">
+              <span>境内货源地：</span>
+            </td>
+            <td colspan="3" style="background-color: #ebf1de; text-align: left">
+              <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ printCustomsDeclaration.content.withinChinaSource }}</div>
+              <el-input autosize type="textarea" v-if="!textShow" v-model="printCustomsDeclaration.content.withinChinaSource" size="small" />
+            </td>
+          </tr>
+        </table>
+        <table cellspacing="0" cellpadding="0" border="0" class="two">
+          <tr>
+            <th style="width: 20px">
+              <span>项号</span>
+            </th>
+            <th style="width: 140px">
+              <span>商品编号(13位)原10位海关编码+3位检验检疫附加编码</span>
+            </th>
+            <th style="width: 140px">
+              <span>商品名称</span>
+            </th>
+            <th>
+              <span>品牌</span>
+            </th>
+            <th>
+              <span>品牌类型</span>
+            </th>
+            <th style="width: 140px">
+              <span>出口享惠情况（不填写则默认不享受）</span>
+            </th>
+            <th>
+              <span>型号</span>
+            </th>
+            <th style="width: 140px">
+              <span>税号所需申报要素(如:用途、材质等）</span>
+            </th>
+            <th>
+              <span>各项净重</span>
+            </th>
+            <th>
+              <span>成交数量</span>
+            </th>
+            <th>
+              <span>成交单位</span>
+            </th>
+            <th>
+              <span>原产国（地区）</span>
+            </th>
+            <th>
+              <span>总价与币制</span>
+            </th>
+            <th>
+              <span>成交单价</span>
+            </th>
+            <th>
+              <span>EXW 单价</span>
+            </th>
+          </tr>
+          <template v-if="printCustomsDeclaration.content.products && printCustomsDeclaration.content.products.length > 0">
+            <tr v-for="(item, index) in printCustomsDeclaration.content.products" :key="index">
+              <td>
+                <span>{{ index + 1 }}</span>
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.customsCode }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.customsCode" size="small" />
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.productName }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.productName" size="small" />
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.brand }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.brand" size="small" />
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.brandType }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.brandType" size="small" />
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.exportBenefits }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.exportBenefits" size="small" />
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.productModelChinese }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.productModelChinese" size="small" />
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.declareRemark }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.declareRemark" size="small" />
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.netWeight }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.netWeight" size="small" />
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.quantity }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.quantity" size="small" />
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.unit }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.unit" size="small" />
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.countryChinese }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.countryChinese" size="small" />
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.sumPrice }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.sumPrice" size="small" />
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.declaredPrice }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.declaredPrice" size="small" />
+              </td>
+              <td>
+                <div style="word-wrap: break-word; padding: 0 4px" v-if="textShow">{{ item.exwPrice }}</div>
+                <el-input autosize type="textarea" v-if="!textShow" v-model="item.exwPrice" size="small" />
+              </td>
+            </tr>
+          </template>
+          <tr>
+            <td colspan="15" style="text-align: left; padding-left: 8px">
+              <span style="color: red">
+                我司保证以上所提供的信息及资料准确无误，如在海关申报、查验时有任何异议，所造成的损失及后果由我司承担。 确认签名/盖章：_________________________
+              </span>
+            </td>
+          </tr>
+        </table>
+      </div>
+      <template #footer>
+        <el-button @click="openCustomsDeclaration = false" size="large">取消</el-button>
+        <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -958,6 +1347,11 @@ const printDetails = ref({
   documentsProducts: [],
   customer: {},
 });
+const openCustomsDeclaration = ref(false);
+const printCustomsDeclaration = ref({
+  content: {},
+});
+const textShow = ref(false);
 const clickPrint = (status) => {
   // printDetails.value = {
   //   packDetailGoodsList: [],
@@ -969,8 +1363,23 @@ const clickPrint = (status) => {
   //   documentsProducts: [],
   //   customer: {},
   // };
-  openStatus.value = status;
-  openPrint.value = true;
+  if ([1, 2, 3].includes(status)) {
+    openStatus.value = status;
+    openPrint.value = true;
+  } else {
+    printCustomsDeclaration.value = {
+      content: {},
+    };
+    openStatus.value = status;
+    textShow.value = false;
+    openCustomsDeclaration.value = true;
+    proxy.get("/documents/generateClearanceePdf", { id: rowData.value.id }).then((res) => {
+      if (res.data.content) {
+        res.data.content = JSON.parse(res.data.content);
+      }
+      printCustomsDeclaration.value = res.data;
+    });
+  }
   // proxy.get("/documents/generateInvoiceAPackPdf", { id: rowData.value.id }).then((res) => {
   //   printDetails.value = res.data;
   // });
@@ -982,6 +1391,19 @@ const clickDownload = () => {
     proxy.getPdf("商业发票PDF文件");
   } else if (openStatus.value === 3) {
     proxy.getPdf("销售确认书PDF文件");
+  } else if (openStatus.value === 4) {
+    textShow.value = true;
+    let data = JSON.parse(JSON.stringify(printCustomsDeclaration.value))
+    data.content = JSON.stringify(data.content)
+    proxy.post('/documentsPdf/add', data).then();
+    setTimeout(() => {
+      proxy.getPdfA3("报关单PDF文件");
+      nextTick(() => {
+        setTimeout(() => {
+          textShow.value = false;
+        }, 1000);
+      });
+    }, 1000);
   }
 };
 const getStyle = (text) => {
@@ -1056,4 +1478,54 @@ const getAllMoney = (num) => {
   border-right: 1px solid black;
   border-bottom: 1px solid black;
 }
+.one {
+  width: 100%;
+  text-align: center;
+  border-top: 1px solid black;
+  border-left: 1px solid black;
+  table-layout: fixed;
+}
+.one td {
+  border: 0;
+  line-height: 18px;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+}
+.two {
+  width: 100%;
+  text-align: center;
+  border-top: 1px solid black;
+  border-left: 1px solid black;
+  table-layout: fixed;
+}
+.two th {
+  border: 0;
+  line-height: 18px;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+  background-color: #dce6f1;
+}
+.two td {
+  border: 0;
+  line-height: 18px;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+}
+:deep(.el-textarea__inner) {
+  background: transparent !important;
+  overflow-y: hidden;
+  padding: 0 4px !important;
+  resize: none;
+}
+:deep(.el-textarea) {
+  --el-input-focus-border: transparent;
+  --el-input-transparent-border: 0 0 0 0px;
+  --el-input-border-color: transparent;
+  --el-input-hover-border: 0px !important;
+  --el-input-hover-border-color: transparent;
+  --el-input-focus-border-color: transparent;
+  --el-input-clear-hover-color: transparent;
+  box-shadow: 0 0 0 0px !important;
+  --el-input-border: 0px;
+}
 </style>