fix: 处理部分页面防抖滥用问题

This commit is contained in:
ZhuRui
2026-08-07 11:14:16 +08:00
parent 845829d088
commit ea24625805
4 changed files with 32 additions and 79 deletions
@@ -1,12 +1,5 @@
import { computed, reactive, toRef, Ref, nextTick } from 'vue'; import { computed, reactive, nextTick } from 'vue';
import { import { useThrottleFn, useRequest, usePagination, useEffect, syncPaginationTotal } from '@/hooks';
useDebounce,
useThrottleFn,
useRequest,
usePagination,
useEffect,
syncPaginationTotal,
} from '@/hooks';
import { getPaymentFlowList, type PaymentFlowVO, type PaymentFlowQueryParams } from './services'; import { getPaymentFlowList, type PaymentFlowVO, type PaymentFlowQueryParams } from './services';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
@@ -38,15 +31,6 @@ export function usePaymentsModel() {
type: '', type: '',
}); });
const { debouncedValue: debouncedNickname } = useDebounce(
toRef(filterForm, 'nickname') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedPhone } = useDebounce(
toRef(filterForm, 'phone') as Ref<string>,
{ delay: 300 },
);
// ===== 分页 ===== // ===== 分页 =====
const pagination = usePagination({ defaultCurrent: 1, defaultPageSize: 10 }); const pagination = usePagination({ defaultCurrent: 1, defaultPageSize: 10 });
@@ -61,8 +45,8 @@ export function usePaymentsModel() {
if (start) params.createDateBegin = dayjs(start).format('YYYY-MM-DD'); if (start) params.createDateBegin = dayjs(start).format('YYYY-MM-DD');
if (end) params.createDateEnd = dayjs(end).format('YYYY-MM-DD'); if (end) params.createDateEnd = dayjs(end).format('YYYY-MM-DD');
} }
if (debouncedNickname.value.trim()) params.nickname = debouncedNickname.value.trim(); if (filterForm.nickname.trim()) params.nickname = filterForm.nickname.trim();
if (debouncedPhone.value.trim()) params.phone = debouncedPhone.value.trim(); if (filterForm.phone.trim()) params.phone = filterForm.phone.trim();
if (filterForm.type) params.type = filterForm.type; if (filterForm.type) params.type = filterForm.type;
return params; return params;
}; };
@@ -124,18 +108,18 @@ export function usePaymentsModel() {
const hasFilter = computed(() => { const hasFilter = computed(() => {
return ( return (
filterForm.timeRange !== null || filterForm.timeRange !== null ||
debouncedNickname.value.trim() !== '' || filterForm.nickname.trim() !== '' ||
debouncedPhone.value.trim() !== '' || filterForm.phone.trim() !== '' ||
filterForm.type !== '' filterForm.type !== ''
); );
}); });
// ===== 方法 ===== // ===== 方法 =====
const handleSearch = () => { const handleSearch = useThrottleFn(() => {
pagination.reset(); pagination.reset();
fetchList(); fetchList();
}; }, 300);
const handleReset = useThrottleFn(async () => { const handleReset = useThrottleFn(async () => {
filterForm.timeRange = null; filterForm.timeRange = null;
@@ -1,7 +1,6 @@
import { computed, reactive, toRef, Ref, nextTick } from 'vue'; import { computed, reactive, nextTick } from 'vue';
import { import {
useState, useState,
useDebounce,
useThrottleFn, useThrottleFn,
useRequest, useRequest,
usePagination, usePagination,
@@ -57,15 +56,6 @@ export function useWalletModel() {
maxBalance: '', maxBalance: '',
}); });
const { debouncedValue: debouncedNickname } = useDebounce(
toRef(filterForm, 'nickname') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedPhone } = useDebounce(
toRef(filterForm, 'phone') as Ref<string>,
{ delay: 300 },
);
// ===== 分页 ===== // ===== 分页 =====
const pagination = usePagination({ defaultCurrent: 1, defaultPageSize: 10 }); const pagination = usePagination({ defaultCurrent: 1, defaultPageSize: 10 });
@@ -83,8 +73,8 @@ export function useWalletModel() {
page: String((pagination as any).current.value), page: String((pagination as any).current.value),
limit: String((pagination as any).pageSize.value), limit: String((pagination as any).pageSize.value),
}; };
if (debouncedNickname.value.trim()) params.nickname = debouncedNickname.value.trim(); if (filterForm.nickname.trim()) params.nickname = filterForm.nickname.trim();
if (debouncedPhone.value.trim()) params.phone = debouncedPhone.value.trim(); if (filterForm.phone.trim()) params.phone = filterForm.phone.trim();
if (filterForm.minBalance) params.amountBegin = filterForm.minBalance; if (filterForm.minBalance) params.amountBegin = filterForm.minBalance;
if (filterForm.maxBalance) params.amountEnd = filterForm.maxBalance; if (filterForm.maxBalance) params.amountEnd = filterForm.maxBalance;
return params; return params;
@@ -150,8 +140,8 @@ export function useWalletModel() {
// ===== 计算属性 ===== // ===== 计算属性 =====
const hasFilter = computed(() => { const hasFilter = computed(() => {
return ( return (
debouncedNickname.value.trim() !== '' || filterForm.nickname.trim() !== '' ||
debouncedPhone.value.trim() !== '' || filterForm.phone.trim() !== '' ||
filterForm.minBalance !== '' || filterForm.minBalance !== '' ||
filterForm.maxBalance !== '' filterForm.maxBalance !== ''
); );
@@ -159,10 +149,10 @@ export function useWalletModel() {
// ===== 方法 ===== // ===== 方法 =====
const handleSearch = () => { const handleSearch = useThrottleFn(() => {
pagination.reset(); pagination.reset();
fetchList(); fetchList();
}; }, 300);
const handleReset = useThrottleFn(async () => { const handleReset = useThrottleFn(async () => {
filterForm.nickname = ''; filterForm.nickname = '';
@@ -1,8 +1,7 @@
import { computed, reactive, toRef, Ref, h, nextTick } from 'vue'; import { computed, reactive, h, nextTick } from 'vue';
import { StatusTag, type StatusTagTone } from '@/components'; import { StatusTag, type StatusTagTone } from '@/components';
import { import {
useState, useState,
useDebounce,
useThrottleFn, useThrottleFn,
useRequest, useRequest,
usePagination, usePagination,
@@ -87,20 +86,6 @@ export function useWithdrawModel() {
payStatus: '', payStatus: '',
}); });
// 可搜索字段防抖
const { debouncedValue: debouncedNickname } = useDebounce(
toRef(filterForm, 'nickname') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedPhone } = useDebounce(
toRef(filterForm, 'phone') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedRealName } = useDebounce(
toRef(filterForm, 'realName') as Ref<string>,
{ delay: 300 },
);
// ===== 分页 ===== // ===== 分页 =====
const pagination = usePagination({ defaultCurrent: 1, defaultPageSize: 10 }); const pagination = usePagination({ defaultCurrent: 1, defaultPageSize: 10 });
@@ -110,9 +95,9 @@ export function useWithdrawModel() {
page: String((pagination as any).current.value), page: String((pagination as any).current.value),
limit: String((pagination as any).pageSize.value), limit: String((pagination as any).pageSize.value),
}; };
if (debouncedNickname.value.trim()) params.nickname = debouncedNickname.value.trim(); if (filterForm.nickname.trim()) params.nickname = filterForm.nickname.trim();
if (debouncedPhone.value.trim()) params.phone = debouncedPhone.value.trim(); if (filterForm.phone.trim()) params.phone = filterForm.phone.trim();
if (debouncedRealName.value.trim()) params.realName = debouncedRealName.value.trim(); if (filterForm.realName.trim()) params.realName = filterForm.realName.trim();
if (filterForm.auditStatus) params.auditStatus = filterForm.auditStatus; if (filterForm.auditStatus) params.auditStatus = filterForm.auditStatus;
if (filterForm.payStatus) params.payStatus = filterForm.payStatus; if (filterForm.payStatus) params.payStatus = filterForm.payStatus;
return params; return params;
@@ -169,9 +154,9 @@ export function useWithdrawModel() {
// ===== 计算属性 ===== // ===== 计算属性 =====
const hasFilter = computed(() => { const hasFilter = computed(() => {
return ( return (
debouncedNickname.value.trim() !== '' || filterForm.nickname.trim() !== '' ||
debouncedPhone.value.trim() !== '' || filterForm.phone.trim() !== '' ||
debouncedRealName.value.trim() !== '' || filterForm.realName.trim() !== '' ||
filterForm.auditStatus !== '' || filterForm.auditStatus !== '' ||
filterForm.payStatus !== '' filterForm.payStatus !== ''
); );
@@ -179,10 +164,10 @@ export function useWithdrawModel() {
// ===== 方法 ===== // ===== 方法 =====
const handleSearch = () => { const handleSearch = useThrottleFn(() => {
pagination.reset(); pagination.reset();
fetchList(); fetchList();
}; }, 300);
/** 重置(重置后自动查询) */ /** 重置(重置后自动查询) */
const handleReset = useThrottleFn(async () => { const handleReset = useThrottleFn(async () => {
+8 -14
View File
@@ -1,6 +1,6 @@
import { computed, reactive, toRef, Ref, nextTick } from 'vue'; import { computed, reactive, nextTick } from 'vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useDebounce, useThrottleFn } from '@/hooks'; import { useThrottleFn } from '@/hooks';
import { useRequest } from '@/hooks/useRequest'; import { useRequest } from '@/hooks/useRequest';
import { useEffect } from '@/hooks/useEffect'; import { useEffect } from '@/hooks/useEffect';
import { usePagination, syncPaginationTotal } from '@/hooks/usePagination'; import { usePagination, syncPaginationTotal } from '@/hooks/usePagination';
@@ -48,12 +48,6 @@ export function useLogModel() {
searchOperator: '', searchOperator: '',
}); });
// 操作人字段防抖 300ms
const { debouncedValue: debouncedOperator } = useDebounce(
toRef(filterForm, 'searchOperator') as Ref<string>,
{ delay: 300 },
);
// ===== 分页 ===== // ===== 分页 =====
const pagination = usePagination({ defaultCurrent: 1, defaultPageSize: 10 }); const pagination = usePagination({ defaultCurrent: 1, defaultPageSize: 10 });
@@ -76,9 +70,9 @@ export function useLogModel() {
params.type = filterForm.actionType; params.type = filterForm.actionType;
} }
// 操作人昵称(防抖后的值) // 操作人昵称
if (debouncedOperator.value.trim()) { if (filterForm.searchOperator.trim()) {
params.nickname = debouncedOperator.value.trim(); params.nickname = filterForm.searchOperator.trim();
} }
return params; return params;
@@ -116,16 +110,16 @@ export function useLogModel() {
return ( return (
filterForm.actionTimeRange !== null || filterForm.actionTimeRange !== null ||
filterForm.actionType !== '' || filterForm.actionType !== '' ||
debouncedOperator.value.trim() !== '' filterForm.searchOperator.trim() !== ''
); );
}); });
// ===== 方法 ===== // ===== 方法 =====
const handleSearch = () => { const handleSearch = useThrottleFn(() => {
pagination.reset(); pagination.reset();
fetchList(); fetchList();
}; }, 300);
/** 重置(重置后自动查询) */ /** 重置(重置后自动查询) */
const handleReset = useThrottleFn(async () => { const handleReset = useThrottleFn(async () => {