11

src/api/wallet/wallet-recharge-invoice.ts

@@ -1,5 +1,17 @@
 import request from "/@/utils/request"
 
+/**
+ * 根据申请id获取发票详情
+ * @param id 申请id
+ */
+export function invoiceBack(query: any) {
+	return request({
+		url: "/wallet/walletRechargeInvoice/back",
+		method: "get",
+		params: query,
+	})
+}
+
 /**
  * 根据申请id获取发票详情
  * @param id 申请id

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

@@ -6,7 +6,8 @@
 			<div class="flex justify-between items-end mb-1">
 				<div></div>
 				<div>
-					{{ formatDate(new Date(receiptData.time), "YYYY年 mm月 dd日") || "    年    月    日".replace(/ /g, "&nbsp;&nbsp;") }}
+					{{ formatDate(new Date(receiptData.time), "YYYY年 mm月 dd日") || " 年 月 日".replace(/ /g, "&nbsp;&nbsp;")
+					}}
 				</div>
 				<span>
 					<span>No. </span>
@@ -19,12 +20,8 @@
 					<tr>
 						<td class="border border-gray-600 px-2 w-3/12 h-[0.75cm]">交款单位（或个人）</td>
 						<td class="border border-gray-600 px-2 w-9/12 h-[0.75cm] text-sm text-blue-800" colspan="4">
-							<input
-								type="text"
-								v-model="receiptData.deptOrUser"
-								class="caret-red-600 w-full h-full bg-transparent text-center"
-								ref="deptOrUserInput"
-							/>
+							<input type="text" v-model="receiptData.deptOrUser"
+								class="caret-red-600 w-full h-full bg-transparent text-center" ref="deptOrUserInput" />
 						</td>
 					</tr>
 					<tr>
@@ -61,15 +58,10 @@
 						<td class="border border-gray-600 px-2 w-1/6 h-[0.75cm]">收款单位<br />（盖章）</td>
 						<td class="border border-gray-600 px-2 text-left w-1/6 h-[0.75cm] text-sm text-blue-800">
 							<!-- <input type="text" v-model="receiptData.payeeDept" class="w-full h-full bg-transparent" /> -->
-							<img
-								v-if="receiptData.picUrl"
-								class="w-[2.5cm] h-[2.5cm] absolute -top-2 left-[140px]"
-								:class="{ stamping: isStamping }"
-								draggable="false"
+							<img v-if="receiptData.picUrl" class="w-[2.5cm] h-[2.5cm] absolute -top-2 left-[140px]"
+								:class="{ stamping: isStamping }" draggable="false"
 								style="-webkit-user-drag: none; user-select: none; pointer-events: none"
-								oncontextmenu="return false"
-								src="/@/assets/receiptStamp.png"
-							/>
+								oncontextmenu="return false" src="/@/assets/receiptStamp.png" />
 						</td>
 						<td class="border border-gray-600 px-2 w-1/6 h-[0.75cm]">开票人<br />（签名）</td>
 						<td class="border border-gray-600 px-2 text-left w-1/6 h-[0.75cm] text-sm text-blue-800">
@@ -79,16 +71,15 @@
 						<td class="border border-gray-600 px-2 text-left align-text-top w-1/3 h-[0.75cm]">
 							<div class="flex">
 								<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"
-								/>
+								<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 class="flex items-center absolute bottom-0 top-0 right-0">
-					<span class="text-gray-500 text-sm whitespace-nowrap" style="writing-mode: vertical-rl; letter-spacing: 0.2em">
+					<span class="text-gray-500 text-sm whitespace-nowrap"
+						style="writing-mode: vertical-rl; letter-spacing: 0.2em">
 						{{ "第一联 存根联".replace(/ /g, "&nbsp;&nbsp;&nbsp;&nbsp;") }}
 					</span>
 				</div>
@@ -96,23 +87,20 @@
 		</div>
 
 		<div class="h-6">
-			<el-progress
-				:percentage="progressPercent"
-				v-if="progressPercent > 30"
-				:stroke-width="6"
-				status="success"
-				striped
-				striped-flow
-				:duration="20"
-			/>
+			<el-progress :percentage="progressPercent" v-if="progressPercent > 30" :stroke-width="6" status="success"
+				striped striped-flow :duration="20" />
 		</div>
 
 		<template #footer>
 			<el-button @click="handleClose" :disabled="loading">关闭</el-button>
-			<el-button v-auth="'wallet_walletRechargeApply_receiptStamp'" type="primary" @click="stampReceipt" :disabled="loading">
+			<el-button v-if="!receiptData.picUrl" v-auth="'wallet_walletRechargeApply_receiptStamp'" type="primary"
+				@click="stampReceipt" :disabled="loading">
 				盖章
 			</el-button>
-			<el-button v-auth="'wallet_walletRechargeApply_receiptSave'" type="primary" @click="saveReceipt" :disabled="loading">保存</el-button>
+			<el-button v-if="receiptData.picUrl" v-auth="'wallet_walletRechargeApply_back'" type="primary"
+				@click="backInvoice" :disabled="loadingBack">作废</el-button>
+			<el-button v-auth="'wallet_walletRechargeApply_receiptSave'" type="primary" @click="saveReceipt"
+				:disabled="loading">保存</el-button>
 			<el-button v-if="receiptData.picUrl" type="primary" @click="handlePrint" :disabled="loading">打印</el-button>
 		</template>
 	</el-dialog>
@@ -121,17 +109,17 @@
 <script setup lang="ts">
 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 { formatDate } from "/@/utils/formatTime"
 import { displayPrice } from "/@/utils/formatMoney"
 import printJS from "print-js"
-import { bindInvoice } from "/@/api/wallet/wallet-recharge-invoice"
+import { bindInvoice, invoiceBack, getObj } from "/@/api/wallet/wallet-recharge-invoice"
 
 const emit = defineEmits(["refresh"])
 
 interface ReceiptData {
+	id: string
 	itemJson: string
 	code: string
 	time: string
@@ -146,11 +134,13 @@ interface ReceiptData {
 
 const visible = ref(false)
 const loading = ref(false)
+const loadingBack = ref(false)
 const receiptRef = ref<HTMLElement | null>(null)
 const deptOrUserInput = ref<HTMLInputElement | null>(null)
 let timer = null
 const isStamping = ref(false) // 盖章动画开关
 const receiptData = ref<ReceiptData>({
+	id: "",
 	itemJson: "", // 款项json
 	code: "", // 发票代码(七位数)
 	time: "", // 发票日期
@@ -192,6 +182,27 @@ const handleClose = () => {
 	timer = null
 }
 
+// 发票退回
+const backInvoice = async () => {
+	if (!receiptData.value.picUrl) {
+		useMessage().error("请先盖章")
+		return
+	}
+	loadingBack.value = true
+	try {
+		await invoiceBack({ id: receiptData.value.id })
+		const res = await getObj(receiptData.value.id)
+		receiptData.value = res.data
+		emit("refresh")
+		useMessage().success("作废成功")
+	} catch (error: any) {
+		console.error(error);
+		useMessage().error(error.msg)
+	} finally {
+		loadingBack.value = false
+	}
+}
+
 // 生成图片并上传
 const genImageUpload = async (): Promise<string | void> => {
 	if (receiptRef.value) {
@@ -307,15 +318,18 @@ defineExpose({
 .stamping {
 	animation: stamp-in 1s;
 }
+
 @keyframes stamp-in {
 	0% {
 		transform: translateY(-100px) scale(2) rotate(0);
 		opacity: 0.2;
 	}
+
 	60% {
 		transform: translateY(-10px) scale(1.5) rotate(0);
 		opacity: 1;
 	}
+
 	100% {
 		transform: translateY(0) scale(1) rotate(0);
 		opacity: 1;