打款增加打印功能

src/components/PDF/fundsPDF.vue

@@ -0,0 +1,332 @@
+<template>
+  <div>
+    <div id="pdfDom" style="width: 776px">
+      <div style="padding: 60px 30px; font-size: 12px !important; color: black">
+        <div style="font-size: 16px; text-align: center; padding: 8px">
+          <span>{{ dictValueLabel(printDetails.type, fundsType) }}审批单</span>
+        </div>
+        <div style="padding: 8px 0">
+          <span>{{ printDetails.corporationName }}</span>
+          <span style="padding-left: 32px">创建时间: {{ printDetails.createTime }}</span>
+        </div>
+        <div style="border: 1px solid black">
+          <div style="display: flex; border-bottom: 1px solid black">
+            <div style="width: 126px; border-right: 1px solid black; padding: 8px">创建人</div>
+            <div style="width: calc(100% - 126px); padding: 8px">
+              {{ dictValueLabel(printDetails.createUser, userList) }}
+            </div>
+          </div>
+          <div style="display: flex; border-bottom: 1px solid black">
+            <div style="width: 126px; border-right: 1px solid black; padding: 8px">创建人部门</div>
+            <div style="width: calc(100% - 126px); padding: 8px">
+              {{ printDetails.deptName }}
+            </div>
+          </div>
+          <div style="display: flex; border-bottom: 1px solid black" v-if="printDetails.type !== '3'">
+            <div style="width: 126px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">费用明细</div>
+            <div style="width: calc(100% - 126px)">
+              <div style="border-bottom: 1px solid black; display: flex">
+                <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">费用类型</div>
+                <div style="width: 120px; padding: 4px 8px; border-right: 1px solid black; text-align: center">关联合同</div>
+                <div style="width: calc(100% - 360px); 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: 100px; padding: 4px 8px; text-align: center">付款金额</div>
+              </div>
+              <template v-if="printDetails.accountRequestFundsDetailList && printDetails.accountRequestFundsDetailList.length > 0">
+                <div v-for="(item, index) in printDetails.accountRequestFundsDetailList" :key="index">
+                  <div
+                    :style="
+                      index + 1 !== printDetails.accountRequestFundsDetailList.length ? 'border-bottom: 1px solid black;  display: flex' : ' display: flex'
+                    ">
+                    <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">
+                      {{ dictValueLabel(item.costType, fundsCostType) }}
+                    </div>
+                    <div style="width: 120px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
+                      {{ item.contractCode }}
+                    </div>
+                    <div style="width: calc(100% - 360px); padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
+                      {{ item.remarks }}
+                    </div>
+                    <div style="width: 60px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
+                      {{ dictValueLabel(printDetails.currency, accountCurrency) }}
+                    </div>
+                    <div style="width: 100px; padding: 4px 8px; display: flex; align-items: center">
+                      {{ item.amount }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+          <div style="display: flex; border-bottom: 1px solid black" v-else>
+            <div style="width: 126px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">费用明细</div>
+            <div style="width: calc(100% - 126px)">
+              <div style="border-bottom: 1px solid black; display: flex">
+                <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">费用类型</div>
+                <div style="width: 120px; padding: 4px 8px; border-right: 1px solid black; text-align: center">关联合同</div>
+                <div style="width: calc(100% - 420px); 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; 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.accountRequestFundsDetailList && printDetails.accountRequestFundsDetailList.length > 0">
+                <div v-for="(item, index) in printDetails.accountRequestFundsDetailList" :key="index">
+                  <div
+                    :style="
+                      index + 1 !== printDetails.accountRequestFundsDetailList.length ? 'border-bottom: 1px solid black;  display: flex' : ' display: flex'
+                    ">
+                    <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">
+                      {{ dictValueLabel(item.costType, fundsCostType) }}
+                    </div>
+                    <div style="width: 120px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
+                      {{ item.contractCode }}
+                    </div>
+                    <div style="width: calc(100% - 420px); padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
+                      {{ item.remarks }}
+                    </div>
+                    <div style="width: 60px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
+                      {{ dictValueLabel(printDetails.currency, accountCurrency) }}
+                    </div>
+                    <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
+                      {{ item.advanceAmount }}
+                    </div>
+                    <div style="width: 80px; padding: 4px 8px; display: flex; align-items: center">
+                      {{ item.amount }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+          <div style="display: flex; border-bottom: 1px solid black" v-if="printDetails.type !== '3'">
+            <div style="width: 126px; border-right: 1px solid black; padding: 8px">总报销金额</div>
+            <div style="width: calc(100% - 126px); display: flex">
+              <div style="width: calc(100% - 100px); padding: 8px; border-right: 1px solid black">
+                {{ NumberToChinese(computeMoney("amount")) }}
+              </div>
+              <div style="width: 100px; padding: 8px">
+                {{ computeMoney("amount") }}
+              </div>
+            </div>
+          </div>
+          <div v-else>
+            <div style="display: flex; border-bottom: 1px solid black">
+              <div style="width: 126px; border-right: 1px solid black; padding: 8px">核销总金额</div>
+              <div style="width: calc(100% - 126px); display: flex">
+                <div style="width: calc(100% - 80px); padding: 8px; border-right: 1px solid black">
+                  {{ NumberToChinese(computeMoney("amount")) }}
+                </div>
+                <div style="width: 80px; padding: 8px">
+                  {{ computeMoney("amount") }}
+                </div>
+              </div>
+            </div>
+            <div style="display: flex; border-bottom: 1px solid black">
+              <div style="width: 126px; border-right: 1px solid black; padding: 8px">预支总金额</div>
+              <div style="width: calc(100% - 126px); display: flex">
+                <div style="width: calc(100% - 80px); padding: 8px; border-right: 1px solid black">
+                  {{ NumberToChinese(computeMoney("advanceAmount")) }}
+                </div>
+                <div style="width: 80px; padding: 8px">
+                  {{ computeMoney("advanceAmount") }}
+                </div>
+              </div>
+            </div>
+            <div style="display: flex; border-bottom: 1px solid black">
+              <div style="width: 126px; border-right: 1px solid black; padding: 8px">差额 (核销 - 预支)</div>
+              <div style="width: calc(100% - 126px); display: flex">
+                <div style="width: calc(100% - 80px); padding: 8px; border-right: 1px solid black">
+                  {{ NumberToChinese(computeBalance()) }}
+                </div>
+                <div style="width: 80px; padding: 8px">
+                  {{ computeBalance() }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div style="display: flex; border-bottom: 1px solid black">
+            <div style="width: 126px; border-right: 1px solid black; padding: 8px">单据数量</div>
+            <div style="width: calc(100% - 126px); padding: 8px">
+              {{ printDetails.quantity }}
+            </div>
+          </div>
+          <div style="display: flex; border-bottom: 1px solid black">
+            <div style="width: 126px; border-right: 1px solid black; padding: 0 8px; display: flex; align-items: center">收款信息</div>
+            <div style="width: calc(100% - 126px)">
+              <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: 27%; padding: 0 8px; border-right: 1px solid black; text-align: center">收款方户名</div>
+                <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; text-align: center">开户行</div>
+                <div style="width: 27%; 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.paymentMethod, fundsPaymentMethod) }}
+                </div>
+                <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
+                  {{ printDetails.name }}
+                </div>
+                <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
+                  {{ printDetails.openingBank }}
+                </div>
+                <div style="width: 27%; 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: 126px; border-right: 1px solid black; padding: 8px">电子发票(PDF/JPG)</div>
+            <div style="width: calc(100% - 126px); padding: 8px">
+              {{ printDetails.electronicInvoiceText }}
+            </div>
+          </div>
+          <div style="display: flex">
+            <div style="width: 126px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">审批流程</div>
+            <div style="width: calc(100% - 126px)">
+              <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>
+                    </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 { ref } from "vue";
+import { NumberToChinese } from "@/utils/util.js";
+import moment from "moment";
+
+const { proxy } = getCurrentInstance();
+const fundsType = ref([]);
+const userList = ref([]);
+const companyData = ref([]);
+const accountCurrency = ref([]);
+const fundsCostType = ref([]);
+const fundsPaymentMethod = ref([]);
+const getDictData = () => {
+  proxy.getDictOne(["founds_type", "funds_payment_method", "account_currency", "funds_cost_type"]).then((res) => {
+    fundsType.value = res["founds_type"].map((x) => ({
+      label: x.dictValue,
+      value: x.dictKey,
+    }));
+    fundsPaymentMethod.value = res["funds_payment_method"].map((x) => ({
+      label: x.dictValue,
+      value: x.dictKey,
+    }));
+    accountCurrency.value = res["account_currency"].map((x) => ({
+      label: x.dictValue,
+      value: x.dictKey,
+    }));
+    fundsCostType.value = res["funds_cost_type"].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.post("/corporation/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
+    if (res.rows && res.rows.length > 0) {
+      companyData.value = res.rows.map((item) => {
+        return {
+          label: item.name,
+          value: item.id,
+        };
+      });
+    }
+  });
+};
+getDictData();
+const printDetails = ref({});
+const presentTime = ref(moment().format("yyyy-MM-DD HH:mm:ss"));
+const computeMoney = (label) => {
+  let amount = 0;
+  if (printDetails.value.accountRequestFundsDetailList && printDetails.value.accountRequestFundsDetailList.length > 0) {
+    for (let i = 0; i < printDetails.value.accountRequestFundsDetailList.length; i++) {
+      if (printDetails.value.accountRequestFundsDetailList[i][label]) {
+        amount = Number(parseFloat(Number(amount) + Number(printDetails.value.accountRequestFundsDetailList[i][label])).toFixed(2));
+      }
+    }
+  }
+  return amount;
+};
+const computeBalance = () => {
+  let balance = 0;
+  let advanceAmount = computeMoney("advanceAmount");
+  let amount = computeMoney("amount");
+  if (amount) {
+    balance = Number(amount);
+  }
+  if (advanceAmount) {
+    balance = Number(parseFloat(Number(balance) - Number(advanceAmount)).toFixed(2));
+  }
+  return balance;
+};
+const props = defineProps({
+  rowData: Object,
+});
+onMounted(() => {
+  if (props.rowData && props.rowData.id) {
+    proxy.post("/accountRequestFunds/detail", { id: props.rowData.id }).then((res) => {
+      printDetails.value = res;
+      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.flowInfoId) {
+        proxy.post("/flowExample/getApprovalRecord", { id: res.flowInfoId }).then((record) => {
+          printDetails.value.recordList = record.recordList;
+        });
+      }
+    });
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/PDF/paymentPDF.vue

@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <div id="pdfDom" style="width: 776px">
+      <div style="padding: 60px; font-size: 12px !important; color: black">
+        <div style="font-size: 16px; text-align: center; padding: 8px">
+          <span>采购付款</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: 150px; border-right: 1px solid black; padding: 8px">创建人</div>
+            <div style="width: calc(100% - 150px); padding: 8px">
+              {{ dictValueLabel(printDetails.createUser, userList) }}
+            </div>
+          </div>
+          <div style="display: flex; border-bottom: 1px solid black">
+            <div style="width: 150px; border-right: 1px solid black; padding: 8px">创建人部门</div>
+            <div style="width: calc(100% - 150px); padding: 8px">
+              {{ dictValueLabel(printDetails.deptId, deptList) }}
+            </div>
+          </div>
+          <div style="display: flex; border-bottom: 1px solid black">
+            <div style="width: 150px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">费用明细</div>
+            <div style="width: calc(100% - 150px)">
+              <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% - 340px); padding: 4px 8px; border-right: 1px solid black; text-align: center">款项说明</div>
+                <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">货币</div>
+                <div style="width: 140px; 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% - 340px); padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
+                      {{ item.remark }}
+                    </div>
+                    <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">人民币</div>
+                    <div style="width: 140px; 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: 150px; border-right: 1px solid black; padding: 8px">总报销金额</div>
+            <div style="width: calc(100% - 150px); 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: 150px; border-right: 1px solid black; padding: 8px">单据数量</div>
+            <div style="width: calc(100% - 150px); padding: 8px">
+              {{ printDetails.receiptsNum }}
+            </div>
+          </div>
+          <div style="display: flex; border-bottom: 1px solid black">
+            <div style="width: 150px; border-right: 1px solid black; padding: 0 8px; display: flex; align-items: center">收款信息</div>
+            <div style="width: calc(100% - 150px)">
+              <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: 27%; padding: 0 8px; border-right: 1px solid black; text-align: center">收款方户名</div>
+                <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; text-align: center">开户行</div>
+                <div style="width: 27%; 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: 27%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
+                  {{ printDetails.name }}
+                </div>
+                <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
+                  {{ printDetails.openingBank }}
+                </div>
+                <div style="width: 27%; 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: 150px; border-right: 1px solid black; padding: 8px">电子发票(PDF/JPG)</div>
+            <div style="width: calc(100% - 150px); padding: 8px">{{ printDetails.electronicInvoiceText }}</div>
+          </div>
+          <div style="display: flex">
+            <div style="width: 150px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">审批流程</div>
+            <div style="width: calc(100% - 150px)">
+              <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>
+                    </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 userList = ref([]);
+const deptList = ref([]);
+const getDict = () => {
+  proxy
+    .post("/dictTenantData/page", {
+      pageNum: 1,
+      pageSize: 999,
+      dictCode: "funds_payment_method",
+      tenantId: useUserStore().user.tenantId,
+    })
+    .then((res) => {
+      if (res.rows && res.rows.length > 0) {
+        fundsPaymentMethod.value = res.rows.map((item) => {
+          return {
+            label: item.dictValue,
+            value: item.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>

src/views/finance/fundManage/accountPayment/index.vue

@@ -17,7 +17,7 @@
         @get-list="getList">
         <template #amount="{ item }">
           <div style="width: 100%">
-            <span>{{ item.currency }}{{ item.amount }}</span>
+            <span>{{ item.currency }} {{ item.amount }}</span>
           </div>
         </template>
       </byTable>
@@ -138,6 +138,15 @@
         <el-button type="primary" @click="submitSearch()" size="large">确 定</el-button>
       </template>
     </el-dialog>
+
+    <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="840px">
+      <FundsPDF v-if="rowData.type != '20'" :rowData="rowData"></FundsPDF>
+      <PaymentPDF v-else :rowData="rowData"></PaymentPDF>
+      <template #footer>
+        <el-button @click="openPrint = false" size="large">取消</el-button>
+        <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -148,6 +157,8 @@ import byForm from "@/components/byForm/index";
 import { computed, ref } from "vue";
 import moment from "moment";
 import useUserStore from "@/store/modules/user";
+import FundsPDF from "@/components/PDF/fundsPDF.vue";
+import PaymentPDF from "@/components/PDF/paymentPDF.vue";
 
 const loading = ref(false);
 const submitLoading = ref(false);
@@ -252,6 +263,7 @@ const config = computed(() => {
         label: "金额",
         slot: "amount",
         width: 120,
+        align: "right",
       },
     },
     {
@@ -274,7 +286,7 @@ const config = computed(() => {
     {
       attrs: {
         label: "操作",
-        width: "120",
+        width: "180",
         align: "center",
         fixed: "right",
       },
@@ -282,6 +294,17 @@ const config = computed(() => {
         return [
           {
             attrs: {
+              label: "打印",
+              type: "primary",
+              text: true,
+            },
+            el: "button",
+            click() {
+              clickPrint(row);
+            },
+          },
+          {
+            attrs: {
               label: "打款",
               type: "primary",
               text: true,
@@ -697,6 +720,22 @@ const submitSearch = () => {
   sourceList.value.pagination.pageNum = 1;
   getList();
 };
+const openPrint = ref(false);
+const rowData = ref({});
+const clickPrint = (row) => {
+  rowData.value = {
+    id: row.businessId,
+    type: row.type,
+  };
+  openPrint.value = true;
+};
+const clickDownload = () => {
+  if (rowData.type != "20") {
+    proxy.getPdf("请款PDF文件");
+  } else {
+    proxy.getPdf("采购付款PDF文件");
+  }
+};
 </script>
 
 <style lang="scss" scoped>

src/views/purchaseManage/purchasePayment/payment/index.vue

@@ -22,127 +22,7 @@
     </byTable>
 
     <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="840px">
-      <div id="pdfDom" style="width: 776px">
-        <div style="padding: 60px; font-size: 12px !important; color: black">
-          <div style="font-size: 16px; text-align: center; padding: 8px">
-            <span>采购付款</span>
-          </div>
-          <div style="padding: 8px 0">
-            <!-- <span>{{ printDetails.corporationName }}</span> -->
-            <!-- <span style="padding-left: 32px">创建时间: {{ printDetails.createTime }}</span> -->
-            <span>创建时间: {{ printDetails.createTime }}</span>
-          </div>
-          <div style="border: 1px solid black">
-            <div style="display: flex; border-bottom: 1px solid black">
-              <div style="width: 150px; border-right: 1px solid black; padding: 8px">创建人</div>
-              <div style="width: calc(100% - 150px); padding: 8px">
-                {{ dictValueLabel(printDetails.createUser, userList) }}
-              </div>
-            </div>
-            <div style="display: flex; border-bottom: 1px solid black">
-              <div style="width: 150px; border-right: 1px solid black; padding: 8px">创建人部门</div>
-              <div style="width: calc(100% - 150px); padding: 8px">
-                {{ dictValueLabel(printDetails.deptId, deptList) }}
-              </div>
-            </div>
-            <div style="display: flex; border-bottom: 1px solid black">
-              <div style="width: 150px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">费用明细</div>
-              <div style="width: calc(100% - 150px)">
-                <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% - 340px); padding: 4px 8px; border-right: 1px solid black; text-align: center">款项说明</div>
-                  <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">货币</div>
-                  <div style="width: 140px; 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% - 340px); padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
-                        {{ item.remark }}
-                      </div>
-                      <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">人民币</div>
-                      <div style="width: 140px; 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: 150px; border-right: 1px solid black; padding: 8px">总报销金额</div>
-              <div style="width: calc(100% - 150px); 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: 150px; border-right: 1px solid black; padding: 8px">单据数量</div>
-              <div style="width: calc(100% - 150px); padding: 8px">
-                {{ printDetails.receiptsNum }}
-              </div>
-            </div>
-            <div style="display: flex; border-bottom: 1px solid black">
-              <div style="width: 150px; border-right: 1px solid black; padding: 0 8px; display: flex; align-items: center">收款信息</div>
-              <div style="width: calc(100% - 150px)">
-                <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: 27%; padding: 0 8px; border-right: 1px solid black; text-align: center">收款方户名</div>
-                  <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; text-align: center">开户行</div>
-                  <div style="width: 27%; 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: 27%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
-                    {{ printDetails.name }}
-                  </div>
-                  <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
-                    {{ printDetails.openingBank }}
-                  </div>
-                  <div style="width: 27%; 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: 150px; border-right: 1px solid black; padding: 8px">电子发票(PDF/JPG)</div>
-              <div style="width: calc(100% - 150px); padding: 8px">{{ printDetails.electronicInvoiceText }}</div>
-            </div>
-            <div style="display: flex">
-              <div style="width: 150px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">审批流程</div>
-              <div style="width: calc(100% - 150px)">
-                <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>
-                      </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>
+      <PaymentPDF :rowData="rowData"></PaymentPDF>
       <template #footer>
         <el-button @click="openPrint = false" size="large">取消</el-button>
         <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
@@ -155,15 +35,13 @@
 import { computed, ref } from "vue";
 import byTable from "@/components/byTable/index";
 import useUserStore from "@/store/modules/user";
-import moment from "moment";
-import { NumberToChinese } from "@/utils/util.js";
+import PaymentPDF from "@/components/PDF/paymentPDF.vue";
 
 const { proxy } = getCurrentInstance();
 const payStatus = ref([]);
 const fundsPaymentMethod = ref([]);
 const accountList = ref([]);
 const userList = ref([]);
-const deptList = ref([]);
 const status = ref([
   {
     label: "草稿",
@@ -375,22 +253,6 @@ const getDict = () => {
         });
       }
     });
-  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,
-          };
-        });
-      }
-    });
 };
 const getList = async (req) => {
   sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
@@ -416,55 +278,14 @@ const purchasePayment = () => {
   });
 };
 const openPrint = ref(false);
-const printDetails = ref({});
-const presentTime = ref("");
+const rowData = ref({});
 const clickPrint = (row) => {
-  presentTime.value = moment().format("yyyy-MM-DD HH:mm:ss");
+  rowData.value = row;
   openPrint.value = true;
-  proxy.post("/pay/detail", { id: row.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: [row.id] }).then((resFile) => {
-      let electronicInvoiceText = "";
-      if (resFile[row.id] && resFile[row.id].length > 0) {
-        for (let i = 0; i < resFile[row.id].length; i++) {
-          if (i === 0) {
-            electronicInvoiceText = resFile[row.id][0].fileName;
-          } else {
-            electronicInvoiceText = electronicInvoiceText + ", " + resFile[row.id][i].fileName;
-          }
-        }
-      }
-      printDetails.value.electronicInvoiceText = electronicInvoiceText;
-    });
-    if (row.flowExampleId) {
-      proxy.post("/flowExample/getApprovalRecord", { id: row.flowExampleId }).then((record) => {
-        printDetails.value.recordList = record.recordList;
-      });
-    }
-  });
 };
 const clickDownload = () => {
   proxy.getPdf("采购付款PDF文件");
 };
-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;
-};
-
-
 </script>
 
 <style lang="scss" scoped>