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 },
    useAutoGenerateRequired = true,
    showActionButtons = true,
    submitButtonText = "提交",
    cancelButtonText = "取消",
    showSubmitButton = true,
    showCancelButton = true,
    customActionButtons,
    extraActionButtons,
    ...restProps
  } = props;

  const handleCancel = () => {
    window.history.back();
  };

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

FormBuilder.displayName = "FormBuilder";

export default FormBuilder;