feat: 添加onBatchClick回调

src/views/ConsoleLayout/index.tsx

@@ -106,13 +106,12 @@ const ConsoleLayout = observer(() => {
               horizontal: "right",
             }}
           >
-            <Box className={style.topRightItem}>
-              <img
-                src={uploadIcon}
-                alt=""
-                style={{ verticalAlign: "middle" }}
-              />
-            </Box>
+            <img
+              className={style.topRightItem}
+              src={uploadIcon}
+              alt=""
+              style={{ verticalAlign: "middle" }}
+            />
           </MyPopover>
           <Box className={style.topRightItem}>
             <Box

src/views/Project/components/Flow/index.tsx

@@ -24,18 +24,20 @@ import styles from "./index.module.css";
  */
 interface IProps extends ReactFlowProps {
   tasks?: ITask[];
+  /** 点击batch事件 */
+  onBatchClick?: (val: string) => void;
 }
 
 /** 自定义batch节点 */
 const BatchNode = (props: IBatchNode) => {
   const { data } = props;
-  const { dotStatus, style, isFlowNode, label } = data;
+  const { dotStatus, style, isFlowNode, label, selectedStatus } = data;
   return (
     <div
       className={classNames({
         [styles.batchNode]: true,
-        [styles.selectedBatchBox]: false,
-        [styles.selectBatchNode]: false,
+        [styles.selectedBatchBox]: selectedStatus,
+        [styles.selectBatchNode]: selectedStatus,
       })}
       style={style}
     >
@@ -82,7 +84,7 @@ const FlowNode = (props: any) => {
       ) : null}
       <div style={{ display: "flex", alignItems: "center" }}>
         {data?.label || ""}
-        <span className={styles.successDot}></span>
+        {data.isCheck && <span className={styles.successDot}></span>}
       </div>
       {data?.dotStatus?.isOutput ? (
         <Handle
@@ -97,7 +99,7 @@ const FlowNode = (props: any) => {
 };
 
 const Flow = (props: IProps) => {
-  const { tasks } = props;
+  const { tasks, onBatchClick } = props;
   const [selectedNodeId, setSelectedNodeId] = useState<string>("");
   /** 自定义的节点类型 */
   const nodeTypes = useMemo(() => {
@@ -162,7 +164,7 @@ const Flow = (props: IProps) => {
         const val = positionXArr[positionXArr.length - 1] + 150;
         width = val > 176 ? val : width;
       }
-      if (positionXArr?.length) {
+      if (positionYArr?.length) {
         const val = positionYArr[positionYArr.length - 1];
         height = val > 22 ? val : height;
       }
@@ -184,8 +186,15 @@ const Flow = (props: IProps) => {
           type: item.type === "BATCH" ? "batchNode" : "flowNode",
           data: {
             label: item.title || "",
-            /** 是否有流节点 */
-            isFlowNode: isFlowNode(item.id),
+
+            ...(item.type === "BATCH"
+              ? {
+                  /** 是否有流节点 */
+                  isFlowNode: isFlowNode(item.id),
+                  /** 选中状态 */
+                  selectedStatus: selectedNodeId === item.id,
+                }
+              : { isCheck: item.isCheck }),
             /** 输入输出圆点状态 */
             dotStatus: nodesInputAndOutputStatus(item.id),
             /** 样式 */
@@ -201,30 +210,42 @@ const Flow = (props: IProps) => {
         });
       });
     return val;
-  }, [tasks, getBatchStyle, isFlowNode, nodesInputAndOutputStatus]);
+  }, [
+    tasks,
+    isFlowNode,
+    selectedNodeId,
+    nodesInputAndOutputStatus,
+    getBatchStyle,
+  ]);
 
   /** 生成初始化的连线节点 */
   const initialEdges = useMemo(() => {
     const val: ILine[] = [];
     tasks?.length &&
       tasks.forEach((item) => {
-        val.push(...item.edges);
+        item.edges.forEach((every) => {
+          const newLine = {
+            ...every,
+            batchId: item.parentNode ? item.parentNode : item.id,
+          };
+          val.push(newLine);
+        }, []);
       });
     return val.map((item: ILine) => {
       return {
         id: item.id,
         source: item.source,
         target: item.target,
-        type: "step",
-        style: { stroke: "#1370FF" },
-        animated: true,
+        type: "smoothstep",
+        ...(item?.batchId === selectedNodeId
+          ? { style: { stroke: "#1370FF" }, animated: true }
+          : {}),
         labelStyle: { fill: "#8A9099" },
         labelBgStyle: { fill: "#F7F8FA " },
         label: item.label ? `(${item.label})` : "",
-        rectStyle: {},
       };
     });
-  }, [tasks]);
+  }, [selectedNodeId, tasks]);
 
   /** flowNode点击事件 */
   const onNodeClick = (e: any, node: Node) => {
@@ -232,8 +253,10 @@ const Flow = (props: IProps) => {
       if (item.id === node.id) {
         if (item.parentNode) {
           setSelectedNodeId(item.parentNode);
+          onBatchClick && onBatchClick(item.parentNode);
         } else {
           setSelectedNodeId(node.id);
+          onBatchClick && onBatchClick(item.parentNode || "");
         }
       }
     });
@@ -249,7 +272,6 @@ const Flow = (props: IProps) => {
   }, [initialEdges, setEdges]);
 
   useEffect(() => {
-    console.log(initialNodes, "initialNodes");
     setNodes(initialNodes);
   }, [initialNodes, setNodes]);
 

src/views/Project/components/Flow/interface.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-23 11:00:29
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-23 11:19:59
+ * @LastEditTime: 2022-06-27 15:32:29
  * @FilePath: /bkunyun/src/views/Project/components/Flow/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -13,20 +13,29 @@ import { CSSProperties } from "react";
 export interface ILine {
     id: string,
     label: string,
+    batchId?: string,
     source: string,
     target: string,
 }
 
 export interface IDotStatus {
+    /** 是否为输入 */
     isInput: boolean;
+    /** 是否为输出 */
     isOutput: boolean
 }
 
 export interface IBatchNodeData {
+    /** label 文案 */
     label: string;
+    /** 是否存在flow节点 */
     isFlowNode: boolean;
+    /** 连线圆点状态 */
     dotStatus: IDotStatus;
+    /** 样式 */
     style?: CSSProperties;
+    /** 是否选中状态 */
+    selectedStatus?: boolean;
 }
 export interface IBatchNode {
     data: IBatchNodeData