fix: 修改规则节点后的线显示规则名称

src/components/RuleConfig/index.jsx

@@ -2,7 +2,7 @@
  * @Author: dengchao 754083046@qq.com
  * @Date: 2022-11-02 14:37:53
  * @LastEditors: dengchao 754083046@qq.com
- * @LastEditTime: 2022-11-02 14:40:57
+ * @LastEditTime: 2022-11-07 11:48:08
  * @FilePath: \maintenance\src\components\RuleConfig\index.jsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -53,7 +53,7 @@ const RuleConfig = props => {
   return (
     <div>
       <Modal
-        title="节点扭转规则配置"
+        title="节点流转规则配置"
         visible={visible}
         onOk={onSave}
         width="860px"

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

@@ -36,7 +36,7 @@ const FlowChart = props => {
   const [editMsg, setEditMsg] = useState({}); // 编辑节点的信息
   const [lineMsg, setLineMsg] = useState({});
   const [modalType, setModalType] = useState(''); // 存入弹窗是编辑还是新增
-  const [lineId, setLineId] = useState(''); //  存入编辑线id
+  const [LineId, setLineId] = useState(''); //  存入编辑线id
   const [nodeKey, setNodeKey] = useState(''); // 存入编辑节点的key
   const [DeleteNodes, setDeleteNodes] = useState([]); // 删除节点数组
   const [DeleteLines, setDeleteLines] = useState([]); // 删除线数组
@@ -92,12 +92,18 @@ const FlowChart = props => {
         showDeleteConfirm();
         return false;
       });
+    // 监听线,连接线的时候加上text属性
+    diagram.addDiagramListener('LinkDrawn', e => {
+      // e.subject.data.text = '';
+      e.subject.data.lineDetail = JSON.stringify(e.subject.data);
+      console.log(e, e.subject.data, 'fasdfasdgds');
+      diagram.model.updateTargetBindings(e.subject.data);
+    });
+
     // diagram.addDiagramListener('SelectionDeleted', e => {
 
     // });
     console.log(diagram.model, 'diagram.model');
-    // 监听复制事件并修改复制内容
-    // setTimeout(() => {}, 1200);
   }, []);
   useEffect(() => {
     if (flowData) {
@@ -107,7 +113,14 @@ const FlowChart = props => {
       setAddNodes([]);
       setDeleteNode('');
       setDeleteLine('');
-      setCurrentFlowData(JSON.parse(JSON.stringify(flowData)));
+      console.log(flowData, 'flowData');
+      let dataList = JSON.parse(JSON.stringify(flowData));
+
+      dataList.Lines.forEach(item => {
+        item.text = '';
+        item.lineDetail = JSON.stringify(item);
+      });
+      setCurrentFlowData(dataList);
       setShowLeaveTip(false);
     }
   }, [flowData]);
@@ -159,12 +172,14 @@ const FlowChart = props => {
       delete copyObj.LineId;
       return copyObj;
     };
-    // diagram.model.linkKeyProperty = 'LineId';
-    // diagram.model.makeUniqueLinkKeyFunction = (model, data) => {
-    //   let i = model.linkDataArray.length * 2 + 2;
-    //   while (model.findLinkDataForKey(i) !== null) i += 2;
-    //   return i;
-    // };
+
+    diagram.model.linkKeyProperty = 'LineId';
+
+    diagram.model.makeUniqueLinkKeyFunction = (model, data) => {
+      let i = model.linkDataArray.length * 2 + 2;
+      while (model.findLinkDataForKey(i) !== null) i += 2;
+      return i;
+    };
   }, [currentFlowData]);
   // 删除提醒
   const showDeleteConfirm = () => {
@@ -280,6 +295,7 @@ const FlowChart = props => {
                 v?.length > 0 ? new go.Margin(10, 10, 0, 10) : 0,
               ),
               new go.Binding('text', 'nodeDetail', v => {
+                console.log(v, 'nodenodenodne');
                 const obj = JSON.parse(v);
                 if (obj.NodeType === '20' || obj.NodeType === '21' || obj.NodeType === '22') {
                   return '';
@@ -303,10 +319,18 @@ const FlowChart = props => {
       {
         // 节点之间线得连接
         linkValidation(fromnode, fromport, tonode, toport, thisLink) {
-          // console.log(fromnode.data, tonode.data, 'aaaaaa');
+          // 并行网关不让连接汇合网关
           if (fromnode.data.NodeType === '22' && tonode.data.NodeType === '21') {
             return false;
           }
+          // 条件网关不让连接条件网关
+          if (fromnode.data.NodeType === '20' && tonode.data.NodeType === '20') {
+            return false;
+          }
+          // 汇合网关不让连条件网关
+          if (fromnode.data.NodeType === '21' && tonode.data.NodeType === '20') {
+            return false;
+          }
           return true;
         },
         // 处理鼠标进入/离开事件以显示/隐藏端口
@@ -367,12 +391,41 @@ const FlowChart = props => {
         new go.Binding('stroke', 'from', v => lineStyle(v, 'stroke')),
         new go.Binding('fill', 'from', v => lineStyle(v, 'stroke')),
       ),
+      objGo(
+        go.Panel,
+        'Auto',
+        objGo(
+          go.Shape, // 标签背景，在边缘变得透明
+          // { fill: 'transparent' },
+          new go.Binding('fill', 'lineDetail', v => lineTextStyle(v)),
+          new go.Binding('stroke', 'lineDetail', v => lineTextStyle(v)),
+        ),
+        // objGo(
+        //   go.TextBlock, // the label text
+        //   {
+        //     textAlign: 'center',
+        //     font: '10pt helvetica, arial, sans-serif',
+        //     stroke: '#555555',
+        //     margin: 4,
+        //   },
+        //   new go.Binding('text', 'text'),
+        // ),
+        objGo(
+          go.TextBlock,
+          {
+            textAlign: 'center',
+            font: '10pt helvetica, arial, sans-serif',
+            stroke: '#555555',
+            margin: 4,
+          },
+          new go.Binding('text', 'lineDetail', v => lineText(v)),
+        ),
+      ),
+
       // {
       //   // 处理双击
       //   doubleClick(e, node) {
       //     addLineMsg(e, node);
-      //     // 双击事件
-      //     // handlerDC(e, node); // 双击执行的方法
       //   },
       // },
     );
@@ -400,6 +453,33 @@ const FlowChart = props => {
         return null;
     }
   };
+  const lineTextStyle = v => {
+    let obj = JSON.parse(v);
+
+    let nodeData = diagram.model.findNodeDataForKey(obj.from);
+    if (nodeData.NodeType === '20' || nodeData.NodeType === '21') {
+      // if(nodeData.)
+      if (nodeData.RuleList.some(ele => ele.NextNodeId === obj.to)) {
+        return '#EFF8FA';
+      }
+      return 'transparent';
+    }
+    return 'transparent';
+  };
+  const lineText = v => {
+    console.log('rfioehjgiouewrhgio');
+    let obj = JSON.parse(v);
+    let nodeData = diagram.model.findNodeDataForKey(obj.from);
+    if (nodeData.NodeType === '20' || nodeData.NodeType === '21') {
+      // if(nodeData.)
+      if (nodeData.RuleList.some(ele => ele.NextNodeId === obj.to)) {
+        console.log(nodeData.RuleList.find(ele => ele.NextNodeId === obj.to), 'aaaaaaaaa');
+        return nodeData.RuleList.find(ele => ele.NextNodeId === obj.to).RuleName;
+      }
+      return '';
+    }
+    return '';
+  };
   // 是否显示端口
   const showSmallPorts = (node, show) => {
     node.ports.each(port => {
@@ -501,7 +581,8 @@ const FlowChart = props => {
   };
   // 双击线
   const addLineMsg = (e, node) => {
-    // setLineId(node.part.data.__gohashid);
+    console.log(node.part.data, 'node.part.data');
+    setLineId(node.part.data.LineId);
     setLineMsg(node.part.data);
     setLineVisible(true);
   };
@@ -589,23 +670,23 @@ const FlowChart = props => {
       });
       return;
     }
-    if (modalType === 'add') {
-      // 新增节点
-      // 新增得key比最大得key值+1
-      let newKey;
-      if (keyArr.length === 0) {
-        newKey = 1;
-      } else {
-        newKey = keyArr.reduce((num1, num2) => (num1 > num2 ? num1 : num2)) + 1;
-      }
-      diagram.model.addNodeData({
-        key: newKey,
-        NodeId: newKey,
-        ...obj,
-      });
-      setAddNodes([...AddNodes, newKey]);
-    }
-    if (modalType === 'edit') {
+    // if (modalType === 'add') {
+    //   // 新增节点
+    //   // 新增得key比最大得key值+1
+    //   let newKey;
+    //   if (keyArr.length === 0) {
+    //     newKey = 1;
+    //   } else {
+    //     newKey = keyArr.reduce((num1, num2) => (num1 > num2 ? num1 : num2)) + 1;
+    //   }
+    //   diagram.model.addNodeData({
+    //     key: newKey,
+    //     NodeId: newKey,
+    //     ...obj,
+    //   });
+    //   setAddNodes([...AddNodes, newKey]);
+    // }
+    // if (modalType === 'edit') {
     // 编辑节点
     let nodeData = diagram.model.findNodeDataForKey(nodeKey);
     const {
@@ -628,7 +709,21 @@ const FlowChart = props => {
     nodeData.nodeDetail = nodeDetail;
     nodeData.RuleList = RuleList;
     diagram.model.updateTargetBindings(nodeData);
+    console.log(nodeData, 'nodeData');
+    // 给线上添加文字
+    let diagramObj = JSON.parse(diagram.model.toJson());
+
+    diagramObj.linkDataArray.forEach(item => {
+      if (
+        item.from === nodeData.NodeId &&
+        nodeData.RuleList.some(ele => ele.NextNodeId === item.to)
+      ) {
+        let node = diagram.model.findLinkDataForKey(item.LineId);
+        node.text = item.RuleName;
+        diagram.model.updateTargetBindings(node);
       }
+    });
+    // }
     // 关闭时进行数据比对看数据是否改变
     leaveTip();
     setVisible(false);
@@ -651,23 +746,15 @@ const FlowChart = props => {
   // 线配置回调函数
   const lineCallBack = obj => {
     console.log(obj, 'obj');
-    console.log(lineId, 'lineId');
-    let node = diagram.findLinkDataForKey(lineId);
+    console.log(LineId, 'LineId');
+    console.log(diagram, 'diagram');
+    let node = diagram.model.findLinkDataForKey(LineId);
+    console.log(node, 'nodeData');
+    node.text = obj.text;
+    diagram.model.updateTargetBindings(node);
     console.log(node, 'linkemsg');
     // 关闭时进行数据比对看数据是否改变
-    let diagramObj = JSON.parse(diagram.model.toJson());
-    let stageJson = {
-      Nodes: diagramObj.nodeDataArray,
-      Lines: diagramObj.linkDataArray,
-    };
-
-    if (JSON.stringify(stageJson.Nodes) === JSON.stringify(initFlowData.Nodes)) {
-      setShowLeaveTip(false);
-      leaveCallBack(false);
-    } else {
-      leaveCallBack(true);
-      setShowLeaveTip(true);
-    }
+    leaveTip();
     setLineVisible(false);
   };
   // 获取保存后的流程数据
@@ -781,7 +868,7 @@ const FlowChart = props => {
           ))}
         </div>
         <div className={styles.buttonList}>
-          <Button
+          {/* <Button
             type="link"
             onClick={() => {
               window.open(
@@ -790,7 +877,8 @@ const FlowChart = props => {
             }}
           >
             说明文档
-          </Button>
+          </Button> */}
+
           <Button type="primary" onClick={() => saveFlow()} loading={buttonLoading}>
             发布
           </Button>
@@ -816,12 +904,12 @@ const FlowChart = props => {
         onSubumit={obj => nodeCallBack(obj)}
         flowData={diagram ? JSON.parse(diagram.model.toJson()) : {}}
       />
-      {/* <LineModal
+      <LineModal
         visible={lineVisible}
         lineMsg={lineMsg}
         handleCancel={() => setLineVisible(false)}
         onSubumit={obj => lineCallBack(obj)}
-      /> */}
+      />
     </>
   );
 };

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

@@ -12,6 +12,7 @@ import {
   Popconfirm,
   message,
 } from 'antd';
+import lodash from 'lodash';
 import {
   DeleteOutlined,
   EditTwoTone,
@@ -164,7 +165,7 @@ const NodeModal = props => {
         let linkNode = flowData.nodeDataArray.find(ele => ele.key === item.to);
         if (linkNode.NodeType === '20') {
           getNextLinkNodes(linkNode.key);
-        } else {
+        } else if (!nextlinkNodes.current.some(ele => ele.key === linkNode.key)) {
           nextlinkNodes.current.push(linkNode);
         }
       }
@@ -209,6 +210,27 @@ const NodeModal = props => {
   };
   // 提交表单
   const onFinish = () => {
+    // 规则填写校验
+
+    for (let i = 0; i < RuleList.length; i++) {
+      if (!RuleList[i].RuleName) {
+        message.error('请填写规则名称');
+        return;
+      }
+      if (!RuleList[i].NextNodeId && RuleList[i].NextNodeId !== 0) {
+        message.error('请选择需要流转的节点');
+        return;
+      }
+      if (!RuleList[i].RuleContent) {
+        message.error('请填写规则');
+        return;
+      }
+    }
+    const newListLength = new Set(RuleList.map(item => item.NextNodeId)).size;
+    if (RuleList.length > newListLength) {
+      message.error('规则流转到的节点不能重复');
+      return;
+    }
     form.validateFields().then(validate => {
       console.log(validate, 'validate');
       if (validate) {
@@ -263,8 +285,16 @@ const NodeModal = props => {
   // 添加规则
   const addRule = () => {
     console.log(fieldList, 'fieldList');
+    if (nextlinkNodes.current.length === 0) {
+      message.error('请连接需要添加规则的节点');
+      return;
+    }
+    if (RuleList.length === nextlinkNodes.current.length) {
+      message.error('请连接需要添加规则的节点');
+      return;
+    }
     let list = JSON.parse(JSON.stringify(RuleList));
-    list.push({ RuleContent: '', NextNodeName: '', TableNames: '' });
+    list.push({ RuleContent: '', NextNodeId: '', TableNames: '', RuleName: '' });
     setRuleList(list);
   };
   // 删除规则
@@ -284,10 +314,13 @@ const NodeModal = props => {
   };
   // 网关表单配置监听
   const formChage = (e, index, field) => {
-    console.log(e, 'fasdfga');
-    let list = JSON.parse(JSON.stringify(RuleList));
+    let list = lodash.cloneDeep(RuleList);
     if (field === 'TableNames') {
       list[index][field] = e.join(',');
+    }
+    if (field === 'RuleName') {
+      e.persist();
+      list[index][field] = e.target.value;
     } else {
       list[index][field] = e;
     }
@@ -628,18 +661,31 @@ const NodeModal = props => {
                   <div className={styles.textContet}>规则{NumberToChinese(index + 1)}</div>
                   <DeleteOutlined style={{ cursor: 'pointer' }} onClick={() => deleRule(index)} />
                 </div>
+                <div className={styles.formBox}>
+                  <div className={styles.label}>规则名称：</div>
+                  <div className={styles.item}>
+                    <Input
+                      style={{ width: '100%' }}
+                      value={item.RuleName}
+                      placeholder="请输入规则名称"
+                      onChange={e => {
+                        formChage(e, index, 'RuleName');
+                      }}
+                    />
+                  </div>
+                </div>
                 <div className={styles.formBox}>
                   <div className={styles.label}>设置规则条件，需要流转到节点：</div>
                   <div className={styles.item}>
                     <Select
                       style={{ width: '100%' }}
-                      value={item.NextNodeName}
+                      value={item.NextNodeId}
                       onChange={e => {
-                        formChage(e, index, 'NextNodeName');
+                        formChage(e, index, 'NextNodeId');
                       }}
                     >
                       {nextlinkNodes.current.map(ele => (
-                        <Option value={ele.NodeName} key={ele.NodeName}>
+                        <Option value={ele.NodeId} key={ele.NodeName}>
                           {ele.NodeName}
                         </Option>
                       ))}