优化FormBuilder

components/FormBuilder/FormBuilder.d.ts

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

components/FormBuilder/FormBuilder.js

@@ -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";
 
 /**
@@ -19,6 +19,7 @@ const FormBuilder = (props) => {
     showCancelButton = true,
     customActionButtons,
     extraActionButtons,
+    loading = false,
     ...restProps
   } = props;
 
@@ -27,45 +28,47 @@ const FormBuilder = (props) => {
   };
 
   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>
+    <Spin spinning={loading}>
+      <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>
-      )}
-    </Form>
+        {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>
+    </Spin>
   );
 };