发票打印对话框

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

@@ -0,0 +1,129 @@
+<template>
+	<el-dialog v-model="visible" title="打印发票" width="900px" :close-on-click-modal="false" draggable destroy-on-close>
+		<div class="border border-gray-300 p-6 bg-[#EBE1C622]">
+			<div class="text-center text-4xl font-bold">浦江县行政事业单位食堂统一收款收据</div>
+
+			<div class="flex justify-between items-end mb-1">
+				<div></div>
+				<div class="text-lg">{{ receiptData.date || "    年    月    日".replace(/ /g, "&nbsp;&nbsp;") }}</div>
+				<span class="text-xl text-red-500">No. {{ receiptData.receiptNo || "0000000" }}</span>
+			</div>
+
+			<div class="flex flex-row">
+				<div class="flex-1">
+					<table class="w-full border-collapse text-center text-lg">
+						<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">
+								{{ receiptData.payer }}
+							</td>
+						</tr>
+						<tr>
+							<td class="border border-gray-300 px-2 h-10" colspan="4">款项内容</td>
+							<td class="border border-gray-300 px-2 h-10">金额</td>
+						</tr>
+						<tr>
+							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800" colspan="4">{{}}</td>
+							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800">{{}}</td>
+						</tr>
+						<tr>
+							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800" colspan="4">{{}}</td>
+							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800">{{}}</td>
+						</tr>
+						<tr>
+							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800" colspan="4">{{}}</td>
+							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800">{{}}</td>
+						</tr>
+						<tr>
+							<td class="border border-gray-300 px-2 text-left h-10" colspan="4">
+								<span>合计人民币（大写）：</span>
+								<span class="text-sm text-blue-800">{{}}</span>
+							</td>
+							<td class="border border-gray-300 px-2 text-left h-10">
+								<span>￥：</span>
+								<span class="text-sm text-blue-800">{{ receiptData.amountInWords }}</span>
+							</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"></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">{{}}</td>
+							<td class="border border-gray-300 px-2 text-left align-text-top w-1/3 h-10">
+								<span>备注：</span>
+								<span class="text-sm text-blue-800">{{}}</span>
+							</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>
+				</div>
+			</div>
+		</div>
+
+		<template #footer>
+			<el-button @click="handleClose">关闭</el-button>
+			<el-button type="primary" @click="handlePrint">打印</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue"
+
+interface ReceiptData {
+	receiptNo?: string
+	date?: string
+	payer?: string
+	content?: string
+	amount?: string
+	amountInWords?: string
+	cashier?: string
+}
+
+const props = defineProps<{
+	modelValue: boolean
+	receiptData?: ReceiptData
+}>()
+
+const emit = defineEmits(["update:modelValue"])
+
+const visible = ref(props.modelValue)
+const receiptData = computed(
+	() =>
+		props.receiptData || {
+			receiptNo: "",
+			date: "",
+			payer: "",
+			content: "",
+			amount: "",
+			amountInWords: "",
+			cashier: "",
+		},
+)
+
+// 监听 visible 变化
+watch(
+	() => visible.value,
+	(newVal) => {
+		emit("update:modelValue", newVal)
+	},
+)
+
+// 监听 props.modelValue 变化
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		visible.value = newVal
+	},
+)
+
+const handleClose = () => {
+	visible.value = false
+}
+
+const handlePrint = () => {
+	window.print()
+}
+</script>