member-management-system-excel-4tS6CDLA/src/components/MemberForm.jsx

import React, { useEffect, useState } from 'react';
import { Form, Input, Button, Select, DatePicker, InputNumber, Switch, Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import moment from 'moment';

const { Option } = Select;

const MemberForm = ({ onSubmit, initialValues }) => {
  const [form] = Form.useForm();
  const [servicePositions, setServicePositions] = useState([
    '主日学老师',
    '敬拜团成员',
    '接待员',
    '财务',
    '音控',
    '祷告组长'
  ]);

  useEffect(() => {
    if (initialValues) {
      form.setFieldsValue({
        ...initialValues,
        birthDate: initialValues.birthDate ? moment(initialValues.birthDate) : null,
        baptismDate: initialValues.baptismDate ? moment(initialValues.baptismDate) : null,
      });
    } else {
      form.resetFields();
    }
  }, [initialValues, form]);

  const onFinish = (values) => {
    const formattedValues = {
      ...values,
      birthDate: values.birthDate ? values.birthDate.format('YYYY-MM-DD') : null,
      baptismDate: values.baptismDate ? values.baptismDate.format('YYYY-MM-DD') : null,
      photo: values.photo && values.photo[0] ? values.photo[0].originFileObj : null,
    };
    onSubmit(formattedValues);
  };

  const normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只能上传 JPG/PNG 格式的图片!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片大小不能超过 2MB!');
    }
    return isJpgOrPng && isLt2M;
  };

  const handleServicePositionChange = (value) => {
    if (value && !servicePositions.includes(value)) {
      setServicePositions([...servicePositions, value]);
    }
  };

  return (
    <Form
      form={form}
      name="memberForm"
      onFinish={onFinish}
      layout="vertical"
    >
      <Form.Item
        name="name"
        label="姓名"
        rules={[{ required: true, message: '请输入姓名' }]}
      >
        <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="联系方式"
        rules={[{ required: true, message: '请输入联系方式' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="servicePosition"
        label="服侍岗位"
      >
        <Select
          mode="tags"
          style={{ width: '100%' }}
          placeholder="请选择或输入服侍岗位"
          onChange={handleServicePositionChange}
        >
          {servicePositions.map(position => (
            <Option key={position} value={position}>{position}</Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item
        name="photo"
        label="单寸照片"
        valuePropName="fileList"
        getValueFromEvent={normFile}
      >
        <Upload 
          name="photo" 
          listType="picture"
          beforeUpload={beforeUpload}
          maxCount={1}
        >
          <Button icon={<UploadOutlined />}>上传照片</Button>
        </Upload>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MemberForm;