feat: 解决数据双向同步的问题

trionesdev · Dec 21, 2023 · 27e743c · 27e743c
1 parent e6bac93
commit 27e743c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 23 deletions.
diff --git a/examples/approval-process-designer-react/src/App.tsx b/examples/approval-process-designer-react/src/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './App.css';
 import {
     ApprovalProcessDesigner, GlobalStore,
@@ -10,10 +10,7 @@ import {Watermark} from "antd";
 import * as Icons from "./activities/Icons"
 
 function App() {
-    const handleOnChange = (value: any) => {
-        console.log("[processNode]", value)
-    }
-    const processNode: IProcessNode = {
+    const [data,setData] = useState<IProcessNode>({
         type: 'START',
         componentName: 'StartActivity',
         title: '发起人',
@@ -51,13 +48,17 @@ function App() {
                 ]
             }
         }
+    })
+    const handleOnChange = (value: any) => {
+        console.log("[processNode]", value)
+        setData(value)
     }
 
     GlobalStore.registerIcons(Icons);
     return (
         <div>
             <Watermark style={{height: '100%'}} content={['书阙', '北斗开源']}>
-                <ApprovalProcessDesigner value={processNode} onChange={handleOnChange}>
+                <ApprovalProcessDesigner value={data} onChange={handleOnChange}>
                     <StudioPanel>
                         <ProcessWidget activities={{
                             StartActivity,

diff --git a/packages/approval-process-designer-react/src/container/ApprovalProcessDesigner.tsx b/packages/approval-process-designer-react/src/container/ApprovalProcessDesigner.tsx
@@ -1,7 +1,8 @@
-import React, {FC, useEffect} from "react"
+import React, {FC, useEffect, useMemo, useState} from "react"
 import {ApprovalProcessContext} from "../context";
 import {ApprovalProcessEngine} from "../model/ApprovalProcessEngine";
-import {IProcessNode, ProcessNode} from "../model";
+import {IProcessNode} from "../model";
+import _ from "lodash";
 
 type ApprovalProcessDesignerProps = {
     children?: React.ReactNode;
@@ -16,20 +17,30 @@ export const ApprovalProcessDesigner: FC<ApprovalProcessDesignerProps> = ({
                                                                               value,
                                                                               onChange
                                                                           }) => {
-    let scopeEngine = engine;
-    if (!scopeEngine) {
-        scopeEngine = new ApprovalProcessEngine();
-    }
+    const [scopeValue, setScopeValue] = useState(value)
+
+
+    let designerEngine = useMemo(() => {
+        let scopeEngine = engine;
+        if (!engine) {
+            scopeEngine = new ApprovalProcessEngine({value: value});
+        }
+        return scopeEngine
+    }, [engine])
+
+    designerEngine?.setOnchange((value: any) => {
+        setScopeValue(value)
+        onChange?.(value)
+    })
 
-    scopeEngine?.setOnchange(onChange)
 
     useEffect(() => {
-        if (value) {
-            scopeEngine.process.from(value)
+        if (value && !_.isEqual(value, scopeValue)) {
+            designerEngine.process.from(value)
         }
     }, [value])
 
-    return <ApprovalProcessContext.Provider value={scopeEngine}>
+    return <ApprovalProcessContext.Provider value={designerEngine}>
         {children}
     </ApprovalProcessContext.Provider>
 }
diff --git a/packages/approval-process-designer-react/src/model/ApprovalProcessEngine.ts b/packages/approval-process-designer-react/src/model/ApprovalProcessEngine.ts
@@ -1,11 +1,11 @@
-import {ProcessNode} from "./ProcessNode";
+import {IProcessNode, ProcessNode} from "./ProcessNode";
 import {define, observable} from "@formily/reactive";
 import {GlobalStore} from "../store";
 import {DesignerCore} from "../util";
 import _ from "lodash";
 
 interface IApprovalProcessEngine {
-
+    value?: IProcessNode
 }
 
 export class ApprovalProcessEngine {
@@ -18,7 +18,10 @@ export class ApprovalProcessEngine {
             type: 'START',
             componentName: 'StartActivity',
             title: '开始'
-        });
+        })
+        if (engine?.value) {
+            this.process.from(engine.value)
+        }
         this.makeObservable()
     }
 
@@ -29,9 +32,9 @@ export class ApprovalProcessEngine {
         })
     }
 
-    handleChange = _.debounce((msg: any)=>{
+    handleChange = _.debounce((msg: any) => {
         this.onChange?.(DesignerCore.transformToSchema(this.process))
-    },100)
+    }, 100)
 
     setOnchange(fn: (value: any) => void) {
         this.onChange = fn

diff --git a/packages/approval-process-designer-react/src/widget/ActivityWidget.tsx b/packages/approval-process-designer-react/src/widget/ActivityWidget.tsx
@@ -15,7 +15,7 @@ export const ActivityWidget: FC<ActivityWidgetProps> = observer(({
                                                                      processNode,
                                                                      ...props
                                                                  }) => {
-    console.log("ss", processNode.id)
+    console.log("ss", processNode.id,processNode)
     const activities = useActivities()
     const handleRender = () => {
         const Activity: ActivityFC<any> = _.get(activities, [processNode.componentName]);

diff --git a/packages/approval-process-designer-react/src/widget/AddActivityItemWidget.tsx b/packages/approval-process-designer-react/src/widget/AddActivityItemWidget.tsx
@@ -41,7 +41,6 @@ export const AddActivityItemWidget: FC<ActivityCardWidgetProps> = ({
     const handleClick = () => {
         onClick?.(processNode)
         const activity = GlobalStore.getActivityResource(resource?.componentName)
-        debugger
         processNode.setNextNode(activity?.node.clone(processNode))
     }
     return <ActivityCardWidgetStyled onClick={handleClick}>