From 91ea1c4d14ca4167630c4bf7af8636b8dda06d3e Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Thu, 23 Oct 2025 18:01:20 +0800 Subject: [PATCH] =?UTF-8?q?FormBuilder=E5=A2=9E=E5=8A=A0=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E6=8F=90=E4=BA=A4=E9=87=8D=E7=BD=AE=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/FormBuilder/FormBuilder.d.ts | 18 ++++++++++-- components/FormBuilder/FormBuilder.js | 37 ++++++++++++++++++++++++- 2 files changed, 51 insertions(+), 4 deletions(-) diff --git a/components/FormBuilder/FormBuilder.d.ts b/components/FormBuilder/FormBuilder.d.ts index 9b42144..e17bf60 100644 --- a/components/FormBuilder/FormBuilder.d.ts +++ b/components/FormBuilder/FormBuilder.d.ts @@ -1,6 +1,6 @@ import type { FormInstance, FormProps } from "antd/es/form"; import type { Gutter } from "antd/es/grid/row"; -import type { FC } from "react"; +import type { FC, ReactNode } from "react"; import type { FormOption, FormValues } from "./FormItemsRenderer"; /** @@ -16,11 +16,23 @@ export interface FormBuilderProps extends Omit { /** 占据栅格列数,默认 12 */ span?: number | string; /** 表单实例(通过 Form.useForm() 创建) */ - form: FormInstance; + form?: FormInstance; /** 自动生成必填规则,默认 true */ useAutoGenerateRequired?: boolean; /** 表单提交回调 */ - onFinish?: (values: any) => void; + onFinish?: (values: FormValues) => void; + /** 是否显示操作按钮区域,默认 true */ + showActionButtons?: boolean; + /** 提交按钮文字,默认为"提交" */ + submitButtonText?: string; + /** 重置按钮文字,默认为"重置" */ + resetButtonText?: string; + /** 是否显示提交按钮,默认 true */ + showSubmitButton?: boolean; + /** 是否显示重置按钮,默认 true */ + showResetButton?: boolean; + /** 自定义操作按钮组 */ + customActionButtons?: ReactNode; } /** diff --git a/components/FormBuilder/FormBuilder.js b/components/FormBuilder/FormBuilder.js index 5f46621..c800e6e 100644 --- a/components/FormBuilder/FormBuilder.js +++ b/components/FormBuilder/FormBuilder.js @@ -1,4 +1,4 @@ -import { Form, Row } from "antd"; +import { Button, Col, Form, Row, Space } from "antd"; import FormItemsRenderer from "./FormItemsRenderer"; /** @@ -13,9 +13,23 @@ const FormBuilder = (props) => { 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 (
{ wrapperCol={{ span: 24 - labelCol.span }} onFinish={onFinish} initialValues={values} + form={form} {...restProps} > @@ -32,6 +47,26 @@ const FormBuilder = (props) => { useAutoGenerateRequired={useAutoGenerateRequired} /> + {showActionButtons && ( + + + {customActionButtons || ( + + {showSubmitButton && ( + + )} + {showResetButton && ( + + )} + + )} + + + )}
); };