修复页面空白问题

Message ID: EAHmwYs

package-lock.json

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

src/api/deviceApi.js

@@ -13,12 +13,14 @@ export const deviceApi = {
     }
   },
 
-  getAllPersons: async () => {
+  getPersonInfo: async (personId) => {
     try {
-      const response = await axios.get(`${API_BASE_URL}/GetAllPersons`);
+      const response = await axios.get(`${API_BASE_URL}/GetPersonInfo`, {
+        params: { personId }
+      });
       return response.data;
     } catch (error) {
-      console.error('获取所有会友信息失败:', error);
+      console.error('获取人员信息失败:', error);
       throw error;
     }
   },
@@ -28,7 +30,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,6 +1,4 @@
 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 }) => {
@@ -11,7 +9,8 @@ const ExcelImportExport = ({ members, onImport }) => {
     XLSX.writeFile(workbook, "members.xlsx");
   };
 
-  const handleImport = (file) => {
+  const handleImport = (e) => {
+    const file = e.target.files[0];
     const reader = new FileReader();
     reader.onload = (event) => {
       const bstr = event.target.result;
@@ -24,29 +23,10 @@ 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 style={{ marginBottom: 16 }}>
-      <Button onClick={handleExport} icon={<DownloadOutlined />} style={{ marginRight: 8 }}>
-        导出 Excel
-      </Button>
-      <Upload {...props} showUploadList={false}>
-        <Button icon={<UploadOutlined />}>导入 Excel</Button>
-      </Upload>
+    <div>
+      <button onClick={handleExport}>导出 Excel</button>
+      <input type="file" onChange={handleImport} accept=".xlsx, .xls" />
     </div>
   );
 };

src/components/MemberForm.jsx

@@ -1,22 +1,12 @@
 import React from 'react';
-import { Form, Input, Button, Select, DatePicker, InputNumber, Switch, message } from 'antd';
+import { Form, Input, Button, 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();
@@ -42,55 +32,6 @@ 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/main.jsx

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