From 08c354afd3f62bfd14f5627ba6d15bee0794bf96 Mon Sep 17 00:00:00 2001 From: weiwei Date: Tue, 24 Jun 2025 17:04:22 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E7=A5=A8=E4=B8=8A=E4=BC=A0=E4=BF=9D?= =?UTF-8?q?=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wallet/wallet-recharge-apply/index.vue | 22 +-- .../wallet-recharge-apply/print-dialog.vue | 171 ++++++++++-------- 2 files changed, 104 insertions(+), 89 deletions(-) diff --git a/src/views/wallet/wallet-recharge-apply/index.vue b/src/views/wallet/wallet-recharge-apply/index.vue index 7272a5b..4655465 100644 --- a/src/views/wallet/wallet-recharge-apply/index.vue +++ b/src/views/wallet/wallet-recharge-apply/index.vue @@ -180,6 +180,7 @@ icon="printer" text type="primary" + :loading="getReceiptDataLoading" @click="previewInvoice(row)" > 打印发票 @@ -205,7 +206,7 @@ - + @@ -243,15 +244,8 @@ const multiple = ref(true) const activeName = ref() const tabItems = ref([{}]) const processDrawerRef = ref() -const printDialogVisible = ref(false) -const receiptData = ref({ - receiptNo: "", - date: "", - payer: "", - content: "", - amount: "", - amountInWords: "", -}) +const printDialogRef = ref() +const getReceiptDataLoading = ref(false) const state: BasicTableProps = reactive({ queryForm: {}, @@ -371,14 +365,18 @@ const taskSubmitEvent = () => { // 预览发票 const previewInvoice = async (row: any) => { try { + getReceiptDataLoading.value = true const res = await getInvoice({ id: row.id }) if (res.code == 0) { - receiptData.value = res.data - printDialogVisible.value = true + if (printDialogRef.value) { + printDialogRef.value.openDialog(res.data) + } return } } catch (error: any) { useMessage().error(error.msg) + } finally { + getReceiptDataLoading.value = false } } diff --git a/src/views/wallet/wallet-recharge-apply/print-dialog.vue b/src/views/wallet/wallet-recharge-apply/print-dialog.vue index 86d199a..5cc92c8 100644 --- a/src/views/wallet/wallet-recharge-apply/print-dialog.vue +++ b/src/views/wallet/wallet-recharge-apply/print-dialog.vue @@ -5,8 +5,8 @@
-
{{ receiptData.date || " 年 月 日".replace(/ /g, "  ") }}
- No. {{ receiptData.receiptNo || "0000000" }} +
{{ receiptData.time || " 年 月 日".replace(/ /g, "  ") }}
+ No. {{ receiptData.code || "0000000" }}
@@ -15,43 +15,43 @@ 交款单位（或个人） - {{ receiptData.payer }} + 款项内容 金额 - - {{}} - {{}} - - - {{}} - {{}} - - - {{}} - {{}} + + {{ receiptDataItems[item - 1]?.name }} + {{ receiptDataItems[item - 1]?.price }} - 合计人民币（大写）： - {{}} +
+ 合计人民币（大写）： + + + +
- ￥： - {{ receiptData.amountInWords }} +
+ ￥： + + + +
收款单位
（盖章） - + {{ receiptData.payeeDept }} 收款人
（签名） - {{}} + {{ receiptData.payeeUser }} 备注： - {{}} + {{ receiptData.remark }} @@ -64,8 +64,8 @@ @@ -75,80 +75,97 @@ import { ref, computed } from "vue" import * as htmlToImage from "html-to-image" import { toPng, toJpeg, toBlob, toPixelData, toSvg } from "html-to-image" import { useMessage } from "/@/hooks/message" +import request from "/@/utils/request" +import { displayPrice } from "/@/utils/formatMoney" interface ReceiptData { - receiptNo?: string - date?: string - payer?: string - content?: string - amount?: string - amountInWords?: string - cashier?: string + itemJson: string + code: string + time: string + deptOrUser: string + totalPrice: string + payeeDept: string + payeeUser: string + remark: string + totalPriceCnStr: string } -const props = defineProps<{ - modelValue: boolean - receiptData?: ReceiptData -}>() - -const emit = defineEmits(["update:modelValue"]) - -const visible = ref(props.modelValue) -const receiptData = computed( - () => - props.receiptData || { - receiptNo: "", - date: "", - payer: "", - content: "", - amount: "", - amountInWords: "", - cashier: "", - }, -) +const visible = ref(false) +const receiptData = ref({ + itemJson: "", // 款项json + code: "", // 发票代码(七位数) + time: "", // 发票日期 + deptOrUser: "", // 交款单位或个人 + totalPrice: "", // 合计人民币 + totalPriceCnStr: "", // 合计人民币大写 + payeeDept: "", // 收款单位 + payeeUser: "", // 收款人 + remark: "", // 备注 +}) +const loading = ref(false) +const receiptDataItems = computed(() => { + try { + return JSON.parse(receiptData.value.itemJson) + } catch (error) { + return 3 + } +}) +const totalPrice = computed(() => { + return displayPrice(receiptData.value.totalPrice) +}) const receiptRef = ref() -watch( - () => visible.value, - (newVal) => { - emit("update:modelValue", newVal) - }, -) - -watch( - () => props.modelValue, - (newVal) => { - visible.value = newVal - }, -) +const openDialog = (data: ReceiptData) => { + visible.value = true + receiptData.value = data +} const handleClose = () => { visible.value = false } -const saveReceipt = () => { +const saveReceipt = async () => { if (receiptRef.value) { - htmlToImage - .toPng(receiptRef.value, { + try { + loading.value = true + const blob = await htmlToImage.toBlob(receiptRef.value, { canvasWidth: 1920, canvasHeight: 900, backgroundColor: "#ffffff", - // style: {}, }) - .then((dataUrl: string) => { - console.log(dataUrl) - const img = new Image() - img.src = dataUrl - }) - .catch((err) => { - useMessage().error(err) - }) - } - // visible.value = false + if (blob) { + const formData = new FormData() + formData.append("file", blob, "receipt.png") + + const { code, data } = await request({ + url: "/admin/sys-file/upload", + method: "post", + headers: { + "Content-Type": "multipart/form-data", + }, + data: formData, + }) + if (code == 0) { + useMessage().success("保存成功") + console.log(data) + return data + } + useMessage().error(data.msg || "保存失败") + } + } catch (err) { + useMessage().error(err as string) + } finally { + loading.value = false + } + } } const handlePrint = () => { window.print() } + +defineExpose({ + openDialog, +})