AI: 修复会友列表显示和添加会友功能

src/api/deviceApi.js

@@ -5,13 +5,8 @@ const API_BASE_URL = 'http://your-device-api-url.com'; // 替换为实际的设
 export const deviceApi = {
   getAllPersons: async () => {
     try {
-      console.log('调用 getAllPersons API'); // 调试日志
+      console.log('调用 getAllPersons API');
       // 模拟 API 调用
-      // 在实际应用中，这里应该是一个真实的 API 请求
-      // const response = await axios.get(`${API_BASE_URL}/GetAllPersons`);
-      // return response.data;
-
-      // 模拟成功的情况
       return new Promise((resolve) => {
         setTimeout(() => {
           console.log('模拟 API 返回数据');
@@ -39,21 +34,62 @@ export const deviceApi = {
               contact: '13900139000'
             }
           ]);
-        }, 1000); // 模拟网络延迟
+        }, 1000);
       });
-
-      // 如果要模拟失败的情况，可以使用下面的代码
-      // return new Promise((_, reject) => {
-      //   setTimeout(() => {
-      //     console.log('模拟 API 调用失败');
-      //     reject(new Error('服务器错误，获取会友列表失败'));
-      //   }, 1000);
-      // });
     } catch (error) {
       console.error('获取所有会友信息失败:', error);
       throw error;
     }
   },
 
-  // ... 其他方法保持不变
+  addPerson: async (personInfo) => {
+    try {
+      console.log('添加会友:', personInfo);
+      // 模拟添加操作
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({
+            ...personInfo,
+            personId: Date.now().toString(), // 模拟生成ID
+          });
+        }, 500);
+      });
+    } catch (error) {
+      console.error('添加会友失败:', error);
+      throw error;
+    }
+  },
+
+  updatePerson: async (personId, personInfo) => {
+    try {
+      console.log('更新会友:', personId, personInfo);
+      // 模拟更新操作
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({
+            ...personInfo,
+            personId,
+          });
+        }, 500);
+      });
+    } catch (error) {
+      console.error('更新会友失败:', error);
+      throw error;
+    }
+  },
+
+  deletePerson: async (personId) => {
+    try {
+      console.log('删除会友:', personId);
+      // 模拟删除操作
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({ success: true });
+        }, 500);
+      });
+    } catch (error) {
+      console.error('删除会友失败:', error);
+      throw error;
+    }
+  },
 };

src/components/MemberForm.jsx

@@ -1,30 +1,30 @@
 import React from 'react';
-import { Form, Input, Button, Select, DatePicker, InputNumber, Switch, message } from 'antd';
-import { deviceApi } from '../api/deviceApi';
+import { Form, Input, Button, Select, DatePicker, InputNumber, Switch } from 'antd';
+import moment from 'moment';
 
 const { Option } = Select;
 
-const MemberForm = ({ onMemberAdded }) => {
+const MemberForm = ({ onSubmit, initialValues }) => {
   const [form] = Form.useForm();
 
-  const onFinish = async (values) => {
-    try {
-      if (values.birthDate) {
-        values.birthDate = values.birthDate.format('YYYY-MM-DD');
-      }
-      if (values.baptismDate) {
-        values.baptismDate = values.baptismDate.format('YYYY-MM-DD');
-      }
+  const onFinish = (values) => {
+    const formattedValues = {
+      ...values,
+      birthDate: values.birthDate ? values.birthDate.format('YYYY-MM-DD') : null,
+      baptismDate: values.baptismDate ? values.baptismDate.format('YYYY-MM-DD') : null,
+    };
+    onSubmit(formattedValues);
+  };
 
-      const newMember = await deviceApi.addPerson(values);
-      message.success('会友添加成功');
-      form.resetFields();
-      onMemberAdded(newMember);
-    } catch (error) {
-      console.error('添加会友失败', error);
-      message.error('添加会友失败，请重试');
+  React.useEffect(() => {
+    if (initialValues) {
+      form.setFieldsValue({
+        ...initialValues,
+        birthDate: initialValues.birthDate ? moment(initialValues.birthDate) : null,
+        baptismDate: initialValues.baptismDate ? moment(initialValues.baptismDate) : null,
+      });
     }
-  };
+  }, [initialValues, form]);
 
   return (
     <Form
@@ -32,6 +32,7 @@ const MemberForm = ({ onMemberAdded }) => {
       name="memberForm"
       onFinish={onFinish}
       layout="vertical"
+      initialValues={initialValues}
     >
       <Form.Item
         name="name"
@@ -98,7 +99,7 @@ const MemberForm = ({ onMemberAdded }) => {
       </Form.Item>
       <Form.Item>
         <Button type="primary" htmlType="submit">
-          添加
+          提交
         </Button>
       </Form.Item>
     </Form>

src/components/MemberList.jsx

@@ -6,7 +6,109 @@ import MemberForm from './MemberForm';
 import MemberEditForm from './MemberEditForm';
 
 const MemberList = () => {
-  // ... 其他代码保持不变
+  const [members, setMembers] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [isAddModalVisible, setIsAddModalVisible] = useState(false);
+  const [isEditModalVisible, setIsEditModalVisible] = useState(false);
+  const [editingMember, setEditingMember] = useState(null);
+
+  useEffect(() => {
+    fetchMembers();
+  }, []);
+
+  const fetchMembers = async () => {
+    setLoading(true);
+    try {
+      const data = await deviceApi.getAllPersons();
+      console.log('获取到的会友列表数据:', data); // 调试日志
+      setMembers(data);
+      message.success('会友列表获取成功');
+    } catch (error) {
+      console.error('获取会友列表失败', error);
+      message.error(`获取会友列表失败: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAdd = () => {
+    setIsAddModalVisible(true);
+  };
+
+  const handleEdit = (record) => {
+    setEditingMember(record);
+    setIsEditModalVisible(true);
+  };
+
+  const handleDelete = (id) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: '您确定要删除这个会友吗？此操作不可逆。',
+      onOk: async () => {
+        try {
+          await deviceApi.deletePerson(id);
+          message.success('会友删除成功');
+          fetchMembers();
+        } catch (error) {
+          console.error('删除会友失败', error);
+          message.error(`删除会友失败: ${error.message}`);
+        }
+      },
+    });
+  };
+
+  const handleMemberAdded = async (values) => {
+    try {
+      const newMember = await deviceApi.addPerson(values);
+      setMembers([...members, newMember]);
+      setIsAddModalVisible(false);
+      message.success('会友添加成功');
+    } catch (error) {
+      console.error('添加会友失败', error);
+      message.error(`添加会友失败: ${error.message}`);
+    }
+  };
+
+  const handleMemberEdited = async (id, values) => {
+    try {
+      const updatedMember = await deviceApi.updatePerson(id, values);
+      setMembers(members.map(member => 
+        member.personId === id ? updatedMember : member
+      ));
+      setIsEditModalVisible(false);
+      message.success('会友信息更新成功');
+    } catch (error) {
+      console.error('更新会友失败', error);
+      message.error(`更新会友失败: ${error.message}`);
+    }
+  };
+
+  const columns = [
+    { title: 'ID', dataIndex: 'personId', key: 'personId' },
+    { title: '姓名', dataIndex: 'name', key: 'name' },
+    { title: '性别', dataIndex: 'gender', key: 'gender' },
+    { title: '年龄', dataIndex: 'age', key: 'age' },
+    { title: '出生日期', dataIndex: 'birthDate', key: 'birthDate' },
+    { title: '婚姻状况', dataIndex: 'maritalStatus', key: 'maritalStatus' },
+    { 
+      title: '是否受洗', 
+      dataIndex: 'isBaptized', 
+      key: 'isBaptized',
+      render: (isBaptized) => isBaptized ? '是' : '否'
+    },
+    { title: '受洗日期', dataIndex: 'baptismDate', key: 'baptismDate' },
+    { title: '联系方式', dataIndex: 'contact', key: 'contact' },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <Button onClick={() => handleEdit(record)}>编辑</Button>
+          <Button onClick={() => handleDelete(record.personId)} danger>删除</Button>
+        </Space>
+      ),
+    },
+  ];
 
   return (
     <div>
@@ -14,7 +116,7 @@ const MemberList = () => {
       <Button onClick={fetchMembers} type="primary" style={{ marginBottom: 16, marginRight: 16 }}>
         刷新列表
       </Button>
-      <Button onClick={() => setIsAddModalVisible(true)} type="primary" style={{ marginBottom: 16 }}>
+      <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
         添加会友
       </Button>
       <ExcelImportExport members={members} onImport={fetchMembers} />
@@ -31,10 +133,7 @@ const MemberList = () => {
         footer={null}
         width={600}
       >
-        <MemberForm onMemberAdded={(newMember) => {
-          handleMemberAdded(newMember);
-          setIsAddModalVisible(false);
-        }} />
+        <MemberForm onSubmit={handleMemberAdded} />
       </Modal>
       <Modal
         title="编辑会友"
@@ -45,10 +144,7 @@ const MemberList = () => {
       >
         <MemberEditForm 
           member={editingMember} 
-          onMemberEdited={(editedMember) => {
-            handleMemberEdited(editedMember);
-            setIsEditModalVisible(false);
-          }} 
+          onSubmit={(values) => handleMemberEdited(editingMember.personId, values)}
         />
       </Modal>
     </div>