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
This commit is contained in:
dzc committed
commit
b33b5bb155
3 files changed
+219
-116
No files matched your search
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
@keyup.enter="getDataList">
|
||||
<el-form v-show="showSearch" ref="queryRef" :inline="true" :model="state.queryForm" @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"
|
||||
placeholder="充值类型" />
|
||||
<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz_recharge" 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"
|
||||
type="datetimerange" />
|
||||
<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss" 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"
|
||||
type="datetimerange" />
|
||||
<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn")
|
||||
}}</el-button>
|
||||
<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</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()"
|
||||
v-auth="'wallet_walletRechargeApply_add'">
|
||||
<el-button icon="folder-add" type="primary" class="ml10" @click="uploadExcelRef.show()" v-auth="'wallet_walletRechargeApply_add'">
|
||||
导 入
|
||||
</el-button>
|
||||
<el-button v-if="false" plain :disabled="multiple" icon="Delete" type="primary"
|
||||
v-auth="'wallet_walletRechargeApply_del'" @click="handleDelete(selectObjs)">
|
||||
<el-button
|
||||
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'"
|
||||
@exportExcel="exportExcel" class="ml10 mr20" style="float: right"
|
||||
@queryTable="getDataList" />
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
: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"
|
||||
:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
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="[
|
||||
'wallet_walletRechargeApply_view',
|
||||
'wallet_walletRechargeApply_apply',
|
||||
'wallet_walletRechargeApply_edit',
|
||||
'wallet_walletRechargeApply_del',
|
||||
'wallet_walletRechargeApply_check',
|
||||
'wallet_walletRechargeApply_print',
|
||||
]" width="300" fixed="right">
|
||||
<el-table-column
|
||||
label="操作"
|
||||
v-auths="[
|
||||
'wallet_walletRechargeApply_view',
|
||||
'wallet_walletRechargeApply_apply',
|
||||
'wallet_walletRechargeApply_edit',
|
||||
'wallet_walletRechargeApply_del',
|
||||
'wallet_walletRechargeApply_check',
|
||||
]"
|
||||
width="300"
|
||||
fixed="right"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="row.importTime" icon="Document" text type="primary"
|
||||
v-auth="'wallet_walletRechargeApply_view'" @click="doInfo(row)">
|
||||
<el-button
|
||||
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"
|
||||
v-auth="'wallet_walletRechargeApply_apply'" @click="doApply(row)">
|
||||
<el-button
|
||||
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"
|
||||
v-auth="'wallet_walletRechargeApply_edit'" @click="formDialogRef.openDialog(row.id)">
|
||||
<el-button
|
||||
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
|
||||
icon="VideoPlay" @click="deal(row)" v-auth="'wallet_walletRechargeApply_check'">
|
||||
<el-button
|
||||
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'"
|
||||
@click="handleDelete([row.id])">
|
||||
icon="delete"
|
||||
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)"
|
||||
icon="printer" text type="primary" :loading="getReceiptDataLoading"
|
||||
@click="previewInvoice(row)">
|
||||
<el-button
|
||||
v-if="['1'].includes(row.processStatus)"
|
||||
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"
|
||||
v-bind="state.pagination" />
|
||||
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
|
||||
<upload-excel ref="uploadExcelRef" title="用户信息导入" url="/wallet/wallet-recharge-apply/read-excel"
|
||||
temp-url="/admin/sys-file/local/file/wallet_recharge.xlsx" @refreshDataList="getDataList(false)" />
|
||||
<upload-excel
|
||||
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 (printDialogRef.value) {
|
||||
printDialogRef.value.openDialog(res.data)
|
||||
}
|
||||
return
|
||||
}
|
||||
if (res.code == 0 && printDialogRef.value) return printDialogRef.value.openDialog(res.data)
|
||||
} catch (error: any) {
|
||||
useMessage().error(error.msg)
|
||||
} finally {
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
|
||||
<div class="flex justify-between items-end mb-1">
|
||||
<div></div>
|
||||
<div class="text-lg">{{ receiptData.time || " 年 月 日".replace(/ /g, " ") }}</div>
|
||||
<div class="text-lg">
|
||||
{{ formatDate(new Date(receiptData.time), "YYYY年mm月dd日") || " 年 月 日".replace(/ /g, " ") }}
|
||||
</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"
|
||||
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>
|
||||
@@ -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">{{
|
||||
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>
|
||||
<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800" colspan="4">
|
||||
<!-- <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="text-sm text-blue-800">
|
||||
<input type="text" v-model="receiptData.totalPriceCnStr"
|
||||
class="w-full h-full bg-transparent" />
|
||||
</span>
|
||||
<span class="whitespace-nowrap">合计人民币（大写）：</span>
|
||||
<!-- <input type="text" v-model="receiptData.totalPriceCnStr" class="text-sm text-blue-800 w-full h-full bg-transparent" /> -->
|
||||
<span class="text-sm text-blue-800">{{ receiptData.totalPriceCnStr }}</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="w-full h-full bg-transparent" />
|
||||
</span>
|
||||
<!-- <input type="text" v-model="totalPrice" class="text-sm text-blue-800 w-full h-full bg-transparent" /> -->
|
||||
<span class="text-sm text-blue-800">{{ totalPrice }}</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>
|
||||
<span class="text-sm text-blue-800">{{ receiptData.remark }}</span>
|
||||
<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"
|
||||
/>
|
||||
</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>
|
||||
@@ -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(() => {
|
||||
return displayPrice(receiptData.value.totalPrice)
|
||||
})
|
||||
const receiptRef = ref<HTMLElement | null>()
|
||||
const totalPrice = computed(() => displayPrice(receiptData.value.totalPrice, ""))
|
||||
|
||||
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 {
|
||||
loading.value = true
|
||||
const blob = await htmlToImage.toBlob(receiptRef.value, {
|
||||
canvasWidth: 1920,
|
||||
canvasHeight: 900,
|
||||
backgroundColor: "#ffffff",
|
||||
const blob = await htmlToImage.toBlob(receiptRef.value, {
|
||||
canvasWidth: 1920,
|
||||
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 (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
|
||||
if (code == 0) return data.url
|
||||
useMessage().error(data.msg || "上传失败")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
Reference in new issue
Block a user