canrd-main / canrd-erp-front · Commits

Commit 29930e0357e5e6c17f8cdd382f0f4409f74f14cb

Authored by boyang
1 parent 1c214613
build: skipped

fix: 修改隐私钱包添加弹窗查询

Inline Side-by-side
Showing 1 changed file with 22 additions and 6 deletions
src/pages/Prepaid/PrivatePocket/components/AddPrivatePocketModal.tsx
  View file @29930e0
... ... @@ -5,7 +5,7 @@ import {
5 5 } from '@/services';
6 6 import { getUserInfo } from '@/utils/user';
7 7 import { Form, Modal, Select, message } from 'antd';
8   -import React, { useEffect, useState } from 'react';
  8 +import React, { useEffect, useRef, useState } from 'react';
9 9  
10 10 interface AddPrivatePocketModalProps {
11 11 visible: boolean;
... ... @@ -39,6 +39,7 @@ const AddPrivatePocketModal: React.FC<AddPrivatePocketModalProps> = ({
39 39 const [searchKeywords, setSearchKeywords] = useState<string>('');
40 40 const userInfo = getUserInfo();
41 41 const userName = userInfo?.username || '';
  42 + const searchTimerRef = useRef<any>(null);
42 43  
43 44 const fetchSalesCodeList = async () => {
44 45 try {
... ... @@ -55,6 +56,10 @@ const AddPrivatePocketModal: React.FC&lt;AddPrivatePocketModalProps&gt; = ({
55 56 // Define a function to fetch user list that can be called from multiple places
56 57 const fetchUserList = async (keywords: string) => {
57 58 try {
  59 + if (!keywords || keywords.trim() === '') {
  60 + return [];
  61 + }
  62 +
58 63 const res = await postCanrdApiUserList({
59 64 data: { keywords: keywords, pageSize: 1000000 },
60 65 });
... ... @@ -109,6 +114,21 @@ const AddPrivatePocketModal: React.FC&lt;AddPrivatePocketModalProps&gt; = ({
109 114 }
110 115 };
111 116  
  117 + // Function to handle search with debounce
  118 + const handleSearch = (value: string) => {
  119 + setSearchKeywords(value);
  120 +
  121 + // Clear any existing timer
  122 + if (searchTimerRef.current) {
  123 + clearTimeout(searchTimerRef.current);
  124 + }
  125 +
  126 + // Set a new timer to fetch users after 1000ms of inactivity
  127 + searchTimerRef.current = setTimeout(() => {
  128 + fetchUserList(value);
  129 + }, 1000);
  130 + };
  131 +
112 132 return (
113 133 <Modal
114 134 title="添加隐私钱包"
... ... @@ -131,11 +151,7 @@ const AddPrivatePocketModal: React.FC&lt;AddPrivatePocketModalProps&gt; = ({
131 151 defaultActiveFirstOption={false}
132 152 notFoundContent={null}
133 153 filterOption={false} // Disable built-in filtering to use server-side search
134   - onSearch={async (value) => {
135   - setSearchKeywords(value);
136   - // Immediately fetch results when searching
137   - await fetchUserList(value);
138   - }}
  154 + onSearch={handleSearch} // Use the debounced search handler
139 155 onChange={(value) => {
140 156 // When a value is selected, find the corresponding phone from userList
141 157 // or use the value directly if it's a custom entry
... ...