fix: 工作流编辑器添加序号并修改颜色

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

@@ -27,6 +27,7 @@ const FlowChart = props => {
     Lines: [],
   }); // 组件内得流程图数据
   const [showLeaveTip, setShowLeaveTip] = useState(false); // 离开路由是否又提醒
+  const [newSerialNo, setNewSerialNo] = useState(0);
   const objGo = go.GraphObject.make;
   // 监听删除，给删除数组里添加删除id
   useEffect(() => {
@@ -165,16 +166,34 @@ const FlowChart = props => {
           new go.Binding('height', 'NodeType', v => (v === '0' ? 75 : 105)),
           new go.Binding('figure', 'NodeType', v => (v === '0' ? 'RoundedRectangle' : 'Ellipse')),
           new go.Binding('strokeWidth', 'NodeType', v => (v === '0' ? 1 : 15)),
-          new go.Binding('stroke', 'NodeType', v => (v === '0' ? '#0587E0' : '#D7EFFF')),
+
+          new go.Binding('stroke', 'NodeType', v => {
+            // 普通节点
+            if (v === '0') {
+              return '#0587E0';
+            }
+            // 开始节点
+            if (v === '1') {
+              return '#d7efff';
+            }
+            // 结束节点
+            if (v === '2') {
+              return '#d7efff';
+            }
+            return '';
+          }),
           new go.Binding('fill', 'NodeType', v => {
+            // 普通节点
             if (v === '0') {
-              return '#DCF2FE';
+              return '#FAAD14';
             }
+            // 开始节点
             if (v === '1') {
-              return '#077BD6';
+              return '#0AC03D';
             }
+            // 结束节点
             if (v === '2') {
-              return '#077BD6';
+              return '#8585FF';
             }
             return '';
           }),
@@ -184,8 +203,8 @@ const FlowChart = props => {
       objGo(
         go.TextBlock,
         { maxSize: new go.Size(130, NaN), wrap: go.TextBlock.WrapFit },
-        new go.Binding('text', 'NodeName'),
-        new go.Binding('stroke', 'NodeType', v => (v === '0' ? '#077BD6' : '#fff')),
+        new go.Binding('text', 'NodeName', v => v.slice(0, 6)),
+        new go.Binding('stroke', 'NodeType', v => (v === '0' ? '#fff' : '#fff')),
       ),
       objGo(
         go.Picture,
@@ -282,19 +301,62 @@ const FlowChart = props => {
   };
   // 新增节点
   const addNode = () => {
+    const list = JSON.parse(diagram.model.toJson()).nodeDataArray;
+    console.log(list, 'list');
+    let newNum;
+
+    if (list.length > 0) {
+      // eslint-disable-next-line prefer-spread
+      newNum = Math.max.apply(Math, list.map(item => item.SerialNo)) + 1;
+    } else {
+      newNum = 1;
+    }
+
+    console.log(newNum);
+    setNewSerialNo(newNum);
     setModalType('add');
     setVisible(true);
   };
   // 节点配置回调
   const nodeCallBack = obj => {
+    let nameIsRepeat;
+    let numIsRepeat;
+    let { nodes } = diagram;
+    let keyArr = [];
+    // 遍历输出节点对象
+    nodes.each(node => {
+      keyArr = [...keyArr, Number(node.data.key)];
+      if (obj.NodeName === node.data.NodeName) {
+        nameIsRepeat = true;
+        if (modalType === 'edit' && obj.NodeName === editMsg.NodeName) {
+          nameIsRepeat = false;
+        }
+      }
+      if (Number(obj.SerialNo) === Number(node.data.SerialNo)) {
+        numIsRepeat = true;
+        if (modalType === 'edit' && Number(obj.SerialNo) === Number(editMsg.SerialNo)) {
+          numIsRepeat = false;
+        }
+      }
+    });
+    if (nameIsRepeat) {
+      notification.error({
+        message: '提示',
+        duration: 3,
+        description: '节点名称不能重复',
+      });
+      return;
+    }
+    if (numIsRepeat) {
+      notification.error({
+        message: '提示',
+        duration: 3,
+        description: '序号不能重复',
+      });
+      return;
+    }
     if (modalType === 'add') {
       // 新增节点
-      let { nodes } = diagram;
-      let keyArr = [];
-      // 遍历输出节点对象
-      nodes.each(node => {
-        keyArr = [...keyArr, Number(node.data.key)];
-      });
       // 新增得key比最大得key值+1
       let newKey;
       if (keyArr.length === 0) {
@@ -312,11 +374,12 @@ const FlowChart = props => {
     if (modalType === 'edit') {
       // 编辑节点
       let nodeData = diagram.model.findNodeDataForKey(nodeKey);
-      const { NodeName, NodeType, roleList } = obj;
+      const { NodeName, NodeType, roleList, SerialNo } = obj;
       nodeData.NodeName = NodeName;
       nodeData.NodeType = NodeType;
       nodeData.NodeId = nodeKey;
       nodeData.roleList = roleList;
+      nodeData.SerialNo = SerialNo;
       diagram.model.updateTargetBindings(nodeData);
     }
     // 关闭时进行数据比对看数据是否改变
@@ -410,6 +473,7 @@ const FlowChart = props => {
       <NodeModal
         visible={visible}
         editMsg={editMsg}
+        newSerialNo={newSerialNo}
         modalType={modalType}
         handleCancel={() => setVisible(false)}
         onSubumit={obj => nodeCallBack(obj)}

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

@@ -5,7 +5,6 @@ import {
   Space,
   Button,
   Input,
-  notification,
   Select,
   Divider,
   Table,
@@ -20,7 +19,7 @@ import Undertaker from './nodeModalComponents/Undertaker';
 const { Option } = Select;
 
 const NodeModal = props => {
-  const { onSubumit, handleCancel, visible, modalType, editMsg } = props;
+  const { onSubumit, handleCancel, visible, modalType, editMsg, newSerialNo } = props;
   const [form] = Form.useForm();
   const [showRoal, setShowRoal] = useState(false); // 是否显示选择角色用户弹窗
   const [showUnderTaker, setShowUnderTaker] = useState(false); // 是否显示选择默认承办人弹窗
@@ -29,6 +28,7 @@ const NodeModal = props => {
   const [nodeMsg, setNodeMsg] = useState({
     NodeName: '',
     NodeType: '',
+    SerialNo: '',
     roleList: [],
   });
   useEffect(() => {
@@ -37,20 +37,23 @@ const NodeModal = props => {
       if (modalType === 'edit') {
         getFormData();
       } else {
-        setNodeMsg({ ...nodeMsg, roleList: [] });
+        setNodeMsg({ ...nodeMsg, newSerialNo, roleList: [] });
+        form.setFieldsValue({ SerialNo: newSerialNo });
       }
     }
   }, [visible]);
   // 获取表单回显
   const getFormData = () => {
     setNodeMsg(editMsg);
-    const { NodeName, NodeType } = editMsg;
-    form.setFieldsValue({ NodeName, NodeType });
+    console.log(editMsg, 'editMsg');
+    const { NodeName, NodeType, SerialNo } = editMsg;
+    form.setFieldsValue({ NodeName, NodeType, SerialNo });
   };
   // 提交表单
   const onFinish = () => {
     form.validateFields().then(validate => {
       if (validate) {
+        validate.SerialNo = Number(validate.SerialNo);
         let obj = { ...validate, roleList: nodeMsg.roleList };
         onSubumit(obj);
       }
@@ -192,17 +195,24 @@ const NodeModal = props => {
           节点信息
         </Divider>
         <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 18 }}>
+          <Form.Item
+            label="序号"
+            name="SerialNo"
+            rules={[{ required: true, message: '请输入序号' }]}
+          >
+            <Input placeholder="请输入序号" />
+          </Form.Item>
           <Form.Item
             label="节点名称"
             name="NodeName"
             rules={[
               { required: true, message: '请输入节点名称' },
-              {
-                validator: (_, value) =>
-                  value.length > 6
-                    ? Promise.reject(new Error('节点名称太长啦~'))
-                    : Promise.resolve(),
-              },
+              // {
+              //   validator: (_, value) =>
+              //     value.length > 12
+              //       ? Promise.reject(new Error('节点名称太长啦~'))
+              //       : Promise.resolve(),
+              // },
             ]}
           >
             <Input placeholder="请输入节点名称（最多6个字）" />