Merge branch 'master' of https://codeup.aliyun.com/bsdtec/biz-pc-cloud

# Conflicts:
#	src/views/wallet/wallet-recharge-apply/index.vue
#	src/views/wallet/wallet-recharge-apply/print-dialog.vue

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

@@ -1,8 +1,7 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form v-show="showSearch" ref="queryRef" :inline="true" :model="state.queryForm"
+			<el-form v-show="showSearch" ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-				@keyup.enter="getDataList">
 				<el-row>
 					<el-form-item style="width: 300px" label="用户" prop="userIds">
 						<select-user v-model="state.queryForm.userIds" placeholder="用户" />
@@ -11,47 +10,60 @@
 						<select-wallet-type v-model="state.queryForm.walletTypeId" placeholder="饭卡类型" clearable />
 					</el-form-item>
 					<el-form-item style="width: 200px" label="充值类型" prop="bizType">
-						<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz_recharge"
+						<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz_recharge" placeholder="充值类型" />
-							placeholder="充值类型" />
 					</el-form-item>
 					<el-form-item style="width: 450px" label="创建时间" prop="createTimeList">
-						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss"
+						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
-							type="datetimerange" />
 					</el-form-item>
 					<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
-						<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss"
+						<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
-							type="datetimerange" />
 					</el-form-item>
 					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn")
+						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
-						}}</el-button>
 						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
 					</el-form-item>
 				</el-row>
 			</el-form>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button icon="folder-add" type="primary" class="ml10" @click="uploadExcelRef.show()"
+					<el-button icon="folder-add" type="primary" class="ml10" @click="uploadExcelRef.show()" v-auth="'wallet_walletRechargeApply_add'">
-						v-auth="'wallet_walletRechargeApply_add'">
 						导 入
 					</el-button>
-					<el-button v-if="false" plain :disabled="multiple" icon="Delete" type="primary"
+					<el-button
-						v-auth="'wallet_walletRechargeApply_del'" @click="handleDelete(selectObjs)">
+						v-if="false"
+						plain
+						:disabled="multiple"
+						icon="Delete"
+						type="primary"
+						v-auth="'wallet_walletRechargeApply_del'"
+						@click="handleDelete(selectObjs)"
+					>
 						删除
 					</el-button>
 					<div class="flex justify-between items-center">
 						<el-tabs class="flex-1" v-model="activeName" @tab-click="handleClickTabItem">
 							<el-tab-pane v-for="v in tabItems" :key="v.id" :label="v.label" :name="v.value" />
 						</el-tabs>
-						<right-toolbar v-model:showSearch="showSearch" :export="'wallet_walletRechargeApply_export'"
+						<right-toolbar
-							@exportExcel="exportExcel" class="ml10 mr20" style="float: right"
+							v-model:showSearch="showSearch"
-							@queryTable="getDataList" />
+							:export="'wallet_walletRechargeApply_export'"
+							@exportExcel="exportExcel"
+							class="ml10 mr20"
+							style="float: right"
+							@queryTable="getDataList"
+						/>
 					</div>
 				</div>
 			</el-row>
-			<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+			<el-table
-				:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
+				:data="state.dataList"
-				@sort-change="sortChangeHandle">
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+			>
 				<el-table-column type="selection" width="40" align="center" />
 				<el-table-column type="index" label="#" width="80" />
 				<el-table-column prop="username" label="申请人" />
@@ -98,54 +110,97 @@
 						</div>
 					</template>
 				</el-table-column>
-				<el-table-column label="操作" v-auths="[
+				<el-table-column
-					'wallet_walletRechargeApply_view',
+					label="操作"
-					'wallet_walletRechargeApply_apply',
+					v-auths="[
-					'wallet_walletRechargeApply_edit',
+						'wallet_walletRechargeApply_view',
-					'wallet_walletRechargeApply_del',
+						'wallet_walletRechargeApply_apply',
-					'wallet_walletRechargeApply_check',
+						'wallet_walletRechargeApply_edit',
-					'wallet_walletRechargeApply_print',
+						'wallet_walletRechargeApply_del',
-				]" width="300" fixed="right">
+						'wallet_walletRechargeApply_check',
+					]"
+					width="300"
+					fixed="right"
+				>
 					<template #default="{ row }">
-						<el-button v-if="row.importTime" icon="Document" text type="primary"
+						<el-button
-							v-auth="'wallet_walletRechargeApply_view'" @click="doInfo(row)">
+							v-if="row.importTime"
+							icon="Document"
+							text
+							type="primary"
+							v-auth="'wallet_walletRechargeApply_view'"
+							@click="doInfo(row)"
+						>
 							数据
 						</el-button>
-						<el-button v-if="row.importTime && !row.processId" icon="Connection" text type="primary"
+						<el-button
-							v-auth="'wallet_walletRechargeApply_apply'" @click="doApply(row)">
+							v-if="row.importTime && !row.processId"
+							icon="Connection"
+							text
+							type="primary"
+							v-auth="'wallet_walletRechargeApply_apply'"
+							@click="doApply(row)"
+						>
 							申请
 						</el-button>
-						<el-button v-if="!row.processId" icon="edit-pen" text type="primary"
+						<el-button
-							v-auth="'wallet_walletRechargeApply_edit'" @click="formDialogRef.openDialog(row.id)">
+							v-if="!row.processId"
+							icon="edit-pen"
+							text
+							type="primary"
+							v-auth="'wallet_walletRechargeApply_edit'"
+							@click="formDialogRef.openDialog(row.id)"
+						>
 							编辑
 						</el-button>
-						<el-button v-if="row.isCheckUser && row.processStatus == '1'" type="primary" size="small" link
+						<el-button
-							icon="VideoPlay" @click="deal(row)" v-auth="'wallet_walletRechargeApply_check'">
+							v-if="row.isCheckUser && row.processStatus == '1'"
+							type="primary"
+							size="small"
+							link
+							icon="VideoPlay"
+							@click="deal(row)"
+							v-auth="'wallet_walletRechargeApply_check'"
+						>
 							开始处理
 						</el-button>
 						<el-button
 							v-if="row.userId == userInfos?.user?.userId && [null, '1'].includes(row.processStatus)"
-							icon="delete" text type="primary" v-auth="'wallet_walletRechargeApply_del'"
+							icon="delete"
-							@click="handleDelete([row.id])">
+							text
+							type="primary"
+							v-auth="'wallet_walletRechargeApply_del'"
+							@click="handleDelete([row.id])"
+						>
 							删除
 						</el-button>
-						<el-button v-auth="'wallet_walletRechargeApply_print'" v-if="['1'].includes(row.processStatus)"
+						<el-button
-							icon="printer" text type="primary" :loading="getReceiptDataLoading"
+							v-if="['1'].includes(row.processStatus)"
-							@click="previewInvoice(row)">
+							v-auth="'wallet_walletRechargeApply_print'"
+							icon="printer"
+							text
+							type="primary"
+							:loading="getReceiptDataLoading"
+							@click="previewInvoice(row)"
+						>
 							打印发票
 						</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
-			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-				v-bind="state.pagination" />
 		</div>
 
 		<!-- 编辑、新增  -->
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
 
-		<upload-excel ref="uploadExcelRef" title="用户信息导入" url="/wallet/wallet-recharge-apply/read-excel"
+		<upload-excel
-			temp-url="/admin/sys-file/local/file/wallet_recharge.xlsx" @refreshDataList="getDataList(false)" />
+			ref="uploadExcelRef"
+			title="用户信息导入"
+			url="/wallet/wallet-recharge-apply/read-excel"
+			temp-url="/admin/sys-file/local/file/wallet_recharge.xlsx"
+			@refreshDataList="getDataList(false)"
+		/>
 
 		<!-- 审批抽屉 -->
 		<process-drawer ref="processDrawerRef" @task-submit-event="taskSubmitEvent" />
@@ -312,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,8 +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"
+								<input
-									class="w-full h-full bg-transparent" />
+									type="text"
+									v-model="receiptData.deptOrUser"
+									class="caret-red-600 w-full h-full bg-transparent text-center"
+									ref="deptOrUserInput"
+								/>
 							</td>
 						</tr>
 						<tr>
@@ -24,47 +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">{{
+							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800" colspan="4">
-								receiptDataItems[item - 1]?.name }}</td>
+								<!-- <input type="text" v-model="receiptDataItems[index].name" class="w-full h-full bg-transparent" /> -->
-							<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800">{{ receiptDataItems[item
+								{{ receiptDataItems[index].name }}
-								- 1]?.price }}</td>
+							</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"
+									<span class="text-sm text-blue-800">{{ receiptData.totalPriceCnStr }}</span>
-											class="w-full h-full bg-transparent" />
-									</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">{{
+							<td class="border border-gray-300 px-2 text-left w-1/6 h-10 text-sm text-blue-800">
-								receiptData.payeeDept }}</td>
+								<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">{{
+							<td class="border border-gray-300 px-2 text-left w-1/6 h-10 text-sm text-blue-800">
-								receiptData.payeeUser }}</td>
+								<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 class="text-gray-500 text-md whitespace-nowrap" style="writing-mode: vertical-rl; letter-spacing: 0.2em">
-						存根联</span>
+						第一联 存根联
+					</span>
 				</div>
 			</div>
 		</div>
@@ -78,11 +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
@@ -97,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: "", // 发票代码(七位数)
@@ -108,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>