80 lines
2.0 KiB
JavaScript
80 lines
2.0 KiB
JavaScript
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}
|
|
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>
|
|
)}
|
|
{showResetButton && (
|
|
<Button onClick={handleReset} style={{ marginRight: 8 }}>
|
|
{resetButtonText}
|
|
</Button>
|
|
)}
|
|
</Space>
|
|
)}
|
|
</Col>
|
|
</Row>
|
|
)}
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
FormBuilder.displayName = "FormBuilder";
|
|
|
|
export default FormBuilder;
|