发票审批页面修改

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

@@ -12,8 +12,10 @@
 					<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-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-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>
@@ -24,14 +26,19 @@
 					<el-button icon="folder-add" type="primary" class="ml10" @click="uploadExcelRef.show()" v-auth="'wallet_walletRechargeApply_add'">
 						导 入
 					</el-button>
-					<right-toolbar
-						v-model:showSearch="showSearch"
-						:export="'wallet_walletRechargeInvoice_export'"
-						@exportExcel="exportExcel"
-						class="ml10 mr20"
-						style="float: right"
-						@queryTable="getDataList"
-					></right-toolbar>
+					<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_walletRechargeInvoice_export'"
+							@exportExcel="exportExcel"
+							class="ml10 mr20"
+							style="float: right"
+							@queryTable="getDataList"
+						/>
+					</div>
 				</div>
 			</el-row>
 			<el-table
@@ -64,19 +71,38 @@
 						<dict-tag :options="check_status" :value="row.processStatus" />
 					</template>
 				</el-table-column>
-				<el-table-column prop="status" label="发票状态">
+				<el-table-column prop="status" label="发票状态" width="100">
 					<template #default="{ row }">
 						<dict-tag :options="recharge_invoice_status" :value="row.status" />
 					</template>
 				</el-table-column>
-				<el-table-column prop="payeeDept" label="发票下载">
+				<el-table-column prop="stampPicUrl" label="发票图片">
 					<template #default="{ row }">
-						<preview-image :src="row.picUrl" download :downloadName="`${row.deptOrUser}-${row.payeeDept}-发票-${row.updateTime}`" />
+						<preview-image
+							:src="row.stampPicUrl"
+							download
+							:downloadName="`${row.code}-${row.deptOrUser}-${row.payeeDept}-发票-${row.updateTime}`"
+						/>
 					</template>
 				</el-table-column>
 				<el-table-column prop="remark" label="备注" />
-				<el-table-column prop="createTime" width="200" label="创建时间" />
-				<el-table-column label="操作" width="200" fixed="right">
+				<el-table-column width="250" label="时间">
+					<template #default="{ row }">
+						<div v-if="false" class="flex justify-start">
+							<span>创建时间</span>
+							<span>{{ row.createTime }} </span>
+						</div>
+						<div class="flex justify-start">
+							<span>申请时间：</span>
+							<span>{{ row.applyTime ?? "---" }} </span>
+						</div>
+						<div class="flex justify-start">
+							<span>审批时间：</span>
+							<span>{{ row.processTime ?? "---" }} </span>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" width="300" fixed="right">
 					<template #default="{ row }">
 						<el-button
 							v-auth="'wallet_walletRechargeApply_print'"
@@ -88,6 +114,10 @@
 						>
 							查看发票
 						</el-button>
+						<!-- row.isCheckUser && -->
+						<el-button v-if="row.processStatus == '1'" type="primary" link icon="VideoPlay" :disabled="loading" @click="deal(row)">
+							审批
+						</el-button>
 						<el-button icon="delete" text type="primary" v-auth="'wallet_walletRechargeInvoice_del'" @click="handleDelete([row.id])">
 							删除
 						</el-button>
@@ -110,6 +140,9 @@
 
 		<!-- 发票预览 -->
 		<print-dialog ref="printDialogRef" @refresh="getDataList(false)" />
+
+		<!-- 审批抽屉 -->
+		<process-drawer ref="processDrawerRef" @task-submit-event="taskSubmitEvent" />
 	</div>
 </template>
 
@@ -121,6 +154,8 @@ import { displayPrice } from "/@/utils/formatMoney"
 import { parseTime } from "/@/utils/formatTime"
 import { useDict } from "/@/hooks/dict"
 import { getObj } from "/@/api/wallet/wallet-recharge-invoice"
+import ProcessDrawer from "/@/components/processDrawer/index.vue"
+import { getDicts } from "/@/api/admin/dict"
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
@@ -133,10 +168,13 @@ const formDialogRef = ref()
 const uploadExcelRef = ref()
 // 搜索变量
 const queryRef = ref()
+const processDrawerRef = ref()
 const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
+const activeName = ref()
+const tabItems = ref<any>([{}])
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
@@ -152,6 +190,7 @@ const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, do
 const resetQuery = () => {
 	// 清空搜索条件
 	queryRef.value?.resetFields()
+	state.queryForm.processStatus = ""
 	// 清空多选
 	selectObjs.value = []
 	getDataList()
@@ -168,6 +207,19 @@ const selectionChangHandle = (objs: { id: string }[]) => {
 	multiple.value = !objs.length
 }
 
+onMounted(async () => {
+	const { data } = await getDicts("check_status")
+	data.unshift({ label: "全部", value: null })
+	data.push({ label: "未提交", value: 99 })
+	tabItems.value = data
+})
+
+// tab点击切换
+const handleClickTabItem = (e: any) => {
+	state.queryForm.processStatus = tabItems.value[e.index].value
+	getDataList()
+}
+
 // 删除操作
 const handleDelete = async (ids: string[]) => {
 	try {
@@ -199,4 +251,15 @@ const previewInvoice = async (row: any) => {
 		loading.value = false
 	}
 }
+
+// 执行审批
+const deal = (row: any) => {
+	if (!row.processId) return useMessage().info("流程id不存在")
+	processDrawerRef.value.openProcessDrawer(row)
+}
+
+// 审批提交
+const taskSubmitEvent = () => {
+	getDataList()
+}
 </script>

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

@@ -64,7 +64,6 @@
 						<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 || isStamping"
 								class="w-[2.5cm] h-[2.5cm] absolute -top-2 left-[140px]"
 								:class="{ stamping: isStamping }"
 								draggable="false"
@@ -109,7 +108,7 @@
 				盖章
 			</el-button> -->
 			<el-button
-				v-if="receiptData.picUrl"
+				v-if="receiptData.processStatus == '2' || receiptData.processStatus == '3'"
 				v-auth="'wallet_walletRechargeApply_back'"
 				type="primary"
 				plain
@@ -119,13 +118,9 @@
 				作废
 			</el-button>
 			<el-button type="primary" :disabled="loading" @click="applyStamp">申请审批</el-button>
-			<el-button type="success" :disabled="loading" @click="stampApproval">盖章审批</el-button>
 			<el-button v-auth="'wallet_walletRechargeApply_receiptSave'" type="primary" @click="saveReceipt" :disabled="loading">保存</el-button>
-			<el-button v-if="receiptData.picUrl" type="warning" @click="handlePrint" :disabled="loading">打印</el-button>
+			<el-button v-if="receiptData.stampPicUrl" type="warning" @click="handlePrint" :disabled="loading">打印</el-button>
 		</template>
-
-		<!-- 审批抽屉 -->
-		<process-drawer ref="processDrawerRef" @task-submit-event="taskSubmitEvent" />
 	</el-dialog>
 </template>
 
@@ -138,7 +133,6 @@ import { formatDate } from "/@/utils/formatTime"
 import { displayPrice } from "/@/utils/formatMoney"
 import printJS from "print-js"
 import { bindInvoice, invoiceBack, getObj, apply } from "/@/api/wallet/wallet-recharge-invoice"
-import ProcessDrawer from "/@/components/processDrawer/index.vue"
 import { useDict } from "/@/hooks/dict"
 
 interface ReceiptData {
@@ -153,8 +147,8 @@ interface ReceiptData {
 	remark: string
 	totalPriceCnStr: string
 	picUrl: string
+	stampPicUrl: string
 	processStatus: string | null
-	processId: string | null
 }
 
 const emit = defineEmits(["refresh"])
@@ -164,7 +158,6 @@ let timer
 const visible = ref(false)
 const loading = ref(false)
 const receiptRef = ref<HTMLElement | null>(null)
-const processDrawerRef = ref()
 const deptOrUserInput = ref<HTMLInputElement | null>(null)
 const isStamping = ref(false) // 盖章动画开关
 const receiptData = ref<ReceiptData>({
@@ -179,8 +172,8 @@ const receiptData = ref<ReceiptData>({
 	payeeUser: "", // 开票人
 	remark: "", // 备注
 	picUrl: "", // 发票图片地址
+	stampPicUrl: "", // 盖过章的发票图片地址
 	processStatus: "", // 审批状态
-	processId: "", // 流程实例id
 })
 const receiptDataItems = computed(() => {
 	try {
@@ -212,10 +205,6 @@ const handleClose = () => {
 
 // 发票作废
 const backInvoice = async () => {
-	if (!receiptData.value.picUrl) {
-		useMessage().error("请先盖章")
-		return
-	}
 	loading.value = true
 	try {
 		await invoiceBack({ id: receiptData.value.id })
@@ -317,7 +306,11 @@ const applyStamp = async () => {
 		if (!picUrl) return useMessage().success("图片上传失败")
 
 		const { code, msg } = await apply({ id: receiptData.value.id, picUrl })
-		if (code == 0) return useMessage().success("申请成功")
+		if (code == 0) {
+			useMessage().success("申请成功")
+			emit("refresh")
+			return
+		}
 		useMessage().error(msg || "申请失败")
 	} catch (error) {
 		useMessage().error(error as string)
@@ -326,17 +319,6 @@ const applyStamp = async () => {
 	}
 }
 
-// 执行审批
-const stampApproval = () => {
-	if (!receiptData.value.processId) return useMessage().info("流程id不存在")
-	processDrawerRef.value.openProcessDrawer(receiptData.value)
-}
-
-// 审批提交
-const taskSubmitEvent = () => {
-	emit("refresh")
-}
-
 // 打印
 const handlePrint = async () => {
 	if (receiptRef.value) {