add FlowNodeHistory

Author: xlorne

frontend/apps/app-pc/src/pages/todo.tsx

@@ -180,6 +180,7 @@ const TodoPage: React.FC = () => {
                             key={"create"}
                             type={'primary'}
                             onClick={() => {
+                                setCurrentRecordId('');
                                 setSelectVisible(true);
                             }}>发起流程</Button>
                     )

frontend/packages/flow-design/src/components/flow-approval/components/flow-node-history.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
+import {ProcessNode} from "@/components/flow-approval/typings";
+
+export interface FlowNodeHistoryAction{
+    refresh:()=>void;
+}
+
+interface FlowNodeHistoryProps{
+    actionRef?:React.Ref<FlowNodeHistoryAction>;
+}
+
+export const FlowNodeHistory: React.FC<FlowNodeHistoryProps> = (props) => {
+
+    const {context} = useApprovalContext();
+
+    const [processNodes, setProcessNodes] = React.useState<ProcessNode[]>([]);
+
+    const triggerProcessNodes = () => {
+        context.getPresenter().processNodes().then(nodes => {
+            setProcessNodes(nodes);
+        });
+    }
+
+    React.useEffect(()=>{
+        triggerProcessNodes();
+    },[]);
+
+    React.useImperativeHandle(props.actionRef,()=>{
+        return {
+            refresh:()=>{
+                triggerProcessNodes();
+            }
+        }
+    },[]);
+
+    return (
+        <div>
+            流转历史 {processNodes.length}
+        </div>
+    )
+}

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

@@ -0,0 +1,64 @@
+import React from "react";
+import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
+import {ViewPlugin} from "@/plugins/view";
+import { Form } from "antd";
+
+interface FormViewComponentProps{
+    onValuesChange?:(values:any)=>void;
+}
+
+export const FormViewComponent: React.FC<FormViewComponentProps> = (props) => {
+    const {state, context} = useApprovalContext();
+    const ViewComponent = ViewPlugin.getInstance().get(state.flow?.view || 'default');
+    // 是否可合并审批
+    const mergeable = state.flow?.mergeable || false;
+    const todos = state.flow?.todos || [];
+    const viewForms = todos.length>0?todos.map(item => {
+        return {
+            instance: Form.useForm()[0],
+            data: item.data,
+        }
+    }):[
+        {
+            instance: Form.useForm()[0],
+            data: undefined,
+        }
+    ]
+
+    React.useEffect(() => {
+        viewForms.forEach(item => {
+            const formInstance = item.instance;
+            const data = item.data;
+            context.getPresenter().getFormActionContext().addAction({
+                save(): any {
+                    return formInstance.getFieldsValue();
+                },
+                key(): string {
+                    return 'view-form'
+                }
+            });
+            formInstance.setFieldsValue(data);
+        });
+    }, []);
+
+    if (ViewComponent) {
+        if (mergeable) {
+            return (
+                <div>
+                    <h3>合并审批</h3>
+                </div>
+            )
+        }
+        return (
+            <>
+                {viewForms.map((item, index) => (
+                    <ViewComponent
+                        key={index}
+                        form={item.instance}
+                        onValuesChange={props.onValuesChange}
+                    />
+                ))}
+            </>
+        )
+    }
+}

frontend/packages/flow-design/src/components/flow-approval/layout/body.tsx

@@ -1,76 +1,13 @@
 import React from "react";
-import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
-import {Col, Form, Row} from "antd";
-import {ViewPlugin} from "@/plugins/view";
-
-interface FormViewComponentProps{
-    onValuesChange?:(values:any)=>void;
-}
-
-const FormViewComponent: React.FC<FormViewComponentProps> = (props) => {
-    const {state, context} = useApprovalContext();
-    const ViewComponent = ViewPlugin.getInstance().get(state.flow?.view || 'default');
-    // 是否可合并审批
-    const mergeable = state.flow?.mergeable || false;
-    const todos = state.flow?.todos || [];
-    const viewForms = todos.length>0?todos.map(item => {
-        return {
-            instance: Form.useForm()[0],
-            data: item.data,
-        }
-    }):[
-        {
-            instance: Form.useForm()[0],
-            data: undefined,
-        }
-    ]
-
-    React.useEffect(() => {
-        viewForms.forEach(item => {
-            const formInstance = item.instance;
-            const data = item.data;
-            context.getPresenter().getFormActionContext().addAction({
-                save(): any {
-                    return formInstance.getFieldsValue();
-                },
-                key(): string {
-                    return 'view-form'
-                }
-            });
-            formInstance.setFieldsValue(data);
-        });
-    }, []);
-
-    if (ViewComponent) {
-        if (mergeable) {
-            return (
-                <div>
-                    <h3>合并审批</h3>
-                </div>
-            )
-        }
-        return (
-            <>
-                {viewForms.map((item, index) => (
-                    <ViewComponent
-                        key={index}
-                        form={item.instance}
-                        onValuesChange={props.onValuesChange}
-                    />
-                ))}
-            </>
-        )
-    }
-}
+import {Col, Row} from "antd";
+import {FormViewComponent} from "@/components/flow-approval/components/form-view-component";
+import {FlowNodeHistory, FlowNodeHistoryAction} from "@/components/flow-approval/components/flow-node-history";
 
 export const Body = () => {
-
-    const {state, context} = useApprovalContext();
+    const flowNodeHistoryAction = React.useRef<FlowNodeHistoryAction>(null);
 
     const handleValuesChange = (values:any) => {
-        context.getPresenter().processNodes().then(nodes => {
-            console.log('流程节点:', nodes);
-        });
+        flowNodeHistoryAction.current?.refresh();
     }
 
     return (
@@ -82,7 +19,7 @@ export const Body = () => {
                 />
             </Col>
             <Col span={6}>
-                流转历史
+                <FlowNodeHistory actionRef={flowNodeHistoryAction}/>
             </Col>
         </Row>
     )