diff --git a/src/views/tools/data/cache.vue b/src/views/tools/data/cache.vue index 9055d8d..3f804a9 100644 --- a/src/views/tools/data/cache.vue +++ b/src/views/tools/data/cache.vue @@ -2,26 +2,14 @@
-
+ class="p-4 min-w-[375px] md:min-w-[700px] xl:min-w-[800px] mt-3 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-3 3xl:grid-cols-6"> +
- + diff --git a/src/views/wallet/wallet-recharge-invoice/print-dialog.vue b/src/views/wallet/wallet-recharge-invoice/print-dialog.vue index 2666832..6c27221 100644 --- a/src/views/wallet/wallet-recharge-invoice/print-dialog.vue +++ b/src/views/wallet/wallet-recharge-invoice/print-dialog.vue @@ -117,7 +117,6 @@ 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 @@ -138,8 +137,7 @@ interface ReceiptData { const emit = defineEmits(["refresh"]) -const { check_status } = useDict("check_status") -let timer +let timer: ReturnType | null = null const visible = ref(false) const loading = ref(false) const refreshLoading = ref(false) @@ -178,6 +176,7 @@ 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) @@ -185,6 +184,7 @@ const openDialog = (data: ReceiptData, id: string) => { const handleClose = () => { visible.value = false + if (timer) clearTimeout(timer) timer = null } @@ -241,23 +241,54 @@ const backInvoice = async () => { } // 生成图片 -const genImage = async (): Promise => { - 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 +const waitForFrames = async (count: number) => { + for (let i = 0; i < count; i += 1) { + await new Promise((resolve) => requestAnimationFrame(() => resolve())) } } +const withReceiptCaptureStyle = async (fn: () => Promise) => { + 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 => { + 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: "transparent", + pixelRatio: 3, + }) + }).catch((error) => { + console.error(error) + return useMessage().error("图片生成错误") + }) + + return blob +} + // 图片上传 const uploadImage = async (blob: Blob): Promise => { const formData = new FormData() @@ -337,11 +368,14 @@ const applyStamp = async () => { // 打印 const handlePrint = async () => { if (receiptRef.value) { - const pngBase64 = await htmlToImage.toPng(receiptRef.value, { - canvasWidth: 661.5, - canvasHeight: 359.1, - pixelRatio: 10, - backgroundColor: "#ffffff", + 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: "transparent", + }) }) printJS({ printable: pngBase64, type: "image", targetStyles: ["*"], maxWidth: 661.5 }) }