From ef259a34b9ce6213240b3eae94ddfef0b6b23ef3 Mon Sep 17 00:00:00 2001
From: weiwei <ctw@example.com>
Date: Wed, 25 Jun 2025 12:46:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=93=E5=8D=B0=E5=B0=BA=E5=AF=B8=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wallet/wallet-recharge-apply/index.vue    |   1 +
 .../wallet-recharge-apply/print-dialog.vue    | 175 ++++++++++--------
 2 files changed, 94 insertions(+), 82 deletions(-)

diff --git a/src/views/wallet/wallet-recharge-apply/index.vue b/src/views/wallet/wallet-recharge-apply/index.vue
index 1d0e38e..4b73a35 100644
--- a/src/views/wallet/wallet-recharge-apply/index.vue
+++ b/src/views/wallet/wallet-recharge-apply/index.vue
@@ -368,6 +368,7 @@ const previewInvoice = async (row: any) => {
 		getReceiptDataLoading.value = true
 		const res = await getInvoice({ id: row.id })
 		if (res.code == 0 && printDialogRef.value) return printDialogRef.value.openDialog(res.data)
+		return useMessage().error(res.data.msg || "获取发票信息失败")
 	} catch (error: any) {
 		useMessage().error(error.msg)
 	} finally {
diff --git a/src/views/wallet/wallet-recharge-apply/print-dialog.vue b/src/views/wallet/wallet-recharge-apply/print-dialog.vue
index 8ac1d91..476e47a 100644
--- a/src/views/wallet/wallet-recharge-apply/print-dialog.vue
+++ b/src/views/wallet/wallet-recharge-apply/print-dialog.vue
@@ -1,84 +1,86 @@
 <template>
 	<el-dialog v-model="visible" title="预览" width="900px" :close-on-click-modal="false" draggable destroy-on-close>
-		<div id="receiptRef" ref="receiptRef" class="border border-gray-300 p-6 bg-[#EBE1C622]">
-			<div class="text-center text-4xl font-bold">浦江县行政事业单位食堂统一收款收据</div>
+		<div id="receiptRef" ref="receiptRef" class="w-[17.5cm] h-[9.5cm] border border-gray-400 p-6 bg-[#EBE1C622]">
+			<div class="text-center mx-auto w-[10cm] text-3xl font-bold">浦江县行政事业单位食堂统一收款收据</div>
 
 			<div class="flex justify-between items-end mb-1">
 				<div></div>
-				<div class="text-lg">
-					{{ formatDate(new Date(receiptData.time), "YYYY年mm月dd日") || "    年    月    日".replace(/ /g, "&nbsp;&nbsp;") }}
+				<div>
+					{{ formatDate(new Date(receiptData.time), "YYYY年 mm月 dd日") || "    年    月    日".replace(/ /g, "&nbsp;&nbsp;") }}
 				</div>
-				<span class="text-xl text-red-500">No. {{ receiptData.code || "0000000" }}</span>
+				<span>
+					<span>No. </span>
+					<span class="text-xl text-red-500">{{ receiptData.code || "0000000" }}</span>
+				</span>
 			</div>
 
-			<div class="flex flex-row">
-				<div class="flex-1">
-					<table class="w-full border-collapse text-center text-lg">
-						<tr class="border border-gray-300">
-							<td class="border border-gray-300 px-2 w-3/12 h-10">交款单位（或个人）</td>
-							<td class="border border-gray-300 px-2 w-9/12 h-10 text-sm text-blue-800" colspan="4">
-								<input
-									type="text"
-									v-model="receiptData.deptOrUser"
-									class="caret-red-600 w-full h-full bg-transparent text-center"
-									ref="deptOrUserInput"
+			<div class="flex justify-center relative">
+				<table class="w-[15cm] h-[6cm] border-collapse text-center text-sm">
+					<tr>
+						<td class="border border-gray-600 px-2 w-3/12 h-[0.75cm]">交款单位（或个人）</td>
+						<td class="border border-gray-600 px-2 w-9/12 h-[0.75cm] text-sm text-blue-800" colspan="4">
+							<input
+								type="text"
+								v-model="receiptData.deptOrUser"
+								class="caret-red-600 w-full h-full bg-transparent text-center"
+								ref="deptOrUserInput"
+							/>
+						</td>
+					</tr>
+					<tr>
+						<td class="border border-gray-600 px-2 h-[0.75cm]" colspan="4">款项内容</td>
+						<td class="border border-gray-600 px-2 h-[0.75cm]">金额</td>
+					</tr>
+					<tr v-for="(item, index) in 3" :key="index">
+						<td class="border border-gray-600 px-2 h-[0.75cm] text-sm text-blue-800" colspan="4">
+							<!-- <input type="text" v-model="receiptDataItems[index].name" class="w-full h-full bg-transparent" /> -->
+							{{ receiptDataItems[index].name }}
+						</td>
+						<td class="border border-gray-600 px-2 h-[0.75cm] text-sm text-blue-800">
+							<!-- <input type="text" v-model="receiptDataItems[index].price" class="w-full h-full bg-transparent" /> -->
+							{{ receiptDataItems[index].price }}
+						</td>
+					</tr>
+					<tr>
+						<td class="border border-gray-600 px-2 text-left h-[0.75cm]" colspan="4">
+							<div class="flex items-center">
+								<span class="whitespace-nowrap">合计人民币（大写）：</span>
+								<!-- <input type="text" v-model="receiptData.totalPriceCnStr" class="text-sm text-blue-800 w-full h-full bg-transparent" /> -->
+								<span class="text-sm text-blue-800">{{ receiptData.totalPriceCnStr }}</span>
+							</div>
+						</td>
+						<td class="border border-gray-600 px-2 text-left h-[0.75cm]">
+							<div class="flex items-center">
+								<span>￥：</span>
+								<!-- <input type="text" v-model="totalPrice" class="text-sm text-blue-800 w-full h-full bg-transparent" /> -->
+								<span class="text-sm text-blue-800">{{ totalPrice }}</span>
+							</div>
+						</td>
+					</tr>
+					<tr class="relative">
+						<td class="border border-gray-600 px-2 w-1/6 h-[0.75cm]">收款单位<br />（盖章）</td>
+						<td class="border border-gray-600 px-2 text-left w-1/6 h-[0.75cm] text-sm text-blue-800">
+							<!-- <input type="text" v-model="receiptData.payeeDept" class="w-full h-full bg-transparent" /> -->
+							<img class="w-[2.5cm] h-[2.5cm] absolute -top-3 left-30 -rotate-12" src="/@/assets/receiptStamp.png" />
+						</td>
+						<td class="border border-gray-600 px-2 w-1/6 h-[0.75cm]">收款人<br />（签名）</td>
+						<td class="border border-gray-600 px-2 text-left w-1/6 h-[0.75cm] text-sm text-blue-800">
+							<input type="text" v-model="receiptData.payeeUser" class="w-full h-full bg-transparent" />
+						</td>
+						<td class="border border-gray-600 px-2 text-left align-text-top w-1/3 h-[0.75cm]">
+							<div class="flex">
+								<span class="whitespace-nowrap">备注：</span>
+								<textarea
+									v-model="receiptData.remark"
+									class="flex-1 text-sm text-blue-800 w-full h-full my-1 bg-transparent resize-none overflow-y-hidden"
 								/>
-							</td>
-						</tr>
-						<tr>
-							<td class="border border-gray-300 px-2 h-10" colspan="4">款项内容</td>
-							<td class="border border-gray-300 px-2 h-10">金额</td>
-						</tr>
-						<tr v-for="(item, index) in 3" :key="index">
-							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800" colspan="4">
-								<!-- <input type="text" v-model="receiptDataItems[index].name" class="w-full h-full bg-transparent" /> -->
-								{{ receiptDataItems[index].name }}
-							</td>
-							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800">
-								<!-- <input type="text" v-model="receiptDataItems[index].price" class="w-full h-full bg-transparent" /> -->
-								{{ receiptDataItems[index].price }}
-							</td>
-						</tr>
-						<tr>
-							<td class="border border-gray-300 px-2 text-left h-10" colspan="4">
-								<div class="flex items-center">
-									<span class="whitespace-nowrap">合计人民币（大写）：</span>
-									<!-- <input type="text" v-model="receiptData.totalPriceCnStr" class="text-sm text-blue-800 w-full h-full bg-transparent" /> -->
-									<span class="text-sm text-blue-800">{{ receiptData.totalPriceCnStr }}</span>
-								</div>
-							</td>
-							<td class="border border-gray-300 px-2 text-left h-10">
-								<div class="flex items-center">
-									<span>￥：</span>
-									<!-- <input type="text" v-model="totalPrice" class="text-sm text-blue-800 w-full h-full bg-transparent" /> -->
-									<span class="text-sm text-blue-800">{{ totalPrice }}</span>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="border border-gray-300 px-2 w-1/6 h-10">收款单位<br />（盖章）</td>
-							<td class="border border-gray-300 px-2 text-left w-1/6 h-10 text-sm text-blue-800">
-								<input type="text" v-model="receiptData.payeeDept" class="w-full h-full bg-transparent" />
-							</td>
-							<td class="border border-gray-300 px-2 w-1/6 h-10">收款人<br />（签名）</td>
-							<td class="border border-gray-300 px-2 text-left w-1/6 h-10 text-sm text-blue-800">
-								<input type="text" v-model="receiptData.payeeUser" class="w-full h-full bg-transparent" />
-							</td>
-							<td class="border border-gray-300 px-2 text-left align-text-top w-1/3 h-10">
-								<div class="flex">
-									<span class="whitespace-nowrap">备注：</span>
-									<textarea
-										v-model="receiptData.remark"
-										class="flex-1 text-sm text-blue-800 w-full h-full my-1 bg-transparent resize-none overflow-y-hidden"
-									/>
-								</div>
-							</td>
-						</tr>
-					</table>
-				</div>
-				<div class="flex items-center ml-1">
-					<span class="text-gray-500 text-md whitespace-nowrap" style="writing-mode: vertical-rl; letter-spacing: 0.2em">
-						第一联 存根联
+							</div>
+						</td>
+					</tr>
+				</table>
+				<div class="flex items-center absolute bottom-0 top-0 right-0">
+					<span class="text-gray-500 text-sm whitespace-nowrap" style="writing-mode: vertical-rl; letter-spacing: 0.2em">
+						{{ "第一联 存根联".replace(/ /g, "&nbsp;&nbsp;&nbsp;&nbsp;") }}
 					</span>
 				</div>
 			</div>
@@ -86,6 +88,7 @@
 
 		<template #footer>
 			<el-button @click="handleClose">关闭</el-button>
+			<el-button type="primary" @click="stampReceipt" :disabled="loading">盖章</el-button>
 			<el-button type="primary" @click="saveReceipt" :disabled="loading">保存</el-button>
 			<el-button type="primary" @click="handlePrint" :disabled="loading">打印</el-button>
 		</template>
@@ -93,13 +96,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick } from "vue"
+import { ref, computed } from "vue"
 import * as htmlToImage from "html-to-image"
-import { toPng, toJpeg, toBlob, toPixelData, toSvg } 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 { formatDate } from "/@/utils/formatTime"
-import { displayPrice, storePrice } from "/@/utils/formatMoney"
+import { displayPrice } from "/@/utils/formatMoney"
 import printJS from "print-js"
 import { putObj } from "/@/api/wallet/wallet-recharge-invoice"
 
@@ -142,7 +145,7 @@ const receiptDataItems = computed(() => {
 		return new Array(3).fill({ name: "", price: "" })
 	}
 })
-const totalPrice = computed(() => displayPrice(receiptData.value.totalPrice, ""))
+const totalPrice = computed(() => displayPrice(receiptData.value.totalPrice))
 
 const openDialog = (data: ReceiptData) => {
 	visible.value = true
@@ -159,9 +162,10 @@ const handleClose = () => {
 const genImageUpload = async (): Promise<string | void> => {
 	if (receiptRef.value) {
 		const blob = await htmlToImage.toBlob(receiptRef.value, {
-			canvasWidth: 1920,
-			canvasHeight: 900,
+			canvasWidth: 661.5,
+			canvasHeight: 359.1,
 			backgroundColor: "#ffffff",
+			pixelRatio: 10,
 		})
 
 		if (blob) {
@@ -175,6 +179,8 @@ const genImageUpload = async (): Promise<string | void> => {
 				},
 				data: formData,
 			})
+			console.log(import.meta.env.VITE_IMAGE_BASE_PATH + data.url)
+
 			if (code == 0) return data.url
 			useMessage().error(data.msg || "上传失败")
 		}
@@ -198,15 +204,19 @@ const saveReceipt = async () => {
 	}
 }
 
+// 发票盖章
+const stampReceipt = () => {}
+
 // 打印
 const handlePrint = async () => {
 	if (receiptRef.value) {
 		const pngBase64 = await htmlToImage.toPng(receiptRef.value, {
-			canvasWidth: 1920,
-			canvasHeight: 900,
+			canvasWidth: 661.5,
+			canvasHeight: 359.1,
+			pixelRatio: 10,
 			backgroundColor: "#ffffff",
 		})
-		printJS({ printable: pngBase64, type: "image", targetStyles: ["*"], maxWidth: 1920 })
+		printJS({ printable: pngBase64, type: "image", targetStyles: ["*"], maxWidth: 661.5 })
 	}
 }
 
@@ -218,7 +228,8 @@ defineExpose({
 <style scoped>
 @media print {
 	@page {
-		size: A4 landscape;
+		size: 210mm 297mm;
+		/* size: A4 landscape; */
 	}
 	input {
 		border: none;