feat: 添加跳转

src/views/Project/ProjectJobDetail/index.module.css

@@ -47,4 +47,5 @@
 }
 .swFlowBox {
   flex: 1;
+  height: calc(100vh - 56px);
 }

src/views/Project/ProjectJobDetail/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-24 16:04:32
+ * @LastEditTime: 2022-06-24 18:11:17
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -12,15 +12,17 @@ import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import IconButton from "@mui/material/IconButton";
 import useMyRequest from "@/hooks/useMyRequest";
 import { fetchWorkFlowJob } from "@/api/project_api";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { IResponse } from "@/api/http";
 
 import styles from "./index.module.css";
 import { ITemplateConfig } from "../ProjectSubmitWork/interface";
+import Flow from "../components/Flow";
 
 const ProjectSubmitWork = () => {
   const [workFlowJobInfo, setWorkFlowJobInfo] = useState<ITemplateConfig>();
   const location: any = useLocation();
+  const navigate = useNavigate();
 
   /** 获取模版数据 */
   const { run } = useMyRequest(fetchWorkFlowJob, {
@@ -32,7 +34,7 @@ const ProjectSubmitWork = () => {
 
   useEffect(() => {
     run({
-      id: "42d69257-b579-4c7d-bc27-8f8ab1fd3ea3",
+      id: "b1044787-9618-4324-bc44-8d38e781aa44",
     });
   }, [run]);
 
@@ -42,6 +44,7 @@ const ProjectSubmitWork = () => {
         <div className={styles.swHeaderLeft}>
           <IconButton
             color="primary"
+            onClick={() => navigate(-1)}
             aria-label="upload picture"
             component="span"
             size="small"
@@ -70,7 +73,7 @@ const ProjectSubmitWork = () => {
           <div>详情</div>
         </div>
         <div className={styles.swFlowBox}>
-          <div>图表</div>
+          <Flow tasks={workFlowJobInfo?.tasks} />
         </div>
       </div>
     </div>

src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 15:25:25
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-23 18:20:50
+ * @LastEditTime: 2022-06-24 17:13:33
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -14,7 +14,7 @@ interface IProps {
 }
 const WorkFlow = (props: IProps) => {
   const { templateConfigInfo } = props;
-  return <Flow data={templateConfigInfo} />;
+  return <Flow tasks={templateConfigInfo?.tasks} />;
 };
 
 export default WorkFlow;

src/views/Project/ProjectSubmitWork/index.module.css

@@ -56,4 +56,5 @@
 }
 .swFlowBox {
   flex: 1;
+  height: calc(100vh - 56px);
 }

src/views/Project/ProjectSubmitWork/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-24 09:47:09
+ * @LastEditTime: 2022-06-24 18:10:26
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -17,15 +17,15 @@ import { ITemplateConfig } from "./interface";
 import _ from "lodash";
 import useMyRequest from "@/hooks/useMyRequest";
 import { fetchTemplateConfigInfo } from "@/api/project_api";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { IResponse } from "@/api/http";
-import { templateConfigJson } from "./mock";
+// import { templateConfigJson } from "./mock";
 
 const ProjectSubmitWork = () => {
-  const [templateConfigInfo, setTemplateConfigInfo] = useState<ITemplateConfig>(
-    templateConfigJson as any
-  );
+  const [templateConfigInfo, setTemplateConfigInfo] =
+    useState<ITemplateConfig>();
   const location: any = useLocation();
+  const navigate = useNavigate();
 
   /** 获取模版数据 */
   const { run } = useMyRequest(fetchTemplateConfigInfo, {
@@ -35,9 +35,9 @@ const ProjectSubmitWork = () => {
   });
 
   useEffect(() => {
-    // run({
-    //   id: location?.state?.id,
-    // });
+    run({
+      id: location?.state?.id,
+    });
   }, [location?.state?.id, run]);
 
   const setParameter = (value: any, taskId: string, parameterName: string) => {
@@ -64,6 +64,7 @@ const ProjectSubmitWork = () => {
         <div className={styles.swHeaderLeft}>
           <IconButton
             color="primary"
+            onClick={() => navigate(-1)}
             aria-label="upload picture"
             component="span"
             size="small"

src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-17 14:48:57
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-24 16:32:16
+ * @LastEditTime: 2022-06-24 16:41:40
  * @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -83,7 +83,7 @@ const TemplateBox = (props: any) => {
           <Button
             size={"small"}
             text={"使用模版"}
-            click={() => {}}
+            click={() => addTemplateBlock(info.id)}
             style={{ marginLeft: "12px" }}
           />
         )}

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

-import {
-  ITemplateConfig,
-  IEdge,
-  ITask,
-} from "../../ProjectSubmitWork/interface";
+import { IEdge, ITask } from "../../ProjectSubmitWork/interface";
 import ReactFlow, {
-  MiniMap,
   Controls,
   Background,
   useNodesState,
@@ -27,7 +22,7 @@ import styles from "./index.module.css";
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 interface IProps extends ReactFlowProps {
-  data?: ITemplateConfig;
+  tasks?: ITask[];
 }
 
 /** 自定义batch节点 */
@@ -100,7 +95,7 @@ const FlowNode = (props: any) => {
 };
 
 const Flow = (props: IProps) => {
-  const { data } = props;
+  const { tasks } = props;
 
   /** 自定义的节点类型 */
   const nodeTypes = useMemo(() => {
@@ -112,8 +107,8 @@ const Flow = (props: IProps) => {
     (id: string) => {
       /** 所有的连线 */
       const lineArr: IEdge[] = [];
-      data?.tasks?.length &&
-        data?.tasks.forEach((item) => {
+      tasks?.length &&
+        tasks.forEach((item) => {
           lineArr.push(...item.edges);
         });
       /** 所有的输入节点ID */
@@ -125,20 +120,20 @@ const Flow = (props: IProps) => {
         isOutput,
       };
     },
-    [data?.tasks]
+    [tasks]
   );
 
   /** 获取是否有流节点 */
   const isFlowNode = useCallback(
     (id: string) => {
       return (
-        data?.tasks?.length &&
-        data?.tasks?.some((item) => {
+        tasks?.length &&
+        tasks?.some((item) => {
           return item.parentNode === id;
         })
       );
     },
-    [data?.tasks]
+    [tasks]
   );
 
   /** 通过子flow节点计算batch节点的样式 */
@@ -146,8 +141,8 @@ const Flow = (props: IProps) => {
     (value: ITask) => {
       const positionXArr: number[] = [];
       const positionYArr: number[] = [];
-      data?.tasks?.length &&
-        data?.tasks?.forEach((item) => {
+      tasks?.length &&
+        tasks?.forEach((item) => {
           if (item.parentNode === value.id) {
             positionXArr.push(item.position?.x || 0);
             positionYArr.push(item.position?.y || 0);
@@ -174,14 +169,14 @@ const Flow = (props: IProps) => {
         height,
       };
     },
-    [data?.tasks]
+    [tasks]
   );
 
   /** 生成初始化node节点 */
   const initialNodes = useMemo(() => {
     const val: any = [];
-    data?.tasks?.length &&
-      data?.tasks.forEach((item) => {
+    tasks?.length &&
+      tasks.forEach((item) => {
         val.push({
           id: item.id,
           type: item.type === "BATCH" ? "batchNode" : "flowNode",
@@ -204,13 +199,13 @@ const Flow = (props: IProps) => {
         });
       });
     return val;
-  }, [data?.tasks, getBatchStyle, isFlowNode, nodesInputAndOutputStatus]);
+  }, [tasks, getBatchStyle, isFlowNode, nodesInputAndOutputStatus]);
 
   /** 生成初始化的连线节点 */
   const initialEdges = useMemo(() => {
     const val: ILine[] = [];
-    data?.tasks?.length &&
-      data?.tasks.forEach((item) => {
+    tasks?.length &&
+      tasks.forEach((item) => {
         val.push(...item.edges);
       });
     val.map((item: ILine) => {
@@ -222,7 +217,7 @@ const Flow = (props: IProps) => {
       };
     });
     return val;
-  }, [data]);
+  }, [tasks]);
 
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);