erp_ehsd/src/components/PDF/samplePDF.vue

<template>
  <div>
    <div id="pdfDom" ref="pdfDom" style="padding: 30px 60px">
      <table border="1" style="width: 100%" class="table">
        <tr>
          <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">
              {{ pdfData.sellCorporationName }}
            </div>

            <div style="font-size: 14px; color: #000">
              Address： {{ pdfData.sellDetailedAddressEn }}
            </div>
            <div style="font-size: 14px; color: #000; margin-top: 5px">
              {{ pdfData.sellCityNameEn }} , {{ pdfData.sellProvinceNameEn }} ,
              {{ pdfData.sellCountryNameEn }}
            </div>
            <div style="font-size: 14px; color: #000; margin-top: 10px">
              地址： {{ pdfData.sellCountryName }} ,
              {{ pdfData.sellProvinceName }} , {{ pdfData.sellCityName }}
            </div>
            <div style="font-size: 14px; color: #000; margin-top: 5px">
              {{ pdfData.sellDetailedAddress }}
            </div>
            <div style="margin: 8px 0; color: black">
              Tel: <span>{{ pdfData.sellContactNumber }}</span>
              <!-- Fax:
              <span>{{ pdfData.fax }}</span>
               Website:
              <span>{{ pdfData.Website }}</span> -->
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div
              class="color-class"
              style="text-align: center; font-size: 18px"
            >
              Sample Proforma Invoice
            </div>
          </td>
        </tr>
      </table>
      <div style="height: 15px; background: #7f197f"></div>
      <table border="1" style="width: 100%" class="table">
        <tr>
          <td style="width: 50%; text-align: left">
            Buyer: {{ pdfData.buyCorporationName }}
          </td>
          <td style="width: 50%; text-align: left">
            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%">{{ pdfData.contractCode }}</td>
          <td style="width: 15%">Date:</td>
          <td style="width: 35%">{{ pdfData.createTimeEn }}</td>
        </tr>
        <tr>
          <td style="width: 15%">Contact Person:</td>
          <td style="width: 35%">{{ pdfData.createUserNameEn }}</td>
          <td style="width: 15%">Email:</td>
          <td style="width: 35%">
            {{ pdfData.createUserEmail }}
          </td>
        </tr>
        <tr>
          <td style="width: 15%">Payment Teams:</td>
          <td style="width: 35%">{{ pdfData.remark }}</td>
          <td style="width: 15%">Lead Time:</td>
          <td style="width: 35%">{{ pdfData.deliveryTime }}</td>
        </tr>
      </table>
      <div style="height: 15px; background: #7f197f"></div>
      <table border="1" style="width: 100%" class="table">
        <tr>
          <td style="width: 15%">Image</td>
          <td style="width: 20%">Description</td>
          <td style="width: 15%">Size</td>
          <td style="width: 15%">Quantity</td>
          <td style="width: 17%">Sample <br />Fee</td>
          <td style="width: 18%">Total <br />Amount</td>
        </tr>

        <tr
          v-if="pdfData.productInfoList && pdfData.productInfoList.length > 0"
          v-for="(item, index) in pdfData.productInfoList"
          :key="item.productId"
        >
          <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.productName }}</td>
          <td style="width: 15%">{{ item.productModel }} cm</td>
          <td style="width: 15%">
            {{ item.productQuantity }}
          </td>
          <td style="width: 17%">
            {{ pdfData.currency }} {{ moneyFormat(item.productPrice, 2) }}
          </td>
          <td style="width: 18%">
            {{ pdfData.currency }} {{ moneyFormat(item.amount, 2) }}
          </td>
        </tr>
        <tr>
          <td colspan="5" style="text-align: right">Total Amount:</td>
          <td style="width: 10%">
            {{ 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 class="width-one" style="text-align: left">5.Banking Info</td>
          <td style="text-align: left">
            <div>Beneficiary Name: {{ pdfData.beneficiaryName }}</div>
            <div>Beneficiary Bank: {{ pdfData.beneficiaryBank }}</div>
            <div>
              Beneficiary Bank Address:
              {{ pdfData.beneficiaryBankAddress }}
            </div>
            <div>
              Beneficiary Account Number:
              {{ pdfData.beneficiaryAccountNumber }}
            </div>
            <div>Swift Code: {{ pdfData.swiftCode }}</div>
            <div>Beneficiary Address: {{ pdfData.beneficiaryAddress }}</div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script setup>
import { NumberToChinese } from "@/utils/util.js";
import { watch } from "vue";
const { proxy } = getCurrentInstance();
const pdfData = ref({});
const props = defineProps({
  rowData: Object,
});
const getPdfData = (query) => {
  proxy.post("/sample/getSamplePdfInfo", query).then((res) => {
    console.log(res, "ada");
    pdfData.value = res;
    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];
              }
            }
          }
        });
    }
  });
};
// if (props.rowData && props.rowData.id) {
//   getPdfData({ id: props.rowData.id });
// }
watch(
  props.rowData,
  () => {
    if (props.rowData.id) {
      getPdfData({ id: props.rowData.id });
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.color-class {
  color: #7f197f;
}
.bck {
  background: #7f197f;
}
.width-one {
  width: 140px;
}
.table {
  border-collapse: collapse;
  border-spacing: 0;

  td {
    text-align: center;
    padding: 2px 4px;
    // padding: 5px 10px;
  }
}
</style>