feat(): cmdb实例编辑支持手动验证

Refs CMDB_INSTANCE-2129
easyops-cn · Dec 17, 2024 · 49dbc9d · 49dbc9d
1 parent 0b0ca6f
commit 49dbc9d
Showing 1 changed file with 32 additions and 13 deletions.
diff --git a/libs/cmdb-instances/src/model-attribute-form/ModelAttributeForm.tsx b/libs/cmdb-instances/src/model-attribute-form/ModelAttributeForm.tsx
@@ -90,6 +90,8 @@ interface ModelAttributeFormProps extends FormComponentProps {
   };
   isResetInstanceNameWhenSaveAndContinueToAddInstance?: boolean;
   uploadConfig?: UploadConfig;
+  useManualVerification?: boolean;
+  ref?: any;
 }
 
 export type attributesFieldsByTag = [string, ModifiedModelObjectField[]];
@@ -102,6 +104,7 @@ interface ModelAttributeFormState {
   showError?: Record<string, any>;
   fixedStyle?: Record<string, any>;
   defaultValueTemplateIndex?: number;
+  useManualVerification?: boolean;
 }
 
 export class ModelAttributeForm extends Component<
@@ -399,8 +402,12 @@ export class ModelAttributeForm extends Component<
     }
   };
   /* istanbul ignore next */
-  handleSubmit = (e: FormEvent, type?: string) => {
-    e.preventDefault();
+  public handleSubmit = (e?: FormEvent, type?: string) => {
+    // 允许不传入 event 参数
+    if (e) {
+      e.preventDefault();
+    }
+
     this.props.scrollToFirstError
       ? this.props.form.validateFieldsAndScroll(
           {
@@ -655,16 +662,17 @@ export class ModelAttributeForm extends Component<
                     label={
                       <span>
                         <span>{attribute.name}</span>
-                        {attribute.description && attribute.description !== "" && (
-                          <Tooltip title={attribute.description}>
-                            <ExclamationCircleFilled
-                              style={{
-                                padding: "0 2px",
-                                color: "var(--color-secondary-text)",
-                              }}
-                            />
-                          </Tooltip>
-                        )}
+                        {attribute.description &&
+                          attribute.description !== "" && (
+                            <Tooltip title={attribute.description}>
+                              <ExclamationCircleFilled
+                                style={{
+                                  padding: "0 2px",
+                                  color: "var(--color-secondary-text)",
+                                }}
+                              />
+                            </Tooltip>
+                          )}
                       </span>
                     }
                     key={attribute.name}
@@ -827,11 +835,22 @@ export class ModelAttributeForm extends Component<
     return (
       <Form>
         {collapse}
-        {submitContainer}
+        {!this.props.useManualVerification && submitContainer}
       </Form>
     );
   }
 }
 
 export const InstanceModelAttributeForm =
   Form.create<ModelAttributeFormProps>()(ModelAttributeForm);
+
+export const InstanceModelAttributeFormRef = React.forwardRef<
+  ModelAttributeForm,
+  ModelAttributeFormProps
+>((props, ref) => {
+  const WrappedForm = Form.create<ModelAttributeFormProps & { ref: any }>()(
+    ModelAttributeForm
+  ) as any;
+  return <WrappedForm {...props} wrappedComponentRef={ref} />;
+});
+InstanceModelAttributeFormRef.displayName = "InstanceModelAttributeFormRef";