fix: 处理部分页面防抖滥用问题
This commit is contained in:
@@ -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 () => {
|
||||||
|
|||||||
@@ -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 () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user