浏览器打印唤起

package.json

@@ -44,6 +44,7 @@
 		"nprogress": "^0.2.0",
 		"pinia": "2.0.32",
 		"postcss": "8.4.40",
+		"print-js": "^1.6.0",
 		"qrcode": "1.5.1",
 		"qs": "^6.11.0",
 		"screenfull": "^6.0.2",

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

@@ -175,8 +175,8 @@
 							删除
 						</el-button>
 						<el-button
-							v-auth="'wallet_walletRechargeApply_print'"
 							v-if="['1'].includes(row.processStatus)"
+							v-auth="'wallet_walletRechargeApply_print'"
 							icon="printer"
 							text
 							type="primary"
@@ -367,12 +367,7 @@ const previewInvoice = async (row: any) => {
 	try {
 		getReceiptDataLoading.value = true
 		const res = await getInvoice({ id: row.id })
-		if (res.code == 0) {
+		if (res.code == 0 && printDialogRef.value) return printDialogRef.value.openDialog(res.data)
-			if (printDialogRef.value) {
-				printDialogRef.value.openDialog(res.data)
-			}
-			return
-		}
 	} catch (error: any) {
 		useMessage().error(error.msg)
 	} finally {

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

@@ -5,7 +5,9 @@
 
 			<div class="flex justify-between items-end mb-1">
 				<div></div>
-				<div class="text-lg">{{ receiptData.time || "    年    月    日".replace(/ /g, "&nbsp;&nbsp;") }}</div>
+				<div class="text-lg">
+					{{ formatDate(new Date(receiptData.time), "YYYY年mm月dd日") || "    年    月    日".replace(/ /g, "&nbsp;&nbsp;") }}
+				</div>
 				<span class="text-xl text-red-500">No. {{ receiptData.code || "0000000" }}</span>
 			</div>
 
@@ -15,7 +17,12 @@
 						<tr class="border border-gray-300">
 							<td class="border border-gray-300 px-2 w-3/12 h-10">交款单位（或个人）</td>
 							<td class="border border-gray-300 px-2 w-9/12 h-10 text-sm text-blue-800" colspan="4">
-								<input type="text" v-model="receiptData.deptOrUser" class="w-full h-full bg-transparent" />
+								<input
+									type="text"
+									v-model="receiptData.deptOrUser"
+									class="caret-red-600 w-full h-full bg-transparent text-center"
+									ref="deptOrUserInput"
+								/>
 							</td>
 						</tr>
 						<tr>
@@ -23,41 +30,56 @@
 							<td class="border border-gray-300 px-2 h-10">金额</td>
 						</tr>
 						<tr v-for="(item, index) in 3" :key="index">
-							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800" colspan="4">{{ receiptDataItems[item - 1]?.name }}</td>
+							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800" colspan="4">
-							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800">{{ receiptDataItems[item - 1]?.price }}</td>
+								<!-- <input type="text" v-model="receiptDataItems[index].name" class="w-full h-full bg-transparent" /> -->
+								{{ receiptDataItems[index].name }}
+							</td>
+							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800">
+								<!-- <input type="text" v-model="receiptDataItems[index].price" class="w-full h-full bg-transparent" /> -->
+								{{ receiptDataItems[index].price }}
+							</td>
 						</tr>
 						<tr>
 							<td class="border border-gray-300 px-2 text-left h-10" colspan="4">
 								<div class="flex items-center">
-									<span>合计人民币（大写）：</span>
+									<span class="whitespace-nowrap">合计人民币（大写）：</span>
-									<span class="text-sm text-blue-800">
+									<!-- <input type="text" v-model="receiptData.totalPriceCnStr" class="text-sm text-blue-800 w-full h-full bg-transparent" /> -->
-										<input type="text" v-model="receiptData.totalPriceCnStr" class="w-full h-full bg-transparent" />
+									<span class="text-sm text-blue-800">{{ receiptData.totalPriceCnStr }}</span>
-									</span>
 								</div>
 							</td>
 							<td class="border border-gray-300 px-2 text-left h-10">
 								<div class="flex items-center">
 									<span>￥：</span>
-									<span class="text-sm text-blue-800">
+									<!-- <input type="text" v-model="totalPrice" class="text-sm text-blue-800 w-full h-full bg-transparent" /> -->
-										<input type="text" v-model="totalPrice" class="w-full h-full bg-transparent" />
+									<span class="text-sm text-blue-800">{{ totalPrice }}</span>
-									</span>
 								</div>
 							</td>
 						</tr>
 						<tr>
 							<td class="border border-gray-300 px-2 w-1/6 h-10">收款单位<br />（盖章）</td>
-							<td class="border border-gray-300 px-2 text-left w-1/6 h-10 text-sm text-blue-800">{{ receiptData.payeeDept }}</td>
+							<td class="border border-gray-300 px-2 text-left w-1/6 h-10 text-sm text-blue-800">
+								<input type="text" v-model="receiptData.payeeDept" class="w-full h-full bg-transparent" />
+							</td>
 							<td class="border border-gray-300 px-2 w-1/6 h-10">收款人<br />（签名）</td>
-							<td class="border border-gray-300 px-2 text-left w-1/6 h-10 text-sm text-blue-800">{{ receiptData.payeeUser }}</td>
+							<td class="border border-gray-300 px-2 text-left w-1/6 h-10 text-sm text-blue-800">
+								<input type="text" v-model="receiptData.payeeUser" class="w-full h-full bg-transparent" />
+							</td>
 							<td class="border border-gray-300 px-2 text-left align-text-top w-1/3 h-10">
-								<span>备注：</span>
+								<div class="flex">
-								<span class="text-sm text-blue-800">{{ receiptData.remark }}</span>
+									<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"
+									/>
+								</div>
 							</td>
 						</tr>
 					</table>
 				</div>
 				<div class="flex items-center ml-1">
-					<span class="text-gray-500 text-md" style="writing-mode: vertical-rl; letter-spacing: 0.2em">第一联 存根联</span>
+					<span class="text-gray-500 text-md whitespace-nowrap" style="writing-mode: vertical-rl; letter-spacing: 0.2em">
+						第一联 存根联
+					</span>
 				</div>
 			</div>
 		</div>
@@ -71,12 +93,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue"
+import { ref, computed, nextTick } from "vue"
 import * as htmlToImage from "html-to-image"
 import { toPng, toJpeg, toBlob, toPixelData, toSvg } from "html-to-image"
 import { useMessage } from "/@/hooks/message"
 import request from "/@/utils/request"
-import { displayPrice } from "/@/utils/formatMoney"
+import { formatDate } from "/@/utils/formatTime"
+import { displayPrice, storePrice } from "/@/utils/formatMoney"
+import printJS from "print-js"
+import { putObj } from "/@/api/wallet/wallet-recharge-invoice"
 
 interface ReceiptData {
 	itemJson: string
@@ -91,6 +116,10 @@ interface ReceiptData {
 }
 
 const visible = ref(false)
+const loading = ref(false)
+const receiptRef = ref<HTMLElement | null>(null)
+const deptOrUserInput = ref<HTMLInputElement | null>(null)
+const timer = ref<any>(null)
 const receiptData = ref<ReceiptData>({
 	itemJson: "", // 款项json
 	code: "", // 发票代码(七位数)
@@ -102,70 +131,99 @@ const receiptData = ref<ReceiptData>({
 	payeeUser: "", // 收款人
 	remark: "", // 备注
 })
-const loading = ref(false)
 const receiptDataItems = computed(() => {
 	try {
-		return JSON.parse(receiptData.value.itemJson)
+		const itemJson = JSON.parse(receiptData.value.itemJson)
+		while (itemJson.length < 3) {
+			itemJson.push({ name: "", price: "" })
+		}
+		return itemJson
 	} catch (error) {
-		return 3
+		return new Array(3).fill({ name: "", price: "" })
 	}
 })
-const totalPrice = computed(() => {
+const totalPrice = computed(() => displayPrice(receiptData.value.totalPrice, ""))
-	return displayPrice(receiptData.value.totalPrice)
-})
-const receiptRef = ref<HTMLElement | null>()
 
 const openDialog = (data: ReceiptData) => {
 	visible.value = true
 	receiptData.value = data
+	timer.value = setTimeout(() => deptOrUserInput.value?.focus(), 50)
 }
 
 const handleClose = () => {
 	visible.value = false
+	timer.value = null
 }
 
-const saveReceipt = async () => {
+// 生成图片并上传
+const genImageUpload = async (): Promise<string | void> => {
 	if (receiptRef.value) {
-		try {
+		const blob = await htmlToImage.toBlob(receiptRef.value, {
-			loading.value = true
+			canvasWidth: 1920,
-			const blob = await htmlToImage.toBlob(receiptRef.value, {
+			canvasHeight: 900,
-				canvasWidth: 1920,
+			backgroundColor: "#ffffff",
-				canvasHeight: 900,
+		})
-				backgroundColor: "#ffffff",
+
+		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,
 			})
-
+			if (code == 0) return data.url
-			if (blob) {
+			useMessage().error(data.msg || "上传失败")
-				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,
-				})
-				if (code == 0) {
-					useMessage().success("保存成功")
-					console.log(data)
-					return data
-				}
-				useMessage().error(data.msg || "保存失败")
-			}
-		} catch (err) {
-			useMessage().error(err as string)
-		} finally {
-			loading.value = false
 		}
 	}
 }
 
-const handlePrint = () => {
+// 保存发票
-	window.print()
+const saveReceipt = async () => {
+	try {
+		loading.value = true
+		const url = await genImageUpload()
+		if (url) {
+			const { code, data } = await putObj({ url, deptOrUser: receiptData.value.deptOrUser })
+			if (code == 0) return useMessage().success("保存成功")
+			useMessage().error(data.msg || "保存失败")
+		}
+	} catch (err) {
+		useMessage().error(err as string)
+	} finally {
+		loading.value = false
+	}
+}
+
+// 打印
+const handlePrint = async () => {
+	if (receiptRef.value) {
+		const pngBase64 = await htmlToImage.toPng(receiptRef.value, {
+			canvasWidth: 1920,
+			canvasHeight: 900,
+			backgroundColor: "#ffffff",
+		})
+		printJS({ printable: pngBase64, type: "image", targetStyles: ["*"], maxWidth: 1920 })
+	}
 }
 
 defineExpose({
 	openDialog,
 })
 </script>
+
+<style scoped>
+@media print {
+	@page {
+		size: A4 landscape;
+	}
+	input {
+		border: none;
+		box-shadow: none;
+		outline: none;
+	}
+}
+</style>