update form

Author: xlorne

mobile-ui/src/components/flow/components/FlowContent.tsx

@@ -14,7 +14,7 @@ const FlowContent= () => {
     const flowViewReactContext = useContext(FlowViewReactContext);
 
     const flowRecordContext = flowViewReactContext?.flowRecordContext;
-    const formAction = flowViewReactContext?.formAction;
+    const formInstance = flowViewReactContext?.formInstance;
 
     const FlowFormView = flowRecordContext?.getFlowFormView() as React.ComponentType<FlowFormViewProps>;
 
@@ -27,7 +27,7 @@ const FlowContent= () => {
     useEffect(() => {
         if(!flowRecordContext?.isEditable()){
             setTimeout(()=>{
-                formAction?.current?.disableAll();
+                formInstance?.disableAll();
             },100);
         }
     }, []);
@@ -37,10 +37,10 @@ const FlowContent= () => {
         <div className={"flow-view-content"} style={style}>
             <Tabs>
                 <Tabs.Tab title='流程详情' key='detail'>
-                    {formAction && (
+                    {formInstance && (
                         <FlowFormView
                             data={formParams}
-                            formAction={formAction}
+                            form={formInstance}
                             dataVersion={dataVersion}
                         />
                     )}

mobile-ui/src/components/flow/components/FlowFormOpinion.tsx

@@ -6,17 +6,17 @@ import {FlowViewReactContext} from "@/components/flow/view";
 const FlowFormOpinion = ()=>{
 
     const flowViewReactContext = useContext(FlowViewReactContext);
-    const opinionAction = flowViewReactContext?.opinionAction;
+    const opinionInstance = flowViewReactContext?.opinionInstance;
     const flowRecordContext = flowViewReactContext?.flowRecordContext;
 
     useEffect(() => {
-        opinionAction?.current?.setFieldValue("advice", flowRecordContext?.getOpinionAdvice());
+        opinionInstance?.setFieldValue("advice", flowRecordContext?.getOpinionAdvice());
     }, []);
 
     return (
         <>
             <Form
-                actionRef={opinionAction}
+                form={opinionInstance}
                 loadFields={async ()=>{
                     return [
                         {

mobile-ui/src/components/flow/components/FlowPage.tsx

@@ -10,7 +10,7 @@ import {
 import {useDispatch, useSelector} from "react-redux";
 import {FlowReduxState, updateState} from "@/components/flow/store/FlowSlice";
 import {FlowRecordContext} from "@/components/flow/domain/FlowRecordContext";
-import {FormAction} from "@/components/form";
+import Form from "@/components/form";
 import {FlowStateContext} from "@/components/flow/domain/FlowStateContext";
 import {FlowEventContext} from "@/components/flow/domain/FlowEventContext";
 import FlowResult from "@/components/flow/components/FlowResult";
@@ -34,16 +34,16 @@ const FlowPage: React.FC<FlowPageProps> = (props) => {
 
     const currentState = useSelector((state: FlowReduxState) => state.flow);
     const flowRecordContext = new FlowRecordContext(props, props.flowData);
-    const formAction = React.useRef<FormAction>(null);
-    const opinionAction = React.useRef<FormAction>(null);
+    const formInstance = Form.useForm();
+    const opinionInstance = Form.useForm();
 
     const flowStateContext = new FlowStateContext(currentState, (state: any) => {
         dispatch(updateState({
             ...state
         }));
     });
     const flowTriggerContext = new FlowTriggerContext();
-    const flowEvenContext = new FlowEventContext(flowRecordContext, flowTriggerContext, formAction, opinionAction, flowStateContext);
+    const flowEvenContext = new FlowEventContext(flowRecordContext, flowTriggerContext, formInstance, opinionInstance, flowStateContext);
     const flowButtonClickContext = new FlowButtonClickContext(flowEvenContext, flowStateContext);
     const FlowFormView = flowRecordContext.getFlowFormView() as React.ComponentType<FlowFormViewProps>;
 
@@ -70,8 +70,8 @@ const FlowPage: React.FC<FlowPageProps> = (props) => {
                 flowTriggerContext: flowTriggerContext,
                 flowButtonClickContext: flowButtonClickContext,
 
-                formAction: formAction,
-                opinionAction: opinionAction
+                formInstance: formInstance,
+                opinionInstance: opinionInstance
             }}>
                 <div className={"flow-view"}>
                     {currentState.result && (

mobile-ui/src/components/flow/domain/FlowEventContext.ts

@@ -7,6 +7,7 @@ import {FlowUser} from "@/components/flow/types";
 import {FlowSubmitResultParser} from "@/components/flow/domain/FlowResultParser";
 import {UserSelectMode} from "@/components/flow/store/FlowSlice";
 import {FlowTriggerContext} from "@/components/flow/domain/FlowTriggerContext";
+import FormInstance from "@/components/form/domain/FormInstance";
 
 /**
  * 流程的事件控制上下文对象
@@ -15,28 +16,28 @@ export class FlowEventContext {
 
     private readonly flowRecordContext: FlowRecordContext;
     private readonly flowTriggerContext: FlowTriggerContext;
-    private readonly flowAction: React.RefObject<FormAction>;
-    private readonly opinionAction: React.RefObject<FormAction>;
+    private readonly flowInstance: FormInstance;
+    private readonly opinionInstance: FormInstance;
     private readonly flowStateContext: FlowStateContext;
 
     constructor(flowViewContext: FlowRecordContext,
                 flowTriggerContext:FlowTriggerContext,
-                flowAction: React.RefObject<FormAction>,
-                opinionAction: React.RefObject<FormAction>,
+                flowInstance: FormInstance,
+                opinionInstance: FormInstance,
                 flowStateContext: FlowStateContext) {
         this.flowRecordContext = flowViewContext;
         this.flowTriggerContext = flowTriggerContext;
-        this.flowAction = flowAction;
-        this.opinionAction = opinionAction;
+        this.flowInstance = flowInstance;
+        this.opinionInstance = opinionInstance;
         this.flowStateContext = flowStateContext;
     }
 
     private getRequestBody = () => {
-        const formData = this.flowAction.current?.getFieldsValue();
+        const formData = this.opinionInstance.getFieldsValue();
         const flowData = this.flowRecordContext.getFlowFormParams();
         const workCode = this.flowRecordContext.getWorkCode();
         const recordId = this.flowStateContext.getRecordId();
-        const advice = this.opinionAction.current?.getFieldsValue();
+        const advice = this.opinionInstance.getFieldsValue();
 
         return {
             recordId,
@@ -51,8 +52,8 @@ export class FlowEventContext {
 
 
     private validateForm = async () => {
-        const formState = await this.flowAction.current?.validate();
-        const opinionState = await this.opinionAction.current?.validate();
+        const formState = await this.flowInstance.validate();
+        const opinionState = await this.opinionInstance.validate();
         return formState && opinionState;
     }
 

mobile-ui/src/components/flow/types.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import {FormAction} from "@/components/form";
+import FormInstance from "@/components/form/domain/FormInstance";
 
 
 // 流程图中线的类型
@@ -106,7 +106,7 @@ export interface FlowFormViewProps {
     // 表单数据
     data: FlowFormParams;
     // 表单控制对象
-    formAction: React.RefObject<FormAction>;
+    form: FormInstance;
     // 数据版本
     dataVersion?: number;
 }

mobile-ui/src/components/flow/view/index.tsx

@@ -6,12 +6,12 @@ import {Skeleton} from "antd-mobile";
 import {FlowRecordContext} from "@/components/flow/domain/FlowRecordContext";
 import {FlowEventContext} from "@/components/flow/domain/FlowEventContext";
 import {detail} from "@/api/flow";
-import {FormAction} from "@/components/form";
 import {FlowStateContext} from "@/components/flow/domain/FlowStateContext";
 import FlowPage from "@/components/flow/components/FlowPage";
 import {FlowTriggerContext} from "@/components/flow/domain/FlowTriggerContext";
 import {FlowButtonClickContext} from "@/components/flow/domain/FlowButtonClickContext";
 import "./index.scss";
+import FormInstance from "@/components/form/domain/FormInstance";
 
 // 流程视图上下文属性
 interface FlowViewReactContextProps {
@@ -26,9 +26,9 @@ interface FlowViewReactContextProps {
     // 流程按钮点击触发控制器上下文对象
     flowButtonClickContext: FlowButtonClickContext;
     // 表单操作对象
-    formAction: React.RefObject<FormAction>;
+    formInstance: FormInstance;
     // 审批意见操作对象
-    opinionAction: React.RefObject<FormAction>;
+    opinionInstance: FormInstance;
 }
 
 export const FlowViewReactContext = createContext<FlowViewReactContextProps | null>(null);

mobile-ui/src/components/form/common.tsx

@@ -4,8 +4,8 @@ import {FormItemProps} from "@/components/form/types";
 
 const formFieldInit = (props: FormItemProps,reloadOption?:()=>void) => {
     const formContext = React.useContext(FormContext) || undefined;
-    const formAction = formContext?.formAction;
-    const validateContext = formContext?.validateContext;
+    const formAction = formContext?.getFormAction();
+    const validateContext = formContext?.getFormValidateContext();
     const [random, setRandom] = React.useState(0);
 
     const rules= props.required?[{required: true}]:[];
@@ -20,14 +20,14 @@ const formFieldInit = (props: FormItemProps,reloadOption?:()=>void) => {
                 }
             }
         }
-        const reloadContext = formContext?.reloadContext;
+        const reloadContext = formContext?.getFormFieldReloadListenerContext();
         if (reloadContext) {
             reloadContext.addListener(props.name, () => {
                 setRandom(Math.random);
             });
         }
 
-        const optionContext = formContext?.optionContext;
+        const optionContext = formContext?.getFormFieldOptionListenerContext();
         if (optionContext) {
             optionContext.addListener(props.name, () => {
                 if(reloadOption){