✨ feat: pipe line demo

ant-design · Mar 31, 2024 · 639caee · 639caee
1 parent c0dba39
commit 639caee
Show file tree

Hide file tree

Showing 8 changed files with 256 additions and 124 deletions.
diff --git a/docs/caseShow/demos/pipeline/taskPipeline/data.tsx b/docs/caseShow/demos/pipeline/taskPipeline/data.tsx
@@ -9,99 +9,164 @@ export const ActionBtn = () => {
 };
 
 export const nodes = [
-  // {
-  //   id: 'A',
-  //   type: 'group',
-  //   data: { label: null },
-  //   position: { x: 0, y: 0 },
-  //   style: {
-  //     width: 300,
-  //     height: 500,
-  //   },
-  // },
   {
     id: 'A',
     type: 'StageNode',
-    data: { label: null },
-    position: { x: 0, y: 0 },
-    zIndex: -1,
-    style: {
-      width: 300,
-      height: 500,
+    data: {
+      title: '配置校验',
+      extra: <div style={{ cursor: 'pointer', marginRight: '10px' }}>+</div>,
+      children: [
+        {
+          id: 'task1',
+          title: '提交申请',
+          status: 'success',
+          extra: <ActionBtn />,
+          isOpen: false,
+          children: <TaskContent />,
+        },
+        {
+          id: 'task2',
+          title: '提交申请123',
+          status: 'success',
+          extra: <ActionBtn />,
+          isOpen: false,
+          children: <TaskContent />,
+        },
+      ],
     },
+    zIndex: -1,
   },
-  // {
-  //   id: 'B',
-  //   type: 'input',
-  //   data: { label: 'child node 1' },
-  //   position: { x: 10, y: 10 },
-  //   style: {
-  //     width: 200,
-  //     height: 100,
-  //   },
-  //   parentNode: 'A',
-  //   extent: 'parent',
-  // },
-  // {
-  //   id: 'C',
-  //   type: 'default',
-  //   style: {
-  //     width: 200,
-  //     height: 100,
-  //   },
-  //   data: { label: 'child node 2' },
-  //   position: { x: 10, y: 90 },
-  //   parentNode: 'A',
-  //   extent: 'parent',
-  // },
-  // {
-  //   id: 'A',
-  //   type: 'group',
-  //   data: { label: null },
-  //   position: { x: 0, y: 0 },
-  //   style: {
-  //     width: 170,
-  //     height: 140,
-  //   },
-  // },
   {
-    id: 'a1',
-    type: 'taskNode',
-    parentNode: 'A',
-    extent: 'parent',
-    position: { x: 10, y: 10 },
-    draggable: false,
-    // expandParent: true,
-    style: {
-      width: 240,
-      height: 40,
-    },
+    id: 'B',
+    type: 'StageNode',
     data: {
-      title: '提交申请',
-      status: 'success',
-      extra: <ActionBtn />,
-      children: <TaskContent />,
+      title: '多任务并行',
+      children: [
+        {
+          id: 'b1',
+          title: '提交申请',
+          status: 'success',
+          isOpen: false,
+        },
+        {
+          id: 'b2',
+          title: '提交申请',
+          status: 'success',
+          isOpen: true,
+          children: <TaskContent />,
+        },
+        {
+          id: 'b3',
+          title: '提交申请123',
+          status: 'success',
+          isOpen: false,
+          children: <TaskContent />,
+        },
+      ],
     },
+    zIndex: -1,
   },
-
   {
-    id: 'a2',
-    type: 'taskNode',
-    parentNode: 'A',
-    extent: 'parent',
-    // expandParent: true,
-    position: { x: 10, y: 90 },
-    style: {
-      width: 240,
-      height: 40,
+    id: 'C',
+    type: 'StageNode',
+    data: {
+      title: '阶段名称',
+      children: [
+        {
+          id: 'c1',
+          title: '提交申请',
+          status: 'success',
+          extra: <ActionBtn />,
+          isOpen: false,
+          children: <TaskContent />,
+        },
+        {
+          id: 'c2',
+          title: '提交申请123',
+          status: 'success',
+          extra: <ActionBtn />,
+          isOpen: false,
+          children: <TaskContent />,
+        },
+      ],
     },
+    zIndex: -1,
+  },
+  {
+    id: 'D',
+    type: 'StageNode',
     data: {
-      title: '提交申请',
-      status: 'success',
-      extra: <ActionBtn />,
-      children: <TaskContent />,
+      title: '阶段名称',
+      children: [
+        {
+          id: 'd1',
+          title: '提交申请',
+          status: 'success',
+          extra: <ActionBtn />,
+          isOpen: false,
+          children: <TaskContent />,
+        },
+      ],
     },
+    zIndex: -1,
   },
 ];
 
-export const edges = [{ id: 'b-c', source: 'a1', target: 'a2' }];
+export const edges = [
+  {
+    id: 'A-B',
+    source: 'A',
+    target: 'B',
+    sourceHandle: 'task1',
+    targetHandle: 'b2',
+    type: 'bezier',
+  },
+  {
+    id: 'A-B2',
+    source: 'A',
+    target: 'B',
+    sourceHandle: 'task1',
+    type: 'bezier',
+    targetHandle: 'b3',
+  },
+  {
+    id: 'B-C',
+    source: 'B',
+    target: 'C',
+    sourceHandle: 'b1',
+    type: 'bezier',
+    targetHandle: 'c1',
+  },
+  {
+    id: 'B-C2',
+    source: 'B',
+    target: 'C',
+    sourceHandle: 'b2',
+    type: 'bezier',
+    targetHandle: 'c1',
+  },
+  {
+    id: 'B-C3',
+    source: 'B',
+    target: 'C',
+    sourceHandle: 'b3',
+    type: 'bezier',
+    targetHandle: 'c2',
+  },
+  {
+    id: 'C-D',
+    source: 'C',
+    target: 'D',
+    sourceHandle: 'c1',
+    type: 'bezier',
+    targetHandle: 'd1',
+  },
+  {
+    id: 'C-D2',
+    source: 'C',
+    target: 'D',
+    sourceHandle: 'c2',
+    type: 'bezier',
+    targetHandle: 'd1',
+  },
+];
diff --git a/docs/caseShow/demos/pipeline/taskPipeline/index.tsx b/docs/caseShow/demos/pipeline/taskPipeline/index.tsx
@@ -4,18 +4,13 @@
 
 import { Background, FlowView, applyEdgeChanges, applyNodeChanges } from '@ant-design/pro-flow';
 import { useCallback, useState } from 'react';
-// import ReactFlow, { applyEdgeChanges, applyNodeChanges, Background } from 'reactflow';
 import { edges, nodes } from './data';
 import StageNode from './nodes/stageNode';
 import taskNode from './nodes/taskNode';
 import useStyles from './styled';
 
 const nodeTypes = { taskNode, StageNode };
 
-const rfStyle = {
-  backgroundColor: '#D0C0F7',
-};
-
 function App() {
   const { styles } = useStyles();
   const [_nodes, setNodes] = useState(nodes);
@@ -40,21 +35,12 @@ function App() {
         nodes={_nodes}
         edges={_edges}
         background={false}
-        autoLayout={true}
+        layoutOptions={{
+          ranksep: 50,
+        }}
       >
         <Background color="#D0C0F7" variant="none" style={{ background: '#D0C0F7' }} />
       </FlowView>
-      {/* <ReactFlow
-        nodes={_nodes}
-        edges={_edges}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        fitView
-        style={rfStyle}
-        attributionPosition="top-right"
-      >
-        <Background />
-      </ReactFlow> */}
     </div>
   );
 }

diff --git a/docs/caseShow/demos/pipeline/taskPipeline/nodes/stageNode.tsx b/docs/caseShow/demos/pipeline/taskPipeline/nodes/stageNode.tsx
@@ -1,13 +1,27 @@
 import { FlowViewNode } from '@ant-design/pro-flow';
-import { FC, useState } from 'react';
+import { FC } from 'react';
 import useStyles from './styled';
+import TaskNode from './taskNode';
 
 const StageNode: FC<FlowViewNode> = (node) => {
-  const [open, setOpen] = useState(false);
+  // const [open, setOpen] = useState(false);
   const { styles } = useStyles();
   const { data } = node;
+  const taskNodes = data.children;
 
-  return <div className={styles.stageNode}></div>;
+  return (
+    <div className={styles.stageNode}>
+      <div className="wrap">
+        <div className="title">{data.title}</div>
+        {data.extra}
+      </div>
+      <div className="taskNodes">
+        {taskNodes.map((taskNode: any) => {
+          return <TaskNode data={taskNode} />;
+        })}
+      </div>
+    </div>
+  );
 };
 
 export default StageNode;
diff --git a/docs/caseShow/demos/pipeline/taskPipeline/nodes/styled.ts b/docs/caseShow/demos/pipeline/taskPipeline/nodes/styled.ts
@@ -2,13 +2,20 @@ import { createStyles } from 'antd-style';
 
 const useStyles = createStyles(() => {
   return {
+    wrap: {
+      width: '240px',
+      backgroundColor: '#FAFAFA',
+      marginBottom: '10px',
+      borderRadius: '8px',
+      position: 'relative',
+    },
     taskNode: {
       width: '240px',
       minHeight: '42px',
       backgroundColor: 'white',
       padding: '8px 12px',
-      boxSizing: 'border-box',
       borderRadius: '8px',
+      boxSizing: 'border-box',
       border: '1px solid #e8e8e8',
       display: 'flex',
       alignItems: 'center',
@@ -23,6 +30,10 @@ const useStyles = createStyles(() => {
         alignItems: 'center',
         justifyContent: 'space-between',
 
+        '.extra': {
+          width: '60px',
+        },
+
         '.span': {
           width: '20px',
           display: 'block',
@@ -32,18 +43,34 @@ const useStyles = createStyles(() => {
     },
 
     stageNode: {
-      width: '300px',
-      minHeight: '500px',
-      backgroundColor: 'red',
-    },
-    wrap: {
-      width: '240px',
+      width: '256px',
+      height: ' 100%',
       backgroundColor: '#FAFAFA',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      borderRadius: '8px',
+
+      '.wrap': {
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'nowrap',
+        justifyContent: 'space-between',
+        padding: '10px',
+      },
+
+      '.title': {
+        width: '100px',
+        marginLeft: '10px',
+      },
     },
+
     taskContent: {
       margin: '0',
       padding: '8px 12px',
       listStyle: 'none',
+      border: '1px solid #f0f0f0',
+      borderTop: 'none',
       '> li': {
         display: 'flex',
         alignItems: 'center',