backup

Author: codebdy

src/example/materialUis.tsx

@@ -25,7 +25,7 @@ export const materialUis: IMaterialUIs = {
     settingsPanel: AuditPanel,
     validate: (node: IWorkFlowNode<IApproverSettings>, { t }) => {
       if (!node.config) {
-        return (t("noSelectedDealer"))
+        return t("noSelectedDealer")
       }
       return true
     }

src/workflow-editor/actions.ts

@@ -1,5 +1,5 @@
 import { IConditionNode, IWorkFlowNode } from "./interfaces";
-import { ISnapshot } from "./interfaces/state";
+import { IErrors, ISnapshot } from "./interfaces/state";
 
 export enum ActionType {
   SET_CHANGE_FLAG = "workflow/SET_CHANGE_FLAG",
@@ -13,6 +13,7 @@ export enum ActionType {
   CHANGE_NODE = 'workflow/CHANGE_NODE',
   SELECT_NODE = 'workflow/SELECTED_NODE',
   SET_VALIDATED = 'workflow/SET_VALIDATED',
+  SET_ERRORS = 'workflow/SET_ERRORS',
 }
 
 export interface Action {
@@ -96,4 +97,12 @@ export interface SetValidatedPayload {
 
 export interface SetValidatedAction extends Action {
   payload: SetValidatedPayload
+}
+
+export interface SetErrorsPayload {
+  errors: IErrors,
+}
+
+export interface SetErrorsAction extends Action {
+  payload: SetErrorsPayload
 }

src/workflow-editor/classes/EditorStore.ts

@@ -4,25 +4,49 @@ import { configureStore } from "@reduxjs/toolkit"
 import { mainReducer } from "../reducers"
 import { RedoListChangeListener, SelectedListener, StartNodeListener, UndoListChangeListener } from "../interfaces/listeners"
 import { IConditionNode, IRouteNode, IWorkFlowNode, NodeType } from "../interfaces"
-import { Action, ActionType, AddNodeAction, ChangeNodeAction, DeleteNodeAction, SelectNodeAction, SetStartNodeAction, UnRedoListAction } from "../actions"
-import { IMaterialUIs, INodeMaterial } from "../interfaces/material"
+import { Action, ActionType, AddNodeAction, ChangeNodeAction, DeleteNodeAction, SelectNodeAction, SetErrorsAction, SetStartNodeAction, SetValidatedAction, UnRedoListAction } from "../actions"
+import { IMaterialUIs, INodeMaterial, Translate } from "../interfaces/material"
 import { createUuid } from "../utils/create-uuid"
 
-export type Translate = (msg: string) => string | undefined
-
 export class EditorStore {
   store: Store<IState>
-  t?: Translate
+  t: Translate = (msg: string) => msg
   materials: INodeMaterial[] = []
   materialUis: IMaterialUIs = {}
   constructor(debugMode?: boolean,) {
     this.store = makeStoreInstance(debugMode || false)
   }
 
   validate = (): IErrors | true => {
+    const setValidatedAction: SetValidatedAction = {
+      type: ActionType.SET_VALIDATED,
+      payload: {
+        validated: true
+      }
+    }
+    this.dispatch(setValidatedAction)
+
+    const errors: IErrors = {}
+    this.setErrors({})
+    this.doValidateNode(this.store.getState().startNode, errors)
+    if (Object.keys(errors).length > 0) {
+      this.setErrors(errors)
+      return errors
+    }
     return true;
   }
 
+
+  setErrors(errors: IErrors) {
+    const setErrorsAction: SetErrorsAction = {
+      type: ActionType.SET_ERRORS,
+      payload: {
+        errors
+      }
+    }
+    this.store.dispatch(setErrorsAction)
+  }
+
   dispatch = (action: Action) => {
     this.store.dispatch(action)
   }
@@ -124,6 +148,7 @@ export class EditorStore {
     }
 
     this.dispatch(setStartNodeAction)
+    this.revalidate()
   }
 
   changeNode(node: IWorkFlowNode) {
@@ -136,6 +161,7 @@ export class EditorStore {
     }
 
     this.dispatch(changeNodeAction)
+    this.revalidate()
   }
 
   addCondition(node: IRouteNode, condition: IConditionNode) {
@@ -198,6 +224,7 @@ export class EditorStore {
     this.backup()
     const addAction: AddNodeAction = { type: ActionType.ADD_NODE, payload: { parentId, node } }
     this.store.dispatch(addAction)
+    this.revalidate()
   }
 
   selectNode(id: string | undefined) {
@@ -210,6 +237,7 @@ export class EditorStore {
       this.backup()
       const removeAction: DeleteNodeAction = { type: ActionType.DELETE_NODE, payload: { id } }
       this.store.dispatch(removeAction)
+      this.revalidate()
     }
   }
 
@@ -272,6 +300,32 @@ export class EditorStore {
 
     return this.store.subscribe(handleChange)
   }
+
+
+  //审批流节点不多，节点变化全部重新校验一遍，无需担心性能问题，以后有需求再优化
+  private revalidate = () => {
+    if (this.store.getState().validated) {
+      this.validate()
+    }
+  }
+
+  private doValidateNode = (node: IWorkFlowNode, errors: IErrors) => {
+    const materialUi = this.materialUis[node.nodeType]
+    if (materialUi?.validate) {
+      const result = materialUi.validate(node, { t: this.t })
+      if (result !== true && result !== undefined) {
+        errors[node.id] = result
+      }
+    }
+    if (node.childNode) {
+      this.doValidateNode(node.childNode, errors)
+    }
+    if (node.nodeType === NodeType.route) {
+      for (const condition of (node as IRouteNode).conditionNodeList) {
+        this.doValidateNode(condition, errors)
+      }
+    }
+  }
 }
 
 function resetId(node: IWorkFlowNode) {

src/workflow-editor/interfaces/material.ts

@@ -1,29 +1,31 @@
-import { IWorkFlowNode } from "./workflow"
+import { IWorkFlowNode, IWorkflowNodeContent } from "./workflow"
+
+export type Translate = (msg: string) => string | undefined
 
 export interface IContext {
   //翻译
-  t: (msg: string) => string | undefined
+  t: Translate
 }
 
 export interface INodeMaterial<Context extends IContext = IContext> {
   color: string
   label: string
   icon?: React.ReactElement
   //默认配置
-  defaultConfig?: IWorkFlowNode
+  defaultConfig?: IWorkflowNodeContent
   //创建一个默认节点，跟defaultCofig只选一个
   createDefault?: (context: Context) => IWorkFlowNode
   //从物料面板隐藏，比如发起人节点
   hidden?: boolean
 }
 
 
-export interface IMaterialUI<FlowNode extends IWorkFlowNode, Settings = any, Context = any> {
+export interface IMaterialUI<FlowNode extends IWorkFlowNode, Settings = any, Context extends IContext = IContext> {
   viewContent?: (node: FlowNode, context: Context) => React.ReactNode
   //属性面板设置组件
   settingsPanel?: React.FC<{ value: Settings, onChange: (value: Settings) => void }>
   //校验失败返回错误消息，成功返回ture
-  validate?: (node: FlowNode, context: Context) => string | true
+  validate?: (node: FlowNode, context: Context) => string | true | undefined
 }
 
 export interface IMaterialUIs {

src/workflow-editor/interfaces/workflow.ts

@@ -13,9 +13,12 @@ export enum NodeType {
   condition = "condition",
 }
 
-export interface IWorkFlowNode<Config = unknown> {
-  id?: string
+export interface IWorkflowNodeContent{
   nodeType: NodeType | string //string可以用于自定义节点，暂时用不上
+}
+
+export interface IWorkFlowNode<Config = unknown> extends IWorkflowNodeContent{
+  id: string
   name?: string
   desc?: string
   childNode?: IWorkFlowNode

src/workflow-editor/reducers/errorsReducer.ts

@@ -1,6 +1,11 @@
-import { Action } from "../actions";
+import { Action, ActionType, SetErrorsAction } from "../actions";
 import { IErrors } from "../interfaces/state";
 
 export function errorsReducer(state: IErrors, action: Action): IErrors {
+  switch (action.type) {
+    case ActionType.SET_ERRORS: {
+      return (action as SetErrorsAction).payload?.errors
+    }
+  }
   return state
 }