Skip to content

Commit d2df9cb

Browse files
xlornexlorne
committed
update form
1 parent bbd21d8 commit d2df9cb

File tree

12 files changed

+472
-396
lines changed

12 files changed

+472
-396
lines changed

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const FlowContent= () => {
1414
const flowViewReactContext = useContext(FlowViewReactContext);
1515

1616
const flowRecordContext = flowViewReactContext?.flowRecordContext;
17-
const formAction = flowViewReactContext?.formAction;
17+
const formInstance = flowViewReactContext?.formInstance;
1818

1919
const FlowFormView = flowRecordContext?.getFlowFormView() as React.ComponentType<FlowFormViewProps>;
2020

@@ -27,7 +27,7 @@ const FlowContent= () => {
2727
useEffect(() => {
2828
if(!flowRecordContext?.isEditable()){
2929
setTimeout(()=>{
30-
formAction?.current?.disableAll();
30+
formInstance?.disableAll();
3131
},100);
3232
}
3333
}, []);
@@ -37,10 +37,10 @@ const FlowContent= () => {
3737
<div className={"flow-view-content"} style={style}>
3838
<Tabs>
3939
<Tabs.Tab title='流程详情' key='detail'>
40-
{formAction && (
40+
{formInstance && (
4141
<FlowFormView
4242
data={formParams}
43-
formAction={formAction}
43+
form={formInstance}
4444
dataVersion={dataVersion}
4545
/>
4646
)}

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@ import {FlowViewReactContext} from "@/components/flow/view";
66
const FlowFormOpinion = ()=>{
77

88
const flowViewReactContext = useContext(FlowViewReactContext);
9-
const opinionAction = flowViewReactContext?.opinionAction;
9+
const opinionInstance = flowViewReactContext?.opinionInstance;
1010
const flowRecordContext = flowViewReactContext?.flowRecordContext;
1111

1212
useEffect(() => {
13-
opinionAction?.current?.setFieldValue("advice", flowRecordContext?.getOpinionAdvice());
13+
opinionInstance?.setFieldValue("advice", flowRecordContext?.getOpinionAdvice());
1414
}, []);
1515

1616
return (
1717
<>
1818
<Form
19-
actionRef={opinionAction}
19+
form={opinionInstance}
2020
loadFields={async ()=>{
2121
return [
2222
{

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
import {useDispatch, useSelector} from "react-redux";
1111
import {FlowReduxState, updateState} from "@/components/flow/store/FlowSlice";
1212
import {FlowRecordContext} from "@/components/flow/domain/FlowRecordContext";
13-
import {FormAction} from "@/components/form";
13+
import Form from "@/components/form";
1414
import {FlowStateContext} from "@/components/flow/domain/FlowStateContext";
1515
import {FlowEventContext} from "@/components/flow/domain/FlowEventContext";
1616
import FlowResult from "@/components/flow/components/FlowResult";
@@ -34,16 +34,16 @@ const FlowPage: React.FC<FlowPageProps> = (props) => {
3434

3535
const currentState = useSelector((state: FlowReduxState) => state.flow);
3636
const flowRecordContext = new FlowRecordContext(props, props.flowData);
37-
const formAction = React.useRef<FormAction>(null);
38-
const opinionAction = React.useRef<FormAction>(null);
37+
const formInstance = Form.useForm();
38+
const opinionInstance = Form.useForm();
3939

4040
const flowStateContext = new FlowStateContext(currentState, (state: any) => {
4141
dispatch(updateState({
4242
...state
4343
}));
4444
});
4545
const flowTriggerContext = new FlowTriggerContext();
46-
const flowEvenContext = new FlowEventContext(flowRecordContext, flowTriggerContext, formAction, opinionAction, flowStateContext);
46+
const flowEvenContext = new FlowEventContext(flowRecordContext, flowTriggerContext, formInstance, opinionInstance, flowStateContext);
4747
const flowButtonClickContext = new FlowButtonClickContext(flowEvenContext, flowStateContext);
4848
const FlowFormView = flowRecordContext.getFlowFormView() as React.ComponentType<FlowFormViewProps>;
4949

@@ -70,8 +70,8 @@ const FlowPage: React.FC<FlowPageProps> = (props) => {
7070
flowTriggerContext: flowTriggerContext,
7171
flowButtonClickContext: flowButtonClickContext,
7272

73-
formAction: formAction,
74-
opinionAction: opinionAction
73+
formInstance: formInstance,
74+
opinionInstance: opinionInstance
7575
}}>
7676
<div className={"flow-view"}>
7777
{currentState.result && (

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

+11-10
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {FlowUser} from "@/components/flow/types";
77
import {FlowSubmitResultParser} from "@/components/flow/domain/FlowResultParser";
88
import {UserSelectMode} from "@/components/flow/store/FlowSlice";
99
import {FlowTriggerContext} from "@/components/flow/domain/FlowTriggerContext";
10+
import FormInstance from "@/components/form/domain/FormInstance";
1011

1112
/**
1213
* 流程的事件控制上下文对象
@@ -15,28 +16,28 @@ export class FlowEventContext {
1516

1617
private readonly flowRecordContext: FlowRecordContext;
1718
private readonly flowTriggerContext: FlowTriggerContext;
18-
private readonly flowAction: React.RefObject<FormAction>;
19-
private readonly opinionAction: React.RefObject<FormAction>;
19+
private readonly flowInstance: FormInstance;
20+
private readonly opinionInstance: FormInstance;
2021
private readonly flowStateContext: FlowStateContext;
2122

2223
constructor(flowViewContext: FlowRecordContext,
2324
flowTriggerContext:FlowTriggerContext,
24-
flowAction: React.RefObject<FormAction>,
25-
opinionAction: React.RefObject<FormAction>,
25+
flowInstance: FormInstance,
26+
opinionInstance: FormInstance,
2627
flowStateContext: FlowStateContext) {
2728
this.flowRecordContext = flowViewContext;
2829
this.flowTriggerContext = flowTriggerContext;
29-
this.flowAction = flowAction;
30-
this.opinionAction = opinionAction;
30+
this.flowInstance = flowInstance;
31+
this.opinionInstance = opinionInstance;
3132
this.flowStateContext = flowStateContext;
3233
}
3334

3435
private getRequestBody = () => {
35-
const formData = this.flowAction.current?.getFieldsValue();
36+
const formData = this.opinionInstance.getFieldsValue();
3637
const flowData = this.flowRecordContext.getFlowFormParams();
3738
const workCode = this.flowRecordContext.getWorkCode();
3839
const recordId = this.flowStateContext.getRecordId();
39-
const advice = this.opinionAction.current?.getFieldsValue();
40+
const advice = this.opinionInstance.getFieldsValue();
4041

4142
return {
4243
recordId,
@@ -51,8 +52,8 @@ export class FlowEventContext {
5152

5253

5354
private validateForm = async () => {
54-
const formState = await this.flowAction.current?.validate();
55-
const opinionState = await this.opinionAction.current?.validate();
55+
const formState = await this.flowInstance.validate();
56+
const opinionState = await this.opinionInstance.validate();
5657
return formState && opinionState;
5758
}
5859

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import {FormAction} from "@/components/form";
2+
import FormInstance from "@/components/form/domain/FormInstance";
33

44

55
// 流程图中线的类型
@@ -106,7 +106,7 @@ export interface FlowFormViewProps {
106106
// 表单数据
107107
data: FlowFormParams;
108108
// 表单控制对象
109-
formAction: React.RefObject<FormAction>;
109+
form: FormInstance;
110110
// 数据版本
111111
dataVersion?: number;
112112
}

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import {Skeleton} from "antd-mobile";
66
import {FlowRecordContext} from "@/components/flow/domain/FlowRecordContext";
77
import {FlowEventContext} from "@/components/flow/domain/FlowEventContext";
88
import {detail} from "@/api/flow";
9-
import {FormAction} from "@/components/form";
109
import {FlowStateContext} from "@/components/flow/domain/FlowStateContext";
1110
import FlowPage from "@/components/flow/components/FlowPage";
1211
import {FlowTriggerContext} from "@/components/flow/domain/FlowTriggerContext";
1312
import {FlowButtonClickContext} from "@/components/flow/domain/FlowButtonClickContext";
1413
import "./index.scss";
14+
import FormInstance from "@/components/form/domain/FormInstance";
1515

1616
// 流程视图上下文属性
1717
interface FlowViewReactContextProps {
@@ -26,9 +26,9 @@ interface FlowViewReactContextProps {
2626
// 流程按钮点击触发控制器上下文对象
2727
flowButtonClickContext: FlowButtonClickContext;
2828
// 表单操作对象
29-
formAction: React.RefObject<FormAction>;
29+
formInstance: FormInstance;
3030
// 审批意见操作对象
31-
opinionAction: React.RefObject<FormAction>;
31+
opinionInstance: FormInstance;
3232
}
3333

3434
export const FlowViewReactContext = createContext<FlowViewReactContextProps | null>(null);

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import {FormItemProps} from "@/components/form/types";
44

55
const formFieldInit = (props: FormItemProps,reloadOption?:()=>void) => {
66
const formContext = React.useContext(FormContext) || undefined;
7-
const formAction = formContext?.formAction;
8-
const validateContext = formContext?.validateContext;
7+
const formAction = formContext?.getFormAction();
8+
const validateContext = formContext?.getFormValidateContext();
99
const [random, setRandom] = React.useState(0);
1010

1111
const rules= props.required?[{required: true}]:[];
@@ -20,14 +20,14 @@ const formFieldInit = (props: FormItemProps,reloadOption?:()=>void) => {
2020
}
2121
}
2222
}
23-
const reloadContext = formContext?.reloadContext;
23+
const reloadContext = formContext?.getFormFieldReloadListenerContext();
2424
if (reloadContext) {
2525
reloadContext.addListener(props.name, () => {
2626
setRandom(Math.random);
2727
});
2828
}
2929

30-
const optionContext = formContext?.optionContext;
30+
const optionContext = formContext?.getFormFieldOptionListenerContext();
3131
if (optionContext) {
3232
optionContext.addListener(props.name, () => {
3333
if(reloadOption){

0 commit comments

Comments
 (0)