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/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;