fix: 修改流程图超出样式

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

@@ -152,6 +152,7 @@ const WorkflowHomePage = () => {
             flowID: val.FlowID,
             chartLoading: false,
             activeKey: activeKey.current,
+            flowTree: flowList,
           },
         });
       } else {

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

@@ -209,11 +209,10 @@
             align-items: center;
             width: 100%;
             margin-top: 1px;
-
+            height: 130px;
+            overflow: hidden;
             img {
-              width: 230px;
-              // height: 125px;
-              // height: 350px;
+              width: 320px;
             }
           }
 

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

@@ -8,7 +8,7 @@ const FlowBoard = () => {
   const history = useHistory();
   useEffect(() => {}, []);
 
-  const { flowData, flowID, chartLoading, activeKey } = history.location.state;
+  const { flowData, flowID, chartLoading, activeKey, flowTree } = history.location.state;
   return (
     <div className={styles.flowChartContainer}>
       <FlowChart
@@ -16,6 +16,7 @@ const FlowBoard = () => {
         flowID={flowID}
         chartLoading={chartLoading}
         activeKey={activeKey}
+        flowTree={flowTree}
       />
     </div>
   );

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/FlowBoard.less

@@ -24,8 +24,8 @@
 
       .myOverviewDiv {
         position: absolute;
-        height: 150px;
-        width: 300px;
+        height: 142px;
+        width: 234px;
         left: 0;
         bottom: 0;
         background-color: #ccc;

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

 /* eslint-disable global-require */
 import React, { useState, useEffect, useRef } from 'react';
 import { useHistory, Prompt } from 'react-router-dom';
-import { Button, Modal, notification, Spin, Tooltip, message } from 'antd';
+import { Button, Modal, notification, Spin, Empty, Tooltip, message, TreeSelect } from 'antd';
 import lodash from 'lodash';
 import {
   SaveNodeChange,
@@ -28,6 +28,7 @@ import gatewayParallel from '@/assets/images/workFlow/gatewayParallel.svg';
 import gatewayJoin from '@/assets/images/workFlow/gatewayJoin.svg';
 
 const { confirm } = Modal;
+const { TreeNode } = TreeSelect;
 let diagram = null;
 let myPaletteNode = null;
 let myPaletteGateway = null;
@@ -36,7 +37,7 @@ let myOverview = null;
 const FlowChart = props => {
   const history = useHistory();
 
-  const { flowData, flowID, chartLoading, msg, treeVisible, activeKey } = props;
+  const { flowData, flowID, chartLoading, msg, treeVisible, activeKey, flowTree } = props;
   const [visible, setVisible] = useState(false);
   const [lineVisible, setLineVisible] = useState(false);
   const [editMsg, setEditMsg] = useState({}); // 编辑节点的信息
@@ -56,6 +57,7 @@ const FlowChart = props => {
   }); // 组件内得流程图数据
   const [showLeaveTip, setShowLeaveTip] = useState(false); // 离开路由是否又提醒
   const [buttonLoading, setButtonLoading] = useState(); // 发布按钮保存loading
+  const [selectValue, setSelectValue] = useState();
   const [flag, setFlag] = useState(0);
   const currentNode = useRef();
   const afterNodes = useRef(new Map([])); // 当前节点后所有节点
@@ -1228,7 +1230,28 @@ const FlowChart = props => {
       }
     });
   };
+  const treeChange = newValue => {
+    setSelectValue(newValue);
+  };
+  const mapAppTree = org => {
+    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
+    let value;
+    let text;
+    if (org.name) {
+      value = org.name;
+      text = org.name;
+    }
+    if (org.Code) {
+      value = org.Code;
+      text = org.FlowName;
+    }
 
+    return (
+      <TreeNode value={value} title={text} key={value} disabled={org.name}>
+        {haveChildren ? org.children.map(item => mapAppTree(item)) : null}
+      </TreeNode>
+    );
+  };
   return (
     <>
       <Prompt message="编辑的内容还未保存，确定要离开该页面吗?" when={showLeaveTip} />
@@ -1253,6 +1276,25 @@ const FlowChart = props => {
           {/* <Button type="link" onClick={() => copyNode()}>
             复制
           </Button> */}
+          {/* <Button type="link" onClick={() => copyNode()}>
+            <TreeSelect
+              value={selectValue}
+              showSearch
+              style={{ width: '200px' }}
+              treeNodeFilterProp="title"
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              placeholder="请选择流程"
+              treeDefaultExpandAll
+              onChange={treeChange}
+              treeIcon
+            >
+              {flowTree ? (
+                flowTree.map(item => mapAppTree(item))
+              ) : (
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+              )}
+            </TreeSelect>
+          </Button> */}
           <Button
             onClick={() =>
               history.push({