11

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

@@ -117,6 +117,7 @@ import { formatDate } from "/@/utils/formatTime"
 import { displayPrice } from "/@/utils/formatMoney"
 import printJS from "print-js"
 import * as WalletRechargeInvoiceApi from "/@/api/wallet/wallet-recharge-invoice"
+import { useDict } from "/@/hooks/dict"
 
 interface ReceiptData {
 	id: string
@@ -137,7 +138,8 @@ interface ReceiptData {
 
 const emit = defineEmits(["refresh"])
 
-let timer: ReturnType<typeof setTimeout> | null = null
+const { check_status } = useDict("check_status")
+let timer
 const visible = ref(false)
 const loading = ref(false)
 const refreshLoading = ref(false)
@@ -176,7 +178,6 @@ const openDialog = (data: ReceiptData, id: string) => {
 	visible.value = true
 	receiptData.value = data
 	receiptData.value.id = id
-	if (timer) clearTimeout(timer)
 	timer = setTimeout(() => {
 		deptOrUserInput.value?.focus()
 	}, 50)
@@ -184,7 +185,6 @@ const openDialog = (data: ReceiptData, id: string) => {
 
 const handleClose = () => {
 	visible.value = false
-	if (timer) clearTimeout(timer)
 	timer = null
 }
 
@@ -201,7 +201,7 @@ const refreshInvoice = async () => {
 		visibleStampPic.value = false
 		// 申请审批
 		const blob = await genImage()
-		await new Promise((resolve) => setTimeout(resolve, 1000))
+		await new Promise((resolve) => setTimeout(resolve, 3000))
 		if (!blob) return useMessage().error("图片生成失败")
 		const picUrl = await uploadImage(blob)
 		if (!picUrl) return useMessage().error("图片上传失败")
@@ -241,60 +241,21 @@ const backInvoice = async () => {
 }
 
 // 生成图片
-const waitForFrames = async (count: number) => {
-	for (let i = 0; i < count; i += 1) {
-		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
-	}
-}
-
-const captureFilter = (node: Node) => {
-	if (!(node instanceof HTMLElement)) return true
-	if (node.classList.contains("el-loading-mask")) return false
-	if (node.classList.contains("el-loading-spinner")) return false
-	return true
-}
-
-const withReceiptCaptureStyle = async <T,>(fn: () => Promise<T>) => {
-	const el = receiptRef.value
-	if (!el) return fn()
-
-	const prevBackgroundColor = el.style.backgroundColor
-	const prevTransition = el.style.transition
-	const prevOpacity = el.style.opacity
-
-	el.style.backgroundColor = "#ffffff"
-	el.style.transition = "none"
-	el.style.opacity = "1"
-
-	await waitForFrames(2)
-
-	try {
-		return await fn()
-	} finally {
-		el.style.backgroundColor = prevBackgroundColor
-		el.style.transition = prevTransition
-		el.style.opacity = prevOpacity
-	}
-}
-
 const genImage = async (): Promise<Blob | void | null> => {
-	if (!receiptRef.value) return
-
-	const blob = await withReceiptCaptureStyle(async () => {
-		await new Promise((resolve) => setTimeout(resolve, 120))
-		return await htmlToImage.toBlob(receiptRef.value!, {
-			canvasWidth: 661.5,
-			canvasHeight: 359.1,
-			backgroundColor: "#ffffff",
-			pixelRatio: 3,
-			filter: captureFilter,
-		})
-	}).catch((error) => {
-		console.error(error)
-		return useMessage().error("图片生成错误")
-	})
-
-	return blob
+	if (receiptRef.value) {
+		const blob = await htmlToImage
+			.toBlob(receiptRef.value, {
+				canvasWidth: 661.5,
+				canvasHeight: 359.1,
+				backgroundColor: "#ffffff",
+				pixelRatio: 6,
+			})
+			.catch((error) => {
+				console.error(error)
+				return useMessage().error("图片生成错误")
+			})
+		return blob
+	}
 }
 
 // 图片上传
@@ -376,15 +337,11 @@ const applyStamp = async () => {
 // 打印
 const handlePrint = async () => {
 	if (receiptRef.value) {
-		const pngBase64 = await withReceiptCaptureStyle(async () => {
-			await new Promise((resolve) => setTimeout(resolve, 120))
-			return await htmlToImage.toPng(receiptRef.value!, {
-				canvasWidth: 661.5,
-				canvasHeight: 359.1,
-				pixelRatio: 4,
-				backgroundColor: "#ffffff",
-				filter: captureFilter,
-			})
+		const pngBase64 = await htmlToImage.toPng(receiptRef.value, {
+			canvasWidth: 661.5,
+			canvasHeight: 359.1,
+			pixelRatio: 10,
+			backgroundColor: "#ffffff",
 		})
 		printJS({ printable: pngBase64, type: "image", targetStyles: ["*"], maxWidth: 661.5 })
 	}