单证合同pdf增加tax Number字段

src/components/PDF/contractPDF.vue

@@ -1,14 +1,30 @@
 <template>
   <div>
     <div id="printMe">
-      <div id="pdfDom" style="width: 800px; padding: 16px; font-size: 12px !important">
+      <div
+        id="pdfDom"
+        style="width: 800px; padding: 16px; font-size: 12px !important"
+      >
         <div style="font-size: 18px; text-align: center">
           {{ printDetails.sellCorporationNameEn }}
         </div>
         <div style="text-align: center">
-          {{ printDetails.sellDetailedAddress }},{{ printDetails.sellCityName }},{{ printDetails.sellProvinceName }},{{ printDetails.sellCountryName }}
+          {{ printDetails.sellDetailedAddress }},{{
+            printDetails.sellCityName
+          }},{{ printDetails.sellProvinceName }},{{
+            printDetails.sellCountryName
+          }}
+        </div>
+        <div
+          style="
+            font-size: 14px;
+            color: #409eff;
+            text-align: center;
+            padding-top: 16px;
+          "
+        >
+          PROFORMA INVOICE
         </div>
-        <div style="font-size: 14px; color: #409eff; text-align: center; padding-top: 16px">PROFORMA INVOICE</div>
         <div style="padding-top: 8px">
           <div>PI NO. : {{ printDetails.contractCode }}</div>
           <div>PI DATE: {{ printDetails.createTimeEn }}</div>
@@ -18,7 +34,11 @@
             <div style="color: #409eff">VENDOR:</div>
             <div>{{ printDetails.sellCorporationNameEn }}</div>
             <div style="padding: 16px 0">
-              {{ printDetails.sellDetailedAddress }},{{ printDetails.sellCityName }},{{ printDetails.sellProvinceName }},{{ printDetails.sellCountryName }}
+              {{ printDetails.sellDetailedAddress }},{{
+                printDetails.sellCityName
+              }},{{ printDetails.sellProvinceName }},{{
+                printDetails.sellCountryName
+              }}
             </div>
             <div>CONTACT: {{ printDetails.sellContactName }}</div>
             <div>TEL.: {{ printDetails.sellContactNumber }}</div>
@@ -26,21 +46,47 @@
           <div style="width: 50%">
             <div style="color: #409eff">BUYER:</div>
             <div>{{ printDetails.buyCorporationName }}</div>
+            <div style="padding-top: 16px">
+              <span style="color: #409eff">TAX NUMBER:</span
+              ><span>{{ printDetails.taxNumber }}</span>
+            </div>
             <div style="padding: 16px 0">
-              {{ printDetails.buyDetailedAddress }},{{ printDetails.buyCityName }},{{ printDetails.buyProvinceName }},{{ printDetails.buyCountryName }}
+              {{ printDetails.buyDetailedAddress }},{{
+                printDetails.buyCityName
+              }},{{ printDetails.buyProvinceName }},{{
+                printDetails.buyCountryName
+              }}
+            </div>
+            <div>
+              <span style="color: #409eff">POST CODE:</span>
+              <span>{{ printDetails.buyPostalCode }}</span>
+            </div>
+            <div style="padding-top: 16px">
+              CONTACT: {{ printDetails.buyContactName }}
             </div>
-            <div>CONTACT: {{ printDetails.buyContactName }}</div>
             <div>TEL.: {{ printDetails.buyContactNumber }}</div>
           </div>
         </div>
         <div style="height: 16px"></div>
         <div style="border: 1px solid black">
           <div style="display: flex; width: 100%">
-            <div style="width: 33%; border-bottom: 1px solid black; border-right: 1px solid black">
+            <div
+              style="
+                width: 33%;
+                border-bottom: 1px solid black;
+                border-right: 1px solid black;
+              "
+            >
               <div style="color: #409eff">COUNTRY OF ORIGIN:</div>
               <div>{{ printDetails.sellCountryName }}</div>
             </div>
-            <div style="width: 34%; border-bottom: 1px solid black; border-right: 1px solid black">
+            <div
+              style="
+                width: 34%;
+                border-bottom: 1px solid black;
+                border-right: 1px solid black;
+              "
+            >
               <div style="color: #409eff">COUNTRY OF DESTINATION:</div>
               <div>{{ printDetails.buyCountryName }}</div>
             </div>
@@ -50,13 +96,25 @@
             </div>
           </div>
           <div style="display: flex; width: 100%">
-            <div style="width: 33%; border-bottom: 1px solid black; border-right: 1px solid black">
+            <div
+              style="
+                width: 33%;
+                border-bottom: 1px solid black;
+                border-right: 1px solid black;
+              "
+            >
               <div style="color: #409eff">TERMS OF DELIVERY:</div>
               <div>
                 {{ dictValueLabel(printDetails.tradeMethods, tradeMethods) }}
               </div>
             </div>
-            <div style="width: 34%; border-bottom: 1px solid black; border-right: 1px solid black">
+            <div
+              style="
+                width: 34%;
+                border-bottom: 1px solid black;
+                border-right: 1px solid black;
+              "
+            >
               <div style="color: #409eff">CURRENCY:</div>
               <div>
                 {{ printDetails.currency }}
@@ -65,7 +123,9 @@
             <div style="width: 33%; border-bottom: 1px solid black">
               <div style="color: #409eff">EXPORT BY/VIA:</div>
               <div>
-                {{ dictValueLabel(printDetails.transportMethod, shippingMethod) }}
+                {{
+                  dictValueLabel(printDetails.transportMethod, shippingMethod)
+                }}
               </div>
             </div>
           </div>
@@ -82,19 +142,47 @@
         </div>
         <div style="height: 16px"></div>
         <div class="baseRow" style="display: flex; color: #409eff">
-          <div class="contentRow" style="width: 50px; text-align: center">NO.</div>
-          <div class="contentRow" style="width: calc(100% - 450px); text-align: center">COMMODITY, SPECIFICATION</div>
-          <div class="contentRow" style="width: 100px; text-align: center">UNIT</div>
-          <div class="contentRow" style="width: 100px; text-align: center">QUANTITY</div>
-          <div class="contentRow" style="width: 100px; text-align: center">UNIT PRICE</div>
-          <div class="contentRow" style="width: 100px; text-align: center">TOTAL PRICE</div>
+          <div class="contentRow" style="width: 50px; text-align: center">
+            NO.
+          </div>
+          <div
+            class="contentRow"
+            style="width: calc(100% - 450px); text-align: center"
+          >
+            COMMODITY, SPECIFICATION
+          </div>
+          <div class="contentRow" style="width: 100px; text-align: center">
+            UNIT
+          </div>
+          <div class="contentRow" style="width: 100px; text-align: center">
+            QUANTITY
+          </div>
+          <div class="contentRow" style="width: 100px; text-align: center">
+            UNIT PRICE
+          </div>
+          <div class="contentRow" style="width: 100px; text-align: center">
+            TOTAL PRICE
+          </div>
         </div>
-        <div v-if="printDetails.productInfoList && printDetails.productInfoList.length > 0">
-          <div class="baseRow" style="display: flex" v-for="(item, index) in printDetails.productInfoList" :key="item.productId">
+        <div
+          v-if="
+            printDetails.productInfoList &&
+            printDetails.productInfoList.length > 0
+          "
+        >
+          <div
+            class="baseRow"
+            style="display: flex"
+            v-for="(item, index) in printDetails.productInfoList"
+            :key="item.productId"
+          >
             <div class="contentRow" style="width: 50px; text-align: center">
               {{ index + 1 }}
             </div>
-            <div class="contentRow" style="width: calc(100% - 450px); text-align: center">
+            <div
+              class="contentRow"
+              style="width: calc(100% - 450px); text-align: center"
+            >
               {{ item.productName }}
             </div>
             <div class="contentRow" style="width: 100px; text-align: center">
@@ -112,12 +200,23 @@
           </div>
         </div>
         <div class="baseRow" style="display: flex; color: #409eff">
-          <div class="contentRow" style="width: calc(100% - 400px); text-align: center">SUBTOTAL:</div>
-          <div class="contentRow" style="width: 100px; text-align: center"></div>
+          <div
+            class="contentRow"
+            style="width: calc(100% - 400px); text-align: center"
+          >
+            SUBTOTAL:
+          </div>
+          <div
+            class="contentRow"
+            style="width: 100px; text-align: center"
+          ></div>
           <div class="contentRow" style="width: 100px; text-align: center">
             {{ statistics("productQuantity", 0) }}
           </div>
-          <div class="contentRow" style="width: 100px; text-align: center"></div>
+          <div
+            class="contentRow"
+            style="width: 100px; text-align: center"
+          ></div>
           <div class="contentRow" style="width: 100px; text-align: center">
             {{ statistics("amount", 2) }}
           </div>
@@ -129,20 +228,38 @@
             </div>
           </div> -->
         <div class="baseRow" style="display: flex">
-          <div class="contentRow" style="width: calc(100% - 100px); text-align: right; color: #409eff">FREIGHT COST:</div>
+          <div
+            class="contentRow"
+            style="width: calc(100% - 100px); text-align: right; color: #409eff"
+          >
+            FREIGHT COST:
+          </div>
           <div class="contentRow" style="width: 100px; text-align: center">
             {{ statisticsTwo("amount", 2) }}
           </div>
         </div>
         <div class="baseRow" style="display: flex">
-          <div class="contentRow" style="width: calc(100% - 100px); text-align: right; color: #409eff">TOTAL PRICE:</div>
+          <div
+            class="contentRow"
+            style="width: calc(100% - 100px); text-align: right; color: #409eff"
+          >
+            TOTAL PRICE:
+          </div>
           <div class="contentRow" style="width: 100px; text-align: center">
             {{ printDetails.totalAmount }}
           </div>
         </div>
-        <div class="baseRow" style="display: flex; border-bottom: 1px solid black">
+        <div
+          class="baseRow"
+          style="display: flex; border-bottom: 1px solid black"
+        >
           <div class="contentRow" style="width: 100%">
-            {{ translateIntoEnglish(printDetails.totalAmount, printDetails.currency) }}
+            {{
+              translateIntoEnglish(
+                printDetails.totalAmount,
+                printDetails.currency
+              )
+            }}
           </div>
         </div>
         <div style="height: 16px"></div>
@@ -151,22 +268,66 @@
         </div>
         <div class="baseRow" style="border-bottom: 1px solid black">
           <div class="contentRow" style="width: 100%">
-            <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
+            <div
+              style="
+                line-height: 24px;
+                padding-left: 4px;
+                word-break: break-all;
+                word-wrap: break-word;
+              "
+            >
               Beneficiary Name: {{ printDetails.beneficiaryName }}
             </div>
-            <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
+            <div
+              style="
+                line-height: 24px;
+                padding-left: 4px;
+                word-break: break-all;
+                word-wrap: break-word;
+              "
+            >
               Beneficiary Bank: {{ printDetails.beneficiaryBank }}
             </div>
-            <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
+            <div
+              style="
+                line-height: 24px;
+                padding-left: 4px;
+                word-break: break-all;
+                word-wrap: break-word;
+              "
+            >
               Beneficiary Bank Address:
               {{ printDetails.beneficiaryBankAddress }}
             </div>
-            <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
+            <div
+              style="
+                line-height: 24px;
+                padding-left: 4px;
+                word-break: break-all;
+                word-wrap: break-word;
+              "
+            >
               Beneficiary Account Number:
               {{ printDetails.beneficiaryAccountNumber }}
             </div>
-            <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">Swift Code: {{ printDetails.swiftCode }}</div>
-            <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
+            <div
+              style="
+                line-height: 24px;
+                padding-left: 4px;
+                word-break: break-all;
+                word-wrap: break-word;
+              "
+            >
+              Swift Code: {{ printDetails.swiftCode }}
+            </div>
+            <div
+              style="
+                line-height: 24px;
+                padding-left: 4px;
+                word-break: break-all;
+                word-wrap: break-word;
+              "
+            >
               Beneficiary Address: {{ printDetails.beneficiaryAddress }}
             </div>
           </div>
@@ -202,7 +363,10 @@ const getPdfData = (query) => {
 };
 const statistics = (label, index) => {
   let num = 0;
-  if (printDetails.value.productInfoList && printDetails.value.productInfoList.length > 0) {
+  if (
+    printDetails.value.productInfoList &&
+    printDetails.value.productInfoList.length > 0
+  ) {
     printDetails.value.productInfoList.map((item) => {
       if (item[label]) {
         num = parseFloat(Number(num) + Number(item[label])).toFixed(index);
@@ -213,7 +377,10 @@ const statistics = (label, index) => {
 };
 const statisticsTwo = (label, index) => {
   let num = 0;
-  if (printDetails.value.contractProjectList && printDetails.value.contractProjectList.length > 0) {
+  if (
+    printDetails.value.contractProjectList &&
+    printDetails.value.contractProjectList.length > 0
+  ) {
     printDetails.value.contractProjectList.map((item) => {
       if (item[label]) {
         num = parseFloat(Number(num) + Number(item[label])).toFixed(index);