AI: 扩展会友管理字段

src/components/member/MemberList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, Button, Popconfirm } from 'antd';
+import { Table, Button, Popconfirm, Tag } from 'antd';
 import { Member } from '../../types/member';
 
 interface MemberListProps {
@@ -10,21 +10,22 @@ interface MemberListProps {
 
 const MemberList: React.FC<MemberListProps> = ({ members, onEdit, onDelete }) => {
   const columns = [
-    {
-      title: '姓名',
-      dataIndex: 'name',
-      key: 'name',
-    },
-    {
-      title: '身份证号',
-      dataIndex: 'idNumber',
-      key: 'idNumber',
-    },
-    {
-      title: '手机号',
-      dataIndex: 'phone',
-      key: 'phone',
+    { title: '姓名', dataIndex: 'name', key: 'name' },
+    { title: '性别', dataIndex: 'gender', key: 'gender' },
+    { title: '年龄', dataIndex: 'age', key: 'age' },
+    { title: '手机号', dataIndex: 'phone', key: 'phone' },
+    { 
+      title: '是否受洗', 
+      dataIndex: 'isBaptized', 
+      key: 'isBaptized',
+      render: (isBaptized: boolean) => (
+        <Tag color={isBaptized ? 'green' : 'red'}>
+          {isBaptized ? '已受洗' : '未受洗'}
+        </Tag>
+      )
     },
+    { title: '小组组长', dataIndex: 'groupLeader', key: 'groupLeader' },
+    { title: '服侍岗位', dataIndex: 'servicePosition', key: 'servicePosition' },
     {
       title: '操作',
       key: 'action',

src/components/member/MemberModal.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
-import { Modal, Form, Input } from 'antd';
+import { Modal, Form, Input, Select, InputNumber, DatePicker, Checkbox } from 'antd';
 import { Member } from '../../types/member';
+import moment from 'moment';
 
 interface MemberModalProps {
   visible: boolean;
@@ -9,12 +10,19 @@ interface MemberModalProps {
   initialValues: Member | null;
 }
 
+const { Option } = Select;
+
 const MemberModal: React.FC<MemberModalProps> = ({ visible, onOk, onCancel, initialValues }) => {
   const [form] = Form.useForm();
 
   useEffect(() => {
     if (visible && initialValues) {
-      form.setFieldsValue(initialValues);
+      const values = {
+        ...initialValues,
+        birthDate: initialValues.birthDate ? moment(initialValues.birthDate) : null,
+        baptismDate: initialValues.baptismDate ? moment(initialValues.baptismDate) : null,
+      };
+      form.setFieldsValue(values);
     } else {
       form.resetFields();
     }
@@ -22,7 +30,12 @@ const MemberModal: React.FC<MemberModalProps> = ({ visible, onOk, onCancel, init
 
   const handleOk = () => {
     form.validateFields().then(values => {
-      onOk(values as Member);
+      const member = {
+        ...values,
+        birthDate: values.birthDate ? values.birthDate.format('YYYY-MM-DD') : null,
+        baptismDate: values.baptismDate ? values.baptismDate.format('YYYY-MM-DD') : null,
+      };
+      onOk(member as Member);
       form.resetFields();
     });
   };
@@ -33,11 +46,10 @@ const MemberModal: React.FC<MemberModalProps> = ({ visible, onOk, onCancel, init
       visible={visible} 
       onOk={handleOk} 
       onCancel={onCancel}
+      width={800}
     >
       <Form form={form} layout="vertical">
-        <Form.Item name="id" hidden>
-          <Input />
-        </Form.Item>
+        <Form.Item name="id" hidden><Input /></Form.Item>
         <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
           <Input />
         </Form.Item>
@@ -47,6 +59,45 @@ const MemberModal: React.FC<MemberModalProps> = ({ visible, onOk, onCancel, init
         <Form.Item name="phone" label="手机号" rules={[{ required: true, message: '请输入手机号' }]}>
           <Input />
         </Form.Item>
+        <Form.Item name="gender" label="性别" rules={[{ required: true, message: '请选择性别' }]}>
+          <Select>
+            <Option value="男">男</Option>
+            <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="address" label="联系地址" rules={[{ required: true, message: '请输入联系地址' }]}>
+          <Input.TextArea />
+        </Form.Item>
+        <Form.Item name="workplace" label="工作单位">
+          <Input />
+        </Form.Item>
+        <Form.Item name="groupLeader" label="小组组长">
+          <Input />
+        </Form.Item>
+        <Form.Item name="isBaptized" label="是否受洗" valuePropName="checked">
+          <Checkbox />
+        </Form.Item>
+        <Form.Item name="baptismDate" label="受洗日期">
+          <DatePicker />
+        </Form.Item>
+        <Form.Item name="servicePosition" label="服侍岗位">
+          <Input />
+        </Form.Item>
       </Form>
     </Modal>
   );

src/services/memberService.ts

@@ -1,20 +1,45 @@
-import axios from 'axios';
 import { Member } from '../types/member';
 
-const API_URL = '/api/members';
-
 // 模拟 API 延迟
 const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
 // 模拟会友数据
 let mockMembers: Member[] = [
-  { id: '1', name: '张三', idNumber: '310000199001011234', phone: '13800138000' },
-  { id: '2', name: '李四', idNumber: '310000199201022345', phone: '13900139000' },
+  {
+    id: '1',
+    name: '张三',
+    idNumber: '310000199001011234',
+    phone: '13800138000',
+    gender: '男',
+    age: 30,
+    birthDate: '1990-01-01',
+    maritalStatus: '已婚',
+    address: '上海市浦东新区XX路XX号',
+    workplace: 'XX科技有限公司',
+    groupLeader: '李四',
+    isBaptized: true,
+    baptismDate: '2015-05-20',
+    servicePosition: '敬拜团'
+  },
+  {
+    id: '2',
+    name: '李四',
+    idNumber: '310000199201022345',
+    phone: '13900139000',
+    gender: '女',
+    age: 28,
+    birthDate: '1992-01-02',
+    maritalStatus: '未婚',
+    address: '上海市黄浦区YY路YY号',
+    workplace: 'YY教育机构',
+    groupLeader: '王五',
+    isBaptized: false,
+    servicePosition: '主日学老师'
+  },
 ];
 
 export const fetchMembers = async (): Promise<Member[]> => {
   await delay(500); // 模拟网络延迟
-  console.log('Fetched members:', mockMembers);
   return mockMembers;
 };
 
@@ -22,7 +47,6 @@ export const addMember = async (member: Omit<Member, 'id'>): Promise<Member> =>
   await delay(500);
   const newMember = { ...member, id: Date.now().toString() };
   mockMembers.push(newMember);
-  console.log('Added member:', newMember);
   return newMember;
 };
 
@@ -31,7 +55,6 @@ export const updateMember = async (member: Member): Promise<Member> => {
   const index = mockMembers.findIndex(m => m.id === member.id);
   if (index !== -1) {
     mockMembers[index] = member;
-    console.log('Updated member:', member);
     return member;
   }
   throw new Error('Member not found');
@@ -40,5 +63,4 @@ export const updateMember = async (member: Member): Promise<Member> => {
 export const deleteMember = async (memberId: string): Promise<void> => {
   await delay(500);
   mockMembers = mockMembers.filter(m => m.id !== memberId);
-  console.log('Deleted member with id:', memberId);
 };

src/types/member.ts

@@ -3,4 +3,14 @@ export interface Member {
   name: string;
   idNumber: string;
   phone: string;
+  gender: '男' | '女' | '其他';
+  age: number;
+  birthDate: string;
+  maritalStatus: '未婚' | '已婚' | '离异' | '丧偶';
+  address: string;
+  workplace: string;
+  groupLeader: string;
+  isBaptized: boolean;
+  baptismDate?: string;
+  servicePosition: string;
 }