#13

Author: xlorne

flow-engine-framework/src/main/java/com/codingapi/flow/pojo/response/FlowContent.java

@@ -144,8 +144,7 @@ public void pushHistory(Workflow workflow,List<FlowRecord> historyRecords) {
             history.setNodeId(item.getNodeId());
             history.setNodeType(item.getNodeType());
             history.setUpdateTime(item.getUpdateTime());
-            history.setCurrentOperatorId(item.getCurrentOperatorId());
-            history.setCurrentOperatorName(item.getCurrentOperatorName());
+            history.setCurrentOperator(new FlowOperator(item.getCurrentOperatorId(), item.getCurrentOperatorName()));
             this.histories.add(history);
         }
     }
@@ -221,14 +220,9 @@ public static class History{
         private long updateTime;
 
         /**
-         * 当前审批人Id
+         * 当前审批人
          */
-        private long currentOperatorId;
-
-        /**
-         * 当前审批人名称
-         */
-        private String currentOperatorName;
+        private FlowOperator currentOperator;
     }
 
     @Data

frontend/packages/flow-design/src/components/approval/context/index.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import {ApprovalLayoutProps, State} from "../typings";
+import {Presenter} from "../presenters";
+
+
+export class ApprovalContextScope {
+    private readonly presenter: Presenter;
+    private readonly props: ApprovalLayoutProps;
+
+    constructor(presenter: Presenter, props: ApprovalLayoutProps) {
+        this.presenter = presenter;
+        this.props = props;
+    }
+
+    public syncState(state: State) {
+        this.presenter.syncState(state);
+    }
+
+    public getPresenter() {
+        return this.presenter;
+    }
+
+    public close() {
+        this.props.onClose?.();
+    }
+
+    public initialState() {
+        this.syncState({
+            flow: this.props.content
+        })
+    }
+}
+
+
+export const ApprovalContext = React.createContext<ApprovalContextScope | undefined>(undefined);
+

frontend/packages/flow-design/src/components/approval/hooks/use-approval-context.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import {useDispatch, useSelector} from "react-redux";
+import {ApprovalContext, ApprovalContextScope} from "../context";
+import {ApprovalReduxState, updateState} from "../store";
+import {Presenter} from "../presenters";
+import {FlowApprovalApiImpl} from "../model";
+import {ApprovalLayoutProps} from "@/components/approval/typings";
+
+export const useApprovalContext = () => {
+    const context = React.useContext(ApprovalContext);
+    const state = useSelector((state: ApprovalReduxState) => state.approval);
+    if (!context) {
+        throw new Error("ApprovalContext must be used within useContext");
+    }
+    return {
+        state,
+        context,
+    };
+}
+
+export const createApprovalContext = (props: ApprovalLayoutProps) => {
+    const ref = React.useRef<ApprovalContextScope | undefined>(undefined);
+
+    const dispatch = useDispatch();
+
+    const state = useSelector((state: ApprovalReduxState) => state.approval);
+
+    if (!ref.current) {
+        const presenter = new Presenter(
+            state,
+            (prevState) => {
+                dispatch(updateState(prevState));
+                return prevState;
+            },
+            new FlowApprovalApiImpl()
+        );
+        ref.current = new ApprovalContextScope(presenter, props);
+        ref.current.initialState();
+    }
+
+    React.useEffect(() => {
+        ref.current?.syncState(state);
+    }, [state]);
+
+    return {
+        state,
+        context: ref.current,
+    }
+}

frontend/packages/flow-design/src/components/approval/index.tsx

@@ -1,26 +1,33 @@
 import React from "react";
 import {Drawer} from "@/components/drawer";
 import {detail} from "@/api/record";
+import {FlowContent} from "@/components/approval/typings";
+import {ApprovalLayout} from "@/components/approval/layout";
 
 
 interface ApprovalPanelProps {
     workflowCode?: string;
-    recordId?:string
+    recordId?:string;
+    onClose?: () => void;
 }
 
 export const ApprovalPanel: React.FC<ApprovalPanelProps> = (props) => {
 
+    const [state,dispatch] = React.useState<FlowContent|undefined>(undefined);
+
     React.useEffect(()=>{
         const id = props.workflowCode || props.recordId || '';
         detail(id).then(res=>{
             if(res.success){
-                console.log(res.data)
+                dispatch(res.data);
             }
         });
     },[]);
 
     return (
-        <>approval</>
+        <>
+            {state && <ApprovalLayout content={state} onClose={props.onClose}/>}
+        </>
     )
 }
 
@@ -35,8 +42,6 @@ export const ApprovalPanelDrawer: React.FC<ApprovalPanelDrawerProps> = (props) =
         <Drawer
             open={props.open}
             onClose={props.onClose}
-            title={"发起流程"}
-            closeIcon={true}
         >
             <ApprovalPanel
                 {...props}

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const Body = () => {
+    return (
+        <div>
+            body
+        </div>
+    )
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import {useApprovalContext} from "@/components/approval/hooks/use-approval-context";
+
+export const Header = () => {
+    const {state,context} = useApprovalContext();
+
+    return (
+        <div>
+            Header
+            <button onClick={()=>{
+                context.close();
+            }}>close</button>
+        </div>
+    )
+}

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

@@ -0,0 +1,29 @@
+import React from "react";
+import {ApprovalLayoutProps} from "@/components/approval/typings";
+import {Provider} from "react-redux";
+import {approvalStore} from "@/components/approval/store";
+import {ApprovalContext} from "@/components/approval/context";
+import {createApprovalContext} from "@/components/approval/hooks/use-approval-context";
+import {Header} from "@/components/approval/layout/header";
+import {Body} from "@/components/approval/layout/body";
+
+
+const ApprovalLayoutScope: React.FC<ApprovalLayoutProps> = (props) => {
+    const {context} = createApprovalContext(props);
+    return (
+        <ApprovalContext.Provider value={context}>
+            <Header/>
+            <Body/>
+        </ApprovalContext.Provider>
+    )
+}
+
+export const ApprovalLayout: React.FC<ApprovalLayoutProps> = (props) => {
+
+    return (
+        <Provider store={approvalStore}>
+            <ApprovalLayoutScope {...props}/>
+        </Provider>
+    )
+};
+

frontend/packages/flow-design/src/components/approval/model.ts

@@ -0,0 +1,5 @@
+import {FlowApprovalApi} from "@/components/approval/typings";
+
+export class FlowApprovalApiImpl implements FlowApprovalApi {
+
+}

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

@@ -0,0 +1,6 @@
+import {FlowApprovalApi, State} from "@/components/approval/typings";
+import {BasePresenter} from "@flow-engine/flow-core";
+
+export class Presenter extends BasePresenter<State,FlowApprovalApi>{
+
+}

frontend/packages/flow-design/src/components/approval/store.tsx

@@ -0,0 +1,36 @@
+import {configureStore, createSlice, PayloadAction} from '@reduxjs/toolkit';
+import {initStateData, State} from "./typings";
+import { original } from 'immer';
+
+export type ApprovalStoreAction = {
+    updateState: (state: State, action: PayloadAction<Partial<State> | ((prev: State) => Partial<State>)>) => void;
+}
+
+export const approvalSlice = createSlice<State, ApprovalStoreAction, "approval", {}>({
+    name: 'approval',
+    initialState: {
+        ...initStateData
+    },
+    reducers: {
+        updateState: (state, action) => {
+            if(typeof action.payload === 'function') {
+                const currentState = original(state) as State;
+                Object.assign(state, action.payload(currentState));
+            }else {
+                Object.assign(state, action.payload);
+            }
+        },
+    },
+});
+
+
+export const {
+    updateState,
+} = approvalSlice.actions;
+export const approvalStore = configureStore({
+    reducer: {
+        approval: approvalSlice.reducer
+    },
+});
+
+export type ApprovalReduxState = ReturnType<typeof approvalStore.getState>;