AI: 添加会友编辑功能

src/components/member/MemberModal.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect } from 'react';
+import { Modal, Form, Input } from 'antd';
+import { Member } from '../../types/member';
+
+interface MemberModalProps {
+  visible: boolean;
+  onOk: (member: Member) => void;
+  onCancel: () => void;
+  initialValues: Member | null;
+}
+
+const MemberModal: React.FC<MemberModalProps> = ({ visible, onOk, onCancel, initialValues }) => {
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (visible && initialValues) {
+      form.setFieldsValue(initialValues);
+    } else {
+      form.resetFields();
+    }
+  }, [visible, initialValues, form]);
+
+  const handleOk = () => {
+    form.validateFields().then(values => {
+      onOk(values as Member);
+      form.resetFields();
+    });
+  };
+
+  return (
+    <Modal 
+      title={initialValues ? "编辑会友" : "添加会友"} 
+      visible={visible} 
+      onOk={handleOk} 
+      onCancel={onCancel}
+    >
+      <Form form={form} layout="vertical">
+        <Form.Item name="id" hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item name="idNumber" label="身份证号" rules={[{ required: true, message: '请输入身份证号' }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item name="phone" label="手机号" rules={[{ required: true, message: '请输入手机号' }]}>
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+
+export default MemberModal;

src/hooks/useMemberManagement.ts

@@ -5,7 +5,6 @@ import { fetchMembers, addMember, updateMember, deleteMember } from '../services
 
 export const useMemberManagement = () => {
   const [members, setMembers] = useState<Member[]>([]);
-  const [isModalVisible, setIsModalVisible] = useState(false);
   const [loading, setLoading] = useState(false);
 
   const loadMembers = useCallback(async () => {
@@ -13,7 +12,6 @@ export const useMemberManagement = () => {
     try {
       const fetchedMembers = await fetchMembers();
       setMembers(fetchedMembers);
-      console.log('Members loaded:', fetchedMembers);
     } catch (error) {
       console.error('Failed to load members:', error);
       message.error('加载会友列表失败');
@@ -26,18 +24,6 @@ export const useMemberManagement = () => {
     loadMembers();
   }, [loadMembers]);
 
-  const showModal = () => {
-    setIsModalVisible(true);
-  };
-
-  const handleOk = () => {
-    setIsModalVisible(false);
-  };
-
-  const handleCancel = () => {
-    setIsModalVisible(false);
-  };
-
   const handleAddMember = async (member: Omit<Member, 'id'>) => {
     try {
       const newMember = await addMember(member);
@@ -75,11 +61,7 @@ export const useMemberManagement = () => {
 
   return {
     members,
-    isModalVisible,
     loading,
-    showModal,
-    handleOk,
-    handleCancel,
     addMember: handleAddMember,
     editMember: handleEditMember,
     deleteMember: handleDeleteMember,

src/pages/MemberManagement.tsx

@@ -1,23 +1,45 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Button, Spin } from 'antd';
 import MemberList from '../components/member/MemberList';
-import AddMemberModal from '../components/member/AddMemberModal';
+import MemberModal from '../components/member/MemberModal';
 import { useMemberManagement } from '../hooks/useMemberManagement';
+import { Member } from '../types/member';
 
 const MemberManagement: React.FC = () => {
   const { 
     members, 
-    isModalVisible, 
     loading,
-    showModal, 
-    handleOk, 
-    handleCancel, 
     addMember, 
     editMember, 
     deleteMember 
   } = useMemberManagement();
 
-  console.log('MemberManagement rendering', { members, loading, isModalVisible });
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [editingMember, setEditingMember] = useState<Member | null>(null);
+
+  const showModal = () => {
+    setEditingMember(null);
+    setIsModalVisible(true);
+  };
+
+  const handleEdit = (member: Member) => {
+    setEditingMember(member);
+    setIsModalVisible(true);
+  };
+
+  const handleOk = (member: Member) => {
+    if (editingMember) {
+      editMember({ ...editingMember, ...member });
+    } else {
+      addMember(member);
+    }
+    setIsModalVisible(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+    setEditingMember(null);
+  };
 
   return (
     <div>
@@ -30,17 +52,17 @@ const MemberManagement: React.FC = () => {
       ) : members.length > 0 ? (
         <MemberList 
           members={members} 
-          onEdit={editMember} 
+          onEdit={handleEdit} 
           onDelete={deleteMember} 
         />
       ) : (
         <p>暂无会友数据</p>
       )}
-      <AddMemberModal 
+      <MemberModal 
         visible={isModalVisible} 
         onOk={handleOk} 
         onCancel={handleCancel} 
-        onAddMember={addMember} 
+        initialValues={editingMember}
       />
     </div>
   );