发票盖章保存

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

@@ -62,7 +62,7 @@
 						<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="!printButtonDisabled"
+								v-if="isShowStamp"
 								class="w-[2.5cm] h-[2.5cm] absolute -top-2 left-[140px]"
 								:class="{ stamping: isStamping }"
 								draggable="false"
@@ -95,16 +95,25 @@
 			</div>
 		</div>
 
-		<div class="h-2">
-			<el-progress :percentage="saveProgress" v-if="loading" :stroke-width="6" status="success" striped striped-flow :duration="20" />
+		<div class="h-6">
+			<el-progress
+				:percentage="saveProgress"
+				v-if="saveProgress > 10"
+				:stroke-width="6"
+				status="success"
+				striped
+				striped-flow
+				:duration="20"
+			/>
 		</div>
 
 		<template #footer>
-			<el-button @click="handleClose">关闭</el-button>
-			<el-button v-auth="'wallet_walletRechargeApply_receiptSave'" type="primary" @click="saveReceipt" :disabled="loading">
+			<el-button @click="handleClose" :disabled="loading">关闭</el-button>
+			<el-button v-auth="'wallet_walletRechargeApply_receiptStamp'" type="primary" @click="stampReceipt" :disabled="loading">
 				盖章保存
 			</el-button>
-			<el-button v-if="!printButtonDisabled" type="primary" @click="handlePrint" :disabled="loading || printButtonDisabled">打印</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>
 </template>
@@ -141,7 +150,7 @@ const receiptRef = ref<HTMLElement | null>(null)
 const deptOrUserInput = ref<HTMLInputElement | null>(null)
 const timer = ref<any>(null)
 const isStamping = ref(false)
-const printButtonDisabled = ref(false)
+const isShowStamp = ref(false)
 const receiptData = ref<ReceiptData>({
 	itemJson: "", // 款项json
 	code: "", // 发票代码(七位数)
@@ -155,7 +164,7 @@ const receiptData = ref<ReceiptData>({
 	picUrl: "", // 发票图片地址
 })
 const applyId = ref<any>()
-const saveProgress = ref(0)
+const saveProgress = ref(10)
 const receiptDataItems = computed(() => {
 	try {
 		const itemJson = JSON.parse(receiptData.value.itemJson)
@@ -170,9 +179,9 @@ const receiptDataItems = computed(() => {
 const totalPrice = computed(() => displayPrice(receiptData.value.totalPrice))
 
 const openDialog = (data: ReceiptData, id: any) => {
-	if (!data.picUrl) {
-		printButtonDisabled.value = true
-	}
+	isShowStamp.value = false
+	if (data.picUrl) isShowStamp.value = true
+
 	visible.value = true
 	receiptData.value = data
 	applyId.value = id
@@ -194,57 +203,73 @@ const genImageUpload = async (): Promise<string | void> => {
 			canvasWidth: 661.5,
 			canvasHeight: 359.1,
 			backgroundColor: "#ffffff",
-			pixelRatio: 10,
+			pixelRatio: 6,
 		})
 		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,
-				onUploadProgress: (progressEvent: any) => {
-					if (progressEvent.lengthComputable) {
-						saveProgress.value = Math.min(Math.round((progressEvent.loaded * 100) / progressEvent.total), 99)
-					}
-				},
-			})
-			if (code == 0) return data.url
-			useMessage().error(data.msg || "上传失败")
+			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) {
+							saveProgress.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
+				saveProgress.value = 10
+			}
 		}
 	}
 }
 
+// 盖章并上传发票图片并保存
+const stampReceipt = () => {
+	loading.value = true
+	isShowStamp.value = true
+	isStamping.value = true
+
+	setTimeout(async () => {
+		const url = await genImageUpload()
+		if (url) {
+			receiptData.value.picUrl = url
+			await saveReceipt()
+		}
+	}, 1010)
+}
+
 // 保存发票
 const saveReceipt = async () => {
 	try {
 		loading.value = true
-		isStamping.value = false
-		const url = await genImageUpload()
-		if (url) {
-			const { code, data } = await bindInvoice({
-				...receiptData.value,
-				picUrl: url,
-				deptOrUser: receiptData.value.deptOrUser,
-				applyId: applyId.value,
-			})
-			saveProgress.value = 100
-			if (code == 0) {
-				isStamping.value = true
-				printButtonDisabled.value = false
-				emit("refresh")
-				return useMessage().success("保存成功")
-			}
-			useMessage().error(data.msg || "保存失败")
+		const { code, data } = await bindInvoice({
+			...receiptData.value,
+			deptOrUser: receiptData.value.deptOrUser,
+			applyId: applyId.value,
+		})
+		if (code == 0) {
+			emit("refresh")
+			// visible.value = false
+			return useMessage().success("保存成功")
 		}
+		useMessage().error(data.msg || "保存失败")
 	} catch (err) {
 		useMessage().error(err as string)
 	} finally {
 		loading.value = false
-		saveProgress.value = 0
+		isStamping.value = false
 	}
 }
 
@@ -286,11 +311,11 @@ defineExpose({
 }
 @keyframes stamp-in {
 	0% {
-		transform: translateY(80px) scale(2.5) rotate(0);
+		transform: translateY(-100px) scale(2) rotate(0);
 		opacity: 0.2;
 	}
 	60% {
-		transform: translateY(10px) scale(2) rotate(0);
+		transform: translateY(-10px) scale(1.5) rotate(0);
 		opacity: 1;
 	}
 	100% {