init

src/pages/Container/Enterprise/HotWork/Homework/List/index.js

@@ -213,11 +213,29 @@ function FlowModalComponent(props) {
   const [flowEdges, setFlowEdges] = useState([]);
 
   const getData = async () => {
+    // 模拟分叉流程数据
+    // 主线流程：申请人提报 → 部门审批 → 安全部门审批 → 审批通过
+    // 分支流程：从"部门审批"分出"值班领导审批"，分支结束后汇入"安全部门审批"
     const data = {
       flowCOList: [
+        // 节点0：申请人提报
         { status: 1, flowList: ["申请人提报", "张三", "2024-01-15 09:30"] },
-        { status: 2, flowList: ["部门审批", "李四"], type: 1, thisFlow: 1 },
+        // 节点1：部门审批（从这里开始分叉）
+        {
+          status: 2,
+          type: 1,
+          flowList: ["部门审批", "李四"],
+          branches: [
+            {
+              status: 2,
+              flowList: ["值班领导审批", "赵六"],
+              mergeIndex: 2, // 分支结束后汇入到节点2（安全部门审批）
+            },
+          ],
+        },
+        // 节点2：安全部门审批（分支汇入点）
         { status: 2, flowList: ["安全部门审批", "王五"] },
+        // 节点3：审批通过
         { status: 2, flowList: ["审批通过", "系统"] },
       ],
       thisFlow: 1,

src/utils/flow.js

@@ -30,16 +30,21 @@ export const getFlowData = (list, thisFlow) => {
   const nodes = [];
   const edges = [];
 
-  // 计算节点位置以居中显示
+  // 节点尺寸和间距
   const nodeWidth = 300;
   const nodeHeight = 200;
   const horizontalSpacing = 350;
-  const verticalPosition = 100;
+  const verticalSpacing = 300;
 
-  // 创建节点
+  // 收集分支信息
+  const branchInfos = [];
+
+  // 第一遍：创建主线节点
   list.forEach((flowItem, index) => {
+    const nodeId = `node-${index}`;
+
     nodes.push({
-      id: `node-${index}`,
+      id: nodeId,
       data: {
         label: getNodeLabel(flowItem),
         status: flowItem.status,
@@ -59,11 +64,25 @@ export const getFlowData = (list, thisFlow) => {
         justifyContent: "center",
         textAlign: "center",
       },
-      position: { x: index * horizontalSpacing, y: verticalPosition },
+      position: { x: index * horizontalSpacing, y: 100 },
     });
 
+    // 记录分支信息
+    if (flowItem.branches && flowItem.branches.length > 0) {
+      flowItem.branches.forEach((branch, branchIdx) => {
+        branchInfos.push({
+          startIndex: index,
+          branchIndex: branchIdx,
+          branch,
+          mergeIndex: branch.mergeIndex,
+        });
+      });
+    }
+
+    // 创建主线边
+    if (index < list.length - 1) {
       edges.push({
-      id: `edge-${index}`,
+        id: `edge-main-${index}`,
         source: `node-${index}`,
         target: `node-${index + 1}`,
         type: "smoothstep",
@@ -74,6 +93,73 @@ export const getFlowData = (list, thisFlow) => {
           color: "#1890ff",
         },
       });
+    }
+  });
+
+  // 第二遍：创建分支节点
+  branchInfos.forEach((info) => {
+    const { startIndex, branchIndex, branch, mergeIndex } = info;
+    const branchNodeId = `branch-${startIndex}-${branchIndex}`;
+
+    // 计算分支节点位置：在分叉节点和汇入节点中间，下方
+    const startX = startIndex * horizontalSpacing;
+    const mergeX = mergeIndex * horizontalSpacing;
+    const branchX = (startX + mergeX) / 2;
+    const branchY = 100 + verticalSpacing;
+
+    nodes.push({
+      id: branchNodeId,
+      data: {
+        label: getNodeLabel(branch),
+        status: branch.status,
+      },
+      style: {
+        background: getStatusColor(branch.status, branch.type, thisFlow),
+        color: "white",
+        borderColor: getStatusColor(branch.status, branch.type, thisFlow),
+        width: nodeWidth,
+        minHeight: nodeHeight,
+        padding: "10px",
+        borderRadius: 5,
+        wordBreak: "break-word",
+        whiteSpace: "normal",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+      },
+      position: { x: branchX, y: branchY },
+    });
+
+    // 从分叉节点连接到分支节点
+    edges.push({
+      id: `edge-branch-start-${startIndex}-${branchIndex}`,
+      source: `node-${startIndex}`,
+      target: branchNodeId,
+      type: "smoothstep",
+      animated: true,
+      style: { stroke: "#fa8c16", strokeWidth: 2 },
+      markerEnd: {
+        type: "arrowclosed",
+        color: "#fa8c16",
+      },
+    });
+
+    // 从分支节点连接到汇入节点
+    if (mergeIndex !== undefined && mergeIndex < list.length) {
+      edges.push({
+        id: `edge-branch-end-${startIndex}-${branchIndex}`,
+        source: branchNodeId,
+        target: `node-${mergeIndex}`,
+        type: "smoothstep",
+        animated: true,
+        style: { stroke: "#52c41a", strokeWidth: 2 },
+        markerEnd: {
+          type: "arrowclosed",
+          color: "#52c41a",
+        },
+      });
+    }
   });
 
   return { nodes, edges };