fix: 节点改为点击添加

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

 import React, { useState, useEffect } from 'react';
-import { Button, Modal, notification, Spin } from 'antd';
+import { Button, Modal, notification, Spin, Tooltip } from 'antd';
 import { SaveNodeChange, GetFlowNode } from '@/services/workflow/workflow';
 
 import { ExclamationCircleOutlined } from '@ant-design/icons';
@@ -18,7 +18,14 @@ 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 nodeTypeList = [
+  { nodeTypeName: '开始节点', NodeType: '1', src: imgStart },
+  { nodeTypeName: '普通节点', NodeType: '0', src: imgGeneral },
+  { nodeTypeName: '结束节点', NodeType: '2', src: imgEnd },
+  { nodeTypeName: '条件网关', NodeType: '20', src: gatewayExclusive },
+  { nodeTypeName: '汇合网关', NodeType: '21', src: gatewayInclude },
+  { nodeTypeName: '并行网关', NodeType: '22', src: gatewayConfluence },
+];
 const FlowChart = props => {
   const { flowData, flowID, chartLoading, leaveCallBack } = props;
   const [visible, setVisible] = useState(false);
@@ -205,19 +212,19 @@ const FlowChart = props => {
           new go.Binding('width', 'NodeType', v => {
             switch (v) {
               case '1':
-                return 126;
+                return 125;
               case '2':
-                return 126;
+                return 125;
               case '0':
                 return 210;
               case '4':
                 return 210;
               case '20':
-                return 52;
+                return 55;
               case '21':
-                return 52;
+                return 55;
               case '22':
-                return 52;
+                return 55;
               default:
                 return null;
             }
@@ -226,19 +233,19 @@ const FlowChart = props => {
           new go.Binding('height', 'NodeType', v => {
             switch (v) {
               case '1':
-                return 126;
+                return 125;
               case '2':
-                return 126;
+                return 125;
               case '0':
                 return 110;
               case '4':
                 return 110;
               case '20':
-                return 52;
+                return 55;
               case '21':
-                return 52;
+                return 55;
               case '22':
-                return 52;
+                return 55;
               default:
                 return null;
             }
@@ -348,7 +355,7 @@ const FlowChart = props => {
     });
   };
 
-  // 出口线条颜色
+  // 线的样式
   const lineStyle = (v, styleName) => {
     const msg = diagram.model.findNodeDataForKey(v);
     switch (styleName) {
@@ -406,22 +413,41 @@ const FlowChart = props => {
     setLineVisible(true);
   };
   // 新增节点
-  const addNode = () => {
+  const addNode = type => {
     const list = JSON.parse(diagram.model.toJson()).nodeDataArray;
     console.log(list, 'list');
     let newNum;
+    let newKey;
 
     if (list.length > 0) {
       // eslint-disable-next-line prefer-spread
       newNum = Math.max.apply(Math, list.map(item => item.SerialNo)) + 1;
+      // eslint-disable-next-line prefer-spread
+      newKey = Math.max.apply(Math, list.map(item => item.key)) + 1;
     } else {
+      newKey = 1;
       newNum = 1;
     }
+
     setNodeLength(list.length);
-    console.log(newNum);
+    console.log(newNum, newKey);
     setNewSerialNo(newNum);
-    setModalType('add');
-    setVisible(true);
+    // 新增节点
+    // 新增得key比最大得key值+1
+    let obj = {
+      key: newKey,
+      NodeId: newKey,
+      NodeType: type,
+      SerialNo: newNum,
+      aheadHandle: 1,
+      NodeHandling: 1,
+      RuleList: [],
+      roleList: [],
+    };
+    diagram.model.addNodeData({ ...obj, nodeDetail: JSON.stringify(obj) });
+    setAddNodes([...AddNodes, newKey]);
+    // 关闭时进行数据比对看数据是否改变
+    leaveTip();
   };
   // 节点配置回调
   const nodeCallBack = obj => {
@@ -487,6 +513,11 @@ const FlowChart = props => {
       nodeData.RuleList = RuleList;
       diagram.model.updateTargetBindings(nodeData);
     }
+    // 关闭时进行数据比对看数据是否改变
+    leaveTip();
+    setVisible(false);
+  };
+  const leaveTip = () => {
     // 关闭时进行数据比对看数据是否改变
     let diagramObj = JSON.parse(diagram.model.toJson());
     let stageJson = {
@@ -500,7 +531,6 @@ const FlowChart = props => {
       leaveCallBack(true);
       setShowLeaveTip(true);
     }
-    setVisible(false);
   };
   // 线配置回调函数
   const lineCallBack = obj => {
@@ -608,46 +638,19 @@ const FlowChart = props => {
     <>
       <Prompt message="编辑的内容还未保存，确定要离开该页面吗?" when={showLeaveTip} />
       <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.nodeList}>
+          {nodeTypeList.map(item => (
+            <Tooltip placement="topLeft" title="点击插入节点" key={item.NodeType}>
+              <div className={styles.nodeBox} onClick={() => addNode(item.NodeType)}>
+                <div className={styles.nodeImg}>
+                  <img src={item.src} alt="" />
+                </div>
+                <div className={styles.nodeTypeName}>{item.nodeTypeName}</div>
+              </div>
+            </Tooltip>
+          ))}
+        </div>
         <div className={styles.buttonList}>
-          <Button onClick={() => addNode()}>添加节点</Button>
           <Button type="primary" onClick={() => saveFlow()}>
             发布
           </Button>

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

@@ -24,6 +24,7 @@ import Undertaker from './nodeModalComponents/Undertaker';
 import RuleConfig from './nodeModalComponents/RuleConfig';
 import styles from './NodeModal.less';
 import { GetFormDataSource } from '@/services/workflow/workflow';
+import { node } from 'prop-types';
 
 const { Option } = Select;
 let chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
@@ -70,59 +71,34 @@ const NodeModal = props => {
     form.resetFields();
     if (visible) {
       console.log(editMsg, 'editMsg');
-      if (modalType === 'edit') {
-        // 获取网关连接的节点
-        if (editMsg.NodeType === '21' || editMsg.NodeType === '20') {
-          getNextLinkNodes(editMsg.key);
-          // getPreviousLinkNodes(editMsg.key);
-          setRuleList(editMsg.RuleList);
-          // 获取表数据
-          GetFormDataSource({ flowID }).then(res => {
-            let list = new Set(talbeList.current);
-            allFieldList.current = [];
-            res.data.forEach(item => {
-              if (!allFieldList.current.some(ele => ele.TableName === item.TableName)) {
-                allFieldList.current.push({
-                  TableFieldNames: item.TableFieldNames,
-                  TableName: item.TableName,
-                });
-              }
-              list.add(item.TableName);
-              // if (previousLinkNodes.current.some(ele => ele.NodeName === item.NodeName)) {
-              //   list.add(item.TableName);
-              // }
-            });
-            talbeList.current = [...list];
-            setFlag(flag + 1);
-            console.log(talbeList.current, 'talbeList');
+      // 获取网关连接的节点
+      if (editMsg.NodeType === '21' || editMsg.NodeType === '20') {
+        getNextLinkNodes(editMsg.key);
+        // getPreviousLinkNodes(editMsg.key);
+        setRuleList(editMsg.RuleList);
+        // 获取表数据
+        GetFormDataSource({ flowID }).then(res => {
+          let list = new Set(talbeList.current);
+          allFieldList.current = [];
+          res.data.forEach(item => {
+            if (!allFieldList.current.some(ele => ele.TableName === item.TableName)) {
+              allFieldList.current.push({
+                TableFieldNames: item.TableFieldNames,
+                TableName: item.TableName,
+              });
+            }
+            list.add(item.TableName);
+            // if (previousLinkNodes.current.some(ele => ele.NodeName === item.NodeName)) {
+            //   list.add(item.TableName);
+            // }
           });
-        }
-
-        console.log(nextlinkNodes.current, previousLinkNodes.current, 'linkNodes.current');
-        getFormData();
-        console.log(form.getFieldValue(), 'getFieldValue');
-      } else {
-        let type;
-        if (nodeNum > 0) {
-          type = '0';
-        } else {
-          type = '1';
-        }
-        let nodeDetail = JSON.stringify({
-          ...nodeMsg,
-          newSerialNo,
-          NodeType: type,
-          roleList: [],
-          RuleList,
-        });
-        setNodeMsg({ ...nodeMsg, newSerialNo, NodeType: type, roleList: [], nodeDetail, RuleList });
-        form.setFieldsValue({
-          SerialNo: newSerialNo,
-          NodeType: type,
-          aheadHandle: 1,
-          NodeHandling: 1,
+          talbeList.current = [...list];
+          setFlag(flag + 1);
         });
       }
+
+      getFormData();
+      console.log(form.getFieldValue(), 'getFieldValue');
     } else {
       nextlinkNodes.current = [];
       previousLinkNodes.current = [];
@@ -219,7 +195,13 @@ const NodeModal = props => {
   // 获取表单回显
   const getFormData = () => {
     const { NodeName, NodeType, SerialNo, aheadHandle, NodeHandling } = editMsg;
-    form.setFieldsValue({ NodeName, NodeType, SerialNo, aheadHandle, NodeHandling });
+    form.setFieldsValue({
+      NodeName,
+      NodeType,
+      SerialNo,
+      aheadHandle: aheadHandle || 1,
+      NodeHandling: NodeHandling || 1,
+    });
     setNodeMsg(editMsg);
     setFlag(flag + 1);
   };
@@ -228,8 +210,18 @@ const NodeModal = props => {
     form.validateFields().then(validate => {
       if (validate) {
         validate.SerialNo = Number(validate.SerialNo);
-        let nodeDetail = JSON.stringify({ ...validate, roleList: nodeMsg.roleList });
-        let obj = { ...validate, roleList: nodeMsg.roleList, nodeDetail, RuleList };
+        let nodeDetail = JSON.stringify({
+          ...validate,
+          NodeType: nodeMsg.NodeType,
+          roleList: nodeMsg.roleList,
+        });
+        let obj = {
+          ...validate,
+          NodeType: nodeMsg.NodeType,
+          roleList: nodeMsg.roleList,
+          nodeDetail,
+          RuleList,
+        };
         onSubumit(obj);
       }
     });
@@ -267,6 +259,7 @@ const NodeModal = props => {
   };
   // 添加规则
   const addRule = () => {
+    console.log(fieldList, 'fieldList');
     let list = JSON.parse(JSON.stringify(RuleList));
     list.push({ RuleContent: '', NextNodeName: '', TableNames: '' });
     setRuleList(list);
@@ -318,10 +311,12 @@ const NodeModal = props => {
     console.log(listfleld, allFieldList.current, 'listfleld1111');
     allFieldList.current.forEach(item => {
       if (listfleld.some(ele => ele === item.TableName)) {
-        list.push({
-          TableFieldNames: item.TableFieldNames,
-          TableName: item.TableName,
-        });
+        if (item.TableName && item.TableFieldNames?.length > 0) {
+          list.push({
+            TableFieldNames: item.TableFieldNames,
+            TableName: item.TableName,
+          });
+        }
       }
     });
     console.log(list, 'listfleld');
@@ -335,7 +330,7 @@ const NodeModal = props => {
       setNodeMsg({ ...nodeMsg, roleList: [], RuleList: [] });
       setFlag(flag + 1);
     }
-    console.log(changedFields, allFields, 'allFields');
+    // console.log(changedFields, allFields, 'allFields');
   };
   // 定义表格
   const columns = [
@@ -415,7 +410,7 @@ const NodeModal = props => {
       ),
     },
   ];
-  console.log(form?.getFieldValue('NodeType'), 'afdsfasdg');
+
   return (
     <>
       <Drawer
@@ -443,13 +438,16 @@ const NodeModal = props => {
             marginBottom: '30px',
           }}
         >
-          节点信息
+          {nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
+            ? '网关'
+            : '节点'}
+          信息
         </Divider>
         <Form
           form={form}
-          labelCol={{ span: 5 }}
-          wrapperCol={{ span: 19 }}
-          onFieldsChange={changeValue}
+          labelCol={{ span: 4 }}
+          wrapperCol={{ span: 20 }}
+          // onFieldsChange={changeValue}
         >
           <Form.Item
             label="排序"
@@ -459,7 +457,11 @@ const NodeModal = props => {
             <Input placeholder="请输入序号" />
           </Form.Item>
           <Form.Item
-            label="节点名称"
+            label={`${
+              nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
+                ? '网关'
+                : '节点'
+            }名称`}
             name="NodeName"
             rules={[
               { required: true, message: '请输入节点名称' },
@@ -471,9 +473,15 @@ const NodeModal = props => {
               // },
             ]}
           >
-            <Input placeholder="请输入节点名称（最多6个字）" />
+            <Input
+              placeholder={`请输入${
+                nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
+                  ? '网关'
+                  : '节点'
+              }名称`}
+            />
           </Form.Item>
-          <Form.Item
+          {/* <Form.Item
             label="节点类型"
             name="NodeType"
             rules={[{ required: true, message: '请选择节点类型' }]}
@@ -481,14 +489,14 @@ const NodeModal = props => {
             <Select placeholder="请选择节点类型" disabled={modalType === 'edit'}>
               <Option value="1">开始节点</Option>
               <Option value="0">普通节点</Option>
-              {/* <Option value="3">审批节点</Option> */}
+              <Option value="3">审批节点</Option>
               <Option value="2">结束节点</Option>
-              {/* <Option value="4">抄送节点</Option> */}
+              <Option value="4">抄送节点</Option>
               <Option value="20">条件网关</Option>
               <Option value="21">汇合网关</Option>
               <Option value="22">并行网关</Option>
             </Select>
-          </Form.Item>
+          </Form.Item> */}
           <div style={{ display: 'none' }}>
             <Form.Item label="检查前面在办" name="aheadHandle">
               <Select>
@@ -509,7 +517,7 @@ const NodeModal = props => {
                   : 'block',
             }}
           >
-            <Form.Item label="节点办理方式" name="NodeHandling">
+            <Form.Item label="办理方式" name="NodeHandling">
               <Select>
                 <Option value={1}>多人接收，一人办理（抢占模式）</Option>
                 <Option value={0}>多人接收，多人办理（会签模式）</Option>
@@ -618,7 +626,7 @@ const NodeModal = props => {
                     </Select>
                   </div>
                 </div>
-                <div className={styles.formBox}>
+                {/* <div className={styles.formBox}>
                   <div className={styles.label}>选择业务表单：</div>
                   <div className={styles.item}>
                     <Select
@@ -636,7 +644,7 @@ const NodeModal = props => {
                       ))}
                     </Select>
                   </div>
-                </div>
+                </div> */}
                 <div className={styles.buttonBox} onClick={() => editRule(item, index)}>
                   <div className={styles.setButton}>
                     <Tooltip title={item.RuleContent}>