fix: 优化规则弹窗样式，添加规则验证

src/components/RuleConfig/index.jsx

@@ -2,12 +2,13 @@
  * @Author: dengchao 754083046@qq.com
  * @Date: 2022-11-02 14:37:53
  * @LastEditors: dengchao 754083046@qq.com
- * @LastEditTime: 2022-11-07 11:48:08
+ * @LastEditTime: 2022-11-07 17:32:35
  * @FilePath: \maintenance\src\components\RuleConfig\index.jsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import React, { useEffect, useState, useRef } from 'react';
-import { Modal, Input, Form } from 'antd';
+import { RuleValidation } from '@/services/workflow/workflow';
+import { Modal, Input, Form, message } from 'antd';
 import styles from './index.less';
 import Tree from '@/components/ExpendableTree';
 const { TextArea } = Input;
@@ -31,7 +32,13 @@ const RuleConfig = props => {
   }, [visible]);
   // 保存线配置
   const onSave = () => {
-    onSubumit(rule);
+    RuleValidation({ ruleContent: rule }).then(res => {
+      if (res.data) {
+        onSubumit(rule);
+      } else {
+        message.error('请检查规则是否正确');
+      }
+    });
   };
   // 处理树数据
   const mapTree = (val, index) => ({
@@ -84,20 +91,26 @@ const RuleConfig = props => {
                 onChange={e => setRule(e.target.value)}
               />
             </div>
-            <div className={styles.tipBox}>
-              <p>请从左侧面板选择字段或选项</p>
-              <p>{'支持英文模式下运算符（+、-、*、/、>、<、==、!=、<=、>=）及函数'}</p>
-              {flag == 1 ? (
+            <ul className={styles.tipBox}>
+              <li>
+                <p>请从左侧面板选择字段或选项</p>
+                <p>
+                  {'支持'} <i>英文</i> {'模式下运算符（+、-、*、/、>、<、==、!=、<=、>=）及函数'}
+                </p>
+              </li>
+
+              {flag === 1 ? (
                 <>
-                  {' '}
-                  <p>参考场景：</p>
-                  <p>当报销金额大于10000时，才能进入所选节点，则可将流转条件设置为：</p>
-                  <p>{'报销金额>10000'}</p>
+                  <li>
+                    <p>参考场景：</p>
+                    <p>当报销金额大于10000时，才能进入所选节点，则可将流转条件设置为：</p>
+                    <p>{'报销金额>10000'}</p>
+                  </li>
                 </>
               ) : (
-                <p>{`示例：{表名.是否缴费} = ‘是’ and {表名.缴费金额} > 1000`}</p>
+                <li>{`示例：{表名.是否缴费} = ‘是’ and {表名.缴费金额} > 1000`}</li>
               )}
-            </div>
+            </ul>
           </div>
         </div>
       </Modal>

src/components/RuleConfig/index.less

@@ -10,6 +10,14 @@
   }
 
   .rightContent {
+    .title {
+      width: 100%;
+      background-color: #80C3FF;
+      font-size: 18px;
+      font-weight: 700;
+      padding: 5px 10px;
+    }
+
     .textAreaBox {
       // height: 400px;
       // overflow-y: scroll;
@@ -19,5 +27,22 @@
         border: 1px solid #ccc;
       }
     }
+
+    .tipBox {
+      li {
+        list-style: disc;
+        color: #AEAEAE;
+      }
+
+      i {
+        font-style: normal;
+        color: red;
+      }
+
+      p {
+        margin-bottom: 0;
+        color: #AEAEAE;
+      }
+    }
   }
 }
\ No newline at end of file

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

@@ -79,7 +79,7 @@ const FlowChart = props => {
         }
         if (n.data.LineKey) {
           setTimeout(() => {
-            setDeleteLine(n.data.LineKey);
+            setDeleteLine(n.data.LineId);
           }, 0);
         }
       });
@@ -113,13 +113,10 @@ const FlowChart = props => {
       setAddNodes([]);
       setDeleteNode('');
       setDeleteLine('');
-      console.log(flowData, 'flowData');
-      let dataList = JSON.parse(JSON.stringify(flowData));
 
-      dataList.Lines.forEach(item => {
-        item.text = '';
-        item.lineDetail = JSON.stringify(item);
-      });
+      let dataList = lodash.cloneDeep(flowData);
+      console.log(dataList, 'dataList');
+
       setCurrentFlowData(dataList);
       setShowLeaveTip(false);
     }
@@ -128,7 +125,7 @@ const FlowChart = props => {
   useEffect(() => {
     let nodeDataArray = [];
     let linkDataArray = [];
-
+    console.log(currentFlowData, 'currentFlowData');
     // 处理老数据，让老数据可以正常展示
     nodeDataArray = currentFlowData.Nodes.map((item, index) => {
       let obj;
@@ -148,7 +145,6 @@ const FlowChart = props => {
     linkDataArray = currentFlowData.Lines.map(item => {
       let obj;
       obj = item;
-
       obj.LineKey = item.LineId;
       obj.lineDetail = JSON.stringify(obj);
       return obj;
@@ -171,7 +167,7 @@ const FlowChart = props => {
     });
     // 修改复制后节点内容
     diagram.model.copyNodeDataFunction = (obj, model) => {
-      let copyObj = JSON.parse(JSON.stringify(obj));
+      let copyObj = lodash.cloneDeep(obj);
       delete copyObj.ActivityId;
       return copyObj;
     };
@@ -478,13 +474,10 @@ const FlowChart = props => {
   };
   // 线上的文案
   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 '';
@@ -659,8 +652,8 @@ const FlowChart = props => {
     leaveTip();
   };
   // 节点配置回调
-  const nodeCallBack = obj => {
-    console.log(obj, 'obj');
+  const nodeCallBack = (obj, nextlinkNodes) => {
+    console.log(obj, nextlinkNodes, 'obj');
     let nameIsRepeat;
     let { nodes } = diagram;
     let keyArr = [];
@@ -726,14 +719,18 @@ const FlowChart = props => {
     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.LineKey);
-        node.text = item.RuleName;
-        diagram.model.updateTargetBindings(node);
-      }
+      let node = diagram.model.findLinkDataForKey(item.LineKey);
+      node.text = item.RuleName;
+      diagram.model.updateTargetBindings(node);
+      // if (
+      //   item.from === nodeData.NodeId &&
+      //   nodeData.RuleList.some(ele => ele.NextNodeId === item.to)
+      // ) {
+      //   let node = diagram.model.findLinkDataForKey(item.LineKey);
+      //   node.text = item.RuleName;
+      //   diagram.model.updateTargetBindings(node);
+      // } else {
+      // }
     });
     // }
     // 关闭时进行数据比对看数据是否改变
@@ -776,7 +773,8 @@ const FlowChart = props => {
         // 保存后离开不用提醒要修改数据了
         setShowLeaveTip(false);
         leaveCallBack(false);
-        setCurrentFlowData(res.data);
+        console.log(JSON.parse(JSON.stringify(res.data)), 'res.data');
+        setCurrentFlowData(JSON.parse(JSON.stringify(res.data)));
       } else {
         notification.error({
           title: '提示',
@@ -910,7 +908,7 @@ const FlowChart = props => {
         nodeNum={nodeLength}
         modalType={modalType}
         handleCancel={() => setVisible(false)}
-        onSubumit={obj => nodeCallBack(obj)}
+        onSubumit={(obj, nextlinkNodes) => nodeCallBack(obj, nextlinkNodes)}
         flowData={diagram ? JSON.parse(diagram.model.toJson()) : {}}
       />
       <LineModal

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

@@ -247,7 +247,8 @@ const NodeModal = props => {
           nodeDetail,
           RuleList,
         };
-        onSubumit(obj);
+        console.log(nextlinkNodes.current);
+        onSubumit(obj, nextlinkNodes.current);
       }
     });
   };

src/services/workflow/workflow.js

@@ -21,3 +21,5 @@ export const DeleteFlow = param => get(`${PUBLISH_SERVICE}/WorkFlow/DeleteFlow`,
 // 获取流程节点级字段
 export const GetFormDataSource = param =>
   get(`${PUBLISH_SERVICE}/WorkFlow/GetFormDataSource`, param);
+// 规则效验
+export const RuleValidation = param => get(`${PUBLISH_SERVICE}/WorkFlow/RuleValidation`, param);