front_library
/
zy-react-library
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化FormBuilder

master
LiuJiaNan 2025-11-08 08:50:36 +08:00
parent ba6d7e524e
commit 12bd18debe
2 changed files with 44 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/FormBuilder/FormBuilder.d.ts vendored
View File

@ -31,6 +31,8 @@ export interface FormBuilderProps extends FormProps {
customActionButtons?: ReactNode; customActionButtons?: ReactNode;
/** 额外操作按钮组 */ /** 额外操作按钮组 */
extraActionButtons?: ReactNode; extraActionButtons?: ReactNode;
/** 是否处于加载状态，默认 false */
loading?: boolean;
} }
/** /**

81
components/FormBuilder/FormBuilder.js
View File

@ -1,4 +1,4 @@
import { Button, Col, Form, Row, Space } from "antd"; import { Button, Col, Form, Row, Space, Spin } from "antd";
import FormItemsRenderer from "./FormItemsRenderer"; import FormItemsRenderer from "./FormItemsRenderer";
/** /**
@ -19,6 +19,7 @@ const FormBuilder = (props) => {
showCancelButton = true, showCancelButton = true,
customActionButtons, customActionButtons,
extraActionButtons, extraActionButtons,
loading = false,
...restProps ...restProps
} = props; } = props;
@ -27,45 +28,47 @@ const FormBuilder = (props) => {
}; };
return ( return (
<Form <Spin spinning={loading}>
labelCol={labelCol} <Form
scrollToFirstError labelCol={labelCol}
wrapperCol={{ span: 24 - labelCol.span }} scrollToFirstError
initialValues={values} wrapperCol={{ span: 24 - labelCol.span }}
style={{ width: `calc(100% - ${gutter * 2}px)`, margin: `0 auto` }} initialValues={values}
{...restProps} style={{ width: `calc(100% - ${gutter * 2}px)`, margin: `0 auto` }}
> {...restProps}
<Row gutter={gutter}> >
<FormItemsRenderer <Row gutter={gutter}>
options={options} <FormItemsRenderer
labelCol={labelCol} options={options}
span={span} labelCol={labelCol}
useAutoGenerateRequired={useAutoGenerateRequired} span={span}
initialValues={values} 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> </Row>
)} {showActionButtons && (
</Form> <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>
</Spin>
); );
}; };