From 865a83c8545499953cfddafe130982a0f60faaa4 Mon Sep 17 00:00:00 2001
From: weiwei <ctw@example.com>
Date: Tue, 1 Jul 2025 15:19:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E7=A5=A8=E9=83=A8=E5=88=86=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wallet/wallet-recharge-invoice/index.vue  |  71 +++++---
 .../wallet-recharge-invoice/print-dialog.vue  | 160 +++++++++++-------
 2 files changed, 139 insertions(+), 92 deletions(-)

diff --git a/src/views/wallet/wallet-recharge-invoice/index.vue b/src/views/wallet/wallet-recharge-invoice/index.vue
index 21ee60c..7effb57 100644
--- a/src/views/wallet/wallet-recharge-invoice/index.vue
+++ b/src/views/wallet/wallet-recharge-invoice/index.vue
@@ -1,8 +1,7 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form v-show="showSearch" ref="queryRef" :inline="true" :model="state.queryForm"
-				@keyup.enter="getDataList">
+			<el-form v-show="showSearch" ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
 				<el-row>
 					<el-form-item style="width: 300px" label="申请用户" prop="userIds">
 						<select-user v-model="state.queryForm.userIds" placeholder="申请用户" />
@@ -11,32 +10,40 @@
 						<dict-select v-model="state.queryForm.status" dict-code="recharge_invoice_status" />
 					</el-form-item>
 					<el-form-item style="width: 450px" label="创建时间" prop="createTimeList">
-						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss"
-							type="datetimerange" />
+						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
 					</el-form-item>
 					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn")
-							}}</el-button>
+						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
 						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
 					</el-form-item>
 				</el-row>
 			</el-form>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button icon="folder-add" type="primary" class="ml10" @click="uploadExcelRef.show()"
-						v-auth="'wallet_walletRechargeApply_add'">
+					<el-button icon="folder-add" type="primary" class="ml10" @click="uploadExcelRef.show()" v-auth="'wallet_walletRechargeApply_add'">
 						导 入
 					</el-button>
-					<right-toolbar v-model:showSearch="showSearch" :export="'wallet_walletRechargeInvoice_export'"
-						@exportExcel="exportExcel" class="ml10 mr20" style="float: right"
-						@queryTable="getDataList"></right-toolbar>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						:export="'wallet_walletRechargeInvoice_export'"
+						@exportExcel="exportExcel"
+						class="ml10 mr20"
+						style="float: right"
+						@queryTable="getDataList"
+					></right-toolbar>
 				</div>
 			</el-row>
-			<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle">
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+			>
 				<el-table-column type="selection" width="40" align="center" />
-				<el-table-column type="index" label="#" width="40" />
+				<el-table-column type="index" label="#" width="50" />
 				<el-table-column prop="code" label="发票编号" />
 				<el-table-column prop="time" label="发票日期">
 					<template #default="{ row }">
@@ -58,8 +65,7 @@
 				</el-table-column>
 				<el-table-column prop="payeeDept" label="发票下载">
 					<template #default="{ row }">
-						<preview-image :src="row.picUrl" download
-							:downloadName="`${row.deptOrUser}-${row.payeeDept}-发票-${row.updateTime}`" />
+						<preview-image :src="row.picUrl" download :downloadName="`${row.deptOrUser}-${row.payeeDept}-发票-${row.updateTime}`" />
 					</template>
 				</el-table-column>
 				<el-table-column prop="remark" label="备注" />
@@ -68,23 +74,32 @@
 						<!-- <el-button icon="edit-pen" text type="primary" v-auth="'wallet_walletRechargeInvoice_edit'"
               @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button> -->
 						<!-- v-if="['1'].includes(row.processStatus)" -->
-						<el-button v-auth="'wallet_walletRechargeApply_print'" icon="printer" text type="primary"
-							:loading="getReceiptDataLoading" @click="previewInvoice(row)">
+						<el-button
+							v-auth="'wallet_walletRechargeApply_print'"
+							icon="printer"
+							text
+							type="primary"
+							:disabled="loading"
+							@click="previewInvoice(row)"
+						>
 							查看发票
 						</el-button>
-						<el-button icon="delete" text type="primary" v-auth="'wallet_walletRechargeInvoice_del'"
-							@click="handleDelete([row.id])">
+						<el-button icon="delete" text type="primary" v-auth="'wallet_walletRechargeInvoice_del'" @click="handleDelete([row.id])">
 							删除
 						</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
-			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
-				v-bind="state.pagination" />
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
 		</div>
 
-		<upload-excel ref="uploadExcelRef" title="导入" url="/wallet/wallet-recharge-apply/read-topup-excel"
-			temp-url="/admin/sys-file/local/file/wallet_recharge.xlsx" @refreshDataList="getDataList(false)" />
+		<upload-excel
+			ref="uploadExcelRef"
+			title="导入"
+			url="/wallet/wallet-recharge-apply/read-topup-excel"
+			temp-url="/admin/sys-file/local/file/wallet_recharge.xlsx"
+			@refreshDataList="getDataList(false)"
+		/>
 
 		<!-- 编辑、新增  -->
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
@@ -123,7 +138,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
 	pageList: fetchList,
 })
 const printDialogRef = ref()
-const getReceiptDataLoading = ref(false)
+const loading = ref(false)
 
 //  table hook
 const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
@@ -168,7 +183,7 @@ const handleDelete = async (ids: string[]) => {
 // 预览发票
 const previewInvoice = async (row: any) => {
 	try {
-		getReceiptDataLoading.value = true
+		loading.value = true
 		if (!row.id) return useMessage().error("发票ID不存在")
 		const res = await getObj(row.id)
 		if (res.code == 0 && printDialogRef.value) return printDialogRef.value.openDialog(res.data, res.data.id)
@@ -176,7 +191,7 @@ const previewInvoice = async (row: any) => {
 	} catch (error: any) {
 		useMessage().error(error.msg)
 	} finally {
-		getReceiptDataLoading.value = false
+		loading.value = false
 	}
 }
 </script>
diff --git a/src/views/wallet/wallet-recharge-invoice/print-dialog.vue b/src/views/wallet/wallet-recharge-invoice/print-dialog.vue
index d69d054..c7c25df 100644
--- a/src/views/wallet/wallet-recharge-invoice/print-dialog.vue
+++ b/src/views/wallet/wallet-recharge-invoice/print-dialog.vue
@@ -6,8 +6,7 @@
 			<div class="flex justify-between items-end mb-1">
 				<div></div>
 				<div>
-					{{ formatDate(new Date(receiptData.time), "YYYY年 mm月 dd日") || " 年 月 日".replace(/ /g, "&nbsp;&nbsp;")
-					}}
+					{{ formatDate(new Date(receiptData.time), "YYYY年 mm月 dd日") || " 年 月 日".replace(/ /g, "&nbsp;&nbsp;") }}
 				</div>
 				<span>
 					<span>No. </span>
@@ -20,8 +19,12 @@
 					<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" />
+							<input
+								type="text"
+								v-model="receiptData.deptOrUser"
+								class="caret-red-600 w-full h-full bg-transparent text-center"
+								ref="deptOrUserInput"
+							/>
 						</td>
 					</tr>
 					<tr>
@@ -58,11 +61,15 @@
 						<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 v-if="receiptData.picUrl || isStamping"
+							<img
+								v-if="receiptData.picUrl || isStamping"
 								class="w-[2.5cm] h-[2.5cm] absolute -top-2 left-[140px]"
-								:class="{ stamping: isStamping }" draggable="false"
+								:class="{ stamping: isStamping }"
+								draggable="false"
 								style="-webkit-user-drag: none; user-select: none; pointer-events: none"
-								oncontextmenu="return false" src="/@/assets/receiptStamp.png" />
+								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">
@@ -72,15 +79,16 @@
 						<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" />
+								<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 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">
+					<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>
@@ -88,22 +96,39 @@
 		</div>
 
 		<div class="h-6">
-			<el-progress :percentage="progressPercent" v-if="progressPercent > 30" :stroke-width="6" status="success"
-				striped striped-flow :duration="20" />
+			<el-progress
+				:percentage="progressPercent"
+				v-if="progressPercent > 30"
+				:stroke-width="6"
+				status="success"
+				striped
+				striped-flow
+				:duration="20"
+			/>
 		</div>
 
 		<template #footer>
 			<el-button @click="handleClose" :disabled="loading">关闭</el-button>
-			<el-button v-if="!receiptData.picUrl" v-auth="'wallet_walletRechargeApply_receiptStamp'" type="primary"
-				@click="stampReceipt" :disabled="loading">
+			<el-button
+				v-if="!receiptData.picUrl"
+				v-auth="'wallet_walletRechargeApply_receiptStamp'"
+				type="primary"
+				@click="stampReceipt"
+				:disabled="loading"
+			>
 				盖章
 			</el-button>
-			<el-button v-if="receiptData.picUrl" v-auth="'wallet_walletRechargeApply_back'" type="primary" plain
-				@click="backInvoice" :disabled="loadingBack">
+			<el-button
+				v-if="receiptData.picUrl"
+				v-auth="'wallet_walletRechargeApply_back'"
+				type="primary"
+				plain
+				@click="backInvoice"
+				:disabled="loadingBack"
+			>
 				作废
 			</el-button>
-			<el-button v-auth="'wallet_walletRechargeApply_receiptSave'" type="primary" @click="saveReceipt"
-				:disabled="loading">保存</el-button>
+			<el-button v-auth="'wallet_walletRechargeApply_receiptSave'" type="primary" @click="saveReceipt" :disabled="loading">保存</el-button>
 			<el-button v-if="receiptData.picUrl" type="primary" @click="handlePrint" :disabled="loading">打印</el-button>
 		</template>
 	</el-dialog>
@@ -206,47 +231,51 @@ const backInvoice = async () => {
 	}
 }
 
-// 生成图片并上传
-const genImageUpload = async (): Promise<string | void> => {
+// 生成图片
+const genImage = async (): Promise<Blob | void | null> => {
 	if (receiptRef.value) {
-		const blob = await htmlToImage.toBlob(receiptRef.value, {
-			canvasWidth: 661.5,
-			canvasHeight: 359.1,
-			backgroundColor: "#ffffff",
-			pixelRatio: 6,
-		})
-		console.log("blob", blob)
-
-		if (blob) {
-			try {
-				loading.value = true
-				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,
-					onUploadProgress: (progressEvent: any) => {
-						if (progressEvent.lengthComputable) {
-							progressPercent.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
-						}
-					},
-				})
-				console.log("data.url", data.url)
-
-				if (code == 0) return data.url
-				useMessage().error(data.msg || "上传失败")
-			} catch (error) {
-				useMessage().error(error as string)
-			} finally {
-				loading.value = false
-				progressPercent.value = 30
+		const blob = await htmlToImage
+			.toBlob(receiptRef.value, {
+				canvasWidth: 661.5,
+				canvasHeight: 359.1,
+				backgroundColor: "#ffffff",
+				pixelRatio: 6,
+			})
+			.catch((error) => {
 				isStamping.value = false
-			}
-		}
+				return useMessage().error("图片生成错误")
+			})
+		return blob
+	}
+}
+
+// 图片上传
+const uploadImage = async (blob: Blob): Promise<string | void> => {
+	try {
+		loading.value = true
+		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,
+			onUploadProgress: (progressEvent: any) => {
+				if (progressEvent.lengthComputable) {
+					progressPercent.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+				}
+			},
+		})
+		if (code == 0) return data.url
+		useMessage().error(data.msg || "上传失败")
+	} catch (error) {
+		useMessage().error(error as string)
+	} finally {
+		loading.value = false
+		progressPercent.value = 30
+		isStamping.value = false
 	}
 }
 
@@ -256,16 +285,19 @@ const stampReceipt = () => {
 	isStamping.value = true
 
 	timer = setTimeout(async () => {
-		const url = await genImageUpload()
-		if (url) {
-			receiptData.value.picUrl = url
-			await saveReceipt()
+		const blob = await genImage()
+		if (blob) {
+			const url = await uploadImage(blob)
+			if (url) {
+				receiptData.value.picUrl = url
+				await saveReceipt()
+			}
 		}
-	}, 1010)
+	}, 1030)
 }
 
 // 保存发票
-const saveReceipt = async () => {
+const saveReceipt = async (): Promise<void> => {
 	try {
 		loading.value = true
 		const { code, data } = await bindInvoice({