1

src/components/PDF/contractPDFOne.vue

@@ -1,24 +1,37 @@
 <template>
   <div>
-    <div id="pdfDom" ref="pdfDom">
+    <div id="pdfDom" ref="pdfDom" style="padding: 30px 60px">
       <table border="1" style="width: 100%" class="table">
         <tr>
-          <td style="width: 150px">图片</td>
-          <td>
+          <td style="width: 120px">
+            <img
+              :src="pdfData.companyPic"
+              alt=""
+              fit="scale-down"
+              style="height: 60px; width: 60px"
+            />
+          </td>
+          <td style="padding: 10px">
+            <div style="font-size: 18px" class="color-class">
+              {{ pdfData.sellCorporationNameEn }}
+            </div>
             <div style="font-size: 18px" class="color-class">
-              {{ printDetails.sellCorporationNameEn }}
+              {{ pdfData.sellCorporationName }}
             </div>
+
             <div style="font-size: 14px; color: #000">
-              Address： {{ printDetails.sellDetailedAddress }}
+              Address： {{ pdfData.sellDetailedAddress }}
             </div>
             <div style="font-size: 14px; color: #000; margin-top: 5px">
-              {{ printDetails.sellCityName }},{{
-                printDetails.sellProvinceName
-              }},{{ printDetails.sellCountryName }}
+              {{ pdfData.sellCityName }} , {{ pdfData.sellProvinceName }} ,
+              {{ pdfData.sellCountryName }}
             </div>
             <div style="margin: 8px 0; color: black">
-              Tel: <span>{{ printDetails.sellContactNumber }}</span> Fax:
-              <span></span> Website: <span></span>
+              Tel: <span>{{ pdfData.sellContactNumber }}</span>
+              <!-- Fax:
+              <span>{{ pdfData.fax }}</span>
+               Website:
+              <span>{{ pdfData.Website }}</span> -->
             </div>
           </td>
         </tr>
@@ -37,33 +50,37 @@
       <table border="1" style="width: 100%" class="table">
         <tr>
           <td style="width: 50%; text-align: left">
-            Buyer: {{ printDetails.buyCorporationName }}
+            Buyer: {{ pdfData.buyCorporationName }}
           </td>
           <td style="width: 50%; text-align: left">
-            Seller: {{ printDetails.sellCorporationNameEn }}
+            Seller: {{ pdfData.sellCorporationNameEn }}
           </td>
         </tr>
       </table>
       <table border="1" style="width: 100%; border-top: none" class="table">
         <tr>
           <td style="width: 15%">PI No.</td>
-          <td style="width: 35%">{{ printDetails.contractCode }}</td>
+          <td style="width: 35%">{{ pdfData.contractCode }}</td>
           <td style="width: 15%">Date:</td>
-          <td style="width: 35%">{{ printDetails.createTimeEn }}</td>
+          <td style="width: 35%">{{ pdfData.createTimeEn }}</td>
         </tr>
         <tr>
+          <!-- 客户PO -->
           <td style="width: 15%">PO No.</td>
-          <td style="width: 35%">客户PO</td>
+          <td style="width: 35%"></td>
+          <!-- 贸易方式 -->
           <td style="width: 15%">Price Term:</td>
-          <td style="width: 35%" rowspan="2">
-            {{ dictValueLabel(printDetails.transportMethod, shippingMethod) }}
+          <td style="width: 35%">
+            {{ dictValueLabel(pdfData.tradeMethods, tradeMethods) }}
           </td>
         </tr>
         <tr>
+          <!-- 最终目的地 -->
           <td style="width: 15%">Final Destination:</td>
-          <td style="width: 35%"></td>
+          <td style="width: 35%">{{ pdfData.buyCityName }}</td>
+          <!-- 装货港 -->
           <td style="width: 15%">Loading Port:</td>
-          <!-- <td style="width: 35%">{{ printDetails.createTimeEn }}</td> -->
+          <td style="width: 35%"></td>
         </tr>
       </table>
       <div style="height: 15px; background: #7f197f"></div>
@@ -72,54 +89,64 @@
           <td style="width: 15%">Image</td>
           <td style="width: 20%">Description</td>
           <td style="width: 15%">Size</td>
-          <td style="width: 10%">Packaging</td>
-          <td style="width: 10%">
+          <td style="width: 12%">Packaging</td>
+          <td style="width: 12%">
             Order <br />
             Quantity
           </td>
-          <td style="width: 10%">Carton <br />Quantity</td>
-          <td style="width: 10%">Unit <br />Price</td>
-          <td style="width: 10%">Total <br />Amount</td>
+
+          <td style="width: 13%">Unit <br />Price</td>
+          <td style="width: 13%">Total <br />Amount</td>
         </tr>
 
         <tr
-          v-if="
-            printDetails.productInfoList &&
-            printDetails.productInfoList.length > 0
-          "
-          v-for="(item, index) in printDetails.productInfoList"
+          v-if="pdfData.productInfoList && pdfData.productInfoList.length > 0"
+          v-for="(item, index) in pdfData.productInfoList"
           :key="item.productId"
         >
-          <td style="width: 15%">图片</td>
-          <td style="width: 20%">{{ item.productName }}</td>
-          <td style="width: 15%">{{ item.spec }}</td>
-          <td style="width: 10%">包装方式</td>
-          <td style="width: 10%">
+          <td style="width: 15%">
+            <img
+              :src="item.fileList[0].fileUrl"
+              alt=""
+              fit="scale-down"
+              style="height: 60px; width: 60px"
+              v-if="item.fileList && item.fileList.length > 0"
+            />
+          </td>
+          <td style="width: 20%">{{ item.productRemark }}</td>
+          <td style="width: 15%">{{ item.productSpec }}</td>
+          <td style="width: 12%">{{ item.packMethod }}</td>
+          <td style="width: 12%">
             {{ item.productQuantity }}
           </td>
-          <td style="width: 10%">总箱数</td>
-          <td style="width: 10%">
-            {{ printDetails.currency }} {{ moneyFormat(item.productPrice, 2) }}
+          <td style="width: 13%">
+            {{ pdfData.currency }} {{ moneyFormat(item.productPrice, 2) }}
           </td>
-          <td style="width: 10%">
-            {{ printDetails.currency }} {{ moneyFormat(item.amount, 2) }}
+          <td style="width: 13%">
+            {{ pdfData.currency }} {{ moneyFormat(item.amount, 2) }}
           </td>
         </tr>
         <tr>
-          <td colspan="7" style="text-align: right">Total Amount:</td>
+          <td colspan="6" style="text-align: right">Total Amount:</td>
           <td style="width: 10%">
-            {{ printDetails.currency }}
-            {{ moneyFormat(printDetails.totalAmount, 2) }}
+            {{ pdfData.currency }}
+            {{ moneyFormat(pdfData.totalAmount, 2) }}
           </td>
         </tr>
         <tr>
-          <td colspan="7" style="text-align: right">Deposit(30.00%):</td>
-          <td style="width: 10%">{{ printDetails.advanceRatio }}%</td>
+          <td colspan="6" style="text-align: right">
+            Deposit( {{ pdfData.advanceRatio }} %):
+          </td>
+          <td style="width: 10%">
+            {{ pdfData.currency }} {{ getBalance(pdfData.advanceRatio) }}
+          </td>
         </tr>
         <tr>
-          <td colspan="7" style="text-align: right">Balance(70.00%):</td>
+          <td colspan="6" style="text-align: right">
+            Balance( {{ pdfData.advanceRatioOne }} %):
+          </td>
           <td style="width: 10%">
-            剩余比例:剩余比例 = 最终价格 * (100% - 预付比例)
+            {{ pdfData.currency }} {{ getBalance(pdfData.advanceRatioOne) }}
           </td>
         </tr>
       </table>
@@ -127,16 +154,18 @@
       <table border="1" style="width: 100%" class="table">
         <tr>
           <td class="width-one" style="text-align: left">1.Lead Time:</td>
-          <td style="text-align: left">{{ printDetails.deliveryTime }} Days</td>
+          <td style="text-align: left">{{ pdfData.deliveryTime }}</td>
         </tr>
         <tr>
           <td class="width-one" style="text-align: left">2.Payment Term:</td>
-          <td style="text-align: left">{{ printDetails.remark }}</td>
+          <td style="text-align: left">
+            <div v-html="pdfData.remark"></div>
+          </td>
         </tr>
         <tr>
           <td class="width-one" style="text-align: left">3.Shipping Mode</td>
           <td style="text-align: left">
-            {{ dictValueLabel(printDetails.transportMethod, shippingMethod) }}
+            {{ dictValueLabel(pdfData.transportMethod, shippingMethod) }}
           </td>
         </tr>
         <tr>
@@ -147,20 +176,18 @@
         <tr>
           <td class="width-one" style="text-align: left">5.Banking Info</td>
           <td style="text-align: left">
-            <div>Beneficiary Name: {{ printDetails.beneficiaryName }}</div>
-            <div>Beneficiary Bank: {{ printDetails.beneficiaryBank }}</div>
+            <div>Beneficiary Name: {{ pdfData.beneficiaryName }}</div>
+            <div>Beneficiary Bank: {{ pdfData.beneficiaryBank }}</div>
             <div>
               Beneficiary Bank Address:
-              {{ printDetails.beneficiaryBankAddress }}
+              {{ pdfData.beneficiaryBankAddress }}
             </div>
             <div>
               Beneficiary Account Number:
-              {{ printDetails.beneficiaryAccountNumber }}
-            </div>
-            <div>Swift Code: {{ printDetails.swiftCode }}</div>
-            <div>
-              Beneficiary Address: {{ printDetails.beneficiaryAddress }}
+              {{ pdfData.beneficiaryAccountNumber }}
             </div>
+            <div>Swift Code: {{ pdfData.swiftCode }}</div>
+            <div>Beneficiary Address: {{ pdfData.beneficiaryAddress }}</div>
           </td>
         </tr>
         <tr>
@@ -200,8 +227,22 @@
       </table>
       <table border="1" style="width: 100%; border-top: none" class="table">
         <tr>
-          <td style="width: 50%; text-align: left">The Buyer's Signature</td>
-          <td style="width: 50%; text-align: left">The Seller's Signature</td>
+          <td style="width: 50%; text-align: left">
+            The Buyer's Signature
+            <div style="width: 200px; height: 200px"></div>
+          </td>
+          <td style="width: 50%; text-align: left">
+            The Seller's Signature
+            <div style="width: 200px; height: 200px">
+              <img
+                v-if="pdfData.companySeal"
+                :src="pdfData.companySeal"
+                alt=""
+                fit="scale-down"
+                style="height: 200px; width: 200px"
+              />
+            </div>
+          </td>
         </tr>
       </table>
     </div>
@@ -212,43 +253,65 @@
 import { NumberToChinese } from "@/utils/util.js";
 import { watch } from "vue";
 const { proxy } = getCurrentInstance();
-const printDetails = ref({});
+const pdfData = ref({});
 const props = defineProps({
   rowData: Object,
 });
 const getPdfData = (query) => {
   proxy.post("/contract/getContractPdfInfo", query).then((res) => {
-    printDetails.value = res;
+    pdfData.value = res;
+    if (pdfData.value.advanceRatio) {
+      pdfData.value.advanceRatio = parseFloat(
+        pdfData.value.advanceRatio
+      ).toFixed(2);
+      pdfData.value.advanceRatioOne = (
+        100 - Number(pdfData.value.advanceRatio)
+      ).toFixed(2);
+    }
+    if (pdfData.value.sellCorporationId) {
+      proxy
+        .post("/fileInfo/getList", {
+          businessIdList: [pdfData.value.sellCorporationId],
+          fileType: 1,
+        })
+        .then((fileObj) => {
+          pdfData.value.companyPic =
+            fileObj[pdfData.value.sellCorporationId][0].fileUrl;
+        });
+      proxy
+        .post("/fileInfo/getList", {
+          businessIdList: [pdfData.value.sellCorporationId],
+          fileType: 4,
+        })
+        .then((fileObj) => {
+          pdfData.value.companySeal =
+            fileObj[pdfData.value.sellCorporationId][0].fileUrl;
+        });
+    }
+    // 拿取产品图
+    if (
+      pdfData.value.productInfoList &&
+      pdfData.value.productInfoList.length > 0
+    ) {
+      let arr = pdfData.value.productInfoList.map((x) => x.productId);
+      proxy
+        .post("/fileInfo/getList", {
+          businessIdList: arr,
+        })
+        .then((fileObj) => {
+          for (let i = 0; i < pdfData.value.productInfoList.length; i++) {
+            const e = pdfData.value.productInfoList[i];
+            for (const key in fileObj) {
+              if (e.productId === key) {
+                e.fileList = fileObj[key];
+              }
+            }
+          }
+        });
+    }
   });
 };
-const statistics = (label, index) => {
-  let num = 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);
-      }
-    });
-  }
-  return num;
-};
-const statisticsTwo = (label, index) => {
-  let num = 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);
-      }
-    });
-  }
-  return num;
-};
+
 const productUnit = ref([]);
 const tradeMethods = ref([]);
 const shippingMethod = ref([]);
@@ -269,6 +332,11 @@ const getDict = () => {
   });
 };
 getDict();
+const getBalance = (val) => {
+  if (val) {
+    return parseFloat(pdfData.value.totalAmount * (val / 100)).toFixed(2);
+  }
+};
 watch(
   props.rowData,
   () => {

src/components/PDF/samplePDF.vue

@@ -1,24 +1,37 @@
 <template>
   <div>
-    <div id="pdfDom" ref="pdfDom">
+    <div id="pdfDom" ref="pdfDom" style="padding: 30px 60px">
       <table border="1" style="width: 100%" class="table">
         <tr>
-          <td style="width: 150px">图片</td>
-          <td>
+          <td style="width: 120px">
+            <img
+              :src="pdfData.companyPic"
+              alt=""
+              fit="scale-down"
+              style="height: 60px; width: 60px"
+            />
+          </td>
+          <td style="padding: 10px">
+            <div style="font-size: 18px" class="color-class">
+              {{ pdfData.sellCorporationNameEn }}
+            </div>
             <div style="font-size: 18px" class="color-class">
-              {{ printDetails.sellCorporationNameEn }}
+              {{ pdfData.sellCorporationName }}
             </div>
+
             <div style="font-size: 14px; color: #000">
-              Address： {{ printDetails.sellDetailedAddress }}
+              Address： {{ pdfData.sellDetailedAddress }}
             </div>
             <div style="font-size: 14px; color: #000; margin-top: 5px">
-              {{ printDetails.sellCityName }},{{
-                printDetails.sellProvinceName
-              }},{{ printDetails.sellCountryName }}
+              {{ pdfData.sellCityName }} , {{ pdfData.sellProvinceName }} ,
+              {{ pdfData.sellCountryName }}
             </div>
             <div style="margin: 8px 0; color: black">
-              Tel: <span>{{ printDetails.sellContactNumber }}</span> Fax:
-              <span></span> Website: <span></span>
+              Tel: <span>{{ pdfData.sellContactNumber }}</span>
+              <!-- Fax:
+              <span>{{ pdfData.fax }}</span>
+               Website:
+              <span>{{ pdfData.Website }}</span> -->
             </div>
           </td>
         </tr>
@@ -37,29 +50,35 @@
       <table border="1" style="width: 100%" class="table">
         <tr>
           <td style="width: 50%; text-align: left">
-            Buyer: {{ printDetails.buyCorporationName }}
+            Buyer: {{ pdfData.buyCorporationName }}
           </td>
           <td style="width: 50%; text-align: left">
-            Seller: {{ printDetails.sellCorporationNameEn }}
+            Seller: {{ pdfData.sellCorporationNameEn }}
           </td>
         </tr>
       </table>
       <table border="1" style="width: 100%; border-top: none" class="table">
         <tr>
-          <td style="width: 15%">Sample PI No.</td>
-          <td style="width: 35%">{{ printDetails.contractCode }}</td>
+          <td style="width: 15%">Sample PI No</td>
+          <td style="width: 35%">{{ pdfData.contractCode }}</td>
           <td style="width: 15%">Date:</td>
-          <td style="width: 35%">{{ printDetails.createTimeEn }}</td>
+          <td style="width: 35%">{{ pdfData.createTimeEn }}</td>
         </tr>
         <tr>
+          <!-- 客户PO -->
           <td style="width: 15%">Contact Person:</td>
           <td style="width: 35%"></td>
+          <!-- 贸易方式 -->
           <td style="width: 15%">Email:</td>
-          <td style="width: 35%"></td>
+          <td style="width: 35%">
+            {{ dictValueLabel(pdfData.tradeMethods, tradeMethods) }}
+          </td>
         </tr>
         <tr>
+          <!-- 最终目的地 -->
           <td style="width: 15%">Payment Teams:</td>
-          <td style="width: 35%"></td>
+          <td style="width: 35%">{{ pdfData.buyCityName }}</td>
+          <!-- 装货港 -->
           <td style="width: 15%">Lead Time:</td>
           <td style="width: 35%"></td>
         </tr>
@@ -70,63 +89,65 @@
           <td style="width: 15%">Image</td>
           <td style="width: 20%">Description</td>
           <td style="width: 15%">Size</td>
-          <td style="width: 10%">Material</td>
-          <td style="width: 10%">Logo</td>
-          <td style="width: 10%">Quantity</td>
-          <td style="width: 10%">Sample <br />Fee</td>
-          <td style="width: 10%">Total <br />Amount</td>
+          <td style="width: 12%">Material</td>
+          <td style="width: 12%">Quantity</td>
+
+          <td style="width: 13%">Sample <br />Fee</td>
+          <td style="width: 13%">Total <br />Amount</td>
         </tr>
 
         <tr
-          v-if="
-            printDetails.productInfoList &&
-            printDetails.productInfoList.length > 0
-          "
-          v-for="(item, index) in printDetails.productInfoList"
+          v-if="pdfData.productInfoList && pdfData.productInfoList.length > 0"
+          v-for="(item, index) in pdfData.productInfoList"
           :key="item.productId"
         >
-          <td style="width: 15%">图片</td>
-          <td style="width: 20%">{{ item.productName }}</td>
-          <td style="width: 15%">{{ item.spec }}</td>
-          <td style="width: 10%">包装方式</td>
-          <td style="width: 10%">
+          <td style="width: 15%">
+            <img
+              :src="item.fileList[0].fileUrl"
+              alt=""
+              fit="scale-down"
+              style="height: 60px; width: 60px"
+              v-if="item.fileList && item.fileList.length > 0"
+            />
+          </td>
+          <td style="width: 20%">{{ item.productRemark }}</td>
+          <td style="width: 15%">{{ item.productSpec }}</td>
+          <td style="width: 12%">{{ item.packMethod }}</td>
+          <td style="width: 12%">
             {{ item.productQuantity }}
           </td>
-          <td style="width: 10%">总箱数</td>
-          <td style="width: 10%">
-            {{ printDetails.currency }} {{ moneyFormat(item.productPrice, 2) }}
+          <td style="width: 13%">
+            {{ pdfData.currency }} {{ moneyFormat(item.productPrice, 2) }}
           </td>
-          <td style="width: 10%">
-            {{ printDetails.currency }} {{ moneyFormat(item.amount, 2) }}
+          <td style="width: 13%">
+            {{ pdfData.currency }} {{ moneyFormat(item.amount, 2) }}
           </td>
         </tr>
         <tr>
-          <td colspan="7" style="text-align: right">Total Amount:</td>
+          <td colspan="6" style="text-align: right">Total Amount:</td>
           <td style="width: 10%">
-            {{ printDetails.currency }}
-            {{ moneyFormat(printDetails.totalAmount, 2) }}
+            {{ pdfData.currency }}
+            {{ moneyFormat(pdfData.totalAmount, 2) }}
           </td>
         </tr>
       </table>
       <div style="height: 15px; background: #7f197f"></div>
       <table border="1" style="width: 100%" class="table">
         <tr>
-          <td style="width: 200px; text-align: left">5.Banking Info</td>
+          <td class="width-one" style="text-align: left">5.Banking Info</td>
           <td style="text-align: left">
-            <div>Beneficiary Name: {{ printDetails.beneficiaryName }}</div>
-            <div>Beneficiary Bank: {{ printDetails.beneficiaryBank }}</div>
+            <div>Beneficiary Name: {{ pdfData.beneficiaryName }}</div>
+            <div>Beneficiary Bank: {{ pdfData.beneficiaryBank }}</div>
             <div>
               Beneficiary Bank Address:
-              {{ printDetails.beneficiaryBankAddress }}
+              {{ pdfData.beneficiaryBankAddress }}
             </div>
             <div>
               Beneficiary Account Number:
-              {{ printDetails.beneficiaryAccountNumber }}
-            </div>
-            <div>Swift Code: {{ printDetails.swiftCode }}</div>
-            <div>
-              Beneficiary Address: {{ printDetails.beneficiaryAddress }}
+              {{ pdfData.beneficiaryAccountNumber }}
             </div>
+            <div>Swift Code: {{ pdfData.swiftCode }}</div>
+            <div>Beneficiary Address: {{ pdfData.beneficiaryAddress }}</div>
           </td>
         </tr>
       </table>
@@ -138,63 +159,55 @@
 import { NumberToChinese } from "@/utils/util.js";
 import { watch } from "vue";
 const { proxy } = getCurrentInstance();
-const printDetails = ref({});
+const pdfData = ref({});
 const props = defineProps({
   rowData: Object,
 });
 const getPdfData = (query) => {
   proxy.post("/contract/getContractPdfInfo", query).then((res) => {
-    printDetails.value = res;
-  });
-};
-const statistics = (label, index) => {
-  let num = 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);
-      }
-    });
-  }
-  return num;
-};
-const statisticsTwo = (label, index) => {
-  let num = 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);
-      }
-    });
-  }
-  return num;
-};
-const productUnit = ref([]);
-const tradeMethods = ref([]);
-const shippingMethod = ref([]);
-const getDict = () => {
-  proxy.getDictOne(["trade_mode", "shipping_method", "unit"]).then((res) => {
-    tradeMethods.value = res["trade_mode"].map((x) => ({
-      label: x.dictValue,
-      value: x.dictKey,
-    }));
-    shippingMethod.value = res["shipping_method"].map((x) => ({
-      label: x.dictValue,
-      value: x.dictKey,
-    }));
-    productUnit.value = res["unit"].map((x) => ({
-      label: x.dictValue,
-      value: x.dictKey,
-    }));
+    pdfData.value = res;
+    if (pdfData.value.advanceRatio) {
+      pdfData.value.advanceRatio = parseFloat(
+        pdfData.value.advanceRatio
+      ).toFixed(2);
+      pdfData.value.advanceRatioOne = (
+        100 - Number(pdfData.value.advanceRatio)
+      ).toFixed(2);
+    }
+    if (pdfData.value.sellCorporationId) {
+      proxy
+        .post("/fileInfo/getList", {
+          businessIdList: [pdfData.value.sellCorporationId],
+          fileType: 1,
+        })
+        .then((fileObj) => {
+          pdfData.value.companyPic =
+            fileObj[pdfData.value.sellCorporationId][0].fileUrl;
+        });
+    }
+    // 拿取产品图
+    if (
+      pdfData.value.productInfoList &&
+      pdfData.value.productInfoList.length > 0
+    ) {
+      let arr = pdfData.value.productInfoList.map((x) => x.productId);
+      proxy
+        .post("/fileInfo/getList", {
+          businessIdList: arr,
+        })
+        .then((fileObj) => {
+          for (let i = 0; i < pdfData.value.productInfoList.length; i++) {
+            const e = pdfData.value.productInfoList[i];
+            for (const key in fileObj) {
+              if (e.productId === key) {
+                e.fileList = fileObj[key];
+              }
+            }
+          }
+        });
+    }
   });
 };
-getDict();
 watch(
   props.rowData,
   () => {

src/components/contractCom/contractDetails.vue

@@ -37,11 +37,10 @@
             >
           </div>
           <div v-if="activeName === 'first'">
-            <!-- <ContractPDF :rowData="rowData"></ContractPDF> -->
             <ContractPDFOne :rowData="rowData"></ContractPDFOne>
           </div>
           <div v-if="activeName === 'second'">
-            <PurchasePDF :rowData="rowDataOne"></PurchasePDF>
+            <purchasePDFOne :rowData="rowDataOne"></purchasePDFOne>
           </div>
         </div>
         <div v-else style="padding-left: 300px">暂无数据</div>
@@ -72,8 +71,7 @@
 </template>
 
 <script setup>
-import PurchasePDF from "@/components/PDF/purchasePDF.vue";
-import ContractPDF from "@/components/PDF/contractPDF.vue";
+import purchasePDFOne from "@/components/PDF/purchasePDF.vue";
 import ContractPDFOne from "@/components/PDF/contractPDFOne.vue";
 
 import byTable from "@/components/byTable/index";

src/components/contractCom/contractDetailsOne.vue

@@ -0,0 +1,247 @@
+<template>
+  <div>
+    <el-tabs
+      v-model="activeName"
+      class="demo-tabs"
+      @tab-click="handleClick"
+      @tab-change="handleChange"
+      stretch
+    >
+      <el-tab-pane label="销售合同" name="first"></el-tab-pane>
+      <el-tab-pane label="采购合同" name="second"></el-tab-pane>
+      <el-tab-pane label="交易明细" name="third"></el-tab-pane>
+    </el-tabs>
+    <div class="content-box" v-if="activeName !== 'third'">
+      <div class="left">
+        <div
+          v-for="i in leftList"
+          :key="i.id"
+          class="left-item"
+          :style="{ color: currentItem.id === i.id ? '#409eff' : '' }"
+          @click="handleItemClick(i)"
+        >
+          <div v-if="activeName === 'first'">v {{ i.version }}</div>
+          <div v-if="activeName === 'second'">
+            {{ i.code }}
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div v-if="leftList && leftList.length > 0">
+          <div
+            style="text-align: right; margin-bottom: 20px"
+            v-if="activeName === 'first'"
+          >
+            <el-button type="primary" @click="pushProcessApproval(currentItem)"
+              >查看详情</el-button
+            >
+          </div>
+          <div v-if="activeName === 'first'">
+            <SamplePDF :rowData="rowData"></SamplePDF>
+          </div>
+          <div v-if="activeName === 'second'">
+            <purchasePDFOne :rowData="rowDataOne"></purchasePDFOne>
+          </div>
+        </div>
+        <div v-else style="padding-left: 300px">暂无数据</div>
+      </div>
+    </div>
+    <div v-if="activeName === 'third'">
+      <byTable
+        :hidePagination="true"
+        :hideSearch="true"
+        :source="tableData"
+        :config="config"
+        highlight-current-row
+        :action-list="[]"
+      >
+        <template #amount="{ item }">
+          <div>{{ item.currency }} {{ moneyFormat(item.amount, 2) }}</div>
+        </template>
+        <template #accountManagementName="{ item }">
+          <div>
+            {{ item.accountManagementName }} （{{
+              item.accountManagementOpening
+            }}）
+          </div>
+        </template>
+      </byTable>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import purchasePDFOne from "@/components/PDF/purchasePDF.vue";
+import SamplePDF from "@/components/PDF/samplePDF.vue";
+
+import byTable from "@/components/byTable/index";
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  contractId: String,
+});
+const activeName = ref("first");
+const currentItem = ref({});
+const rowData = ref({});
+const rowDataOne = ref({});
+const leftList = ref([]);
+const contractDataList = ref([]);
+const purchaseDataList = ref([]);
+const tableData = ref([]);
+const transactionType = ref([
+  {
+    label: "请款",
+    value: "1",
+  },
+  {
+    label: "采购付款",
+    value: "20",
+  },
+  {
+    label: "到账认领",
+    value: "30",
+  },
+]);
+const config = computed(() => {
+  return [
+    {
+      attrs: {
+        label: "交易时间",
+        prop: "createTime",
+        width: 155,
+      },
+    },
+    {
+      attrs: {
+        label: "交易类型",
+        prop: "type",
+        width: 80,
+      },
+      render(type) {
+        return proxy.dictValueLabel(type, transactionType.value);
+      },
+    },
+    {
+      attrs: {
+        label: "交易金额",
+        prop: "amount",
+        slot: "amount",
+        width: 130,
+      },
+    },
+    {
+      attrs: {
+        label: "摘要",
+        prop: "remarks",
+      },
+    },
+    {
+      attrs: {
+        label: "资金账户",
+        prop: "accountManagementName",
+        slot: "accountManagementName",
+      },
+    },
+    {
+      attrs: {
+        label: "对方账户",
+        prop: "name",
+        width: 120,
+      },
+    },
+  ];
+});
+const handleClick = () => {};
+
+const handleItemClick = (item) => {
+  currentItem.value = item;
+  if (activeName.value === "first") {
+    rowData.value = {
+      id: item.id,
+    };
+  } else if (activeName.value === "second") {
+    rowDataOne.value = {
+      id: item.id,
+    };
+  }
+};
+
+const pushProcessApproval = (row) => {
+  proxy.$router.push({
+    path: "/platform_manage/process/processApproval",
+    query: {
+      flowKey: "contract_flow",
+      id: row.flowId,
+      processType: 20,
+      random: proxy.random(),
+      flowName: "销售合同详情",
+    },
+  });
+  return;
+};
+const handleChange = (val) => {
+  if (val === "first") {
+    leftList.value = contractDataList.value;
+  }
+  if (val === "second") {
+    leftList.value = purchaseDataList.value;
+  }
+  if (leftList.value && leftList.value.length > 0) {
+    handleItemClick(leftList.value[0]);
+  }
+};
+const getDetailsData = () => {
+  proxy
+    .post("/contract/getVersionList", { id: props.contractId })
+    .then((res) => {
+      contractDataList.value = res;
+      leftList.value = contractDataList.value;
+      if (contractDataList.value && contractDataList.value.length > 0) {
+        handleItemClick(contractDataList.value[0]);
+      }
+    });
+  proxy
+    .post("/contract/getPurchaseListByContractId", { id: props.contractId })
+    .then((res) => {
+      purchaseDataList.value = res;
+    });
+
+  proxy
+    .post("/contract/getAccountRunningWaterByContractId", {
+      id: props.contractId,
+    })
+    .then((res) => {
+      tableData.value = res;
+    });
+};
+// getDetailsData();
+</script>
+
+<style lang="scss" scoped>
+.content-box {
+  display: flex;
+  .left {
+    width: 100px;
+    // background: #ccc;
+    .left-item {
+      height: 36px;
+      line-height: 36px;
+      text-align: center;
+      cursor: pointer;
+    }
+  }
+  .right {
+    width: calc(100% - 100px);
+    padding-left: 10px;
+  }
+}
+.baseRow {
+  min-height: 24px;
+  border-top: 1px solid black;
+  border-left: 1px solid black;
+}
+.contentRow {
+  border-right: 1px solid black;
+  line-height: 24px;
+  padding-left: 4px;
+}
+</style>

src/views/EHSD/saleContract/contractEHSD/index.vue

@@ -97,346 +97,8 @@
       </byTable>
     </div>
 
-    <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="860">
-      <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.sellCountryName }},{{
-            printDetails.sellProvinceName
-          }},{{ printDetails.sellCityName }},{{
-            printDetails.sellDetailedAddress
-          }}
-        </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>
-        </div>
-        <div style="border: 1px solid black; display: flex">
-          <div style="width: 50%; border-right: 1px solid black">
-            <div style="color: #409eff">VENDOR:</div>
-            <div>{{ printDetails.sellCorporationNameEn }}</div>
-            <div style="padding: 16px 0">
-              {{ printDetails.sellCountryName }},{{
-                printDetails.sellProvinceName
-              }},{{ printDetails.sellCityName }},{{
-                printDetails.sellDetailedAddress
-              }}
-            </div>
-            <div>
-              {{ printDetails.sellContactName }},{{
-                printDetails.sellContactNumber
-              }}
-            </div>
-          </div>
-          <div style="width: 50%">
-            <div style="color: #409eff">BUYER:</div>
-            <div>{{ printDetails.buyCorporationName }}</div>
-            <div style="padding: 16px 0">
-              {{ printDetails.buyCountryName }},{{
-                printDetails.buyProvinceName
-              }},{{ printDetails.buyCityName }},{{
-                printDetails.buyDetailedAddress
-              }}
-            </div>
-            <div>
-              {{ printDetails.buyContactName }},{{
-                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="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="color: #409eff">COUNTRY OF DESTINATION:</div>
-              <div>{{ printDetails.buyCountryName }}</div>
-            </div>
-            <div style="width: 33%; border-bottom: 1px solid black">
-              <div style="color: #409eff">PLACE OF DISCHARGE:</div>
-              <div>{{ printDetails.transportRemark }}</div>
-            </div>
-          </div>
-          <div style="display: flex; width: 100%">
-            <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="color: #409eff">CURRENCY:</div>
-              <div>
-                {{ dictValueLabel(printDetails.currency, accountCurrency) }}
-              </div>
-            </div>
-            <div style="width: 33%; border-bottom: 1px solid black">
-              <div style="color: #409eff">EXPORT BY/VIA:</div>
-              <div>
-                {{
-                  dictValueLabel(printDetails.transportMethod, shippingMethod)
-                }}
-              </div>
-            </div>
-          </div>
-          <div style="display: flex; width: 100%">
-            <div style="width: 33%; border-right: 1px solid black">
-              <div style="color: #409eff">DELIVERY TIME:</div>
-              <div>{{ printDetails.deliveryTime }}</div>
-            </div>
-            <div style="width: 67%">
-              <div style="color: #409eff">TERMS OF PAYMENT:</div>
-              <div>{{ printDetails.remark }}</div>
-            </div>
-          </div>
-        </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>
-        <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"
-            >
-              {{ item.productName }}
-            </div>
-            <div class="contentRow" style="width: 100px; text-align: center">
-              {{ item.productUnit }}
-            </div>
-            <div class="contentRow" style="width: 100px; text-align: center">
-              {{ item.productQuantity }}
-            </div>
-            <div class="contentRow" style="width: 100px; text-align: center">
-              {{ item.productPrice }}
-            </div>
-            <div class="contentRow" style="width: 100px; text-align: center">
-              {{ item.amount }}
-            </div>
-          </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: 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">
-            {{ statistics("amount", 2) }}
-          </div>
-        </div>
-        <!-- <div v-if="printDetails.quotationPayList && printDetails.quotationPayList.length > 0">
-          <div class="baseRow" style="display: flex" v-for="(item, index) in printDetails.quotationPayList" :key="index">
-            <div class="contentRow" style="width: calc(100% - 100px); text-align: right; color: #409eff">{{ item.payName }}:</div>
-            <div class="contentRow" style="width: 100px; text-align: center">{{ item.amount }}</div>
-          </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: 100px; text-align: center">
-            0
-          </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: 100px; text-align: center">
-            {{ statistics("amount", 2) }}
-          </div>
-        </div>
-        <div
-          class="baseRow"
-          style="display: flex; border-bottom: 1px solid black"
-        >
-          <div class="contentRow" style="width: 100%">
-            {{
-              translateIntoEnglish(
-                printDetails.totalAmount,
-                printDetails.currency
-              )
-            }}
-          </div>
-        </div>
-        <div style="height: 16px"></div>
-        <div class="baseRow" style="color: #409eff">
-          <div class="contentRow" style="width: 100%">ACCOUNT INFORMATION:</div>
-        </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;
-              "
-            >
-              Beneficiary Name: {{ printDetails.beneficiaryName }}
-            </div>
-            <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;
-              "
-            >
-              Beneficiary Bank Address:
-              {{ printDetails.beneficiaryBankAddress }}
-            </div>
-            <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;
-              "
-            >
-              Beneficiary Address: {{ printDetails.beneficiaryAddress }}
-            </div>
-          </div>
-        </div>
-        <div style="height: 32px"></div>
-        <div style="display: flex">
-          <div style="width: 50%">
-            <div style="color: #409eff">CONFIRMED BY VENDOR:</div>
-            <div>{{ printDetails.sellCorporationNameEn }}</div>
-          </div>
-          <div style="width: 50%">
-            <div style="color: #409eff">CONFIRMED BY BUYER:</div>
-            <div>{{ printDetails.buyCorporationName }}</div>
-          </div>
-        </div>
-      </div>
+    <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="920">
+      <ContractPDFOne :rowData="rowData"></ContractPDFOne>
       <template #footer>
         <el-button @click="openPrint = false" size="large">取消</el-button>
         <el-button type="primary" @click="clickDownload()" size="large"
@@ -496,6 +158,7 @@
         >
       </template>
     </el-dialog>
+
     <el-dialog
       title="合同详情"
       v-if="openDetailsDialog"
@@ -514,6 +177,7 @@ import byForm from "@/components/byForm/index";
 import useUserStore from "@/store/modules/user";
 import { ElMessage, ElMessageBox } from "element-plus";
 import ContractDetails from "@/components/contractCom/contractDetails.vue";
+import ContractPDFOne from "@/components/PDF/contractPDFOne.vue";
 
 const { proxy } = getCurrentInstance();
 const accountCurrency = ref([]);
@@ -851,31 +515,16 @@ const newContract = () => {
   });
 };
 const openPrint = ref(false);
-const printDetails = ref({});
+const rowData = ref({});
 const clickPrint = (row) => {
-  printDetails.value = {};
+  rowData.value = {
+    id: row.id,
+  };
   openPrint.value = true;
-  proxy.post("/contract/getContractPdfInfo", { id: row.id }).then((res) => {
-    printDetails.value = res;
-  });
 };
 const clickDownload = () => {
   proxy.getPdf("外销合同PDF文件");
 };
-const statistics = (label, index) => {
-  let num = 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);
-      }
-    });
-  }
-  return num;
-};
 const openHandoverSlip = ref(false);
 const handoverSlipForm = ref({
   id: "",

src/views/EHSD/saleContract/sampleEHSD/index.vue

@@ -152,7 +152,17 @@
       v-model="openDetailsDialog"
       width="1100"
     >
-      <ContractDetails :contractId="currentContractId"></ContractDetails>
+      <ContractDetailsOne :contractId="currentContractId"></ContractDetailsOne>
+    </el-dialog>
+
+    <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="920">
+      <SamplePDF :rowData="rowData"></SamplePDF>
+      <template #footer>
+        <el-button @click="openPrint = false" size="large">取消</el-button>
+        <el-button type="primary" @click="clickDownload()" size="large"
+          >下载PDF</el-button
+        >
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -163,7 +173,8 @@ import byTable from "@/components/byTable/index";
 import byForm from "@/components/byForm/index";
 import useUserStore from "@/store/modules/user";
 import { ElMessage, ElMessageBox } from "element-plus";
-import ContractDetails from "@/components/contractCom/contractDetails.vue";
+import ContractDetailsOne from "@/components/contractCom/contractDetailsOne.vue";
+import SamplePDF from "@/components/PDF/samplePDF.vue";
 
 const { proxy } = getCurrentInstance();
 const accountCurrency = ref([]);
@@ -345,7 +356,7 @@ const config = computed(() => {
     {
       attrs: {
         label: "操作",
-        width: 140,
+        width: 160,
         align: "center",
         fixed: "right",
       },
@@ -364,6 +375,17 @@ const config = computed(() => {
           },
           {
             attrs: {
+              label: "打印",
+              type: "primary",
+              text: true,
+            },
+            el: "button",
+            click() {
+              clickPrint(row);
+            },
+          },
+          {
+            attrs: {
               label: "作废",
               type: "primary",
               text: true,
@@ -721,6 +743,15 @@ const clickCorporationName = (row) => {
     },
   });
 };
+
+const openPrint = ref(false);
+const rowData = ref({});
+const clickPrint = (row) => {
+  rowData.value = {
+    id: row.id,
+  };
+  openPrint.value = true;
+};
 </script>
 
 <style lang="scss" scoped>