发票上传保存

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

@@ -180,6 +180,7 @@
 							icon="printer"
 							text
 							type="primary"
+							:loading="getReceiptDataLoading"
 							@click="previewInvoice(row)"
 						>
 							打印发票
@@ -205,7 +206,7 @@
 		<process-drawer ref="processDrawerRef" @task-submit-event="taskSubmitEvent" />
 
 		<!-- 发票预览 -->
-		<print-dialog v-model="printDialogVisible" :receipt-data="receiptData" />
+		<print-dialog ref="printDialogRef" />
 	</div>
 </template>
 
@@ -243,15 +244,8 @@ const multiple = ref(true)
 const activeName = ref()
 const tabItems = ref<any>([{}])
 const processDrawerRef = ref()
-const printDialogVisible = ref(false)
-const receiptData = ref({
-	receiptNo: "",
-	date: "",
-	payer: "",
-	content: "",
-	amount: "",
-	amountInWords: "",
-})
+const printDialogRef = ref()
+const getReceiptDataLoading = ref(false)
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
@@ -371,14 +365,18 @@ const taskSubmitEvent = () => {
 // 预览发票
 const previewInvoice = async (row: any) => {
 	try {
+		getReceiptDataLoading.value = true
 		const res = await getInvoice({ id: row.id })
 		if (res.code == 0) {
-			receiptData.value = res.data
-			printDialogVisible.value = true
+			if (printDialogRef.value) {
+				printDialogRef.value.openDialog(res.data)
+			}
 			return
 		}
 	} catch (error: any) {
 		useMessage().error(error.msg)
+	} finally {
+		getReceiptDataLoading.value = false
 	}
 }
 </script>

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

@@ -5,8 +5,8 @@
 
 			<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 class="text-lg">{{ receiptData.time || "    年    月    日".replace(/ /g, "&nbsp;&nbsp;") }}</div>
+				<span class="text-xl text-red-500">No. {{ receiptData.code || "0000000" }}</span>
 			</div>
 
 			<div class="flex flex-row">
@@ -15,43 +15,43 @@
 						<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 }}
+								<input type="text" v-model="receiptData.deptOrUser" class="w-full h-full bg-transparent" />
 							</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 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">{{ receiptDataItems[item - 1]?.price }}</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>
+								<div class="flex items-center">
+									<span>合计人民币（大写）：</span>
+									<span class="text-sm text-blue-800">
+										<input type="text" v-model="receiptData.totalPriceCnStr" class="w-full h-full bg-transparent" />
+									</span>
+								</div>
 							</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>
+								<div class="flex items-center">
+									<span>￥：</span>
+									<span class="text-sm text-blue-800">
+										<input type="text" v-model="totalPrice" class="w-full h-full bg-transparent" />
+									</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"></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 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 w-1/6 h-10 text-sm text-blue-800">{{ receiptData.payeeUser }}</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>
+								<span class="text-sm text-blue-800">{{ receiptData.remark }}</span>
 							</td>
 						</tr>
 					</table>
@@ -64,8 +64,8 @@
 
 		<template #footer>
 			<el-button @click="handleClose">关闭</el-button>
-			<el-button type="primary" @click="saveReceipt">保存</el-button>
-			<el-button type="primary" @click="handlePrint">打印</el-button>
+			<el-button type="primary" @click="saveReceipt" :disabled="loading">保存</el-button>
+			<el-button type="primary" @click="handlePrint" :disabled="loading">打印</el-button>
 		</template>
 	</el-dialog>
 </template>
@@ -75,80 +75,97 @@ import { ref, computed } 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"
 
 interface ReceiptData {
-	receiptNo?: string
-	date?: string
-	payer?: string
-	content?: string
-	amount?: string
-	amountInWords?: string
-	cashier?: string
+	itemJson: string
+	code: string
+	time: string
+	deptOrUser: string
+	totalPrice: string
+	payeeDept: string
+	payeeUser: string
+	remark: string
+	totalPriceCnStr: 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: "",
-		},
-)
+const visible = ref(false)
+const receiptData = ref<ReceiptData>({
+	itemJson: "", // 款项json
+	code: "", // 发票代码(七位数)
+	time: "", // 发票日期
+	deptOrUser: "", // 交款单位或个人
+	totalPrice: "", // 合计人民币
+	totalPriceCnStr: "", // 合计人民币大写
+	payeeDept: "", // 收款单位
+	payeeUser: "", // 收款人
+	remark: "", // 备注
+})
+const loading = ref(false)
+const receiptDataItems = computed(() => {
+	try {
+		return JSON.parse(receiptData.value.itemJson)
+	} catch (error) {
+		return 3
+	}
+})
+const totalPrice = computed(() => {
+	return displayPrice(receiptData.value.totalPrice)
+})
 const receiptRef = ref<HTMLElement | null>()
 
-watch(
-	() => visible.value,
-	(newVal) => {
-		emit("update:modelValue", newVal)
-	},
-)
-
-watch(
-	() => props.modelValue,
-	(newVal) => {
-		visible.value = newVal
-	},
-)
+const openDialog = (data: ReceiptData) => {
+	visible.value = true
+	receiptData.value = data
+}
 
 const handleClose = () => {
 	visible.value = false
 }
 
-const saveReceipt = () => {
+const saveReceipt = async () => {
 	if (receiptRef.value) {
-		htmlToImage
-			.toPng(receiptRef.value, {
+		try {
+			loading.value = true
+			const blob = await htmlToImage.toBlob(receiptRef.value, {
 				canvasWidth: 1920,
 				canvasHeight: 900,
 				backgroundColor: "#ffffff",
-				// style: {},
 			})
-			.then((dataUrl: string) => {
-				console.log(dataUrl)
-				const img = new Image()
-				img.src = dataUrl
-			})
-			.catch((err) => {
-				useMessage().error(err)
-			})
-	}
 
-	// visible.value = false
+			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) {
+					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()
 }
+
+defineExpose({
+	openDialog,
+})
 </script>