feat: 1

src/components/AnimateContent/index.tsx

@@ -25,7 +25,8 @@ const AnimateContent: FC<PropsWithChildren<AnimateContentProps>> = ({
         style={{ right: '24px', top: `${!disableBreadcrumb ? 72 + 50 : 72}px` }}
         contentWrapperStyle={{
           height: `calc(100vh - 96px ${!disableBreadcrumb ? '- 50px' : ''})`
-        }}>
+        }}
+        closeIcon={<Button onClick={() => onVisibleChange(false)}>返回</Button>}>
         {children}
       </Drawer>
     </div>

src/components/Flow/src/components/Drawer/index.tsx

@@ -5,30 +5,9 @@ import debounce from 'lodash/debounce'
 import type { RadioChangeEvent } from 'antd'
 import { queryAcountList } from '@/services/api/institution'
 import consts from '@/utils/consts'
+import { ApprovalMethod, ApprovalType } from '../../enum'
 const debounceTimeout = 800
 
-export enum ApprovalType {
-  /** @name 指定成员 */
-  TARGET = '1',
-  /** @name 上级 */
-  SUPERIOR = '2',
-  /** @name 角色 */
-  ROLE = '3',
-  /** @name 发起人自选 */
-  INITIATOR = '4',
-  /** @name 连续多级上级 */
-  MULTISTAGE = '5'
-}
-
-export enum ApprovalMethod {
-  /** @name 顺序 */
-  ORDER = '1',
-  /** @name 会签 */
-  ALL = '2',
-  /** @name 或签 */
-  ONESELF = '3'
-}
-
 const FlowDrawer = () => {
   const { flowState, dispatch } = useContext(FlowContext)
   const { drawerConfig } = flowState

src/components/Flow/src/components/Graph/index.tsx

@@ -1,10 +1,11 @@
-import { useContext } from 'react'
+import React, { useContext, useEffect } from 'react'
 import ReactFlow, { Background, MiniMap, Controls } from 'react-flow-renderer'
 import { Actions, FlowContext } from '../../context'
 
-import type { NodeTypesType, EdgeTypesType } from 'react-flow-renderer'
+import type { Elements, NodeTypesType, EdgeTypesType } from 'react-flow-renderer'
 import { CommonNode, InputNode, OutputNode } from '../Node'
 import { CommonEdge } from '../Edge'
+import type { ApprovalMethod, ApprovalType } from '../../enum'
 
 const nodeTypes: NodeTypesType = {
   start: InputNode,
@@ -16,8 +17,30 @@ const edgeTypes: EdgeTypesType = {
   common: CommonEdge
 }
 
-export default function FlowGroph() {
+type flowProcessDataItem = {
+  approvalType: ApprovalType
+  approvalMethod: ApprovalMethod
+  approvalAccounts: { ID: string; name: string }[]
+}
+
+type FlowGrophProps = {
+  flowProcess?: Elements
+  flowProcessData?: Record<string, flowProcessDataItem>
+}
+const FlowGroph: React.FC<FlowGrophProps> = ({ flowProcess, flowProcessData }) => {
   const { flowState, dispatch } = useContext(FlowContext)
+  useEffect(() => {
+    if (flowProcess?.length) {
+      dispatch({
+        type: Actions.SET_ELEMENTS,
+        payload: flowProcess
+      })
+      dispatch({
+        type: Actions.SET_FLOW_NODE,
+        payload: new Map(Object.entries(flowProcessData))
+      })
+    }
+  }, [flowProcess, flowProcessData])
   const { elements } = flowState
 
   const defaultOptions = {
@@ -30,7 +53,9 @@ export default function FlowGroph() {
         type: Actions.SET_FLOW_INSTANCE,
         payload: reactFlowInstance
       })
-      reactFlowInstance?.fitView()
+      // setTimeout(() => {
+      //   reactFlowInstance?.fitView()
+      // }, 80)
     }
   }
 
@@ -47,3 +72,5 @@ export default function FlowGroph() {
     </ReactFlow>
   )
 }
+
+export default FlowGroph

src/components/Flow/src/context/index.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useReducer } from 'react'
 import reducer from './reducer'
-import { Actions } from './reducer'
+import { Actions } from '../enum'
 
 import type { Elements, OnLoadParams } from 'react-flow-renderer'
 import { ArrowHeadType } from 'react-flow-renderer'
@@ -10,7 +10,7 @@ const FlowContext = createContext()
 type InitialState = {
   elements: Elements
   flowInstance?: OnLoadParams | null
-  flowData: Map<any, any>
+  flowData: Map<string, any>
   modalConfig: {
     visible: boolean
     nodeType: string

src/components/Flow/src/context/reducer.ts

@@ -2,17 +2,9 @@
 // import { removeElements } from 'react-flow-renderer'
 
 import type { Elements } from 'react-flow-renderer'
+import { Actions } from '../enum'
 import { generateElements, genreateElementEnum } from '../utils'
 
-export enum Actions {
-  SET_ELEMENTS = 'set_elements',
-  SET_FLOW_NODE = 'set_flow_node',
-  SET_FLOW_INSTANCE = 'set_flow_instance',
-  REMOVE_FLOW_NODE = 'remove_flow_node',
-  OPEN_MODAL = 'open_modal',
-  CLOSE_MODAL = 'close_modal'
-}
-
 export enum ProcessType {
   NODE = '1'
 }
@@ -21,9 +13,14 @@ const setElements = (state, elements: Elements) => ({
   elements: Array.isArray(elements) ? elements : []
 })
 
-const setFlowNode = (state, { id, node }) => {
-  if (!id) return state
+const setFlowNode = (state, payload) => {
   const res = { ...state }
+  if (payload instanceof Map) {
+    res.flowData = payload
+    return res
+  }
+  const { id, node } = payload
+  if (!id) return state
 
   res.flowData.set(id, node)
   return res

src/components/Flow/src/enum/index.ts

@@ -0,0 +1,30 @@
+export enum Actions {
+  SET_ELEMENTS = 'set_elements',
+  SET_FLOW_NODE = 'set_flow_node',
+  SET_FLOW_INSTANCE = 'set_flow_instance',
+  REMOVE_FLOW_NODE = 'remove_flow_node',
+  OPEN_MODAL = 'open_modal',
+  CLOSE_MODAL = 'close_modal'
+}
+
+export enum ApprovalType {
+  /** @name 指定成员 */
+  TARGET = '1',
+  /** @name 上级 */
+  SUPERIOR = '2',
+  /** @name 角色 */
+  ROLE = '3',
+  /** @name 发起人自选 */
+  INITIATOR = '4',
+  /** @name 连续多级上级 */
+  MULTISTAGE = '5'
+}
+
+export enum ApprovalMethod {
+  /** @name 顺序 */
+  ORDER = '1',
+  /** @name 会签 */
+  ALL = '2',
+  /** @name 或签 */
+  ONESELF = '3'
+}

src/components/Flow/src/index.tsx

@@ -8,26 +8,6 @@ import ToolBar from './components/Toolbar'
 import FlowGroph from './components/Graph'
 import FlowDrawer from './components/Drawer'
 
-// type ApprovalFlowProps<T = any> = {
-//   elements: Elements<T>
-// }
-
-// const initialElements = [
-//   {
-//     id: 'ewb-1',
-//     type: 'start',
-//     position: { x: 250, y: 0 }
-//   },
-//   { id: 'ewb-2', type: 'end', position: { x: 250, y: 300 } },
-
-//   {
-//     id: 'edge-1-2',
-//     source: 'ewb-1',
-//     target: 'ewb-2',
-//     type: 'add'
-//   }
-// ]
-
 const ApprovalFlow: FC<ApprovalFlowProps> = () => {
   return (
     <div className="flow-container h-full w-full">