fix: 修改隐私页面bug

boyang
1 parent 58558396
Showing 2 changed files with 116 additions and 14 deletions
src/pages/Prepaid/PrivatePocket/components/AddPrivatePocketModal.tsx
src/pages/Prepaid/PrivatePocket/constant.tsx
 import {
+  postCanrdApiUserList,
   postCanrdPrivatePocketSave,
   postServiceOrderQuerySalesCode,
 } from '@/services';
 import { getUserInfo } from '@/utils/user';
-import { Form, Input, Modal, Select, message } from 'antd';
+import { Form, Modal, Select, message } from 'antd';
 import React, { useEffect, useState } from 'react';
 interface AddPrivatePocketModalProps {
@@ -17,6 +18,15 @@ interface SalesCodeItem {
   userName: string;
 }
+interface UserItem {
+  uid: string;
+  realName: string;
+  institution?: string;
+  nowMoney?: string | number;
+  phone: string;
+  [key: string]: any;
+}
+
 const AddPrivatePocketModal: React.FC<AddPrivatePocketModalProps> = ({
   visible,
   onCancel,
@@ -25,6 +35,8 @@ const AddPrivatePocketModal: React.FC&lt;AddPrivatePocketModalProps&gt; = ({
   const [form] = Form.useForm();
   const [salesCodeList, setSalesCodeList] = useState<SalesCodeItem[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
+  const [userList, setUserList] = useState<any[]>([]);
+  const [searchKeywords, setSearchKeywords] = useState<string>('');
   const userInfo = getUserInfo();
   const userName = userInfo?.username || '';
@@ -40,6 +52,30 @@ const AddPrivatePocketModal: React.FC&lt;AddPrivatePocketModalProps&gt; = ({
     }
   };
+  // Define a function to fetch user list that can be called from multiple places
+  const fetchUserList = async (keywords: string) => {
+    try {
+      const res = await postCanrdApiUserList({
+        data: { keywords: keywords, pageSize: 1000000 },
+      });
+
+      if (res?.data?.data) {
+        setUserList(res.data.data);
+      }
+      return res?.data?.data || [];
+    } catch (error) {
+      console.error('获取用户列表失败:', error);
+      return [];
+    }
+  };
+
+  // Initial fetch when component mounts
+  useEffect(() => {
+    if (visible) {
+      fetchUserList('');
+    }
+  }, [visible]);
+
   useEffect(() => {
     if (visible) {
       fetchSalesCodeList();
@@ -86,9 +122,75 @@ const AddPrivatePocketModal: React.FC&lt;AddPrivatePocketModalProps&gt; = ({
         <Form.Item
           name="account"
           label="绑定普通账户"
-          rules={[{ required: true, message: '请输入手机号' }]}
+          rules={[{ required: true, message: '请选择账户' }]}
         >
-          <Input placeholder="请输入手机号" />
+          <Select
+            showSearch
+            placeholder="请选择账户"
+            optionFilterProp="children"
+            defaultActiveFirstOption={false}
+            notFoundContent={null}
+            filterOption={false} // Disable built-in filtering to use server-side search
+            onSearch={async (value) => {
+              setSearchKeywords(value);
+              // Immediately fetch results when searching
+              await fetchUserList(value);
+            }}
+            onChange={(value) => {
+              // When a value is selected, find the corresponding phone from userList
+              // or use the value directly if it's a custom entry
+
+              // Check if this is a custom entry (value is the same as searchKeywords)
+              if (value === searchKeywords && searchKeywords.trim() !== '') {
+                form.setFieldsValue({ account: searchKeywords });
+                return;
+              }
+
+              // Find the selected user from userList to get their phone
+              const selectedUser = userList.find((user) => user.uid === value);
+              if (selectedUser && selectedUser.phone) {
+                form.setFieldsValue({ account: selectedUser.phone });
+              }
+            }}
+            dropdownRender={(menu) => (
+              <div>
+                {menu}
+                {searchKeywords.trim() !== '' && (
+                  <div
+                    style={{
+                      padding: '8px',
+                      cursor: 'pointer',
+                      borderTop: '1px solid #e8e8e8',
+                    }}
+                    onClick={() => {
+                      form.setFieldsValue({ account: searchKeywords });
+                    }}
+                  >
+                    <span style={{ color: '#333333' }}>{searchKeywords}</span>
+                    {' | '}
+                    <span style={{ color: 'orange' }}>自定义</span>
+                  </div>
+                )}
+              </div>
+            )}
+          >
+            {userList.map((user: UserItem) => {
+              const displayText = `${user.realName || '-'} | ${
+                user.institution || '-'
+              } | ${user.nowMoney || '0'}￥ | ${user.phone || '-'}`;
+              return (
+                <Select.Option
+                  key={user.uid}
+                  value={user.uid}
+                  title={displayText}
+                >
+                  <div>
+                    <span>{displayText}</span>
+                  </div>
+                </Select.Option>
+              );
+            })}
+          </Select>
         </Form.Item>
         <Form.Item
           name="salesCode"
@@ -8,7 +8,7 @@ export const PRIVATE_POCKET_COLUMNS = [
     hideInSearch: true,
   },
   {
-    title: '用户账号',
+    title: '普通账户',
     dataIndex: 'account',
     key: 'account',
     valueType: 'text',
@@ -17,21 +17,21 @@ export const PRIVATE_POCKET_COLUMNS = [
     },
   },
   {
-    title: '真实姓名',
+    title: '老师姓名',
     dataIndex: 'realName',
     key: 'realName',
     valueType: 'text',
     hideInSearch: true,
   },
   {
-    title: '用户余额',
+    title: '普通账户余额',
     dataIndex: 'nowMoney',
     key: 'nowMoney',
     valueType: 'money',
     hideInSearch: true,
   },
   {
-    title: '隐私余额',
+    title: '隐私钱包余额',
     dataIndex: 'privateMoney',
     key: 'privateMoney',
     valueType: 'money',
@@ -47,19 +47,19 @@ export const PRIVATE_POCKET_COLUMNS = [
     },
   },
   {
-    title: '创建人',
-    dataIndex: 'createByName',
-    key: 'createByName',
-    valueType: 'text',
-    hideInSearch: true,
-  },
-  {
     title: '创建时间',
     dataIndex: 'createTime',
     key: 'createTime',
     valueType: 'dateTime',
     hideInSearch: true,
   },
+  {
+    title: '创建人',
+    dataIndex: 'createByName',
+    key: 'createByName',
+    valueType: 'text',
+    hideInSearch: true,
+  },
   // {
   //   title: '更新时间',
   //   dataIndex: 'updateTime',