更新会友列表字段

Message ID: Tf0iT5l

package-lock.json

@@ -8,12 +8,12 @@
       "name": "member-management-system",
       "version": "0.0.0",
       "dependencies": {
-        "@ant-design/icons": "^4.8.3",
-        "antd": "^4.24.16",
+        "@ant-design/icons": "^4.7.0",
+        "antd": "^4.24.8",
         "axios": "^0.27.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.4.0",
+        "react-router-dom": "^6.28.0",
         "xlsx": "^0.18.5"
       },
       "devDependencies": {

src/api/deviceApi.js

@@ -13,14 +13,12 @@ export const deviceApi = {
     }
   },
 
-  getPersonInfo: async (personId) => {
+  getAllPersons: async () => {
     try {
-      const response = await axios.get(`${API_BASE_URL}/GetPersonInfo`, {
-        params: { personId }
-      });
+      const response = await axios.get(`${API_BASE_URL}/GetAllPersons`);
       return response.data;
     } catch (error) {
-      console.error('获取人员信息失败:', error);
+      console.error('获取所有会友信息失败:', error);
       throw error;
     }
   },
@@ -30,7 +28,7 @@ export const deviceApi = {
       const response = await axios.post(`${API_BASE_URL}/AddPerson`, personInfo);
       return response.data;
     } catch (error) {
-      console.error('添加人员失败:', error);
+      console.error('添加会友失败:', error);
       throw error;
     }
   },

src/components/ExcelImportExport.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { Button, Upload, message } from 'antd';
+import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
 import * as XLSX from 'xlsx';
 
 const ExcelImportExport = ({ members, onImport }) => {
@@ -9,8 +11,7 @@ const ExcelImportExport = ({ members, onImport }) => {
     XLSX.writeFile(workbook, "members.xlsx");
   };
 
-  const handleImport = (e) => {
-    const file = e.target.files[0];
+  const handleImport = (file) => {
     const reader = new FileReader();
     reader.onload = (event) => {
       const bstr = event.target.result;
@@ -23,10 +24,29 @@ const ExcelImportExport = ({ members, onImport }) => {
     reader.readAsBinaryString(file);
   };
 
+  const props = {
+    beforeUpload: (file) => {
+      const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+      if (!isXlsx) {
+        message.error('只能上传 XLSX 文件!');
+      }
+      return isXlsx || Upload.LIST_IGNORE;
+    },
+    onChange: (info) => {
+      if (info.file.status !== 'uploading') {
+        handleImport(info.file.originFileObj);
+      }
+    },
+  };
+
   return (
-    <div>
-      <button onClick={handleExport}>导出 Excel</button>
-      <input type="file" onChange={handleImport} accept=".xlsx, .xls" />
+    <div style={{ marginBottom: 16 }}>
+      <Button onClick={handleExport} icon={<DownloadOutlined />} style={{ marginRight: 8 }}>
+        导出 Excel
+      </Button>
+      <Upload {...props} showUploadList={false}>
+        <Button icon={<UploadOutlined />}>导入 Excel</Button>
+      </Upload>
     </div>
   );
 };

src/components/MemberForm.jsx

@@ -1,12 +1,22 @@
 import React from 'react';
-import { Form, Input, Button, message } from 'antd';
+import { Form, Input, Button, Select, DatePicker, InputNumber, Switch, message } from 'antd';
 import { deviceApi } from '../api/deviceApi';
 
+const { Option } = Select;
+
 const MemberForm = () => {
   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');
+      }
+
       await deviceApi.addPerson(values);
       message.success('会友添加成功');
       form.resetFields();
@@ -32,6 +42,55 @@ const MemberForm = () => {
         >
           <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="联系方式"

src/components/MemberList.jsx

@@ -40,6 +40,37 @@ const MemberList = () => {
       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',

src/main.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
-import 'antd/dist/antd.css'
+import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>