ball_admin/src/components/form/simple_form.tsx

import { Checkbox, DatePicker, Form, Input, Radio, Switch } from "antd";
import { useEffect } from "react";
import { SimpleFormData } from "./interface";
import { FormSelect } from "./select";
import AliUpload from "../aliUpload";
const { TextArea } = Input;
const SimpleForm = (props: SimpleFormData) => {
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    props.onFinish(values);
  };
  useEffect(() => {
    if (props.createCallback) {
      props.createCallback();
    }
  }, [props]);

  return (
    <Form
      name={props.formName}
      ref={props.formRef}
      form={form}
      initialValues={{ menubar: true }}
      labelCol={{ span: props.colProps }}
      wrapperCol={{ span: 16 }}
      onFinish={onFinish}
      autoComplete="on"
    >
      {props.formDatas.map((v) => {
        switch (v.type) {
          case "input":
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <Input defaultValue={v.value} value={v.value} />
              </Form.Item>
            );
          case "password":
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <Input.Password value={v.name} />
              </Form.Item>
            );
          case "checkbox":
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <Checkbox>Remember me</Checkbox>
              </Form.Item>
            );
          case "select":
            return FormSelect(v);
          case "upload":
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                valuePropName="fileList"
                name={v.name}
                rules={v.rules}
                initialValue={v.value}
                getValueFromEvent={(e) => {
                  if (Array.isArray(e)) {
                    return e;
                  }
                  return e && e.fileList;
                }}
              >
                <AliUpload
                  imgList={form.getFieldValue(v.name) ?? []}
                  onChnage={(res) => {
                    form.setFieldValue(v.name, res);
                  }}
                />
              </Form.Item>
            );
          case "textArea":
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <TextArea
                  value={v.name}
                  placeholder="Controlled autosize"
                  autoSize={{ minRows: 3, maxRows: 5 }}
                />
              </Form.Item>
            );
          case "Radio":
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <Radio.Group>
                  <Radio value={0}>男</Radio>
                  <Radio value={1}>女</Radio>
                </Radio.Group>
              </Form.Item>
            );
          case "switch":
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <Switch/>
              </Form.Item>
            );
          case "Date":
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <DatePicker />
              </Form.Item>
            );

          default:
            return (
              <Form.Item
                key={v.label}
                label={v.label}
                name={v.name}
                rules={v.rules}
              >
                <Input defaultValue={v.value} value={v.value} />
              </Form.Item>
            );
        }
      })}
    </Form>
  );
};

export default SimpleForm;