byte-sailing-new/src/components/PDF/contractPDF.vue

<template>
  <div>
    <div id="printMe">
      <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 }}
        </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.sellDetailedAddress }},{{ printDetails.sellCityName }},{{ printDetails.sellProvinceName }},{{ printDetails.sellCountryName }}
            </div>
            <div>CONTACT: {{ printDetails.sellContactName }}</div>
            <div>TEL.: {{ printDetails.sellContactNumber }}</div>
          </div>
          <div style="width: 50%">
            <div style="color: #409eff">BUYER:</div>
            <div>{{ printDetails.buyCorporationName }}</div>
            <div style="padding: 16px 0">
              {{ printDetails.buyDetailedAddress }},{{ printDetails.buyCityName }},{{ printDetails.buyProvinceName }},{{ printDetails.buyCountryName }}
            </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="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>
                {{ printDetails.currency }}
              </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">
              {{ dictValueLabel(item.productUnit, 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">
            {{ 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: 100px; text-align: center">
            {{ printDetails.totalAmount }}
          </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>
    </div>
  </div>
</template>

<script setup>
import { NumberToChinese } from "@/utils/util.js";
import { watch } from "vue";
const { proxy } = getCurrentInstance();
const printDetails = 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,
    }));
  });
};
getDict();
watch(
  props,
  () => {
    if (props.rowData) {
      if (props.rowData.id) {
        getPdfData({ id: props.rowData.id });
      } else if (props.rowData.code) {
        getPdfData({ code: props.rowData.code });
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.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>