erp_fans/src/components/PDF/contractPDFOne.vue

<template>
  <div>
    <div id="pdfDom" ref="pdfDom" style="padding: 0px 20px; text-align: center;font-size:12px;color:#333333" v-loading="loading">
      <div class="title">
        福建三梵体育用品实业有限公司
      </div>
      <div class="title-info">
        <div class="vertical-bar"></div>
        <div class="content">销售订单</div>
      </div>
      <div style="display:flex;margin-bottom:20px; font-weight: 600;">
        <div style="width:50%;padding-right:20px">
          <div class="row">
            <div class="left">
              需方：
            </div>
            <div class="right">
              {{pdfData.buyCorporationName}}
            </div>
          </div>
          <div class="row">
            <div class="left">
              需方名称：
            </div>
            <div class="right">
              {{pdfData.buyCorporationName}}
            </div>
          </div>
          <div class="row">
            <div class="left">
              联系人：
            </div>
            <div class="right">
              {{pdfData.buyContactName}}
            </div>
          </div>
          <div class="row">
            <div class="left">
              联系电话：
            </div>
            <div class="right">
              {{pdfData.buyContactNumber}}
            </div>
          </div>
          <div class="row">
            <div class="left">
              传真：
            </div>
            <div class="right">
              {{pdfData.buyCorporationFax}}
            </div>
          </div>
        </div>
        <div style="width:50%">
          <div class="row">
            <div class="left">
              订单编号：
            </div>
            <div class="right">
              {{pdfData.contractCode}}
            </div>
          </div>
          <div class="row">
            <div class="left">
              下单日期：
            </div>
            <div v-if="pdfData.createTime" class="right">
              {{pdfData.createTime.substr(0,10)}} &nbsp;&nbsp;{{calculationWeek(pdfData.createTime)}}
            </div>
          </div>
          <div class="row">
            <div class="left">
              结算方式：
            </div>
            <div class="right">
              {{dictKeyValue(pdfData.paymentMethod,fundsPaymentMethod)}}
            </div>
          </div>
          <div class="row">
            <div class="left">
              业务员/联系电话：
            </div>
            <div class="right">
              {{pdfData.createUserName}} / {{pdfData.createUserPhone}}
            </div>
          </div>
          <div class="row">
            <div class="left">
              送货地址：
            </div>
            <div class="right">
              <span v-if="pdfData.buyCountryName">{{pdfData.buyCountryName}},</span>
              <span v-if="pdfData.buyProvinceName">{{pdfData.buyProvinceName}},</span>
              <span v-if="pdfData.buyCityName">{{pdfData.buyCityName}},</span>
              <span v-if="pdfData.buyDetailedAddress">{{pdfData.buyDetailedAddress}}</span>
            </div>
          </div>

        </div>
      </div>

      <table border="1" style="width: 100%" class="table">
        <tr>
          <td>序号</td>
          <td>产品名称</td>
          <td>规格型号</td>
          <td>产品纹路</td>
          <td> 颜色</td>
          <td>单位</td>
          <td>数量</td>
          <td>单价</td>
          <td>金额</td>
          <!-- <td>备注</td> -->
        </tr>

        <tr v-if="pdfData.productInfoList && pdfData.productInfoList.length > 0" v-for="(item, index) in pdfData.productInfoList" :key="item.id">
          <td>{{index+1}}</td>
          <td>{{item.productName}}</td>
          <td>{{item.productLength }}*{{item.productWidth}}*{{item.productHeight}}</td>
          <td>{{dictKeyValue(item.frontalTexture,frontLinesData)}}</td>
          <td>{{item.productColor}}</td>
          <td>{{dictKeyValue(item.productUnit,materialUnitData)}}</td>
          <td>{{moneyFormat(item.productQuantity)}}</td>
          <td>{{moneyFormat(item.productPrice)}}</td>
          <td>{{moneyFormat(item.amount)}}</td>
          <!-- <td>{{item.productRemark}}</td> -->
        </tr>
        <template v-if="
            pdfData.contractProjectList &&
            pdfData.contractProjectList.length > 0
          ">
          <tr v-for="(item, index) in pdfData.contractProjectList" :key="item.id">
            <td colspan="8" style="text-align: right">
              {{ item.payName }}：
            </td>
            <td colspan="2">
              {{ moneyFormat(item.amount, 2) }}
            </td>
          </tr>
        </template>
        <tr>
          <td colspan="8" style="text-align: right">
            合同总金额：
          </td>
          <td colspan="2">
            {{ moneyFormat(pdfData.totalAmount, 2) }}
          </td>
        </tr>
      </table>
      <div style="margin-top:20px;text-align:left">
        <!-- <div v-html="getHtmlVal(pdfData.templateContent)">
        </div> -->
        <div v-html="pdfData.templateContent"></div>
      </div>
      <div style="display:flex;margin-top:40px">
        <div style="width:50%">
          <div class="rowOne">
            <div class="left">
              需方签字并盖章：
            </div>
            <div class="right">

            </div>
          </div>
          <div class="rowOne">
            <div class="left">
              经办人：
            </div>
            <div class="right">

            </div>
          </div>
          <div class="rowOne">
            <div class="left">
              主管：
            </div>
            <div class="right">

            </div>
          </div>
          <div class="rowOne">
            <div class="left">
              日期：
            </div>
            <div class="right">

            </div>
          </div>
        </div>
        <div style="width:50%">
          <div class="rowOne">
            <div class="left">
              供方签字并盖章：
            </div>
            <div class="right">

            </div>
          </div>
          <div class="rowOne">
            <div class="left">
              经办人：
            </div>
            <div class="right">

            </div>
          </div>
          <div class="rowOne">
            <div class="left">
              主管：
            </div>
            <div class="right">

            </div>
          </div>
          <div class="rowOne">
            <div class="left">
              日期：
            </div>
            <div class="right">

            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="text-align: center;margin-top:20px">
      <el-button type="primary" v-print="printObj" size="default" v-debounce>打印</el-button>
      <el-button type="primary" @click="clickDownload()" size="default" v-debounce>下载PDF</el-button>
      <!-- <el-button type="primary" @click="exportExcel()" size="default" v-debounce>导出Excel</el-button> -->
    </div>
  </div>
</template>

<script setup>
import { NumberToChinese } from "@/utils/util.js";
import { calculationWeek } from "@/utils/util.js";
import $ from "jquery";
const { proxy } = getCurrentInstance();
const pdfData = ref({});
const props = defineProps({
  rowData: Object,
});
const materialUnitData = computed(
  () => proxy.useUserStore().allDict["material_unit"]
);
const frontLinesData = computed(
  () => proxy.useUserStore().allDict["front_lines"]
);
const fundsPaymentMethod = computed(
  () => proxy.useUserStore().allDict["funds_payment_method"]
);
const loading = ref(false);
const getPdfData = (query) => {
  loading.value = true;
  proxy.post("/contract/getContractPdfInfo", query).then((res) => {
    pdfData.value = res;
    loading.value = false;
  });
};
const productUnit = ref([]);
const tradeMethods = ref([]);
const getBalance = (val) => {
  if (val) {
    return proxy.moneyFormat(
      parseFloat(pdfData.value.totalAmount * (val / 100)).toFixed(2),
      2
    );
  }
};
const getHtmlVal = (val) => {
  if (val) {
    return val.replace(/<p>/g, "<div>").replace(/<\/p>/g, "</div>");
  }
  return "";
};

watch(
  () => props.rowData,
  (val) => {
    if (props.rowData.id) {
      getPdfData({ id: props.rowData.id });
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

const printObj = ref({
  id: "pdfDom",
  popTitle: "",
  extraCss:
    "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
});

const clickDownload = () => {
  proxy.getPdf("销售订单PDF文件");
};

const pdfDom = ref(null);
const exportExcel = () => {
  // pdfDom.value.exportExcel();
  // isShowImg.value = false;
  loading.value = true;
  setTimeout(() => {
    $("#pdfDom").table2excel({
      exclude: ".noExl",
      sheetName: `销售订单${pdfData.value.code}`,
      filename: `销售订单${pdfData.value.code}`,
      exclude_img: false,
      exclude_links: false,
      exclude_inputs: true,
    });
    // isShowImg.value = true;
    loading.value = false;
  }, 500);
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 28px;
  // font-weight: 700;
  text-align: center;
}
.title-info {
  text-align: center;
  width: 100%;
  margin: 20px 0 50px 0;
  .vertical-bar {
    width: 6px;
    height: 18px;
    background-color: #0084ff;
    // background-color: #000;
    margin-right: 9px;
    display: inline-block;
  }
  .content {
    // font-weight: 600;
    font-size: 32px;
    color: #333333;
    display: inline-block;
  }
}
.row {
  display: flex;
  // line-height: 28px;
  .left {
    width: 120px;
    text-align: justify;
    display: inline-block;
    &::after {
      content: "";
      display: inline-block;
      width: 100%;
    }
  }
  .right {
    width: calc(100% - 120px);
    text-align: left;
    line-height: 18px;
  }
}
.rowOne {
  display: flex;
  line-height: 32px;
  .left {
    width: 120px;
    text-align: left;
    // text-align: justify;
    // display: inline-block;
    // &::after {
    //   content: "";
    //   display: inline-block;
    //   width: 100%;
    // }
  }
  .right {
    width: calc(100% - 120px);
    text-align: left;
  }
}
.table {
  border-collapse: collapse;
  border-spacing: 0;

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