fix: 修改流程图节点样式

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

@@ -7,20 +7,25 @@ import { Prompt } from 'react-router-dom';
 import * as go from 'gojs';
 import styles from '../workflow.less';
 import NodeModal from './flowChartComponents/NodeModal';
+import LineModal from './flowChartComponents/LineModal';
 import imgUrl from '@/assets/images/icons/closeBlue.png';
 import imgEnd from '@/assets/images/workFlow/end.png';
 import imgGeneral from '@/assets/images/workFlow/general.png';
 import imgStart from '@/assets/images/workFlow/start.png';
+import cc from '@/assets/images/workFlow/cc.png';
 import gatewayExclusive from '@/assets/images/workFlow/gatewayExclusive.png';
-import gatewayParallel from '@/assets/images/workFlow/gatewayParallel.png';
+import gatewayConfluence from '@/assets/images/workFlow/gatewayConfluence.png';
 import gatewayInclude from '@/assets/images/workFlow/gatewayInclude.png';
 const { confirm } = Modal;
 let diagram = null;
 const FlowChart = props => {
   const { flowData, flowID, chartLoading, leaveCallBack } = props;
   const [visible, setVisible] = useState(false);
+  const [lineVisible, setLineVisible] = useState(false);
   const [editMsg, setEditMsg] = useState({}); // 编辑节点的信息
+  const [lineMsg, setLineMsg] = useState({});
   const [modalType, setModalType] = useState(''); // 存入弹窗是编辑还是新增
+  const [lineId, setLineId] = useState(''); //  存入编辑线id
   const [nodeKey, setNodeKey] = useState(''); // 存入编辑节点的key
   const [DeleteNodes, setDeleteNodes] = useState([]); // 删除节点数组
   const [DeleteLines, setDeleteLines] = useState([]); // 删除线数组
@@ -124,6 +129,12 @@ const FlowChart = props => {
       nodeDataArray,
       linkDataArray: currentFlowData.Lines,
     });
+    // 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 = () => {
@@ -158,6 +169,7 @@ const FlowChart = props => {
         'Auto',
         objGo(go.Shape, 'Rectangle', { fill: 'white', stroke: null }),
       ), // 去掉节点点击时的边框颜色
+      scale: '0.8',
     });
     // 节点配置
     diagram.nodeTemplate = objGo(
@@ -177,14 +189,12 @@ const FlowChart = props => {
                 return imgEnd;
               case '0':
                 return imgGeneral;
-              case '3':
-                return gatewayExclusive;
               case '4':
-                return gatewayParallel;
-              case '5':
-                return gatewayInclude;
-              case '6':
-                return imgGeneral;
+                return cc;
+              case '20':
+                return gatewayExclusive;
+              case '21':
+                return gatewayConfluence;
               default:
                 return null;
             }
@@ -192,19 +202,17 @@ const FlowChart = props => {
           new go.Binding('width', 'NodeType', v => {
             switch (v) {
               case '1':
-                return 120;
+                return 126;
               case '2':
-                return 120;
+                return 126;
               case '0':
-                return 136;
-              case '3':
-                return 52;
+                return 210;
               case '4':
+                return 210;
+              case '20':
                 return 52;
-              case '5':
+              case '21':
                 return 52;
-              case '6':
-                return 136;
               default:
                 return null;
             }
@@ -213,19 +221,17 @@ const FlowChart = props => {
           new go.Binding('height', 'NodeType', v => {
             switch (v) {
               case '1':
-                return 120;
+                return 126;
               case '2':
-                return 120;
+                return 126;
               case '0':
-                return 76;
-              case '3':
-                return 52;
+                return 110;
               case '4':
+                return 110;
+              case '20':
                 return 52;
-              case '5':
+              case '21':
                 return 52;
-              case '6':
-                return 76;
               default:
                 return null;
             }
@@ -236,10 +242,10 @@ const FlowChart = props => {
       // 节点文案
       objGo(
         go.TextBlock,
-        { maxSize: new go.Size(130, NaN), wrap: go.TextBlock.WrapFit },
+        { maxSize: new go.Size(130, NaN), wrap: go.TextBlock.WrapFit, font: 'bold 15pt serif' },
         new go.Binding('text', 'nodeDetail', v => {
           const obj = JSON.parse(v);
-          if (obj.NodeType === '3' || obj.NodeType === '4' || obj.NodeType === '5') {
+          if (obj.NodeType === '20' || obj.NodeType === '21') {
             return '';
           }
           return obj.NodeName;
@@ -247,19 +253,18 @@ const FlowChart = props => {
         new go.Binding('stroke', 'NodeType', v => {
           switch (v) {
             case '1':
-              return '#FEFFFF';
+              return '#1685FF';
             case '2':
               return '#51C21A';
             case '0':
               return '#1685FF';
-            case '3':
-              return 52;
             case '4':
-              return 52;
-            case '5':
-              return 52;
-            case '6':
-              return 136;
+              return '#9850F6';
+            case '20':
+              return null;
+            case '21':
+              return null;
+
             default:
               return null;
           }
@@ -317,6 +322,14 @@ const FlowChart = props => {
         go.Shape, // 箭头
         { toArrow: 'Standard', stroke: '#1685FF', fill: '#1685FF' },
       ),
+      // {
+      //   // 处理双击
+      //   doubleClick(e, node) {
+      //     addLineMsg(e, node);
+      //     // 双击事件
+      //     // handlerDC(e, node); // 双击执行的方法
+      //   },
+      // },
     );
     // 初始化流程的节点数组
     diagram.model = objGo(go.GraphLinksModel, {
@@ -357,11 +370,19 @@ const FlowChart = props => {
     );
   // 双击节点
   const handlerDC = (e, node) => {
+    console.log(node.part, 'afdasdf');
     setNodeKey(node.part.data.key);
     setEditMsg(node.part.data);
     setModalType('edit');
     setVisible(true);
   };
+  // 双击线
+  const addLineMsg = (e, node) => {
+    console.log(node.part.data, 'afdasdf');
+    // setLineId(node.part.data.__gohashid);
+    setLineMsg(node.part.data);
+    setLineVisible(true);
+  };
   // 新增节点
   const addNode = () => {
     const list = JSON.parse(diagram.model.toJson()).nodeDataArray;
@@ -449,6 +470,28 @@ const FlowChart = props => {
     }
     setVisible(false);
   };
+  // 线配置回调函数
+  const lineCallBack = obj => {
+    console.log(obj, 'obj');
+    console.log(lineId, 'lineId');
+    let node = diagram.findLinkDataForKey(lineId);
+    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);
+    }
+    setLineVisible(false);
+  };
   // 获取保存后的流程数据
   const getFlowData = () => {
     GetFlowNode({ flowID }).then(res => {
@@ -456,6 +499,9 @@ const FlowChart = props => {
         // 保存后离开不用提醒要修改数据了
         setShowLeaveTip(false);
         leaveCallBack(false);
+        res.data.Nodes.forEach(item => {
+          item.nodeDetail = JSON.stringify(item);
+        });
         setCurrentFlowData(res.data);
       } else {
         notification.error({
@@ -553,6 +599,12 @@ const FlowChart = props => {
         handleCancel={() => setVisible(false)}
         onSubumit={obj => nodeCallBack(obj)}
       />
+      {/* <LineModal
+        visible={lineVisible}
+        lineMsg={lineMsg}
+        handleCancel={() => setLineVisible(false)}
+        onSubumit={obj => lineCallBack(obj)}
+      /> */}
     </>
   );
 };

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

+import React, { useEffect, useState } from 'react';
+import { Modal, Input, Form } from 'antd';
+
+const LineModal = props => {
+  const { visible, handleCancel, lineMsg, onSubumit } = props;
+  const [form] = Form.useForm();
+  useEffect(() => {
+    if (visible) {
+      form.setFieldsValue({
+        text: lineMsg.text,
+      });
+    } else {
+      form.resetFields();
+    }
+  }, [visible]);
+  // 保存线配置
+  const onSave = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        let obj = { ...lineMsg, ...validate };
+        onSubumit(obj);
+      }
+    });
+  };
+  return (
+    <div>
+      <Modal
+        title="线名称"
+        visible={visible}
+        onOk={onSave}
+        width="860px"
+        onCancel={handleCancel}
+        maskClosable={false}
+        destroyOnClose
+        getContainer={false}
+      >
+        <Form form={form} labelCol={{ span: 2 }} wrapperCol={{ span: 22 }}>
+          <Form.Item label="线名称" name="text">
+            <Input placeholder="请输入线点名称" />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default LineModal;

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

@@ -245,11 +245,12 @@ const NodeModal = props => {
             <Select placeholder="请选择节点类型">
               <Option value="1">开始节点</Option>
               <Option value="0">经办节点</Option>
+              {/* <Option value="3">审批节点</Option> */}
               <Option value="2">结束节点</Option>
-              <Option value="3">排他网关</Option>
-              <Option value="4">并行网关</Option>
-              <Option value="5">包含网关</Option>
-              <Option value="6">抄送节点</Option>
+              <Option value="4">抄送节点</Option>
+
+              <Option value="20">条件网关</Option>
+              <Option value="21">汇合网关</Option>
             </Select>
           </Form.Item>
           <Form.Item label="检查前面在办" name="aheadHandle">