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

<template>
  <div>
    <div id="pdfDom" ref="pdfDom" style="width: 776px">
      <div style="border: 1px solid #000; border-collapse: collapse">
        <div style="text-align: right; padding: 2px 4px 0 0">
          合同号：{{ pdfData.code }}
        </div>
        <div class="title">购销合同</div>
        <div style="display: flex">
          <div style="display: flex; width: 50%; padding-right: 20px">
            <div style="width: 60px">买方：</div>
            <div style="width: calc(100% - 60px)">
              <div>福建宏星电子科技有限公司</div>
              <div>福建省福州市鼓楼区软件大道89号福州软件园A区28号楼五层</div>
            </div>
          </div>
          <div style="display: flex; width: 50%; padding-left: 20px">
            <div style="width: 60px">卖方：</div>
            <div style="width: calc(100% - 60px)">
              {{ pdfData.supplyName }}
            </div>
          </div>
        </div>
        <div style="display: flex">
          <div style="display: flex; width: 50%; padding-right: 20px">
            <div style="width: 60px">经手人：</div>
            <div style="width: calc(100% - 60px)">
              {{ pdfData.purchaseName }}
            </div>
          </div>
          <div style="display: flex; width: 50%; padding-left: 20px">
            <div style="width: 60px">经手人：</div>
            <div style="width: calc(100% - 60px)">
              {{ pdfData.contactPerson }}
            </div>
          </div>
        </div>
        <div>买卖双方经协商，一致同意签订以下合同</div>
        <div>货物名称、规格型号、单位、数量、单价及金额:</div>
        <table border="1" style="width: 100%" class="table">
          <tr>
            <td style="width: 70px">序号</td>
            <td>品名</td>
            <td>规格型号</td>
            <td style="width: 60px">单位</td>
            <td style="width: 60px">数量</td>
            <td style="width: 100px">单价</td>
            <td style="width: 100px">金额</td>
          </tr>
          <tr v-for="(row, index) in pdfData.purchaseDetailList" :key="row.id">
            <td style="width: 70px">{{ index + 1 }}</td>
            <td>{{ row.productName }}</td>
            <td>{{ row.productSpec }}</td>
            <td style="width: 60px">{{ row.productUnitName }}</td>
            <td style="width: 60px">{{ row.count }}</td>
            <td style="width: 100px">
              <span v-if="pdfData.currency">{{ pdfData.currency }}</span
              >{{ row.price }}
            </td>
            <td style="width: 100px">
              <span v-if="pdfData.currency">{{ pdfData.currency }}</span
              >{{ row.amount }}
            </td>
          </tr>
          <tr>
            <td colspan="4" style="text-align: right">其他收费项目：</td>
            <td></td>
            <td></td>
            <td>
              <span v-if="pdfData.currency">{{ pdfData.currency }}</span
              >{{ pdfData.otherMoney }}
            </td>
          </tr>
          <tr>
            <td colspan="4" style="text-align: right">合计：</td>
            <td>{{ pdfData.countTotal }}</td>
            <td></td>
            <td>
              <span v-if="pdfData.currency">{{ pdfData.currency }}</span
              >{{ pdfData.amount }}
            </td>
          </tr>
          <tr>
            <td colspan="7" style="text-align: left">
              合计人民币金额（大写）：{{ pdfData.moneyChinese }}
            </td>
          </tr>
          <tr>
            <td>交货地点：</td>
            <td colspan="6" style="text-align: left">
              福建省福州市鼓楼区软件大道89号福州软件园A区28号楼五层
            </td>
          </tr>
          <!-- <tr>
              <td>交货时间：</td>
              <td colspan="6" style="text-align: left"></td>
            </tr> -->
          <tr>
            <td>保修期：</td>
            <td colspan="6" style="text-align: left">一年</td>
          </tr>
          <tr>
            <td colspan="7" style="text-align: left; padding: 0px">
              <div style="padding: 2px 0px">
                一、交货地点：福州软件园A区28座5层。
              </div>
              <div style="padding: 2px 0px">二、运输方式及运费：买方承担。</div>
              <div style="padding: 2px 0px">
                三、质量要求：样品品质、型号、规格、数量如同买方确认上表规格所示，不符合则由卖方承担责任。
              </div>
              <div style="padding: 2px 0px">四、交货时间：2023年4月13日。</div>
              <div style="padding: 2px 0px">五、付款方式：银行转账。</div>
              <div style="padding: 2px 0px">六、保修期：一年。</div>
              <div style="padding: 2px 0px">
                七、本合同经买卖双方签字盖章后生效，传真件有效。
              </div>
              <div style="padding: 2px 0px">
                八、解决合同纠纷：原双方另有约定外，均按《中华人民共和国合同法》有关规定处理。
              </div>
              <div style="padding: 2px 0px">九、其他约定事项：友好解决。</div>
            </td>
          </tr>
        </table>
        <div style="display: flex">
          <div style="width: 50%; padding-right: 20px">
            <div>买方：</div>
            <div>单位名称：福建宏星电子科技有限公司</div>
            <div>
              地址：福建省福州市鼓楼区软件大道89号福州软件园A区28号楼五层
            </div>
            <div>电话：</div>
            <div>传真：</div>
            <div style="opacity: 0">|</div>
            <div style="margin-top: auto">代表人签字：</div>
          </div>
          <div style="width: 50%; padding-left: 20px">
            <div>卖方：</div>
            <div>单位名称：{{ pdfData.supplyName }}</div>
            <div>统一社会信用代码：</div>
            <div>开户银行：{{ pdfData.openingBank }}</div>
            <div>帐号：{{ pdfData.accountOpening }}</div>
            <div>
              地址：<span
                v-if="
                  pdfData.supplyAddress && pdfData.supplyAddress.countryName
                "
                >{{ pdfData.supplyAddress.countryName }}</span
              >
              <span
                v-if="
                  pdfData.supplyAddress && pdfData.supplyAddress.provinceName
                "
                >,{{ pdfData.supplyAddress.provinceName }}</span
              >
              <span
                v-if="pdfData.supplyAddress && pdfData.supplyAddress.cityName"
                >,{{ pdfData.supplyAddress.cityName }}</span
              >
              <span
                v-if="pdfData.supplyAddress && pdfData.supplyAddress.areaDetail"
                >,{{ pdfData.supplyAddress.areaDetail }}</span
              >
            </div>
            <div>电话：{{ pdfData.contactNumber }}</div>
            <div>代表人签字：</div>
          </div>
        </div>
        <div
          style="
            padding: 30px 0px 20px 0;
            text-align: right;
            border-top: 1px solid #000;
          "
        >
          签订日期：{{ pdfData.approvedDate }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { NumberToChinese } from "@/utils/util.js";
const { proxy } = getCurrentInstance();
const pdfData = ref({});
const props = defineProps({
  rowData: Object,
});
const productUnit = ref([]);
proxy.getDictOne(["unit"]).then((res) => {
  productUnit.value = res["unit"].map((x) => ({
    label: x.dictValue,
    value: x.dictKey,
  }));
});
const handlePrintPdf = (row) => {
  proxy.post("/purchase/detail", { id: row.id }).then((res) => {
    proxy
      .post("/supplierInfo/detail", { id: res.supplyId })
      .then((supplyData) => {
        res.contactPerson = supplyData.contactPerson;
        res.contactNumber = supplyData.contactNumber;
        res.openingBank = supplyData.openingBank;
        res.accountOpening = supplyData.accountOpening;
        let countTotal = 0;
        let productMoney = 0;
        for (let i = 0; i < res.purchaseDetailList.length; i++) {
          const e = res.purchaseDetailList[i];
          e.productUnitName = proxy.dictValueLabel(
            e.productUnit,
            productUnit.value
          );
          countTotal += Number(e.count);
          productMoney += Number(e.amount);
        }
        res.countTotal = countTotal;
        res.productMoney = productMoney;
        res.otherMoney = res.amount - res.productMoney;
        res.moneyChinese = NumberToChinese(res.amount);
        res.supplyAddress = {
          countryName: supplyData.countryName,
          provinceName: supplyData.provinceName,
          cityName: supplyData.cityName,
          areaDetail: supplyData.areaDetail,
        };
        if (res.approvedDate) {
          res.approvedDate = res.approvedDate.slice(0, 10);
        }
        pdfData.value = res;
      });
  });
};

if (props.rowData && props.rowData.id) {
  handlePrintPdf(props.rowData);
}

watch(
  () => props.rowData.id,
  (val) => {
    if (props.rowData && props.rowData.id) {
      handlePrintPdf(props.rowData);
    }
  }
);
</script>

<style lang="scss" scoped>
#pdfDom {
  font-size: 12px;
  color: #000000;
  padding: 60px 30px;
  .title {
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
  }
  .table {
    // width: calc(100% + 2px) !important;
    border-collapse: collapse;
    border-spacing: 0;
    // margin-left: -1px;
    // margin-right: -1px;

    td {
      text-align: center;
      padding: 8px 0px;
    }
    // tr td:last-child {
    //   border-right: 0 !important;
    // }
  }
  .flex-top-bottom {
    display: flex;
    justify-content: space-between;
    margin: 5px 0px;
  }
}
</style>