fix: 修改工作流编辑器交互方式，节点字体

src/pages/bsmanager/workOrder/workflowEdit/Workflow.jsx

@@ -48,7 +48,6 @@ const Workflow = () => {
   }, []);
   useEffect(() => {
     if (flag === 2) {
-      console.log(treeData, 'treeData');
       if (treeData.length === 0) {
         return;
       }
@@ -64,10 +63,9 @@ const Workflow = () => {
           res.data.Nodes.forEach(item => {
             item.nodeDetail = JSON.stringify(item);
           });
-          console.log(res.data, 'res.dasta');
-          setFlowData(res.data);
+          setFlowData({ ...res.data, flowName: treeData[0].children[0].FlowName });
         } else {
-          setFlowData({ Nodes: [], Lines: [] });
+          setFlowData({ Nodes: [], Lines: [], flowName: '' });
           notification.error({
             title: '提示',
             duration: 3,
@@ -182,6 +180,8 @@ const Workflow = () => {
     // 组节点不触发选中
     if (prop[0]) {
       // 选中节点处理
+
+      setTreeVisible(false);
       setCurrentSelectId(prop[0]);
       setTreeId(prop[0]);
       setChartLoading(true);
@@ -191,9 +191,9 @@ const Workflow = () => {
           res.data.Nodes.forEach(item => {
             item.nodeDetail = JSON.stringify(item);
           });
-          setFlowData(res.data);
+          setFlowData({ ...res.data, flowName: treeNode.node.flowName });
         } else {
-          setFlowData({ Nodes: [], Lines: [] });
+          setFlowData({ Nodes: [], Lines: [], flowName: '' });
           notification.error({
             title: '提示',
             duration: 3,
@@ -208,7 +208,8 @@ const Workflow = () => {
   // 点击节点树触发
   const onSelect = (prop, treeNode) => {
     // 如果没有保存弹是否保存弹窗
-    if (!canSelect) {
+
+    if (!canSelect && !treeNode.node.children) {
       confirm({
         title: '已编辑流程未发布，确定要离开吗？',
         icon: <ExclamationCircleOutlined />,
@@ -272,6 +273,7 @@ const Workflow = () => {
           </div>
         </div>
       ),
+      flowName: obj.FlowName,
       key: obj.FlowID,
     };
   };
@@ -341,6 +343,7 @@ const Workflow = () => {
         <div className={styles.flowChartContainer}>
           {currentSelectId ? (
             <FlowChart
+              treeVisible={treeVisible}
               flowData={flowData}
               flowID={currentSelectId}
               chartLoading={chartLoading}

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

@@ -24,7 +24,7 @@ let myPaletteNode = null;
 let myPaletteGateway = null;
 let myOverview = null;
 const FlowChart = props => {
-  const { flowData, flowID, chartLoading, leaveCallBack } = props;
+  const { flowData, flowID, chartLoading, leaveCallBack, msg, treeVisible } = props;
   const [visible, setVisible] = useState(false);
   const [lineVisible, setLineVisible] = useState(false);
   const [editMsg, setEditMsg] = useState({}); // 编辑节点的信息
@@ -46,6 +46,12 @@ const FlowChart = props => {
   const [newSerialNo, setNewSerialNo] = useState(0);
   const [buttonLoading, setButtonLoading] = useState(); // 发布按钮保存loading
   const objGo = go.GraphObject.make;
+  useEffect(() => {
+    if (treeVisible) {
+      setVisible(false);
+    }
+  }, [treeVisible]);
+
   // 监听删除，给删除数组里添加删除id
   useEffect(() => {
     if (deleteLine) {
@@ -132,6 +138,7 @@ const FlowChart = props => {
   }, []);
   useEffect(() => {
     if (flowData) {
+      console.log(flowData, 'msgmsgmsg');
       // 每次切换时清空删除得id数组跟新增得id数组
       setDeleteNodes([]);
       setDeleteLines([]);
@@ -144,13 +151,14 @@ const FlowChart = props => {
 
       setCurrentFlowData(dataList);
       setShowLeaveTip(false);
+      setVisible(false);
     }
   }, [flowData]);
   // 存入在树形流程中选择得流程数据
   useEffect(() => {
     let nodeDataArray = [];
     let linkDataArray = [];
-    console.log(currentFlowData, 'currentFlowData');
+
     // 处理老数据，让老数据可以正常展示
     nodeDataArray = currentFlowData.Nodes.map((item, index) => {
       let obj;
@@ -178,7 +186,7 @@ const FlowChart = props => {
       obj.lineDetail = JSON.stringify(obj);
       return obj;
     });
-    console.log(linkDataArray, 'linkDataArray');
+
     // 保存初始数据
     setInitFlowData(
       JSON.parse(
@@ -470,7 +478,7 @@ const FlowChart = props => {
                 alignment: go.Spot.Center,
                 margin: new go.Margin(0, 10, 0, 10),
                 overflow: go.TextBlock.OverflowEllipsis,
-                font: 'normal 12pt serif',
+                font: 'normal 12pt Microsoft YaHei',
               },
               new go.Binding('visible', 'NodeType', v => {
                 if (v.NodeType === '20' || v.NodeType === '21' || v.NodeType === '22') {
@@ -488,10 +496,10 @@ const FlowChart = props => {
                 alignment: go.Spot.Center,
                 maxLines: 2,
                 overflow: go.TextBlock.OverflowEllipsis,
-                font: 'normal 12pt serif',
+                font: 'normal 12pt Microsoft YaHei',
               },
-              new go.Binding('spacingAbove', 'roleList', v => (v?.length > 0 ? 10 : 0)),
-              new go.Binding('height', 'roleList', v => (v?.length > 0 ? 20 : 0)),
+              new go.Binding('spacingAbove', 'roleList', v => (v?.length > 0 ? 5 : 0)),
+              new go.Binding('height', 'roleList', v => (v?.length > 0 ? 30 : 0)),
               new go.Binding('margin', 'roleList', v =>
                 v?.length > 0 ? new go.Margin(10, 10, 0, 10) : 0,
               ),
@@ -605,7 +613,7 @@ const FlowChart = props => {
           go.TextBlock,
           {
             textAlign: 'center',
-            font: '10pt helvetica, arial, sans-serif',
+            font: '10pt helvetica, arial, Microsoft YaHei',
             stroke: '#555555',
             margin: 4,
           },
@@ -631,10 +639,10 @@ const FlowChart = props => {
 
   // 线的样式
   const lineStyle = (v, styleName) => {
-    const msg = diagram.model.findNodeDataForKey(v);
+    const linemsg = diagram.model.findNodeDataForKey(v);
     switch (styleName) {
       case 'strokeDashArray':
-        if (msg.NodeType === '20') {
+        if (linemsg.NodeType === '20') {
           return [6, 3];
         }
         return null;
@@ -772,7 +780,6 @@ const FlowChart = props => {
   };
   // 双击线
   const addLineMsg = (e, node) => {
-    console.log(node.part.data, 'node.part.data');
     setLineKey(node.part.data.LineKey);
     setLineMsg(node.part.data);
     setLineVisible(true);
@@ -780,7 +787,7 @@ const FlowChart = props => {
   // 新增节点
   const addNode = type => {
     const list = JSON.parse(diagram.model.toJson()).nodeDataArray;
-    console.log(list, 'list');
+
     let newNum;
     let newKey;
 
@@ -816,7 +823,7 @@ const FlowChart = props => {
       default:
         break;
     }
-    console.log(newNum, newKey);
+
     setNewSerialNo(newNum);
     // 新增节点
     // 新增得key比最大得key值+1
@@ -839,7 +846,6 @@ const FlowChart = props => {
   };
   // 节点配置回调
   const nodeCallBack = (obj, nextlinkNodes) => {
-    console.log(obj, nextlinkNodes, 'obj');
     let nameIsRepeat;
     let { nodes } = diagram;
     let keyArr = [];
@@ -885,7 +891,7 @@ const FlowChart = props => {
     nodeData.RuleList = RuleList;
     nodeData.CarbonCopyPeopleList = CarbonCopyPeopleList;
     diagram.model.updateTargetBindings(nodeData);
-    console.log(nodeData, 'nodeData');
+
     // 给线上添加文字
     let diagramObj = JSON.parse(diagram.model.toJson());
 
@@ -896,7 +902,7 @@ const FlowChart = props => {
     });
     // 关闭时进行数据比对看数据是否改变
     leaveTip();
-    setVisible(false);
+    // setVisible(false);
   };
   // 关闭时进行数据比对看数据是否改变
   const leaveTip = () => {
@@ -930,7 +936,7 @@ const FlowChart = props => {
         // 保存后离开不用提醒要修改数据了
         setShowLeaveTip(false);
         leaveCallBack(false);
-        console.log(JSON.parse(JSON.stringify(res.data)), 'res.data');
+
         setCurrentFlowData(JSON.parse(JSON.stringify(res.data)));
       } else {
         notification.error({
@@ -1007,6 +1013,7 @@ const FlowChart = props => {
         });
       });
   };
+
   return (
     <>
       <Prompt message="编辑的内容还未保存，确定要离开该页面吗?" when={showLeaveTip} />
@@ -1035,6 +1042,7 @@ const FlowChart = props => {
       </div>
       <div className={styles.chartBox}>
         <div id="myOverviewDiv" className={styles.myOverviewDiv} />
+        <div className={styles.flowName}>{flowData.flowName}</div>
         <Spin spinning={chartLoading}>
           <div
             id="myDiagramDiv"

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

@@ -63,23 +63,33 @@ const NodeModal = props => {
     RuleList: {},
     CarbonCopyPeopleList: {},
   });
-  const [CarbonCopyPeopleList, setCarbonCopyPeopleList] = useState([]);
-  const [RuleList, setRuleList] = useState([]); // 规则配置列表
-  const [flag, setFlag] = useState(0);
+  // const [CarbonCopyPeopleList, setCarbonCopyPeopleList] = useState([]); // 抄送人列表
+  // const [RuleList, setRuleList] = useState([]); // 规则配置列表
+  const [flag, setFlag] = useState(0); // 用于刷新界面
   const [fieldList, setFieldList] = useState([]); // 当规则字段
   const allFieldList = useRef([]);
   const nextlinkNodes = useRef([]);
   const previousLinkNodes = useRef([]);
+  const RuleList = useRef([]); // 规则配置列表
+  const CarbonCopyPeopleList = useRef([]); // 抄送人列表
   const talbeList = useRef([]);
   useEffect(() => {
     form.resetFields();
+    nextlinkNodes.current = [];
+    previousLinkNodes.current = [];
+    talbeList.current = [];
+    RuleList.current = [];
+
+    CarbonCopyPeopleList.current = [];
     if (visible) {
       console.log(editMsg, 'editMsg');
       // 获取网关连接的节点
       if (editMsg.NodeType === '21' || editMsg.NodeType === '20') {
         getNextLinkNodes(editMsg.key);
+
         // getPreviousLinkNodes(editMsg.key);
-        setRuleList(editMsg.RuleList);
+        // setRuleList(editMsg.RuleList);
+        RuleList.current = editMsg.RuleList;
 
         // 获取表数据
         GetFormDataSource({ flowID }).then(res => {
@@ -98,10 +108,13 @@ const NodeModal = props => {
             // }
           });
           talbeList.current = [...list];
+          console.log(nextlinkNodes.current, 'nextlinkNodes.current');
           setFlag(flag + 1);
         });
       } else {
-        setCarbonCopyPeopleList(editMsg.CarbonCopyPeopleList);
+        // setCarbonCopyPeopleList(editMsg.CarbonCopyPeopleList);
+        CarbonCopyPeopleList.current = editMsg.CarbonCopyPeopleList;
+        setFlag(flag + 1);
       }
 
       getFormData();
@@ -110,10 +123,13 @@ const NodeModal = props => {
       nextlinkNodes.current = [];
       previousLinkNodes.current = [];
       talbeList.current = [];
-      setRuleList([]);
-      setCarbonCopyPeopleList([]);
+
+      RuleList.current = [];
+
+      CarbonCopyPeopleList.current = [];
+      setFlag(flag + 1);
     }
-  }, [visible]);
+  }, [visible, editMsg]);
   const SectionToChinese = section => {
     let strIns = '';
     let chnStr = '';
@@ -212,28 +228,27 @@ const NodeModal = props => {
       NodeHandling: NodeHandling || NodeHandling === 0 ? NodeHandling : 1,
     });
     setNodeMsg(editMsg);
-    setFlag(flag + 1);
   };
   // 提交表单
   const onFinish = () => {
     // 规则填写校验
 
-    for (let i = 0; i < RuleList.length; i++) {
-      if (!RuleList[i].RuleName) {
+    for (let i = 0; i < RuleList.current.length; i++) {
+      if (!RuleList.current[i].RuleName) {
         message.error('请填写规则名称');
         return;
       }
-      if (!RuleList[i].NextNodeId && RuleList[i].NextNodeId !== 0) {
+      if (!RuleList.current[i].NextNodeId && RuleList[i].NextNodeId !== 0) {
         message.error('请选择需要流转的节点');
         return;
       }
-      if (!RuleList[i].RuleContent) {
+      if (!RuleList.current[i].RuleContent) {
         message.error('请填写规则');
         return;
       }
     }
-    const newListLength = new Set(RuleList.map(item => item.NextNodeId)).size;
-    if (RuleList.length > newListLength) {
+    const newListLength = new Set(RuleList.current.map(item => item.NextNodeId)).size;
+    if (RuleList.current.length > newListLength) {
       message.error('规则流转到的节点不能重复');
       return;
     }
@@ -251,8 +266,8 @@ const NodeModal = props => {
           NodeType: nodeMsg.NodeType,
           roleList: nodeMsg.roleList,
           nodeDetail,
-          RuleList,
-          CarbonCopyPeopleList,
+          RuleList: RuleList.current,
+          CarbonCopyPeopleList: CarbonCopyPeopleList.current,
         };
         console.log(nextlinkNodes.current);
         onSubumit(obj, nextlinkNodes.current);
@@ -263,8 +278,19 @@ const NodeModal = props => {
   const delUser = (record, index) => {
     let roleList = [...nodeMsg.roleList];
     roleList.splice(index, 1);
-    let nodeDetail = JSON.stringify({ ...nodeMsg, roleList, RuleList, CarbonCopyPeopleList });
-    setNodeMsg({ ...nodeMsg, roleList, nodeDetail, RuleList, CarbonCopyPeopleList });
+    let nodeDetail = JSON.stringify({
+      ...nodeMsg,
+      roleList,
+      RuleList: RuleList.current,
+      CarbonCopyPeopleList: CarbonCopyPeopleList.current,
+    });
+    setNodeMsg({
+      ...nodeMsg,
+      roleList,
+      nodeDetail,
+      RuleList: RuleList.current,
+      CarbonCopyPeopleList: CarbonCopyPeopleList.current,
+    });
   };
   // 添加角色或机构
   const addUser = selectList => {
@@ -272,10 +298,16 @@ const NodeModal = props => {
     let nodeDetail = JSON.stringify({
       ...nodeMsg,
       roleList: selectList,
-      RuleList,
-      CarbonCopyPeopleList,
+      RuleList: RuleList.current,
+      CarbonCopyPeopleList: CarbonCopyPeopleList.current,
+    });
+    setNodeMsg({
+      ...nodeMsg,
+      roleList: selectList,
+      nodeDetail,
+      RuleList: RuleList.current,
+      CarbonCopyPeopleList: CarbonCopyPeopleList.current,
     });
-    setNodeMsg({ ...nodeMsg, roleList: selectList, nodeDetail, RuleList, CarbonCopyPeopleList });
     setShowRoal(false);
   };
   // 添加默认承办人
@@ -298,42 +330,49 @@ const NodeModal = props => {
   // 添加规则
   const addRule = () => {
     console.log(fieldList, 'fieldList');
+    console.log(nextlinkNodes.current, RuleList.current, 'nextlinkNodes.current');
     if (nextlinkNodes.current.length === 0) {
       message.error('请连接需要添加规则的节点');
       return;
     }
-    if (RuleList.length === nextlinkNodes.current.length) {
+    if (RuleList.current.length === nextlinkNodes.current.length) {
       message.error('请连接需要添加规则的节点');
       return;
     }
-    let list = JSON.parse(JSON.stringify(RuleList));
+    let list = JSON.parse(JSON.stringify(RuleList.current));
     list.push({ RuleContent: '', NextNodeId: '', TableNames: '', RuleName: '' });
-    setRuleList(list);
+    // setRuleList(list);
+    RuleList.current = list;
+    setFlag(flag + 1);
   };
   // 删除规则
   const deleRule = index => {
-    let list = JSON.parse(JSON.stringify(RuleList));
+    let list = JSON.parse(JSON.stringify(RuleList.current));
     list.splice(index, 1);
-    setRuleList(list);
+    // setRuleList(list);
+    RuleList.current = list;
+    setFlag(flag + 1);
   };
   // 规则回填
   const saveRule = e => {
-    let list = JSON.parse(JSON.stringify(RuleList));
+    let list = JSON.parse(JSON.stringify(RuleList.current));
     console.log(e);
     list[ruleIndex].RuleContent = e;
     console.log(list, 'listlist');
-    setRuleList(list);
+    // setRuleList(list);
+    RuleList.current = list;
     setShowRule(false);
   };
   // 选择人员回填
   const savePerson = e => {
     console.log(e);
-    setCarbonCopyPeopleList(e);
+    // setCarbonCopyPeopleList(e);
+    CarbonCopyPeopleList.current = e;
     setShowPersonSelect(false);
   };
   // 网关表单配置监听
   const formChage = (e, index, field) => {
-    let list = lodash.cloneDeep(RuleList);
+    let list = lodash.cloneDeep(RuleList.current);
     if (field === 'TableNames') {
       list[index][field] = e.join(',');
     }
@@ -344,7 +383,9 @@ const NodeModal = props => {
       list[index][field] = e;
     }
 
-    setRuleList(list);
+    // setRuleList(list);
+    RuleList.current = list;
+    setFlag(flag + 1);
   };
   // 配置当前规则
   const editRule = (msg, index) => {
@@ -483,8 +524,9 @@ const NodeModal = props => {
         width={550}
         onClose={handleCancel}
         visible={visible}
+        mask={false}
         bodyStyle={{ paddingBottom: 20 }}
-        zIndex={10}
+        zIndex={19}
         footer={
           <Space>
             <Button onClick={handleCancel}>取消</Button>
@@ -638,12 +680,12 @@ const NodeModal = props => {
           <div className={styles.buttonBox} onClick={() => editCC()}>
             <div
               className={styles.setButton}
-              style={{ textAlign: CarbonCopyPeopleList.length > 0 ? 'left' : 'center' }}
+              style={{ textAlign: CarbonCopyPeopleList.current.length > 0 ? 'left' : 'center' }}
             >
-              <Tooltip title={CarbonCopyPeopleList.map(item => item.label).join(',')}>
+              <Tooltip title={CarbonCopyPeopleList.current.map(item => item.label).join(',')}>
                 <span>
-                  {CarbonCopyPeopleList.length > 0
-                    ? CarbonCopyPeopleList.map(item => item.label).join(',')
+                  {CarbonCopyPeopleList.current.length > 0
+                    ? CarbonCopyPeopleList.current.map(item => item.label).join(',')
                     : '选择抄送人'}
                 </span>
               </Tooltip>
@@ -684,7 +726,7 @@ const NodeModal = props => {
             添加规则
           </div>
           <div className={styles.ruleContent}>
-            {RuleList.map((item, index) => (
+            {RuleList.current.map((item, index) => (
               <div className={styles.ruleBox} key={index}>
                 <div className={styles.ruleTitle}>
                   <div className={styles.textContet}>规则{NumberToChinese(index + 1)}</div>
@@ -772,7 +814,7 @@ const NodeModal = props => {
         onSubumit={addUnderTaker}
       />
       <RuleConfig
-        RuleContent={RuleList[ruleIndex]?.RuleContent}
+        RuleContent={RuleList.current[ruleIndex]?.RuleContent}
         fieldList={fieldList}
         visible={showRule}
         handleCancel={() => setShowRule(false)}
@@ -781,7 +823,7 @@ const NodeModal = props => {
       />
       <PeopleSelector
         visible={showPersonSelect}
-        personList={CarbonCopyPeopleList}
+        personList={CarbonCopyPeopleList.current}
         onCancel={() => setShowPersonSelect(false)}
         onSubumit={e => savePerson(e)}
       />

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/RoalChoose.jsx

@@ -187,7 +187,7 @@ const RoalChoose = props => {
         maskClosable={false}
         destroyOnClose
         getContainer={false}
-        zIndex={11}
+        zIndex={20}
       >
         <div className={styles.pageContent}>
           {/* 可选列表 */}

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

@@ -106,11 +106,23 @@
       position: relative;
       height: calc(100% - 52px);
 
+      .flowName {
+        position: absolute;
+
+        top: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 24px;
+        font-weight: 700;
+        color: #1585FF;
+        z-index: 9;
+      }
+
       .myOverviewDiv {
         position: absolute;
         height: 150px;
         width: 300px;
-        right: 0;
+        left: 0;
         bottom: 0;
         background-color: #ccc;
         z-index: 9;