xmhjc-front-end/src/components/PDF/paymentPDF.vue

<template>
  <div>
    <div id="pdfDom" style="font-family: 'msyh'">
      <div style="padding: 60px; font-size: 12px !important; color: black">
        <div style="font-size: 16px; text-align: center; padding: 8px">
          <span
            >采购付款（
            {{ dictValueLabel(printDetails.type, payMethod) }}）</span
          >
        </div>
        <div style="padding: 8px 0">
          <span>创建时间: {{ printDetails.createTime }}</span>
        </div>
        <div style="border: 1px solid black">
          <div style="display: flex; border-bottom: 1px solid black">
            <div
              style="width: 80px; border-right: 1px solid black; padding: 8px"
            >
              创建人
            </div>
            <div style="width: calc(100% - 80px); padding: 8px">
              {{ dictValueLabel(printDetails.createUser, userList) }}
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div
              style="width: 80px; border-right: 1px solid black; padding: 8px"
            >
              创建人部门
            </div>
            <div style="width: calc(100% - 80px); padding: 8px">
              {{ dictValueLabel(printDetails.deptId, deptList) }}
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div
              style="
                width: 80px;
                border-right: 1px solid black;
                padding: 4px 8px;
                display: flex;
                align-items: center;
              "
            >
              费用明细
            </div>
            <div style="width: calc(100% - 80px)">
              <div style="border-bottom: 1px solid black; display: flex">
                <div
                  style="
                    width: 120px;
                    padding: 4px 8px;
                    border-right: 1px solid black;
                    text-align: center;
                  "
                >
                  采购合同
                </div>
                <div
                  style="
                    width: calc(100% - 260px);
                    padding: 4px 8px;
                    border-right: 1px solid black;
                    text-align: center;
                  "
                >
                  款项说明
                </div>
                <div
                  style="
                    width: 60px;
                    padding: 4px 8px;
                    border-right: 1px solid black;
                    text-align: center;
                  "
                >
                  货币
                </div>
                <div style="width: 80px; padding: 4px 8px; text-align: center">
                  付款金额
                </div>
              </div>
              <template
                v-if="
                  printDetails.payDetailVoList &&
                  printDetails.payDetailVoList.length > 0
                "
              >
                <div
                  v-for="(item, index) in printDetails.payDetailVoList"
                  :key="index"
                >
                  <div
                    :style="
                      index + 1 !== printDetails.payDetailVoList.length
                        ? 'border-bottom: 1px solid black;  display: flex'
                        : ' display: flex'
                    "
                  >
                    <div
                      style="
                        width: 120px;
                        padding: 4px 8px;
                        border-right: 1px solid black;
                        display: flex;
                        align-items: center;
                      "
                    >
                      {{ item.purchaseCode }}
                    </div>
                    <div
                      style="
                        width: calc(100% - 260px);
                        padding: 4px 8px;
                        border-right: 1px solid black;
                        display: flex;
                        align-items: center;
                      "
                    >
                      {{ item.remark }}
                    </div>
                    <div
                      style="
                        width: 60px;
                        padding: 4px 8px;
                        border-right: 1px solid black;
                        display: flex;
                        align-items: center;
                      "
                    >
                      人民币
                    </div>
                    <div
                      style="
                        width: 80px;
                        padding: 4px 8px;
                        display: flex;
                        align-items: center;
                      "
                    >
                      {{ item.money }}
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div
              style="width: 80px; border-right: 1px solid black; padding: 8px"
            >
              总报销金额
            </div>
            <div style="width: calc(100% - 80px); display: flex">
              <div
                style="
                  width: calc(100% - 140px);
                  padding: 8px;
                  border-right: 1px solid black;
                "
              >
                {{ NumberToChinese(computeMoney()) }}
              </div>
              <div style="width: 140px; padding: 8px">{{ computeMoney() }}</div>
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div
              style="width: 80px; border-right: 1px solid black; padding: 8px"
            >
              单据数量
            </div>
            <div style="width: calc(100% - 80px); padding: 8px">
              {{ printDetails.receiptsNum }}
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div
              style="
                width: 80px;
                border-right: 1px solid black;
                padding: 0 8px;
                display: flex;
                align-items: center;
              "
            >
              收款信息
            </div>
            <div style="width: calc(100% - 80px)">
              <div style="border-bottom: 1px solid black; display: flex">
                <div
                  style="
                    width: 19%;
                    padding: 0 8px;
                    border-right: 1px solid black;
                    text-align: center;
                  "
                >
                  支付方式
                </div>
                <div
                  style="
                    width: 22%;
                    padding: 0 8px;
                    border-right: 1px solid black;
                    text-align: center;
                  "
                >
                  收款方户名
                </div>
                <div
                  style="
                    width: 20%;
                    padding: 0 8px;
                    border-right: 1px solid black;
                    text-align: center;
                  "
                >
                  开户行
                </div>
                <div style="width: 39%; padding: 0 8px; text-align: center">
                  收款方账号
                </div>
              </div>
              <div style="display: flex">
                <div
                  style="
                    width: 19%;
                    padding: 0 8px;
                    border-right: 1px solid black;
                    display: flex;
                    align-items: center;
                  "
                >
                  {{ dictValueLabel(printDetails.payType, fundsPaymentMethod) }}
                </div>
                <div
                  style="
                    width: 22%;
                    padding: 0 8px;
                    border-right: 1px solid black;
                    display: flex;
                    align-items: center;
                  "
                >
                  {{ printDetails.name }}
                </div>
                <div
                  style="
                    width: 20%;
                    padding: 0 8px;
                    border-right: 1px solid black;
                    display: flex;
                    align-items: center;
                  "
                >
                  {{ printDetails.openingBank }}
                </div>
                <div
                  style="
                    width: 39%;
                    padding: 0 8px;
                    display: flex;
                    align-items: center;
                  "
                >
                  {{ printDetails.accountOpening }}
                </div>
              </div>
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div
              style="width: 80px; border-right: 1px solid black; padding: 8px"
            >
              电子发票(PDF/JPG)
            </div>
            <div style="width: calc(100% - 80px); padding: 8px">
              {{ printDetails.electronicInvoiceText }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="
                width: 80px;
                border-right: 1px solid black;
                padding: 4px 8px;
                display: flex;
                align-items: center;
              "
            >
              审批流程
            </div>
            <div style="width: calc(100% - 80px)">
              <template
                v-if="
                  printDetails.recordList && printDetails.recordList.length > 0
                "
              >
                <div
                  v-for="(item, index) in printDetails.recordList"
                  :key="index"
                >
                  <div
                    :style="
                      index + 1 !== printDetails.recordList.length
                        ? 'border-bottom: 1px solid black; padding: 4px 8px; display: flex'
                        : 'padding: 4px 8px; display: flex'
                    "
                  >
                    <div
                      style="width: calc(100% - 120px); word-wrap: break-word"
                    >
                      <span>{{ item.nodeName }}: </span>
                      <span style="padding-left: 4px">{{
                        item.processedUser
                      }}</span>
                      <span style="padding-left: 4px"
                        >{{ item.remark
                        }}<span v-if="item.handleTypeName"
                          >（{{ item.handleTypeName }}）</span
                        ></span
                      >
                    </div>
                    <div style="width: 120px">{{ item.processedDate }}</div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div style="padding-top: 16px">
          <span>打印时间: {{ presentTime }}</span>
          <span style="padding-left: 32px"
            >打印人: {{ useUserStore().user.nickName }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import useUserStore from "@/store/modules/user";
import moment from "moment";
import { NumberToChinese } from "@/utils/util.js";

const { proxy } = getCurrentInstance();
const fundsPaymentMethod = ref([]);
const payMethod = ref([]);
const userList = ref([]);
const deptList = ref([]);
const getDict = () => {
  proxy.getDictOne(["funds_payment_method", "pay_method"]).then((res) => {
    fundsPaymentMethod.value = res["funds_payment_method"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
    payMethod.value = res["pay_method"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
  });
  proxy
    .get("/tenantUser/list", {
      pageNum: 1,
      pageSize: 10000,
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        userList.value = res.rows.map((item) => {
          return {
            deptId: item.deptId,
            label: item.nickName,
            value: item.userId,
          };
        });
      }
    });
  proxy
    .get("/tenantDept/list", {
      pageNum: 1,
      pageSize: 999,
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      if (res.data && res.data.length > 0) {
        deptList.value = res.data.map((item) => {
          return {
            label: item.deptName,
            value: item.deptId,
          };
        });
      }
    });
};
getDict();
const printDetails = ref({});
const presentTime = ref(moment().format("yyyy-MM-DD HH:mm:ss"));
const computeMoney = () => {
  let money = 0;
  if (
    printDetails.value.payDetailVoList &&
    printDetails.value.payDetailVoList.length > 0
  ) {
    for (let i = 0; i < printDetails.value.payDetailVoList.length; i++) {
      if (printDetails.value.payDetailVoList[i].money) {
        money = Number(
          parseFloat(
            Number(money) + Number(printDetails.value.payDetailVoList[i].money)
          ).toFixed(2)
        );
      }
    }
  }
  return money;
};
const props = defineProps({
  rowData: Object,
});
onMounted(() => {
  if (props.rowData && props.rowData.id) {
    proxy.post("/pay/detail", { id: props.rowData.id }).then((res) => {
      printDetails.value = res;
      if (printDetails.value.createUser) {
        let data = userList.value.filter(
          (item) => item.value == printDetails.value.createUser
        );
        if (data && data.length > 0) {
          printDetails.value.deptId = data[0].deptId;
        }
      }
      proxy
        .post("/fileInfo/getList", { businessIdList: [props.rowData.id] })
        .then((resFile) => {
          let electronicInvoiceText = "";
          if (
            resFile[props.rowData.id] &&
            resFile[props.rowData.id].length > 0
          ) {
            for (let i = 0; i < resFile[props.rowData.id].length; i++) {
              if (i === 0) {
                electronicInvoiceText = resFile[props.rowData.id][0].fileName;
              } else {
                electronicInvoiceText =
                  electronicInvoiceText +
                  ", " +
                  resFile[props.rowData.id][i].fileName;
              }
            }
          }
          printDetails.value.electronicInvoiceText = electronicInvoiceText;
        });
      if (res.flowExampleId) {
        proxy
          .post("/flowExample/getApprovalRecord", { id: res.flowExampleId })
          .then((record) => {
            printDetails.value.recordList = record.recordList;
          });
      }
    });
  }
});
</script>

<style lang="scss" scoped></style>