1 年之前 · 0329ac22aa
--- a/index.html
+++ b/index.html
@@ -0,0 +1,12 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+    <title>会友信息管理系统</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="root"></div>
			
 
				+    <script type="module" src="/src/main.jsx"></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,41 @@
 
				+import React, { useState } from 'react';
			
 
				+import MemberList from './components/MemberList';
			
 
				+import MemberForm from './components/MemberForm';
			
 
				+import ExcelImportExport from './components/ExcelImportExport';
			
 
				+
			
 
				+function App() {
			
 
				+  const [members, setMembers] = useState([]);
			
 
				+  const [editingMember, setEditingMember] = useState(null);
			
 
				+
			
 
				+  const addMember = (member) => {
			
 
				+    setMembers([...members, { ...member, id: Date.now() }]);
			
 
				+  };
			
 
				+
			
 
				+  const updateMember = (updatedMember) => {
			
 
				+    setMembers(members.map(m => m.id === updatedMember.id ? updatedMember : m));
			
 
				+    setEditingMember(null);
			
 
				+  };
			
 
				+
			
 
				+  const deleteMember = (id) => {
			
 
				+    setMembers(members.filter(m => m.id !== id));
			
 
				+  };
			
 
				+
			
 
				+  const handleImport = (importedMembers) => {
			
 
				+    setMembers([...members, ...importedMembers.map(m => ({ ...m, id: Date.now() + Math.random() }))]);
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <div className="App">
			
 
				+      <h1>会友信息管理系统</h1>
			
 
				+      <ExcelImportExport members={members} onImport={handleImport} />
			
 
				+      <MemberForm onSubmit={editingMember ? updateMember : addMember} initialData={editingMember} />
			
 
				+      <MemberList
			
 
				+        members={members}
			
 
				+        onEdit={setEditingMember}
			
 
				+        onDelete={deleteMember}
			
 
				+      />
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export default App;
			
--- a/src/components/ExcelImportExport.jsx
+++ b/src/components/ExcelImportExport.jsx
@@ -0,0 +1,34 @@
 
				+import React from 'react';
			
 
				+import * as XLSX from 'xlsx';
			
 
				+
			
 
				+const ExcelImportExport = ({ members, onImport }) => {
			
 
				+  const handleExport = () => {
			
 
				+    const worksheet = XLSX.utils.json_to_sheet(members);
			
 
				+    const workbook = XLSX.utils.book_new();
			
 
				+    XLSX.utils.book_append_sheet(workbook, worksheet, "Members");
			
 
				+    XLSX.writeFile(workbook, "members.xlsx");
			
 
				+  };
			
 
				+
			
 
				+  const handleImport = (e) => {
			
 
				+    const file = e.target.files[0];
			
 
				+    const reader = new FileReader();
			
 
				+    reader.onload = (event) => {
			
 
				+      const bstr = event.target.result;
			
 
				+      const workbook = XLSX.read(bstr, { type: 'binary' });
			
 
				+      const worksheetName = workbook.SheetNames[0];
			
 
				+      const worksheet = workbook.Sheets[worksheetName];
			
 
				+      const data = XLSX.utils.sheet_to_json(worksheet);
			
 
				+      onImport(data);
			
 
				+    };
			
 
				+    reader.readAsBinaryString(file);
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <div>
			
 
				+      <button onClick={handleExport}>导出 Excel</button>
			
 
				+      <input type="file" onChange={handleImport} accept=".xlsx, .xls" />
			
 
				+    </div>
			
 
				+  );
			
 
				+};
			
 
				+
			
 
				+export default ExcelImportExport;
			
--- a/src/components/MemberForm.tsx
+++ b/src/components/MemberForm.tsx
@@ -1,85 +0,0 @@
 
				-import React from 'react';
			
 
				-import { Modal, Form, Input, DatePicker, Select, InputNumber, Switch } from 'antd';
			
 
				-import moment from 'moment';
			
 
				-
			
 
				-const { Option } = Select;
			
 
				-
			
 
				-interface MemberFormProps {
			
 
				-  visible: boolean;
			
 
				-  onCancel: () => void;
			
 
				-  onSave: (member: any) => void;
			
 
				-  member?: any;
			
 
				-}
			
 
				-
			
 
				-const MemberForm: React.FC<MemberFormProps> = ({ visible, onCancel, onSave, member }) => {
			
 
				-  const [form] = Form.useForm();
			
 
				-
			
 
				-  React.useEffect(() => {
			
 
				-    if (member) {
			
 
				-      form.setFieldsValue({
			
 
				-        ...member,
			
 
				-        birthDate: moment(member.birthDate),
			
 
				-        baptismDate: member.baptismDate ? moment(member.baptismDate) : null,
			
 
				-      });
			
 
				-    } else {
			
 
				-      form.resetFields();
			
 
				-    }
			
 
				-  }, [member, form]);
			
 
				-
			
 
				-  const handleOk = () => {
			
 
				-    form.validateFields().then(values => {
			
 
				-      onSave({
			
 
				-        ...values,
			
 
				-        birthDate: values.birthDate.format('YYYY-MM-DD'),
			
 
				-        baptismDate: values.baptismDate ? values.baptismDate.format('YYYY-MM-DD') : null,
			
 
				-      });
			
 
				-    });
			
 
				-  };
			
 
				-
			
 
				-  return (
			
 
				-    <Modal
			
 
				-      visible={visible}
			
 
				-      title={member ? "编辑会员信息" : "添加会员信息"}
			
 
				-      onCancel={onCancel}
			
 
				-      onOk={handleOk}
			
 
				-    >
			
 
				-      <Form form={form} layout="vertical">
			
 
				-        <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
			
 
				-          <Input />
			
 
				-        </Form.Item>
			
 
				-        <Form.Item name="gender" label="性别" rules={[{ required: true }]}>
			
 
				-          <Select>
			
 
				-            <Option value="男">男</Option>
			
 
				-            <Option value="女">女</Option>
			
 
				-          </Select>
			
 
				-        </Form.Item>
			
 
				-        <Form.Item name="age" label="年龄" rules={[{ required: true }]}>
			
 
				-          <InputNumber min={0} max={150} />
			
 
				-        </Form.Item>
			
 
				-        <Form.Item name="birthDate" label="出生日期" rules={[{ required: true }]}>
			
 
				-          <DatePicker />
			
 
				-        </Form.Item>
			
 
				-        <Form.Item name="contact" label="联系方式" rules={[{ required: true }]}>
			
 
				-          <Input />
			
 
				-        </Form.Item>
			
 
				-        <Form.Item name="occupation" label="职业">
			
 
				-          <Input />
			
 
				-        </Form.Item>
			
 
				-        <Form.Item name="servicePosition" label="服侍岗位">
			
 
				-          <Input />
			
 
				-        </Form.Item>
			
 
				-        <Form.Item name="isBaptized" label="是否受洗" valuePropName="checked">
			
 
				-          <Switch />
			
 
				-        </Form.Item>
			
 
				-        <Form.Item name="baptismDate" label="受洗日期">
			
 
				-          <DatePicker />
			
 
				-        </Form.Item>
			
 
				-        <Form.Item name="notes" label="备注">
			
 
				-          <Input.TextArea />
			
 
				-        </Form.Item>
			
 
				-      </Form>
			
 
				-    </Modal>
			
 
				-  );
			
 
				-};
			
 
				-
			
 
				-export default MemberForm;
			
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -0,0 +1,10 @@
 
				+import React from 'react'
			
 
				+import ReactDOM from 'react-dom/client'
			
 
				+import App from './App.jsx'
			
 
				+import './index.css'
			
 
				+
			
 
				+ReactDOM.createRoot(document.getElementById('root')).render(
			
 
				+  <React.StrictMode>
			
 
				+    <App />
			
 
				+  </React.StrictMode>,
			
 
				+)