update form

Author: xlorne

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/components/form-view-component.tsx

@@ -1,30 +1,30 @@
 import React from "react";
 import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
 import {ViewBindPlugin} from "@flow-engine/flow-types";
-import { Form } from "antd";
+import {Form as AntdForm} from "antd";
 import {FlowFormView} from "@flow-engine/flow-pc-form";
 
-interface FormViewComponentProps{
-    onValuesChange?:(values:any)=>void;
+interface FormViewComponentProps {
+    onValuesChange?: (values: any) => void;
 }
 
 export const FormViewComponent: React.FC<FormViewComponentProps> = (props) => {
     const {state, context} = useApprovalContext();
-    const ViewComponent = ViewBindPlugin.getInstance().get(state.flow?.view || 'default') || FlowFormView ;
+    const ViewComponent = ViewBindPlugin.getInstance().get(state.flow?.view || 'default') || FlowFormView;
 
     const flowForm = state.flow?.form;
 
     // 是否可合并审批
     const mergeable = state.flow?.mergeable || false;
     const todos = state.flow?.todos || [];
-    const viewForms = todos.length>0?todos.map(item => {
+    const viewForms= todos.length > 0 ? todos.map(item => {
         return {
-            instance: Form.useForm()[0],
-            data: item.data,
+            instance: AntdForm.useForm()[0],
+            data: item.data as any,
         }
-    }):[
+    }) : [
         {
-            instance: Form.useForm()[0],
+            instance: AntdForm.useForm()[0],
             data: undefined,
         }
     ]
@@ -34,11 +34,18 @@ export const FormViewComponent: React.FC<FormViewComponentProps> = (props) => {
             const formInstance = item.instance;
             const data = item.data;
             context.getPresenter().getFormActionContext().addAction({
-                save(): any {
+                save: () => {
                     return formInstance.getFieldsValue();
                 },
-                key(): string {
+                key: () => {
                     return 'view-form'
+                },
+                validate: () => {
+                    return new Promise((resolve,reject) => {
+                        formInstance.validateFields()
+                            .then(resolve)
+                            .catch(reject)
+                    })
                 }
             });
             formInstance.setFieldsValue(data);
@@ -59,7 +66,7 @@ export const FormViewComponent: React.FC<FormViewComponentProps> = (props) => {
                     <ViewComponent
                         key={index}
                         meta={flowForm}
-                        form={item.instance as any}
+                        form={item.instance}
                         onValuesChange={props.onValuesChange}
                     />
                 ))}

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/presenters/action.ts

@@ -1,5 +1,5 @@
 import {FlowApprovalApi, State} from "@/components/flow-approval/typings";
-import {FormActionContext} from "@/components/flow-approval/presenters/form";
+import {FormActionContext} from "@flow-engine/flow-types";
 
 export class FlowActionPresenter {
 
@@ -29,10 +29,27 @@ export class FlowActionPresenter {
     }
 
 
-    public async action(actionId:string) {
+    /**
+     * 是否通过操作
+     * @param actionId
+     * @private
+     */
+    private isPassAction(actionId:string){
+        const actions = this.state.flow?.actions || [];
+        for(const action of actions){
+            if(action.id === actionId){
+                if(action.type ==='PASS'){
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+
+    private async submitAction(actionId:string,formData:any){
         const recordId = this.state.flow?.recordId;
         const workId = this.state.flow?.workId;
-        const formData = this.formActionContext.save();
         if(recordId){
             const request = {
                 formData,
@@ -60,4 +77,15 @@ export class FlowActionPresenter {
         }
     }
 
+
+    public async action(actionId:string) {
+        let formData;
+        if(this.isPassAction(actionId)){
+            formData = await this.formActionContext.validate();
+        }else {
+            formData = this.formActionContext.save();
+        }
+        return await this.submitAction(actionId, formData);
+    }
+
 }

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/presenters/form.ts

@@ -1,6 +1,6 @@
 import {FlowApprovalApi, State} from "@/components/flow-approval/typings";
 import {Dispatch} from "@flow-engine/flow-core";
-import {FormActionContext} from "@/components/flow-approval/presenters/form";
+import {FormActionContext} from "@flow-engine/flow-types";
 import {FlowActionPresenter} from "@/components/flow-approval/presenters/action";
 
 export class Presenter {

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/presenters/index.ts

@@ -1,6 +1,6 @@
 import {DesignPanelApi, FlowNode, initStateData, State, TabPanelType} from "../types";
 import {Dispatch} from "@flow-engine/flow-core";
-import {FormActionContext} from "@/components/design-panel/presenters/form";
+import {FormActionContext} from "@flow-engine/flow-types";
 import {WorkflowFormManager} from "@/components/design-panel/manager/form";
 import {NodeConvertorManager} from "@/components/design-panel/manager/node";
 import {WorkflowConvertor} from "@/components/design-panel/presenters/convertor";

frontend/packages/flow-pc/flow-pc-design/src/components/design-panel/presenters/form.ts

@@ -67,20 +67,34 @@ export const TabBase = () => {
     // 注册form行为
     React.useEffect(() => {
         formActionContext.addAction({
-            save() {
+            save:()=> {
                 return baseForm.getFieldsValue();
             },
-            key(): string {
+            key:()=> {
                 return 'base';
+            },
+            validate:()=>{
+                return new Promise((resolve, reject) => {
+                    baseForm.validateFields().then(values => {
+                        resolve(values);
+                    }).catch(reject);
+                })
             }
         });
 
         formActionContext.addAction({
-            save() {
+            save:()=> {
                 return operatorForm.getFieldsValue();
             },
-            key(): string {
+            key:()=> {
                 return 'operator';
+            },
+            validate:()=>{
+                return new Promise((resolve, reject) => {
+                    operatorForm.validateFields().then(values=>{
+                        resolve(values);
+                    }).catch(reject)
+                })
             }
         });
 

frontend/packages/flow-pc/flow-pc-design/src/components/design-panel/presenters/index.ts

@@ -15,14 +15,23 @@ export const TabFlow = () => {
     // 注册form行为
     React.useEffect(() => {
         formActionContext.addAction({
-            save() {
+            save:()=> {
                 const data = actionRef.current?.getData();
                 return {
                     nodes: nodeManager.toData(data?.nodes || []),
                 }
             },
-            key(): string {
+            key:()=> {
                 return 'flow';
+            },
+            validate:()=>{
+                return new Promise((resolve, reject) => {
+                    const data = actionRef.current?.getData();
+                    const values = {
+                        nodes: nodeManager.toData(data?.nodes || []),
+                    }
+                    resolve(values);
+                })
             }
         });
 

frontend/packages/flow-pc/flow-pc-design/src/components/design-panel/tabs/base.tsx

@@ -1,8 +1,7 @@
 import React from "react";
-import {Panel} from "@flow-engine/flow-pc-ui";
+import {CardForm, Panel} from "@flow-engine/flow-pc-ui";
 import {InterferePanel} from "@/components/design-panel/panels/workflow/interfere";
 import {UrgePanel} from "@/components/design-panel/panels/workflow/urge";
-import {CardForm} from "@flow-engine/flow-pc-ui";
 import {useDesignContext} from "@/components/design-panel/hooks/use-design-context";
 import {WorkflowStrategyManager} from "@/components/design-panel/manager/strategy";
 
@@ -16,7 +15,7 @@ export const TabSetting = () => {
 
     const workflowStrategyManager = new WorkflowStrategyManager();
 
-    const resetFieldsValue = ()=>{
+    const resetFieldsValue = () => {
         const formData = workflowStrategyManager.toRender(state.workflow.strategies as any[]);
         form.setFieldsValue(formData);
     }
@@ -31,11 +30,19 @@ export const TabSetting = () => {
         resetFieldsValue();
 
         formActionContext.addAction({
-            save() {
+            save: () => {
                 return workflowStrategyManager.toData(form.getFieldsValue());
             },
-            key(): string {
+            key: () => {
                 return 'setting';
+            },
+            validate: () => {
+                return new Promise((resolve, reject) => {
+                    form.validateFields()
+                        .then(values => {
+                            resolve(workflowStrategyManager.toData(values));
+                        }).catch(reject)
+                })
             }
         });
 

frontend/packages/flow-pc/flow-pc-design/src/components/design-panel/tabs/flow.tsx

@@ -6,6 +6,58 @@ export interface FormInstance{
     getFieldError: (name: NamePath) => string[];
     resetFields: (fields?: NamePath[]) => void;
     setFieldsValue: (values: any) => void;
-    setFiledValue: (name: NamePath, value: any) => void;
+    setFieldValue: (name: NamePath, value: any) => void;
     submit: () => void;
 }
+
+
+export interface IFormAction {
+    save(): any;
+
+    key(): string;
+
+    validate():Promise<any>;
+}
+
+
+export class FormActionContext {
+
+    private readonly formActions: IFormAction[];
+
+    constructor() {
+        this.formActions = [];
+    }
+
+    public addAction(submit: IFormAction) {
+        const keys = this.formActions.map(item => item.key());
+        if (keys.includes(submit.key())) {
+            return;
+        }
+        this.formActions.push(submit);
+    }
+
+    public removeAction(key: string) {
+        const index = this.formActions.findIndex(item => item.key() === key);
+        if (index !== -1) {
+            this.formActions.splice(index, 1);
+        }
+    }
+
+    public save() {
+        let value = {};
+        for (const form of this.formActions) {
+            const data = form.save();
+            value = Object.assign(value, data);
+        }
+        return value;
+    }
+
+    public async validate() {
+        let value = {};
+        for (const form of this.formActions) {
+            const data = await form.validate();
+            value = Object.assign(value, data);
+        }
+        return value;
+    }
+}