zy-react-library/components/FormBuilder/FormBuilder.js

import { Button, Col, Form, Row, Space } from "antd";
import FormItemsRenderer from "./FormItemsRenderer";

/**
 * 表单构建器组件
 */
const FormBuilder = (props) => {
  const {
    values,
    options,
    gutter = 24,
    span = 12,
    labelCol = { span: 4 },
    onFinish,
    useAutoGenerateRequired = true,
    showActionButtons = true,
    submitButtonText = "提交",
    resetButtonText = "重置",
    showSubmitButton = true,
    showResetButton = true,
    customActionButtons,
    form: externalForm,
    ...restProps
  } = props;

  const [internalForm] = Form.useForm();
  const form = externalForm || internalForm;

  const handleReset = () => {
    form.resetFields();
  };

  return (
    <Form
      labelCol={labelCol}
      scrollToFirstError
      wrapperCol={{ span: 24 - labelCol.span }}
      onFinish={onFinish}
      initialValues={values}
      form={form}
      style={{ width: `calc(100% - ${gutter * 2}px)`, margin: `0 auto` }}
      {...restProps}
    >
      <Row gutter={gutter}>
        <FormItemsRenderer
          options={options}
          labelCol={labelCol}
          span={span}
          useAutoGenerateRequired={useAutoGenerateRequired}
        />
      </Row>
      {showActionButtons && (
        <Row gutter={gutter} style={{ marginTop: 24 }}>
          <Col span={24} style={{ textAlign: "center" }}>
            {customActionButtons || (
              <Space>
                {showSubmitButton && (
                  <Button type="primary" htmlType="submit">
                    {submitButtonText}
                  </Button>
                )}
                {showResetButton && (
                  <Button onClick={handleReset} style={{ marginRight: 8 }}>
                    {resetButtonText}
                  </Button>
                )}
              </Space>
            )}
          </Col>
        </Row>
      )}
    </Form>
  );
};

FormBuilder.displayName = "FormBuilder";

export default FormBuilder;