盖章并增加打印清晰度

src/views/wallet/wallet-recharge-apply/index.vue

@@ -367,7 +367,7 @@ const previewInvoice = async (row: any) => {
 	try {
 		getReceiptDataLoading.value = true
 		const res = await getInvoice({ id: row.id })
-		if (res.code == 0 && printDialogRef.value) return printDialogRef.value.openDialog(res.data)
+		if (res.code == 0 && printDialogRef.value) return printDialogRef.value.openDialog(res.data, res.data.id)
 		return useMessage().error(res.data.msg || "获取发票信息失败")
 	} catch (error: any) {
 		useMessage().error(error.msg)

src/views/wallet/wallet-recharge-apply/print-dialog.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-dialog v-model="visible" title="预览" width="900px" :close-on-click-modal="false" draggable destroy-on-close>
+	<el-dialog v-model="visible" title="预览" width="800px" :close-on-click-modal="false" draggable destroy-on-close>
 		<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>
 
@@ -61,7 +61,14 @@
 						<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" />
+							<img
+								class="w-[2.5cm] h-[2.5cm] absolute -top-2 left-[138px]"
+								:class="{ stamping: isStamping }"
+								draggable="false"
+								style="-webkit-user-drag: none; user-select: none; pointer-events: none"
+								oncontextmenu="return false"
+								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">
@@ -86,6 +93,10 @@
 			</div>
 		</div>
 
+		<div class="h-2">
+			<el-progress :percentage="saveProgress" v-if="loading" :stroke-width="6" status="success" striped striped-flow :duration="20" />
+		</div>
+
 		<template #footer>
 			<el-button @click="handleClose">关闭</el-button>
 			<el-button type="primary" @click="stampReceipt" :disabled="loading">盖章</el-button>
@@ -123,6 +134,7 @@ const loading = ref(false)
 const receiptRef = ref<HTMLElement | null>(null)
 const deptOrUserInput = ref<HTMLInputElement | null>(null)
 const timer = ref<any>(null)
+const isStamping = ref(false)
 const receiptData = ref<ReceiptData>({
 	itemJson: "", // 款项json
 	code: "", // 发票代码(七位数)
@@ -135,6 +147,7 @@ const receiptData = ref<ReceiptData>({
 	remark: "", // 备注
 })
 const applyId = ref<any>()
+const saveProgress = ref(0)
 const receiptDataItems = computed(() => {
 	try {
 		const itemJson = JSON.parse(receiptData.value.itemJson)
@@ -152,7 +165,11 @@ const openDialog = (data: ReceiptData, id: any) => {
 	visible.value = true
 	receiptData.value = data
 	applyId.value = id
-	timer.value = setTimeout(() => deptOrUserInput.value?.focus(), 50)
+	isStamping.value = false
+	setTimeout(() => {
+		isStamping.value = true
+		deptOrUserInput.value?.focus()
+	}, 50)
 }
 
 const handleClose = () => {
@@ -179,9 +196,12 @@ const genImageUpload = async (): Promise<string | void> => {
 					"Content-Type": "multipart/form-data",
 				},
 				data: formData,
+				onUploadProgress: (progressEvent: any) => {
+					if (progressEvent.lengthComputable) {
+						saveProgress.value = Math.min(Math.round((progressEvent.loaded * 100) / progressEvent.total), 99)
+					}
+				},
 			})
-			console.log(import.meta.env.VITE_IMAGE_BASE_PATH + data.url)
-
 			if (code == 0) return data.url
 			useMessage().error(data.msg || "上传失败")
 		}
@@ -200,6 +220,7 @@ const saveReceipt = async () => {
 				deptOrUser: receiptData.value.deptOrUser,
 				applyId: applyId.value,
 			})
+			saveProgress.value = 100
 			if (code == 0) return useMessage().success("保存成功")
 			useMessage().error(data.msg || "保存失败")
 		}
@@ -207,6 +228,7 @@ const saveReceipt = async () => {
 		useMessage().error(err as string)
 	} finally {
 		loading.value = false
+		saveProgress.value = 0
 	}
 }
 
@@ -234,8 +256,9 @@ defineExpose({
 <style scoped>
 @media print {
 	@page {
-		size: 210mm 297mm;
+		/* size: 210mm 297mm; */
 		/* size: A4 landscape; */
+		size: A4;
 	}
 
 	input {
@@ -244,4 +267,22 @@ defineExpose({
 		outline: none;
 	}
 }
+
+.stamping {
+	animation: stamp-in 0.8s;
+}
+@keyframes stamp-in {
+	0% {
+		transform: translateY(80px) scale(1.5) rotate(0);
+		opacity: 0.2;
+	}
+	60% {
+		transform: translateY(10px) scale(1.3) rotate(0);
+		opacity: 1;
+	}
+	100% {
+		transform: translateY(0) scale(1) rotate(0);
+		opacity: 1;
+	}
+}
 </style>