صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
d8dfun
/
member-management-system-huK00Mmp
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

会友信息管理系统 - 基本设置

Message ID: 19FE8hh
D8D AI 1 سال پیش
والد
fd14e55841
کامیت
0329ac22aa
5فایلهای تغییر یافته به همراه97 افزوده شده و 85 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 12 0
      index.html
  2. 41 0
      src/App.jsx
  3. 34 0
      src/components/ExcelImportExport.jsx
  4. 0 85
      src/components/MemberForm.tsx
  5. 10 0
      src/main.jsx

+ 12 - 0
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>

+ 41 - 0
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;

+ 34 - 0
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;

+ 0 - 85
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;

+ 10 - 0
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>,
 
+)