fix: 修改节点配置为常驻，并实时保存

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/FlowChart.jsx

 /* eslint-disable global-require */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Button, Modal, notification, Spin, Tooltip } from 'antd';
 import lodash from 'lodash';
 import { SaveNodeChange, GetFlowNode } from '@/services/workflow/workflow';
@@ -45,6 +45,7 @@ const FlowChart = props => {
   }); // 组件内得流程图数据
   const [showLeaveTip, setShowLeaveTip] = useState(false); // 离开路由是否又提醒
   const [buttonLoading, setButtonLoading] = useState(); // 发布按钮保存loading
+  const currentNode = useRef();
   const objGo = go.GraphObject.make;
   useEffect(() => {
     if (treeVisible) {
@@ -129,8 +130,15 @@ const FlowChart = props => {
         console.log(nodeData);
         diagram.model.updateTargetBindings(nodeData);
         diagram.model.setDataProperty(nodeData, 'key', newKey);
+
+        currentNode.current = nodeData;
+        setNodeKey(nodeData.key);
+        setEditMsg(nodeData);
+        setModalType('edit');
+        setVisible(true);
       });
       setAddNodes([...AddNodes, newKey]);
+
       leaveTip();
     });
     // diagram.addDiagramListener('SelectionDeleted', e => {
@@ -203,6 +211,15 @@ const FlowChart = props => {
       nodeDataArray,
       linkDataArray,
     });
+    // 初次选中
+    if (nodeDataArray?.length > 0) {
+      currentNode.current = diagram.model.findNodeDataForKey(nodeDataArray[0].NodeId);
+      setNodeKey(currentNode.current.key);
+      setEditMsg(currentNode.current);
+      setModalType('edit');
+      setVisible(true);
+    }
+
     // 修改复制后节点内容
     diagram.model.copyNodeDataFunction = (obj, model) => {
       let copyObj = lodash.cloneDeep(obj);
@@ -531,7 +548,7 @@ const FlowChart = props => {
                 maxSize: new go.Size(120, NaN),
                 maxLines: 1,
                 alignment: go.Spot.Center,
-                margin: new go.Margin(0, 10, 0, 10),
+                margin: new go.Margin(0, 15, 0, 15),
                 overflow: go.TextBlock.OverflowEllipsis,
                 font: 'normal 12pt Microsoft YaHei',
               },
@@ -604,10 +621,16 @@ const FlowChart = props => {
         mouseLeave(e, node) {
           showSmallPorts(node, false);
         },
+        click(e, node) {
+          handlerDC(e, node);
+        },
         // 处理双击
         doubleClick(e, node) {
           // 双击事件
-          handlerDC(e, node); // 双击执行的方法
+          // handlerDC(e, node); // 双击执行的方法
+        },
+        selectionChanged: node => {
+          // console.log(node.data, 'nodenodenode');
         },
         toolTip: objGo(
           'ToolTip',
@@ -726,10 +749,7 @@ const FlowChart = props => {
     let obj = JSON.parse(v);
     let nodeData = diagram.model.findNodeDataForKey(obj.from);
     if (nodeData.NodeType === '20' || nodeData.NodeType === '21') {
-      if (nodeData.RuleList.some(ele => ele.NextNodeId === obj.to)) {
-        return nodeData.RuleList.find(ele => ele.NextNodeId === obj.to).RuleName;
-      }
-      return '';
+      return nodeData.RuleList.find(ele => ele.NextNodeId === obj.to).RuleName;
     }
     return '';
   };
@@ -832,8 +852,12 @@ const FlowChart = props => {
   };
   // 双击节点
   const handlerDC = (e, node) => {
+    console.log(node.data, 'nondojfadsoijgsd');
     setNodeKey(node.part.data.key);
     setEditMsg(node.part.data);
+    // diagram.model.setDataProperty(node.data, 'NodeName', 'fdasjkljfkldsajf');
+
+    currentNode.current = node.data;
     setModalType('edit');
     setVisible(true);
   };
@@ -899,7 +923,7 @@ const FlowChart = props => {
 
     // 给线上添加文字
     let diagramObj = JSON.parse(diagram.model.toJson());
-
+    console.log(diagramObj.linkDataArray, 'diagramObj.linkDataArray');
     diagramObj.linkDataArray.forEach(item => {
       let node = diagram.model.findLinkDataForKey(item.LineKey);
       node.text = item.RuleName;
@@ -962,7 +986,20 @@ const FlowChart = props => {
     }
     return obj;
   };
+  // 节点数据改边
+  const nodeChage = (key, value) => {
+    console.log(key, value);
+    let obj = JSON.parse(JSON.stringify(currentNode.current));
+    obj[key] = value;
+    const nodeDetail = JSON.stringify(obj);
 
+    diagram.model.setDataProperty(currentNode.current, key, value);
+    if (key === 'roleList') {
+      diagram.model.setDataProperty(currentNode.current, 'nodeDetail', nodeDetail);
+    }
+
+    diagram.rebuildParts();
+  };
   // 保存流程
   const saveFlow = () => {
     setButtonLoading(true);
@@ -1051,18 +1088,19 @@ const FlowChart = props => {
       <div className={styles.chartBox}>
         <div id="myOverviewDiv" className={styles.myOverviewDiv} />
         <div className={styles.flowName}>{flowData.flowName}</div>
-        {/* <Spin spinning={chartLoading}> */}
-        <div
-          id="myDiagramDiv"
-          className={styles.myDiagramDiv}
-          style={{ backgroundColor: '#EFF8FA' }}
-        />
-        {/* </Spin> */}
+        <Spin spinning={chartLoading}>
+          <div
+            id="myDiagramDiv"
+            className={styles.myDiagramDiv}
+            style={{ backgroundColor: '#EFF8FA' }}
+          />
+        </Spin>
         <NodeModal
           flowID={flowID}
           visible={visible}
           editMsg={editMsg}
           modalType={modalType}
+          nodeChage={nodeChage}
           handleCancel={() => setVisible(false)}
           onSubumit={(obj, nextlinkNodes) => nodeCallBack(obj, nextlinkNodes)}
           flowData={diagram ? JSON.parse(diagram.model.toJson()) : {}}

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.less

 .nodeConfig {
+  position: absolute;
   height: 100%;
-  min-width: 425px;
+  // min-width: 425px;
+  right: 0;
+  top: 0;
+  background-color: #fff;
   width: 25%;
   padding: 20px;
   overflow-y: scroll;
   margin-left: 15px;
+  z-index: 10;
 
   .titleBox {
     color: #BCBCBC;
@@ -31,7 +36,7 @@
   }
 
   .buttonBox {
-    padding-left: 15px;
+    // padding-left: 15px;
     width: 100%;
     height: 34px;
     display: flex;
@@ -160,7 +165,7 @@
 }
 
 .buttonBox {
-  padding-left: 15px;
+  // padding-left: 15px;
   width: 100%;
   height: 34px;
   display: flex;

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/ConfigSubprocess.jsx

@@ -74,25 +74,31 @@ const ConfigSubprocess = props => {
   }, [nodeMsg]);
 
   const changeValue = (changedFields, allFields) => {
-    console.log(allFields);
-    const msg = {
-      SubFlowEventConfigID: Number(allFields[0]?.value?.split('-')[0]),
-      SubFlowID: Number(allFields[0]?.value?.split('-')[1]),
-      MapFields: allFields[1]?.value?.map(item => ({
+    console.log(changedFields, 'changedFields');
+    let MapFields = [];
+    if (changedFields[0].name[0] === 'MapFields') {
+      MapFields = allFields[1]?.value?.map(item => ({
         ParentFlowMapTableName: item?.nodeField?.split('-')[0],
         ParentFlowMapFieldName: item?.nodeField?.split('-')[1],
         ParentFlowMapTableType: item?.nodeField?.split('-')[2],
         SubFlowMapTableName: item?.subNodeField?.split('-')[0],
         SubFlowMapFieldName: item?.subNodeField?.split('-')[1],
-      })),
+      }));
+    }
+    const msg = {
+      SubFlowEventConfigID: Number(allFields[0]?.value?.split('-')[0]),
+      SubFlowID: Number(allFields[0]?.value?.split('-')[1]),
+      MapFields: MapFields,
     };
     getSubNodeMsg(msg);
+
     // if (changedFields[0].name[0] === 'password') {
     // }
   };
   // 选择流程
   const flowChage = e => {
     console.log(e);
+    form.setFieldsValue({ MapFields: [] });
     const subFlowID = e.split('-')[1];
     console.log(subFlowID, 'afsdfsda');
     GetFlowMapFields({ flowID, subFlowID }).then(res => {
@@ -110,7 +116,7 @@ const ConfigSubprocess = props => {
           }),
         );
         console.log(res.data.ParentFlowMapList, 'res.data.ParentFlowMapList');
-        form.setFieldsValue({ MapFields: [] });
+
         setCurrentNodeField(res.data.ParentFlowMapList);
         setChildNodeField(res.data.SubFlowMapInfo.TableFieldNames);
       } else {

src/pages/bsmanager/workOrder/workflowEdit/workflow.less

@@ -104,7 +104,7 @@
 
     .chartBox {
       position: relative;
-      display: flex;
+      // display: flex;
       height: calc(100% - 52px);
 
       .flowName {
@@ -112,7 +112,7 @@
 
         top: 10px;
         left: 50%;
-        transform: translateX(-50%);
+        transform: translateX(-200%);
         font-size: 24px;
         font-weight: 700;
         color: #1585FF;
@@ -214,8 +214,8 @@
     }
 
     .myDiagramDiv {
-      // width: 100%;
-      flex: 1;
+      width: 75%;
+      // flex: 1;
       height: 100%;
     }
   }