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,12 +749,9 @@ 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 '';
   };
   // 是否显示端口
   const showSmallPorts = (node, show) => {
@@ -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}> */}
+        <Spin spinning={chartLoading}>
           <div
             id="myDiagramDiv"
             className={styles.myDiagramDiv}
             style={{ backgroundColor: '#EFF8FA' }}
           />
-        {/* </Spin> */}
+        </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.jsx

@@ -35,7 +35,7 @@ let chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八',
 let chnUnitSection = ['', '万', '亿', '万亿', '亿亿'];
 let chnUnitChar = ['', '十', '百', '千'];
 const NodeModal = props => {
-  const { flowData, onSubumit, handleCancel, visible, editMsg, flowID } = props;
+  const { flowData, onSubumit, handleCancel, visible, editMsg, flowID, nodeChage } = props;
   const [form] = Form.useForm();
   const [showRoal, setShowRoal] = useState(false); // 是否显示选择角色用户弹窗
   const [showRule, setShowRule] = useState(false); // 是否显示节点扭转规则弹窗
@@ -53,7 +53,7 @@ const NodeModal = props => {
     roleList: [],
     nodeDetail: {},
     RuleList: {},
-    CarbonCopyPeopleList: {},
+    CarbonCopyPeopleList: [],
   });
   // const [CarbonCopyPeopleList, setCarbonCopyPeopleList] = useState([]); // 抄送人列表
   // const [RuleList, setRuleList] = useState([]); // 规则配置列表
@@ -74,8 +74,12 @@ const NodeModal = props => {
     RuleList.current = [];
 
     CarbonCopyPeopleList.current = [];
-    if (visible) {
+    if (JSON.stringify(editMsg) === '{}') {
+      return;
+    }
+    // if (visible) {
     console.log(editMsg, 'editMsg');
+
     // 获取网关连接的节点
     if (editMsg.NodeType === '21' || editMsg.NodeType === '20') {
       getNextLinkNodes(editMsg.key);
@@ -112,16 +116,16 @@ const NodeModal = props => {
 
     getFormData();
     console.log(form.getFieldValue(), 'getFieldValue');
-    } else {
-      nextlinkNodes.current = [];
-      previousLinkNodes.current = [];
-      talbeList.current = [];
+    // } else {
+    //   nextlinkNodes.current = [];
+    //   previousLinkNodes.current = [];
+    //   talbeList.current = [];
 
-      RuleList.current = [];
+    //   RuleList.current = [];
 
-      CarbonCopyPeopleList.current = [];
-      setFlag(flag + 1);
-    }
+    //   CarbonCopyPeopleList.current = [];
+    //   setFlag(flag + 1);
+    // }
   }, [visible, editMsg]);
   const SectionToChinese = section => {
     let strIns = '';
@@ -286,6 +290,7 @@ const NodeModal = props => {
       RuleList: RuleList.current,
       CarbonCopyPeopleList: CarbonCopyPeopleList.current,
     });
+    nodeChage('roleList', roleList);
   };
   // 添加角色或机构
   const addUser = selectList => {
@@ -303,6 +308,7 @@ const NodeModal = props => {
       RuleList: RuleList.current,
       CarbonCopyPeopleList: CarbonCopyPeopleList.current,
     });
+    nodeChage('roleList', selectList);
     setShowRoal(false);
   };
   // 添加默认承办人
@@ -314,6 +320,7 @@ const NodeModal = props => {
     list[editIndex].defaultUserId = userId;
     let nodeDetail = JSON.stringify({ ...nodeMsg, roleList: list });
     setNodeMsg({ ...nodeMsg, roleList: list, nodeDetail });
+    nodeChage('roleList', list);
     setShowUnderTaker(false);
   };
   // 编辑默认承办人
@@ -338,6 +345,7 @@ const NodeModal = props => {
     list.push({ RuleContent: '', NextNodeId: '', TableNames: '', RuleName: '' });
     // setRuleList(list);
     RuleList.current = list;
+    nodeChage('RuleList', list);
     setFlag(flag + 1);
   };
   // 删除规则
@@ -346,6 +354,7 @@ const NodeModal = props => {
     list.splice(index, 1);
     // setRuleList(list);
     RuleList.current = list;
+    nodeChage('RuleList', list);
     setFlag(flag + 1);
   };
   // 规则回填
@@ -356,6 +365,7 @@ const NodeModal = props => {
     console.log(list, 'listlist');
     // setRuleList(list);
     RuleList.current = list;
+    nodeChage('RuleList', list);
     setShowRule(false);
   };
   // 选择人员回填
@@ -363,6 +373,7 @@ const NodeModal = props => {
     console.log(e);
     // setCarbonCopyPeopleList(e);
     CarbonCopyPeopleList.current = e;
+    nodeChage('CarbonCopyPeopleList', CarbonCopyPeopleList.current);
     setShowPersonSelect(false);
   };
   // 网关表单配置监听
@@ -380,8 +391,15 @@ const NodeModal = props => {
 
     // setRuleList(list);
     RuleList.current = list;
+    nodeChage('RuleList', list);
     setFlag(flag + 1);
   };
+  // 节点配置表单监听
+  const changeValue = (changedFields, allFields) => {
+    console.log(changedFields, allFields);
+
+    nodeChage(changedFields[0].name[0], changedFields[0].value);
+  };
   // 配置当前规则
   const editRule = (msg, index) => {
     console.log(msg, 'masgasdg');
@@ -424,6 +442,7 @@ const NodeModal = props => {
   const getSubNodeMsg = msg => {
     console.log(msg, 'asdgfasdg');
     subNodeMsg.current = msg;
+    nodeChage('SubFlowInfo', msg);
   };
   // 定义表格
   const columns = [
@@ -512,12 +531,12 @@ const NodeModal = props => {
   return (
     <>
       {/* <div style={{ height: 200, width: 425, position: 'relative' }}> */}
-      <Drawer
+      {/* <Drawer
         title={null}
         closable={false}
         width="25%"
         onClose={handleCancel}
-        visible={visible}
+        visible
         mask={false}
         bodyStyle={{ paddingBottom: 20 }}
         getContainer={false}
@@ -534,8 +553,8 @@ const NodeModal = props => {
             </Button>
           </Space>
         }
-      >
-        {/* <div className={styles.nodeConfig}> */}
+      > */}
+      <div className={styles.nodeConfig}>
         <Divider
           orientation="left"
           style={{
@@ -563,7 +582,13 @@ const NodeModal = props => {
             并行网关：根据网关的连接情况，强制所有出口分支流程必须流转。
           </p>
         </div>
-        <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} labelAlign="left">
+        <Form
+          form={form}
+          labelCol={{ span: 6 }}
+          wrapperCol={{ span: 18 }}
+          onFieldsChange={changeValue}
+          labelAlign="left"
+        >
           <Form.Item
             label="排序"
             name="SerialNo"
@@ -625,7 +650,8 @@ const NodeModal = props => {
             display:
               form?.getFieldValue('NodeType') === '20' ||
               form?.getFieldValue('NodeType') === '21' ||
-              form?.getFieldValue('NodeType') === '22'
+              form?.getFieldValue('NodeType') === '22' ||
+              form?.getFieldValue('NodeType') === '30'
                 ? 'none'
                 : 'block',
           }}
@@ -685,12 +711,12 @@ const NodeModal = props => {
           <div className={styles.buttonBox} onClick={() => editCC()}>
             <div
               className={styles.setButton}
-              style={{ textAlign: CarbonCopyPeopleList.current.length > 0 ? 'left' : 'center' }}
+              style={{ textAlign: CarbonCopyPeopleList?.current.length > 0 ? 'left' : 'center' }}
             >
-              <Tooltip title={CarbonCopyPeopleList.current.map(item => item.label).join(',')}>
+              <Tooltip title={CarbonCopyPeopleList?.current.map(item => item.label).join(',')}>
                 <span>
-                  {CarbonCopyPeopleList.current.length > 0
-                    ? CarbonCopyPeopleList.current.map(item => item.label).join(',')
+                  {CarbonCopyPeopleList?.current.length > 0
+                    ? CarbonCopyPeopleList?.current.map(item => item.label).join(',')
                     : '选择抄送人'}
                 </span>
               </Tooltip>
@@ -699,10 +725,10 @@ const NodeModal = props => {
               <PlusOutlined />
             </div>
           </div>
+        </div>
         {form?.getFieldValue('NodeType') === '30' && (
           <ConfigSubprocess nodeMsg={nodeMsg} flowID={flowID} getSubNodeMsg={getSubNodeMsg} />
         )}
-        </div>
         <div
           style={{
             display:
@@ -808,8 +834,8 @@ const NodeModal = props => {
             ))}
           </div>
         </div>
-        {/* </div> */}
-      </Drawer>
+      </div>
+      {/* </Drawer> */}
       {/* </div> */}
       <RoalChoose
         roleList={nodeMsg.roleList}

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%;
     }
   }