fix: 添加并行网关修改线链接样式

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

@@ -18,6 +18,7 @@ import gatewayConfluence from '@/assets/images/workFlow/gatewayConfluence.png';
 import gatewayInclude from '@/assets/images/workFlow/gatewayInclude.png';
 const { confirm } = Modal;
 let diagram = null;
+const nodeTypeList = [{ name: '开始节点', nodeType: '0', src: imgStart }];
 const FlowChart = props => {
   const { flowData, flowID, chartLoading, leaveCallBack } = props;
   const [visible, setVisible] = useState(false);
@@ -248,7 +249,7 @@ const FlowChart = props => {
       // 节点文案
       objGo(
         go.TextBlock,
-        { maxSize: new go.Size(130, NaN), wrap: go.TextBlock.WrapFit, font: 'bold 15pt serif' },
+        { maxSize: new go.Size(130, NaN), wrap: go.TextBlock.WrapFit, font: 'normal 12pt serif' },
         new go.Binding('text', 'nodeDetail', v => {
           const obj = JSON.parse(v);
           if (obj.NodeType === '20' || obj.NodeType === '21') {
@@ -278,20 +279,6 @@ const FlowChart = props => {
           }
         }),
       ),
-      // objGo(
-      //   go.Picture,
-      //   {
-      //     source: imgUrl, // 图片路径
-      //     desiredSize: new go.Size(12, 12),
-      //     alignment: go.Spot.TopRight, // 对齐主要形状上的端口
-      //     alignmentFocus: go.Spot.TopRight, // 就在形状里面
-      //     click() {
-      //       // 删除节点
-      //       showDeleteConfirm();
-      //     },
-      //   },
-      //   new go.Binding('margin', 'NodeType', v => (v === '0' ? 5 : 17)),
-      // ),
       // 我们的小命名端口，每侧一个：
       makePort('T', go.Spot.Top),
       makePort('L', go.Spot.Left),
@@ -320,6 +307,11 @@ const FlowChart = props => {
         curve: go.Link.JumpOver,
         corner: 5,
         toShortLength: 4,
+        // selectionAdornmentTemplate: objGo(
+        //   go.Adornment,
+        //   objGo(go.Shape, { isPanelMain: true, stroke: 'red', strokeWidth: 2 }), // 修改线颜色和大小
+        //   objGo(go.Shape, { toArrow: 'Standard', fill: 'red', stroke: null }), // 修改线箭头的颜色和大小
+        // ),
       },
       new go.Binding('points').makeTwoWay(),
       objGo(
@@ -329,34 +321,14 @@ const FlowChart = props => {
           strokeWidth: 2,
         },
 
-        new go.Binding('stroke', 'from', v => {
-          console.log(diagram.model.findNodeDataForKey(v));
-          const msg = diagram.model.findNodeDataForKey(v);
-          if (msg.NodeType === '20' || msg.NodeType === '22') {
-            return 'red';
-          }
-          return '#1685FF';
-        }),
+        new go.Binding('stroke', 'from', v => lineStyle(v, 'stroke')),
+        new go.Binding('strokeDashArray', 'from', v => lineStyle(v, 'strokeDashArray')),
       ),
       objGo(
         go.Shape, // 箭头
         { toArrow: 'Standard' },
-        new go.Binding('stroke', 'from', v => {
-          console.log(diagram.model.findNodeDataForKey(v));
-          const msg = diagram.model.findNodeDataForKey(v);
-          if (msg.NodeType === '20' || msg.NodeType === '22') {
-            return 'red';
-          }
-          return '#1685FF';
-        }),
-        new go.Binding('fill', 'from', v => {
-          console.log(diagram.model.findNodeDataForKey(v));
-          const msg = diagram.model.findNodeDataForKey(v);
-          if (msg.NodeType === '20' || msg.NodeType === '22') {
-            return 'red';
-          }
-          return '#1685FF';
-        }),
+        new go.Binding('stroke', 'from', v => lineStyle(v, 'stroke')),
+        new go.Binding('fill', 'from', v => lineStyle(v, 'stroke')),
       ),
       // {
       //   // 处理双击
@@ -375,6 +347,22 @@ const FlowChart = props => {
       linkDataArray: currentFlowData.Lines,
     });
   };
+
+  // 出口线条颜色
+  const lineStyle = (v, styleName) => {
+    const msg = diagram.model.findNodeDataForKey(v);
+    switch (styleName) {
+      case 'strokeDashArray':
+        if (msg.NodeType === '20') {
+          return [6, 3];
+        }
+        return null;
+      case 'stroke':
+        return '#1685FF';
+      default:
+        return null;
+    }
+  };
   // 是否显示端口
   const showSmallPorts = (node, show) => {
     node.ports.each(port => {
@@ -619,11 +607,51 @@ const FlowChart = props => {
   return (
     <>
       <Prompt message="编辑的内容还未保存，确定要离开该页面吗?" when={showLeaveTip} />
-      <div className={styles.buttonList}>
-        <Button onClick={() => addNode()}>添加节点</Button>
-        <Button type="primary" onClick={() => saveFlow()}>
-          保存
-        </Button>
+      <div className={styles.control}>
+        {/* <div className={styles.nodeList}>
+          <div className={styles.nodeBox}>
+            <div className={styles.nodeImg}>
+              <img src={imgStart} alt="" />
+            </div>
+            <div className={styles.nodeTypeName}>开始节点</div>
+          </div>
+          <div className={styles.nodeBox}>
+            <div className={styles.nodeImg}>
+              <img src={imgGeneral} alt="" />
+            </div>
+            <div className={styles.nodeTypeName}>经办节点</div>
+          </div>
+          <div className={styles.nodeBox}>
+            <div className={styles.nodeImg}>
+              <img src={imgEnd} alt="" />
+            </div>
+            <div className={styles.nodeTypeName}>结束节点</div>
+          </div>
+          <div className={styles.nodeBox}>
+            <div className={styles.nodeImg}>
+              <img src={gatewayExclusive} alt="" />
+            </div>
+            <div className={styles.nodeTypeName}>条件网关</div>
+          </div>
+          <div className={styles.nodeBox}>
+            <div className={styles.nodeImg}>
+              <img src={gatewayConfluence} alt="" />
+            </div>
+            <div className={styles.nodeTypeName}>并行网关</div>
+          </div>
+          <div className={styles.nodeBox}>
+            <div className={styles.nodeImg}>
+              <img src={gatewayInclude} alt="" />
+            </div>
+            <div className={styles.nodeTypeName}>汇合网关</div>
+          </div>
+        </div> */}
+        <div className={styles.buttonList}>
+          <Button onClick={() => addNode()}>添加节点</Button>
+          <Button type="primary" onClick={() => saveFlow()}>
+            发布
+          </Button>
+        </div>
       </div>
       <div className={styles.chartBox}>
         <Spin spinning={chartLoading}>

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

@@ -100,6 +100,7 @@ const NodeModal = props => {
 
         console.log(nextlinkNodes.current, previousLinkNodes.current, 'linkNodes.current');
         getFormData();
+        console.log(form.getFieldValue(), 'getFieldValue');
       } else {
         let type;
         if (nodeNum > 0) {
@@ -217,10 +218,10 @@ const NodeModal = props => {
   };
   // 获取表单回显
   const getFormData = () => {
-    setNodeMsg(editMsg);
-
     const { NodeName, NodeType, SerialNo, aheadHandle, NodeHandling } = editMsg;
     form.setFieldsValue({ NodeName, NodeType, SerialNo, aheadHandle, NodeHandling });
+    setNodeMsg(editMsg);
+    setFlag(flag + 1);
   };
   // 提交表单
   const onFinish = () => {
@@ -414,6 +415,7 @@ const NodeModal = props => {
       ),
     },
   ];
+  console.log(form?.getFieldValue('NodeType'), 'afdsfasdg');
   return (
     <>
       <Drawer
@@ -484,6 +486,7 @@ const NodeModal = props => {
               {/* <Option value="4">抄送节点</Option> */}
               <Option value="20">条件网关</Option>
               <Option value="21">汇合网关</Option>
+              <Option value="22">并行网关</Option>
             </Select>
           </Form.Item>
           <div style={{ display: 'none' }}>
@@ -500,7 +503,8 @@ const NodeModal = props => {
                 form?.getFieldValue('NodeType') === '1' ||
                 form?.getFieldValue('NodeType') === '2' ||
                 form?.getFieldValue('NodeType') === '20' ||
-                form?.getFieldValue('NodeType') === '21'
+                form?.getFieldValue('NodeType') === '21' ||
+                form?.getFieldValue('NodeType') === '22'
                   ? 'none'
                   : 'block',
             }}
@@ -517,7 +521,9 @@ const NodeModal = props => {
         <div
           style={{
             display:
-              form?.getFieldValue('NodeType') === '20' || form?.getFieldValue('NodeType') === '21'
+              form?.getFieldValue('NodeType') === '20' ||
+              form?.getFieldValue('NodeType') === '21' ||
+              form?.getFieldValue('NodeType') === '22'
                 ? 'none'
                 : 'block',
           }}

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

@@ -25,6 +25,8 @@
   width: 100%;
 
   .ruleBox {
+    margin-top: 5px;
+
     .ruleTitle {
       display: flex;
       justify-content: space-between;
@@ -64,6 +66,7 @@
       justify-content: space-between;
       align-items: center;
       cursor: pointer;
+
       .setButton {
         width: 90%;
         height: 100%;

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

@@ -106,19 +106,50 @@
       height: calc(100% - 62px);
     }
 
-    .buttonList {
+    .control {
       display: flex;
-      justify-content: flex-start;
-      margin: 15px 0 15px 0;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 10px;
+      .nodeList {
+        display: flex;
+
+        .nodeBox {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 40px;
+          width: 145px;
+          border-radius: 10px;
+          background-color: #D9E0FF;
+          margin-right: 10px;
+
+          .nodeImg {
+            img {
+              height: 35px;
+            }
+
+            margin-right: 5px;
+          }
+        }
+      }
 
-      .ant-btn {
+      .buttonList {
         display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-left: 10px;
+        justify-content: flex-start;
+        margin: 15px 0 15px 0;
+
+        .ant-btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-left: 10px;
+        }
       }
+
     }
 
+
     canvas {
       border: 0px;
       outline: none;