111

src/api/wallet/wallet-manage.ts

@@ -43,11 +43,12 @@ export function fetchList(query?: Object) {
 	})
 }
 
-export function qbTotal(data: any) {
+export function qbTotal(data: any, signal?: AbortSignal) {
 	return request({
 		url: "/wallet/wallet-manage/qb-total",
 		method: "post",
 		data: data,
+		signal,
 	})
 }
 

src/views/hard/hard-order/components/statistics-drawer/utils.ts

@@ -6,7 +6,6 @@ const ignoredFields = new Set(["current", "size", "descs", "ascs", "ids", "selec
 /** 在点击时复制表单，避免分页、导出勾选或后续表单编辑污染统计。 */
 export function snapshotStatisticsQuery(form: HardOrderStatisticsQuery): HardOrderStatisticsQuery {
 	const query = JSON.parse(JSON.stringify(Object.fromEntries(Object.entries(form).filter(([key]) => !ignoredFields.has(key)))))
-	let hasTimeRange = false
 	for (const [key, label] of [["createTimeList", "创建时间"], ["payTimeList", "支付时间"]]) {
 		const range = query[key]
 		if (range == null || (Array.isArray(range) && range.length === 0)) continue
@@ -18,12 +17,7 @@ export function snapshotStatisticsQuery(form: HardOrderStatisticsQuery): HardOrd
 		if (!start.isValid() || !end.isValid() || end.isBefore(start)) {
 			throw new Error(`${label}开始时间不能晚于结束时间`)
 		}
-		if (end.isAfter(start.add(3, "month").endOf("day"))) {
-			throw new Error(`${label}区间不能超过三个月，请缩小查询范围`)
-		}
-		hasTimeRange = true
 	}
-	if (!hasTimeRange) throw new Error("统计需选择创建时间或支付时间，单个区间不能超过三个月")
 	return query
 }
 

src/views/wallet/wallet-qb/index.vue

@@ -60,7 +60,7 @@
 									@queryTable="getDataList"
 								>
 									<el-tooltip class="item" effect="dark" content="统计" placement="top">
-										<el-button icon="DataLine" circle @click="viewBalanceStatistics" />
+										<el-button icon="DataLine" circle :loading="balanceStatisticsLoading" @click="viewBalanceStatistics" />
 									</el-tooltip>
 								</right-toolbar>
 							</div>
@@ -120,8 +120,13 @@
 			</DraggableDepTree>
 		</div>
 
-		<el-drawer v-model="showDrawer" @closed="drawerClose">
-			<el-table :data="[balanceStatistics]" style="width: 100%">
+		<el-drawer v-model="showDrawer" @close="drawerClose">
+			<el-table
+				v-loading="balanceStatisticsLoading"
+				:data="balanceStatisticsLoaded ? [balanceStatistics] : []"
+				:empty-text="balanceStatisticsLoading ? '统计中…' : '暂无统计数据'"
+				style="width: 100%"
+			>
 				<el-table-column align="center" label="余额统计">
 					<el-table-column align="center" prop="total" label="总余额">
 						<template #default="{ row }">
@@ -159,6 +164,7 @@ import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
 import { displayPrice } from "/@/utils/formatMoney"
 import { formatDate } from "/@/utils/formatTime"
+import { onBeforeUnmount } from "vue"
 
 const { wallet_type, yes_no_type } = useDict("wallet_type", "yes_no_type")
 // 定义变量内容
@@ -171,7 +177,10 @@ const selectObjs = ref([]) as any
 const multiple = ref(true)
 const showDrawer = ref(false) // 余额统计抽屉开关
 const balanceStatisticsLoading = ref(false)
+const balanceStatisticsLoaded = ref(false)
 const balanceStatistics = reactive<any>({})
+let balanceStatisticsController: AbortController | undefined
+let balanceStatisticsSequence = 0
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {
@@ -198,28 +207,50 @@ const resetQuery = () => {
 // 余额统计
 const viewBalanceStatistics = async () => {
 	showDrawer.value = true
+	// 慢查询在途时重复点击不再发送统计请求。
+	if (balanceStatisticsLoading.value) return
 	balanceStatisticsLoading.value = true
+	balanceStatisticsLoaded.value = false
+	const sequence = ++balanceStatisticsSequence
+	const controller = new AbortController()
+	balanceStatisticsController = controller
 	try {
-		const { code, data } = await qbTotal({ ...state.queryForm })
+		// 数组也取快照，避免筛选变化影响本次查询参数。
+		const query = JSON.parse(JSON.stringify(state.queryForm))
+		const { code, data, msg } = await qbTotal(query, controller.signal)
+		if (sequence !== balanceStatisticsSequence || controller.signal.aborted) return
 		if (code == 0) {
 			Object.assign(balanceStatistics, data)
+			balanceStatisticsLoaded.value = true
 			return
 		}
-		return useMessage().error(data.msg || "获取数据失败")
+		return useMessage().error(msg || data?.msg || "获取数据失败")
 	} catch (error: any) {
-		useMessage().error(error.msg)
+		if (sequence !== balanceStatisticsSequence || controller.signal.aborted) return
+		useMessage().error(error?.msg || error?.message || "获取数据失败")
 	} finally {
-		balanceStatisticsLoading.value = false
+		if (sequence === balanceStatisticsSequence) {
+			balanceStatisticsLoading.value = false
+			balanceStatisticsController = undefined
+		}
 	}
 }
 
 // 关闭抽屉
 const drawerClose = () => {
+	// 在关闭开始时取消，避免关闭动画结束前重开抽屉被旧响应覆盖。
+	balanceStatisticsSequence++
+	balanceStatisticsController?.abort()
+	balanceStatisticsController = undefined
+	balanceStatisticsLoading.value = false
+	balanceStatisticsLoaded.value = false
 	for (const key in balanceStatistics) {
-		balanceStatistics[key] = 0
+		delete balanceStatistics[key]
 	}
 }
 
+onBeforeUnmount(drawerClose)
+
 // 导出excel
 const { exportProgressRef, exportTaskConfig, submitExport, handleExportSuccess, handleExportFailure } = useBatchExport({
 	progressUrl: "/wallet/async-task/progress", redisKey: "wallet:export:qb",