AI: 会友列表 CRUD 操作

src/api/deviceApi.js

@@ -3,13 +3,11 @@ import axios from 'axios';
 const API_BASE_URL = 'http://your-device-api-url.com'; // 替换为实际的设备 API URL
 
 export const deviceApi = {
-  // 其他方法保持不变...
+  // ... 其他方法保持不变
 
   addPerson: async (personInfo) => {
     try {
-      console.log('Sending request to add person:', personInfo); // 调试日志
       const response = await axios.post(`${API_BASE_URL}/AddPerson`, personInfo);
-      console.log('Response from add person:', response.data); // 调试日志
       return response.data;
     } catch (error) {
       console.error('添加会友失败:', error);
@@ -17,5 +15,25 @@ export const deviceApi = {
     }
   },
 
-  // 其他方法保持不变...
+  updatePerson: async (personId, personInfo) => {
+    try {
+      const response = await axios.put(`${API_BASE_URL}/UpdatePerson/${personId}`, personInfo);
+      return response.data;
+    } catch (error) {
+      console.error('更新会友失败:', error);
+      throw error;
+    }
+  },
+
+  deletePerson: async (personId) => {
+    try {
+      const response = await axios.delete(`${API_BASE_URL}/DeletePerson/${personId}`);
+      return response.data;
+    } catch (error) {
+      console.error('删除会友失败:', error);
+      throw error;
+    }
+  },
+
+  // ... 其他方法保持不变
 };

src/components/MemberEditForm.jsx

@@ -0,0 +1,118 @@
+import React, { useEffect } from 'react';
+import { Form, Input, Button, Select, DatePicker, InputNumber, Switch, message } from 'antd';
+import { deviceApi } from '../api/deviceApi';
+import moment from 'moment';
+
+const { Option } = Select;
+
+const MemberEditForm = ({ member, onMemberEdited }) => {
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (member) {
+      form.setFieldsValue({
+        ...member,
+        birthDate: member.birthDate ? moment(member.birthDate) : null,
+        baptismDate: member.baptismDate ? moment(member.baptismDate) : null,
+      });
+    }
+  }, [member, form]);
+
+  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 updatedMember = await deviceApi.updatePerson(member.personId, values);
+      message.success('会友信息更新成功');
+      onMemberEdited(updatedMember);
+    } catch (error) {
+      console.error('更新会友失败', error);
+      message.error('更新会友失败，请重试');
+    }
+  };
+
+  return (
+    <Form
+      form={form}
+      name="memberEditForm"
+      onFinish={onFinish}
+      layout="vertical"
+    >
+      <Form.Item
+        name="name"
+        label="姓名"
+        rules={[{ required: true, message: '请输入姓名' }]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        name="gender"
+        label="性别"
+        rules={[{ required: true, message: '请选择性别' }]}
+      >
+        <Select>
+          <Option value="男">男</Option>
+          <Option value="女">女</Option>
+        </Select>
+      </Form.Item>
+      <Form.Item
+        name="age"
+        label="年龄"
+        rules={[{ required: true, message: '请输入年龄' }]}
+      >
+        <InputNumber min={0} max={150} />
+      </Form.Item>
+      <Form.Item
+        name="birthDate"
+        label="出生日期"
+        rules={[{ required: true, message: '请选择出生日期' }]}
+      >
+        <DatePicker />
+      </Form.Item>
+      <Form.Item
+        name="maritalStatus"
+        label="婚姻状况"
+        rules={[{ required: true, message: '请选择婚姻状况' }]}
+      >
+        <Select>
+          <Option value="未婚">未婚</Option>
+          <Option value="已婚">已婚</Option>
+          <Option value="离异">离异</Option>
+          <Option value="丧偶">丧偶</Option>
+        </Select>
+      </Form.Item>
+      <Form.Item
+        name="isBaptized"
+        label="是否受洗"
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
+      <Form.Item
+        name="baptismDate"
+        label="受洗日期"
+      >
+        <DatePicker />
+      </Form.Item>
+      <Form.Item
+        name="contact"
+        label="联系方式"
+        rules={[{ required: true, message: '请输入联系方式' }]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item>
+        <Button type="primary" htmlType="submit">
+          更新
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default MemberEditForm;

src/components/MemberList.jsx

@@ -1,12 +1,16 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Button, message } from 'antd';
+import { Table, Button, message, Modal, Space } from 'antd';
 import { deviceApi } from '../api/deviceApi';
 import ExcelImportExport from './ExcelImportExport';
 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();
@@ -25,31 +29,84 @@ const MemberList = () => {
     }
   };
 
-  const handleImport = (data) => {
-    setMembers(data);
-    message.success('数据导入成功');
+  const handleAdd = () => {
+    setIsAddModalVisible(true);
+  };
+
+  const handleEdit = (record) => {
+    setEditingMember(record);
+    setIsEditModalVisible(true);
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      await deviceApi.deletePerson(id);
+      message.success('会友删除成功');
+      fetchMembers();
+    } catch (error) {
+      console.error('删除会友失败', error);
+      message.error('删除会友失败');
+    }
   };
 
   const handleMemberAdded = (newMember) => {
     setMembers([...members, newMember]);
+    setIsAddModalVisible(false);
+  };
+
+  const handleMemberEdited = (editedMember) => {
+    setMembers(members.map(member => 
+      member.personId === editedMember.personId ? editedMember : member
+    ));
+    setIsEditModalVisible(false);
   };
 
   const columns = [
-    // 列定义保持不变
-    // ...
+    // ... 其他列保持不变
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <Button onClick={() => handleEdit(record)}>编辑</Button>
+          <Button onClick={() => handleDelete(record.personId)} danger>删除</Button>
+        </Space>
+      ),
+    },
   ];
 
   return (
     <div>
       <h2>会友列表</h2>
-      <ExcelImportExport members={members} onImport={handleImport} />
-      <MemberForm onMemberAdded={handleMemberAdded} />
+      <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
+        添加会友
+      </Button>
+      <ExcelImportExport members={members} onImport={fetchMembers} />
       <Table
         columns={columns}
         dataSource={members}
         rowKey="personId"
         loading={loading}
       />
+      <Modal
+        title="添加会友"
+        visible={isAddModalVisible}
+        onCancel={() => setIsAddModalVisible(false)}
+        footer={null}
+      >
+        <MemberForm onMemberAdded={handleMemberAdded} />
+      </Modal>
+      <Modal
+        title="编辑会友"
+        visible={isEditModalVisible}
+        onCancel={() => setIsEditModalVisible(false)}
+        footer={null}
+      >
+        <MemberEditForm 
+          member={editingMember} 
+          onMemberEdited={handleMemberEdited} 
+        />
+      </Modal>
     </div>
   );
 };