feat: 任务流接口

src/api/api_manager.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 09:56:57
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-23 14:42:26
+ * @LastEditTime: 2022-06-24 14:37:17
  * @FilePath: /bkunyun/src/api/api_manager.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -29,7 +29,8 @@ const RESTAPI = {
   API_WORKBENCH_DELETE_TEMPLATE: `${BACKEND_API_URI_PREFIX}/cpp/workbench/project/workflowspec`, //项目管理员-删除工作流模板
   API_WORKBENCH_ADD_TEMPLATE_LIST: `${BACKEND_API_URI_PREFIX}/cpp/workbench/product/workflowspec`, //项目管理员-添加工作流模板-模板列表
   API_WORKBENCH_ADD_TEMPLATE: `${BACKEND_API_URI_PREFIX}/cpp/workbench/project/workflowspec`, //项目管理员-添加工作流模板-提交
-  API_FETCH_TEMPLATE_INFO: `${BACKEND_API_URI_PREFIX}/cpp/workbench/workflowspec`, //项目管理员-添加工作流模板-提交
+  API_FETCH_TEMPLATE_INFO: `${BACKEND_API_URI_PREFIX}/cpp/workbench/workflowspec`, //点击使用模版查看模版详情
+  API_WORK_FLOW_JOB: `${BACKEND_API_URI_PREFIX}/cpp/workbench/workflowjob`, //点击任务列表查看任务详情
 };
 
 export default RESTAPI;

src/api/project_api.ts

@@ -211,6 +211,15 @@ const fetchTemplateConfigInfo = (params: {id: string}) => {
   });
 };
 
+// 点击工作列表，查看工作流详情
+const fetchWorkFlowJob = (params: {id: string}) => {
+  return request({
+    url: `${Api.API_WORK_FLOW_JOB}/${params.id}`,
+    method: "get",
+  });
+};
+
+
 
 export {
   current,
@@ -228,5 +237,6 @@ export {
   getDataFileMovePackage,
   getDataFileDel,
   getDataFileDelPackage,
-  fetchTemplateConfigInfo
+  fetchTemplateConfigInfo,
+  fetchWorkFlowJob
 };

src/router/index.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-05-31 15:15:59
+ * @LastEditTime: 2022-06-24 14:32:32
  * @FilePath: /bkunyun/src/router/index.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 import { AnyMap } from "immer/dist/internal";
@@ -17,6 +17,7 @@ import ProjectSetting from "@/views/Project/ProjectSetting";
 import ProjectData from "@/views/Project/ProjectData";
 import ProjectWorkbench from "@/views/Project/ProjectWorkbench";
 import ProjectSubmitWork from "@/views/Project/ProjectSubmitWork";
+import ProjectJobDetail from "@/views/Project/ProjectJobDetail";
 
 export type route = {
   id?: string;
@@ -53,6 +54,7 @@ export const elements: {
   ProjectData: ProjectData,
   ProjectWorkbench: ProjectWorkbench,
   ProjectSubmitWork: ProjectSubmitWork,
+  ProjectJobDetail: ProjectJobDetail
 };
 
 export const routes: Array<route | navigate> = [

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

+.swBox {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: RGBA(247, 248, 250, 1);
+  overflow-y: scroll;
+}
+.swHeader {
+  z-index: 1001;
+  position: sticky;
+  top: 0;
+  height: 56px;
+  background-color: #fff;
+  box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 24px;
+}
+.swHeaderLeft {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.swTemplateTitle {
+  margin: 0 19px 0 8px;
+  line-height: 22px;
+  font-size: 14px;
+  color: rgba(30, 38, 51, 1);
+  font-weight: 600;
+  padding-right: 20px;
+  border-right: 1px solid rgba(235, 237, 240, 1);
+}
+
+.swContent {
+  display: flex;
+}
+.swFormBox {
+  background-color: #fff;
+  border-right: 1xp solid rgba(235, 237, 240, 1);
+  width: 608px;
+  box-sizing: border-box;
+  padding: 36px;
+}
+.swFlowBox {
+  flex: 1;
+}

src/views/Project/ProjectJobDetail/index.tsx

+/*
+ * @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
+ * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { useEffect, useState } from "react";
+import ButtonComponent from "@/components/mui/Button";
+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 { IResponse } from "@/api/http";
+
+import styles from "./index.module.css";
+import { ITemplateConfig } from "../ProjectSubmitWork/interface";
+
+const ProjectSubmitWork = () => {
+  const [workFlowJobInfo, setWorkFlowJobInfo] = useState<ITemplateConfig>();
+  const location: any = useLocation();
+
+  /** 获取模版数据 */
+  const { run } = useMyRequest(fetchWorkFlowJob, {
+    onSuccess: (res: IResponse<ITemplateConfig>) => {
+      console.log(res.data, "1111");
+      setWorkFlowJobInfo(res.data);
+    },
+  });
+
+  useEffect(() => {
+    run({
+      id: "42d69257-b579-4c7d-bc27-8f8ab1fd3ea3",
+    });
+  }, [run]);
+
+  return (
+    <div className={styles.swBox}>
+      <div className={styles.swHeader}>
+        <div className={styles.swHeaderLeft}>
+          <IconButton
+            color="primary"
+            aria-label="upload picture"
+            component="span"
+            size="small"
+          >
+            <ArrowBackIosNewIcon
+              sx={{
+                color: "rgba(194, 198, 204, 1)",
+                width: "12px",
+                height: "12px",
+              }}
+            />
+          </IconButton>
+
+          <div className={styles.swTemplateTitle}>{workFlowJobInfo?.title}</div>
+        </div>
+        <div className={styles.swHeaderRight}>
+          <ButtonComponent
+            text="终止"
+            variant="outlined"
+            color="secondary"
+          ></ButtonComponent>
+        </div>
+      </div>
+      <div className={styles.swContent}>
+        <div className={styles.swFormBox}>
+          <div>详情</div>
+        </div>
+        <div className={styles.swFlowBox}>
+          <div>图表</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectSubmitWork;

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-23 18:25:23
+ * @LastEditTime: 2022-06-24 09:47:09
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -19,10 +19,12 @@ import useMyRequest from "@/hooks/useMyRequest";
 import { fetchTemplateConfigInfo } from "@/api/project_api";
 import { useLocation } from "react-router-dom";
 import { IResponse } from "@/api/http";
+import { templateConfigJson } from "./mock";
 
 const ProjectSubmitWork = () => {
-  const [templateConfigInfo, setTemplateConfigInfo] =
-    useState<ITemplateConfig>();
+  const [templateConfigInfo, setTemplateConfigInfo] = useState<ITemplateConfig>(
+    templateConfigJson as any
+  );
   const location: any = useLocation();
 
   /** 获取模版数据 */
@@ -33,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) => {

src/views/Project/components/Flow/index.module.css

@@ -21,3 +21,14 @@
   border-radius: 2px;
   padding: 6px 12px;
 }
+
+.successDot {
+  display: inline-block;
+  line-height: 22px;
+  vertical-align: middle;
+  width: 8px;
+  height: 8px;
+  background-color: #0dd09b;
+  border-radius: 8px;
+  margin-left: 8px;
+}

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

@@ -41,11 +41,10 @@ const BatchNode = (props: IBatchNode) => {
         [styles.selectBatchNode]: false,
       })}
       style={style}
-      title="2222"
     >
       {dotStatus?.isInput ? (
         <Handle
-          style={{ background: "#fff ", border: "1px solid #D1D6DE" }}
+          style={{ background: "#fff ", border: "1px solid #D1D6DE", left: 20 }}
           type="target"
           position={Position.Top}
         />
@@ -59,7 +58,7 @@ const BatchNode = (props: IBatchNode) => {
       </div>
       {dotStatus?.isOutput ? (
         <Handle
-          style={{ background: "#fff ", border: "1px solid #D1D6DE" }}
+          style={{ background: "#fff ", border: "1px solid #D1D6DE", left: 20 }}
           type="source"
           position={Position.Bottom}
         />
@@ -79,15 +78,18 @@ const FlowNode = (props: any) => {
     >
       {data?.dotStatus?.isInput ? (
         <Handle
-          style={{ background: "#C2C6CC " }}
+          style={{ background: "#C2C6CC ", left: 12 }}
           type="target"
           position={Position.Top}
         />
       ) : null}
-      <div>{data?.label || ""}</div>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        {data?.label || ""}
+        <span className={styles.successDot}></span>
+      </div>
       {data?.dotStatus?.isOutput ? (
         <Handle
-          style={{ background: "#C2C6CC " }}
+          style={{ background: "#C2C6CC ", left: 12 }}
           type="source"
           position={Position.Bottom}
           id="a"
@@ -214,7 +216,7 @@ const Flow = (props: IProps) => {
     val.map((item: ILine) => {
       return {
         id: item.id,
-        label: item.label,
+        label: <div style={{ color: "#8A9099" }}>{item.label}</div>,
         source: item.source,
         target: item.target,
       };