Merge branch 'feat-20220705-customTemplate' into 'staging'

Feat 20220705 custom template

See merge request !80

src/api/project_api.ts

@@ -21,7 +21,7 @@ type projectListParams = {
 };
 
 // 查询当前用户可以看到的项目列表
-const product = (params: projectListParams) => {
+const getProjectList = (params: projectListParams) => {
   return request({
     url: Api.API_PROJECT_LIST,
     method: "get",
@@ -246,7 +246,7 @@ const getworkFlowTaskInfo = (params: { jobId: string; taskId: string }) => {
 export {
   current,
   menu,
-  product,
+  getProjectList,
   hpczone,
   addProject,
   getProject,

src/components/FileSelect/index.tsx

@@ -8,16 +8,23 @@ import MyTreeView from "@/components/mui/MyTreeView";
 import classNames from "classnames";
 import bigFolderIcon from "@/assets/project/bigFolderIcon.svg";
 import folderIcon from "@/assets/project/folderIcon.svg";
+import dataSetIcon from "@/assets/project/dataSetIcon.svg";
+import fileIcon from "@/assets/project/fileIcon.svg";
+import useMyRequest from "@/hooks/useMyRequest";
+import { getDataFind } from "@/api/project_api";
 import style from "./index.module.css";
+import _ from "lodash";
 
 type FileSelectProps = {
   open: boolean;
   onConfirm: any;
   onClose: any;
+  type?: "file" | "dataset" | "path";
 };
 
 const FileSelect = observer((props: FileSelectProps) => {
-  const { onConfirm } = props;
+  const { onConfirm, type = "path" } = props;
+  // const { onConfirm, type = "dataset" } = props;
   const { currentProjectStore } = useStores();
   const projectId = toJS(currentProjectStore.currentProjectInfo.id);
   const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
@@ -25,6 +32,66 @@ const FileSelect = observer((props: FileSelectProps) => {
   const [rootActive, setRootActive] = useState(true);
   const [newPath, setNewPath] = useState("/");
 
+  // 获取某路径下的数据集
+  const { run: getDataFindRun } = useMyRequest(getDataFind, {
+    onSuccess: (res: any) => {
+      const dataSetList = res.data.map((item: any) => {
+        return {
+          ...item,
+          type: "dataset",
+          dir: `/${item.path}`,
+          subdirs: "",
+        };
+      });
+      let treeDataArr = _.cloneDeep(treeData);
+      if (newPath === "/") {
+        treeDataArr = _.uniqWith([...treeDataArr, ...dataSetList], _.isEqual);
+        setTreeData(treeDataArr);
+      } else {
+        let pathArr: Array<any> = newPath.split("/");
+        pathArr.shift();
+        let reduceResult = pathArr.reduce((result, path) => {
+          if (Array.isArray(result)) {
+            result.forEach((item: any, index: number) => {
+              if (item.name === path) {
+                result = result[index];
+              }
+            });
+          } else if (Array.isArray(result.subdirs)) {
+            result.subdirs.forEach((item: any, index: number) => {
+              if (item.name === path) {
+                result = result.subdirs[index];
+              }
+            });
+          } else {
+            result = result.subdirs;
+          }
+
+          return result;
+        }, treeDataArr);
+        if (Array.isArray(reduceResult.subdirs)) {
+          reduceResult.subdirs = _.uniqWith(
+            [...reduceResult.subdirs, ...dataSetList],
+            _.isEqual
+          );
+        } else {
+          reduceResult.subdirs = dataSetList;
+        }
+        treeDataArr = _.uniqWith(treeDataArr, _.isEqual);
+        setTreeData(treeDataArr);
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (type === "dataset") {
+      getDataFindRun({
+        projectId: projectId as string,
+        path: newPath === "/" ? "/" : `${newPath}/`,
+      });
+    }
+  }, [newPath, getDataFindRun, projectId, type]);
+
   useEffect(() => {
     if (fileToken && projectId) {
       CloudEController.JobOutFileDirtree(
@@ -38,15 +105,31 @@ const FileSelect = observer((props: FileSelectProps) => {
         } else {
           setTreeData([]);
         }
+        if (type === "dataset") {
+          getDataFindRun({
+            projectId: projectId as string,
+            path: "/",
+            // path: path === "/" ? "/" : `${path}/`,
+          });
+        }
       });
     }
-  }, [projectId, fileToken]);
+  }, [projectId, fileToken, type, getDataFindRun]);
 
-  const renderLabel = (labelNmae: string) => {
+  // const renderLabel = (labelNmae: string) => {
+  const renderLabel = (node: any) => {
     return (
       <span className={style.treeLabel}>
-        <img className={style.labelFolderIcon} src={folderIcon} alt="" />
-        <span className={style.treeLabelText}>{labelNmae}</span>
+        {node.type === "directory" && (
+          <img className={style.labelFolderIcon} src={folderIcon} alt="" />
+        )}
+        {node.type === "dataset" && (
+          <img className={style.labelFolderIcon} src={dataSetIcon} alt="" />
+        )}
+        {node.type !== "directory" && node.type !== "dataset" && (
+          <img className={style.labelFolderIcon} src={fileIcon} alt="" />
+        )}
+        <span className={style.treeLabelText}>{node.name}</span>
       </span>
     );
   };
@@ -75,6 +158,7 @@ const FileSelect = observer((props: FileSelectProps) => {
       open={props.open}
       onClose={props.onClose}
       onConfirm={fileSelectOnConfirm}
+      title={type}
     >
       <div
         className={classNames({

src/components/MyRouter/useMyRouter.ts

 import { useStores } from "@/store/index";
 import { elements } from "@/router";
 import { current } from "@/api/demo_api";
-import { product } from "@/api/project_api";
 
 import localStorageKey from "@/utils/localStorageKey";
 import NotFound from "@/views/404";
 import useMyRequest from "@/hooks/useMyRequest";
 import { useEffect } from "react";
 import { menu } from "@/api/routes_api";
-import {
-  setFileServerEndPointLocalStorage,
-  getFiletokenAccordingToId,
-} from "@/views/Project/project";
 
 const useMyRouter = () => {
-  const { permissionStore, menuStore, currentProjectStore } = useStores();
+  const { permissionStore, menuStore } = useStores();
   const userInfo = useMyRequest(current);
   const menuInfo = useMyRequest(menu);
-  const productInfo = useMyRequest(product);
 
   useEffect(() => {
     userInfo.run();
     menuInfo.run();
-    productInfo.run({
-      product: "CADD",
-    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -47,24 +38,8 @@ const useMyRouter = () => {
       permissionStore.initAllRoutes();
     }
 
-    if (productInfo.res) {
-      let list = productInfo.data?.data;
-      if (list.length === 0) {
-        currentProjectStore.setProjectList([]);
-        currentProjectStore.changeProject({});
-      } else {
-        currentProjectStore.setProjectList(list);
-        currentProjectStore.changeProject(list[0]);
-        setFileServerEndPointLocalStorage(list[0].zoneId);
-        getFiletokenAccordingToId(list[0].id).then((res) => {
-          list[0].filetoken = res;
-          currentProjectStore.changeProject(list[0]);
-        });
-      }
-    }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userInfo.data, menuInfo.data, productInfo.data]);
+  }, [userInfo.data, menuInfo.data]);
 
   return permissionStore.allRoutes;
 };

src/components/mui/MyCheckBox.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-05 14:00:37
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-06 13:52:48
+ * @FilePath: /bkunyun/src/components/mui/MyCheckBox.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import * as React from "react";
-import FormGroup from "@mui/material/FormGroup";
+import FormGroup, { FormGroupProps } from "@mui/material/FormGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from '@mui/material/FormHelperText';
 import _ from "lodash";
 
-type IMyCheckBoxProps = {
+interface  IMyCheckBoxProps extends FormGroupProps{
   value: Array<any>;
   options: Array<ICheckBoxOption>;
   onChange: any; // 直接返回选中项的数组
@@ -62,7 +70,7 @@ export default function MyCheckBox(props: IMyCheckBoxProps) {
 
   return (
     <FormControl fullWidth variant={variant} error={error}>
-    <FormGroup row>
+    <FormGroup {...props} row>
       {options.map((option) => {
         return (
           <FormControlLabel

src/components/mui/MyInput.tsx

-import TextField from "@mui/material/TextField";
+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-05 14:00:37
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-06 11:45:10
+ * @FilePath: /bkunyun/src/components/mui/MyInput.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import TextField, { TextFieldProps } from "@mui/material/TextField";
 
-type MyInputProps = {
+interface MyInputProps extends Omit<TextFieldProps, "value">  {
   value: any;
   inputSx?: any;
   onChange?: any;
@@ -35,9 +43,9 @@ const MyInput = (props: MyInputProps) => {
 
   return (
     <TextField
+      {...props}
       error={error}
       helperText={helperText}
-      value={value}
       sx={{ ...inputSx }}
       id={id}
       label={label}
@@ -50,6 +58,7 @@ const MyInput = (props: MyInputProps) => {
       InputProps={{
         ...InputProps,
       }}
+      value={value}
     />
   );
 };

src/components/mui/MyPopconfirm.tsx

 import * as React from "react";
-import { ReactNode } from "react";
+import { ReactNode, useEffect } from "react";
 import Box from "@mui/material/Box";
 import ButtonComponent from "./Button";
 import tipsIcon from "@/assets/project/information-outline.svg";
@@ -28,7 +28,7 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    console.log(123);
+    event.nativeEvent.stopImmediatePropagation();
     setAnchorEl(anchorEl ? null : event.currentTarget);
   };
 
@@ -45,6 +45,12 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
     onConfirm && onConfirm();
   };
 
+  useEffect(() => {
+    document.addEventListener("click", (e) => {
+      setAnchorEl(null);
+    });
+  }, []);
+
   return (
     <div>
       <div aria-describedby={id} onClick={handleClick}>

src/components/mui/MyRadio.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-05 14:00:37
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-06 13:49:25
+ * @FilePath: /bkunyun/src/components/mui/MyRadio.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import * as React from "react";
 import Radio from "@mui/material/Radio";
-import RadioGroup from "@mui/material/RadioGroup";
+import RadioGroup, { RadioGroupProps } from "@mui/material/RadioGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from '@mui/material/FormHelperText';
 
-type IMyRadioProps = {
+interface IMyRadioProps extends RadioGroupProps {
   value: any;
   options: Array<ICheckBoxOption>;
   onChange: any;
@@ -42,6 +50,7 @@ export default function MyRadio(props: IMyRadioProps) {
   return (
     <FormControl fullWidth variant={variant} error={error}>
       <RadioGroup
+        {...props}
         row
         aria-labelledby="demo-row-radio-buttons-group-label"
         name="row-radio-buttons-group"

src/components/mui/MyTreeView.tsx

@@ -15,7 +15,7 @@ type MyTreeViewProps = {
   onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
   onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
   onNodeToggle?: (event: object, nodeIds: Array<any>) => void; // 点击某一项的回调
-  renderLabel?: (labelNmae: string) => React.ReactNode;
+  renderLabel?: (node: any) => React.ReactNode;
   treeViewSx?: any;
   defaultExpanded?: Array<string>;
   idKey?: string;
@@ -48,7 +48,7 @@ const MyTreeView = (props: MyTreeViewProps) => {
       nodeId={String(
         idFunc ? idFunc(nodes) : nodes.id || `${nodes.name}${index}`
       )}
-      label={renderLabel === undefined ? nodes.name : renderLabel(nodes.name)}
+      label={renderLabel === undefined ? nodes.name : renderLabel(nodes)}
       disabled={nodes?.disabled ? true : false}
     >
       {Array.isArray(nodes.subdirs)

src/components/mui/Tabs.tsx

@@ -2,17 +2,17 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-07 20:31:40
+ * @LastEditTime: 2022-07-04 20:18:17
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import { memo } from "react";
 import { isEqual } from "lodash";
-import { useState, useMemo, useEffect } from "react";
+import { useState } from "react";
 import { Box } from "@mui/system";
 import Tab from "@mui/material/Tab";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
-import { Typography } from '@mui/material';
+import { Typography } from "@mui/material";
 
 interface ITabList {
   label: string;
@@ -20,16 +20,18 @@ interface ITabList {
   component: JSX.Element;
   icon?: string;
   iconed?: string;
-  hide?: boolean
+  hide?: boolean;
 }
 
 interface IProps {
   tabList: ITabList[];
+  defaultValue?: string;
 }
 
 const Tabs = (props: IProps) => {
-  const { tabList } = props;
-  const [value, setValue] = useState(tabList.filter(e => !e.hide)[0].value);
+  const { tabList, defaultValue } = props;
+  const [value, setValue] = useState(defaultValue || tabList.filter(e => !e.hide)[0].value);
+
 
   const onChange = (val: string) => {
     setValue(val);
@@ -38,14 +40,21 @@ const Tabs = (props: IProps) => {
   const labelRender = (item: ITabList, key: number) => {
     return (
       <Box style={{ display: "flex", alignItems: "center" }}>
-        {
-          item.icon ? <img style={{ width: "14px", marginRight: "10px" }} src={value === item.value ? item.iconed : item.icon} alt="" />
-            : ""
-        }
-        <Typography sx={{ fontSize: "14px", fontWeight: '400' }}  >{item.label}</Typography>
+        {item.icon ? (
+          <img
+            style={{ width: "14px", marginRight: "10px" }}
+            src={value === item.value ? item.iconed : item.icon}
+            alt=""
+          />
+        ) : (
+          ""
+        )}
+        <Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
+          {item.label}
+        </Typography>
       </Box>
-    )
-  }
+    );
+  };
 
   return (
     <TabContext value={value}>
@@ -54,10 +63,9 @@ const Tabs = (props: IProps) => {
           onChange={(e: any, val: string) => {
             onChange(val);
           }}
-          aria-label="lab API tabs example"
         >
           {tabList?.map((item, key) => {
-            if (item.hide) return ""
+            if (item.hide) return "";
             return (
               <Tab
                 key={key}

src/store/modules/currentProject.ts

@@ -11,22 +11,39 @@ type productInfo = {
   id?: string;
   name?: string;
 };
+
+const sessionStorageCurrentProjectInfo = JSON.parse(
+  sessionStorage.getItem("currentProjectInfo") || "{}"
+);
+const sessionStorageCurrentProductInfo = JSON.parse(
+  sessionStorage.getItem("currentProductInfo") || "{}"
+);
+const sessionStorageProjectList = JSON.parse(
+  sessionStorage.getItem("projectList") || "[]"
+);
+
 class currentProject {
   constructor() {
     makeAutoObservable(this);
   }
 
   // 选中的项目
-  currentProjectInfo: projectInfo = {};
+  currentProjectInfo: projectInfo = sessionStorageCurrentProjectInfo;
   // 选中的产品下的项目列表
-  projectList: Array<projectInfo> = [];
+  projectList: Array<projectInfo> = sessionStorageProjectList;
   // 选中的产品
-  currentProductInfo: productInfo = {};
+  currentProductInfo: productInfo = sessionStorageCurrentProductInfo;
   setProjectList = (list: Array<projectInfo>) => {
     this.projectList = list;
+    sessionStorage.setItem("projectList", JSON.stringify(list));
   };
   changeProject = (project: projectInfo) => {
     this.currentProjectInfo = project;
+    sessionStorage.setItem("currentProjectInfo", JSON.stringify(project));
+  };
+  changeProductInfo = (productInfo: productInfo) => {
+    this.currentProductInfo = productInfo;
+    sessionStorage.setItem("currentProductInfo", JSON.stringify(productInfo));
   };
 }
 

src/views/ConsoleLayout/index.tsx

-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import cx from "classnames";
 import { observer } from "mobx-react-lite";
@@ -14,7 +14,12 @@ import Button from "@/components/mui/Button";
 import logo from "@/assets/img/logo.svg";
 import MyPopover from "@/components/mui/MyPopover";
 import TranSferList from "./components/TransferList";
-
+import { getProjectList } from "@/api/project_api";
+import useMyRequest from "@/hooks/useMyRequest";
+import {
+  setFileServerEndPointLocalStorage,
+  getFiletokenAccordingToId,
+} from "@/views/Project/project";
 import style from "./index.module.css";
 
 const ConsoleLayout = observer(() => {
@@ -28,6 +33,41 @@ const ConsoleLayout = observer(() => {
     handleClose,
   } = useIndex();
 
+  const [currentProduct, setCurrentProduct] = useState<{
+    path: string;
+    name: string;
+  }>();
+
+  const { currentProjectStore } = useStores();
+  const { run: runGetProjectList } = useMyRequest(getProjectList, {
+    onSuccess: (res) => {
+      let list = res.data;
+      if (list.length === 0) {
+        currentProjectStore.setProjectList([]);
+        currentProjectStore.changeProject({});
+        navigate(currentProduct?.path as string);
+      } else {
+        currentProjectStore.setProjectList(list);
+        currentProjectStore.changeProject(list[0]);
+        setFileServerEndPointLocalStorage(list[0].zoneId);
+        getFiletokenAccordingToId(list[0].id).then((res) => {
+          list[0].filetoken = res;
+          currentProjectStore.changeProject(list[0]);
+        });
+        navigate(currentProduct?.path as string);
+      }
+    },
+  });
+
+  // 切换产品
+  const getProduct = (item: any) => {
+    currentProjectStore.changeProductInfo({ id: item.name, name: item.name });
+    setCurrentProduct(item);
+    runGetProjectList({
+      product: item.name,
+    });
+  };
+
   const navigate = useNavigate();
   const location = useLocation();
   const { permissionStore, menuStore } = useStores();
@@ -86,7 +126,7 @@ const ConsoleLayout = observer(() => {
                       root: style.menuItemRoot,
                     }}
                     onClick={() => {
-                      navigate(item.path);
+                      getProduct(item);
                       handleClose();
                     }}
                   >

src/views/MenuLayout/index.module.css

@@ -13,8 +13,7 @@
 .content {
   flex: 1;
   height: calc(100vh - 57px);
-  overflow: hidden;
-  /* ??????????? */
+  overflow: scroll;
 }
 .list {
   /* background-color: red; */

src/views/MenuLayout/index.tsx

@@ -6,13 +6,21 @@ import style from "./index.module.css";
 import { observer } from "mobx-react-lite";
 import { useStores } from "@/store/index";
 import classnames from "classnames";
+import { toJS } from "mobx";
 
 const MenuLayout = observer(() => {
-  const { permissionStore } = useStores();
+  const { permissionStore, currentProjectStore } = useStores();
   let pathname = new URL(window.location.href).pathname;
 
   const navigate = useNavigate();
 
+  const productInfo = toJS(currentProjectStore.currentProductInfo);
+
+  // 未选择产品时 直接跳转home页面
+  if (!productInfo.name) {
+    navigate("/home");
+  }
+
   return (
     <Box className={style.container}>
       <Box className={style.aside}>

src/views/Project/ProjectData/MoveFile/index.tsx

@@ -301,11 +301,11 @@ const MoveFile = (props: any) => {
     });
   };
 
-  const renderLabel = (labelNmae: string) => {
+  const renderLabel = (node: any) => {
     return (
       <span className={style.treeLabel}>
         <img className={style.labelFolderIcon} src={folderIcon} alt="" />
-        <span className={style.treeLabelText}>{labelNmae}</span>
+        <span className={style.treeLabelText}>{node.name}</span>
       </span>
     );
   };

src/views/Project/ProjectData/index.tsx

@@ -453,7 +453,10 @@ const ProjectData = observer(() => {
 
   // 下载文件
   const hanleDownloadFile = (item: any) => {
-    const downloadPath = path === "/" ? "/" : `${path}/${item.name}`;
+    console.log(item);
+    const downloadPath =
+      path === "/" ? `/${item.name}` : `${path}/${item.name}`;
+    console.log(downloadPath);
     CloudEController.JobFileDownload(
       downloadPath,
       fileToken as string,

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

@@ -112,6 +112,10 @@
   position: relative;
   align-items: center;
 }
+.taskInfoValueClick {
+  cursor: pointer;
+  color: rgba(19, 112, 255, 1);
+}
 .taskInfoDownload {
   color: rgba(19, 112, 255, 1);
   cursor: pointer;
@@ -170,7 +174,7 @@
   color: rgba(19, 112, 255, 1);
 }
 
-.fullScreenBox{
+.fullScreenBox {
   position: absolute;
   background-color: #fff;
   cursor: pointer;
@@ -179,6 +183,6 @@
   bottom: 24px;
   padding: 8px;
 }
-.fullScreenBox:hover{
+.fullScreenBox:hover {
   opacity: 0.6;
-}
+}
\ No newline at end of file

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-29 17:07:49
+ * @LastEditTime: 2022-07-06 11:01:44
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -34,6 +34,7 @@ import Flow from "../components/Flow";
 import { cancelWorkflowJob, deleteWorkflowJob } from "@/api/workbench_api";
 import { useMessage } from "@/components/MySnackbar";
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
+import { storageUnitFromB } from "@/utils/util";
 
 import styles from "./index.module.css";
 
@@ -74,6 +75,8 @@ const ProjectSubmitWork = observer(() => {
 
   /** 获取模版数据 */
   const { run } = useMyRequest(fetchWorkFlowJob, {
+    pollingInterval:1000 * 60,
+    pollingWhenHidden:false,
     onSuccess: (res: IResponse<ITaskInfo>) => {
       getOutouts(res.data.outputs);
       setWorkFlowJobInfo(res.data);
@@ -82,6 +85,7 @@ const ProjectSubmitWork = observer(() => {
 
   useEffect(() => {
     const locationInfo: any = location?.state;
+    console.log(333)
     run({
       id: locationInfo.taskId,
     });
@@ -97,11 +101,23 @@ const ProjectSubmitWork = observer(() => {
     path = path.slice(13);
     if (path) {
       navigate(`/product/cadd/projectData`, {
-        state: { pathName: "path" },
+        state: { pathName: path },
       });
     }
   };
 
+/** 返回事件 */
+  const onBack = useCallback(() => {
+    navigate('/product/cadd/projectWorkbench', {
+      state: {type: 'workbenchList'}
+    })
+  },[navigate])
+
+  const outputPathTransform = (path: string) => {
+    path = path.slice(13);
+    return `ProjectData${path}`;
+  };
+
   const getOutouts = (outputs: any) => {
     if (outputs) {
       let result = Object.keys(outputs);
@@ -169,7 +185,9 @@ const ProjectSubmitWork = observer(() => {
       if (Array.isArray(res.data)) {
         res.data.forEach((item1) => {
           if (item1.name === item.path.slice(item.path.lastIndexOf("/") + 1)) {
-            randerOutputs[index].size = item1.size;
+            randerOutputs[index].size = `${
+              item1.size ? storageUnitFromB(Number(item1.size)) : "-"
+            }`;
             setRanderOutputs([...randerOutputs]);
           }
         });
@@ -184,7 +202,7 @@ const ProjectSubmitWork = observer(() => {
       if (errorCode === 0) {
         message.success("操作成功！");
       }
-      navigate(-1);
+      onBack()
     },
   });
 
@@ -195,7 +213,7 @@ const ProjectSubmitWork = observer(() => {
       if (errorCode === 0) {
         message.success("操作成功！");
       }
-      navigate(-1);
+      onBack()
     },
   });
 
@@ -259,7 +277,7 @@ const ProjectSubmitWork = observer(() => {
           <div className={styles.swHeaderLeft}>
             <IconButton
               color="primary"
-              onClick={() => navigate(-1)}
+              onClick={onBack}
               aria-label="upload picture"
               component="span"
               size="small"
@@ -352,12 +370,17 @@ const ProjectSubmitWork = observer(() => {
                 <div className={styles.taskInfoLi}>
                   <div className={styles.taskInfoParams}>输出路径</div>
                   <div
-                    className={styles.taskInfoValue}
+                    className={classNames({
+                      [styles.taskInfoValue]: true,
+                      [styles.taskInfoValueClick]: true,
+                    })}
                     onClick={() =>
                       goToProjectData(workFlowJobInfo?.outputPath as string)
                     }
                   >
-                    {workFlowJobInfo?.outputPath || "-"}
+                    {workFlowJobInfo?.outputPath
+                      ? outputPathTransform(workFlowJobInfo?.outputPath)
+                      : "-"}
                   </div>
                 </div>
                 <div className={styles.taskInfoLi}>

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

@@ -21,10 +21,11 @@ type ConfigFormProps = {
   templateConfigInfo?: ITemplateConfig;
   setParameter: any;
   onRef?: React.Ref<any>;
+  setSelectedNodeId: (val: string) => void;
 };
 
 const ConfigForm = (props: ConfigFormProps) => {
-  const { templateConfigInfo, setParameter } = props;
+  const { templateConfigInfo, setParameter,setSelectedNodeId } = props;
   const [name, setName] = useState<string>(""); // 任务名称
 
   const [nameHelp, setNameHelp] = useState({
@@ -97,7 +98,13 @@ const ConfigForm = (props: ConfigFormProps) => {
 
   const checkName = (name: string = "") => {
     const reg = new RegExp(/^[a-zA-Z0-9\u4e00-\u9fa5-_]{3,30}$/);
-    if (reg.test(name)) {
+    if (!name) {
+      setNameHelp({
+        error: true,
+        helperText: "任务名称不能为空",
+      });
+      return true;
+    } else if (reg.test(name)) {
       setNameHelp({
         error: false,
         helperText: "",
@@ -141,24 +148,28 @@ const ConfigForm = (props: ConfigFormProps) => {
     result.forEach((task) => {
       let isCheck = true;
       if (task.parameters.length > 0) {
-        task.parameters.forEach((parameter) => {
-          const { error } = getCheckResult(parameter, parameter.value);
-          if (error) {
-            isCheck = false;
-            return;
-          }
-        });
+        task.parameters
+          .filter((parameter) => parameter.hidden === false)
+          .forEach((parameter) => {
+            const { error } = getCheckResult(parameter, parameter.value);
+            if (error) {
+              isCheck = false;
+              return;
+            }
+          });
       }
       if (task.flows.length > 0) {
         task.flows.forEach((flow) => {
           if (flow.parameters.length > 0) {
-            flow.parameters.forEach((parameter) => {
-              const { error } = getCheckResult(parameter, parameter.value);
-              if (error) {
-                isCheck = false;
-                return;
-              }
-            });
+            flow.parameters
+              .filter((parameter) => parameter.hidden === false)
+              .forEach((parameter) => {
+                const { error } = getCheckResult(parameter, parameter.value);
+                if (error) {
+                  isCheck = false;
+                  return;
+                }
+              });
           }
         });
       }
@@ -175,7 +186,7 @@ const ConfigForm = (props: ConfigFormProps) => {
     setParameter(e.target.value, taskId, parameterName);
   };
 
-  const randerParameters = (parameters: Array<IParameter>, taskId: string) => {
+  const randerParameters = (parameters: Array<IParameter>, taskId: string, batchId?: string) => {
     return parameters
       .filter((parameter) => parameter.hidden === false)
       .map((parameter, parameterIndex) => {
@@ -198,6 +209,8 @@ const ConfigForm = (props: ConfigFormProps) => {
             <div className={styles.parameterContent}>
               {parameter.domType.toLowerCase() === "file" && (
                 <MyInput
+                  onFocus={()=> setSelectedNodeId(batchId || '')}
+                  onBlur={()=> setSelectedNodeId('')}
                   value={parameter.value || ""}
                   InputProps={{
                     endAdornment: (
@@ -218,6 +231,8 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
               {parameter.domType.toLowerCase() === "path" && (
                 <MyInput
+                  onFocus={()=> setSelectedNodeId(batchId || '')}
+                  onBlur={()=> setSelectedNodeId('')}
                   value={parameter.value || ""}
                   InputProps={{
                     endAdornment: (
@@ -238,6 +253,8 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
               {parameter.domType.toLowerCase() === "dataset" && (
                 <MyInput
+                  onFocus={()=> setSelectedNodeId(taskId)}
+                  onBlur={()=> setSelectedNodeId('')}
                   value={parameter.value || ""}
                   InputProps={{
                     endAdornment: (
@@ -258,7 +275,10 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
               {parameter.domType.toLowerCase() === "input" && (
                 <MyInput
-                  value={parameter.value}
+                onFocus={()=> {setSelectedNodeId(batchId || ''); console.log(batchId,'111')}}
+
+                  onBlur={()=> setSelectedNodeId('')}
+                  value={parameter.value || ""}
                   onChange={(e: any) =>
                     handleParameterChange(e, taskId, parameter.name || "")
                   }
@@ -269,6 +289,8 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
               {parameter.domType.toLowerCase() === "select" && (
                 <MySelect
+                  onFocus={()=> setSelectedNodeId(batchId || '')}
+                  onBlur={()=> setSelectedNodeId('')}
                   value={parameter.value}
                   onChange={(e: any) =>
                     handleParameterChange(e, taskId, parameter.name || "")
@@ -280,6 +302,8 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
               {parameter.domType.toLowerCase() === "multipleselect" && (
                 <MySelect
+                  onFocus={()=> setSelectedNodeId(batchId || '')}
+                  onBlur={()=> setSelectedNodeId('')}
                   value={parameter.value}
                   onChange={(e: any) =>
                     handleParameterChange(e, taskId, parameter.name || "")
@@ -296,6 +320,8 @@ const ConfigForm = (props: ConfigFormProps) => {
                   onChange={(e: any) =>
                     handleParameterChange(e, taskId, parameter.name || "")
                   }
+                  onFocus={()=> setSelectedNodeId(batchId || '')}
+                  onBlur={()=> setSelectedNodeId('')}
                   options={optionsTransform(parameter.choices, "label")}
                   error={parameter.error || false}
                   helperText={parameter.helperText}
@@ -316,6 +342,8 @@ const ConfigForm = (props: ConfigFormProps) => {
                     )
                   }
                   options={optionsTransform(parameter.choices, "label")}
+                  onFocus={()=> setSelectedNodeId(batchId || '')}
+                  onBlur={()=> setSelectedNodeId('')}
                   error={parameter.error || false}
                   helperText={parameter.helperText}
                 ></MyCheckBox>
@@ -417,7 +445,7 @@ const ConfigForm = (props: ConfigFormProps) => {
                 src={jobSueIcon}
                 alt=""
               />
-              <span className={styles.backgroundTitleText}>{task.title}</span>
+              <span id={`point${task.id}`} className={styles.backgroundTitleText}>{task.title}</span>
               {task.description && (
                 <Tooltip title={task.description} placement="top">
                   <img className={styles.taskDescIcon} src={tipsIcon} alt="" />
@@ -425,7 +453,7 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
             </div>
             <div className={styles.taskConfigBox}>
-              {randerParameters(task.parameters, task.id)}
+              {randerParameters(task.parameters, task.id,  task.id)}
               {task.flows.map((flow) => {
                 return (
                   <div className={styles.flowConfigBox} key={flow.id}>
@@ -441,7 +469,7 @@ const ConfigForm = (props: ConfigFormProps) => {
                         </Tooltip>
                       )}
                     </div>
-                    {randerParameters(flow.parameters, flow.id)}
+                    {randerParameters(flow.parameters, flow.id, flow.parentNode ? flow.parentNode : flow.id )}
                   </div>
                 );
               })}
@@ -449,11 +477,13 @@ const ConfigForm = (props: ConfigFormProps) => {
           </div>
         );
       })}
-      {fileSelectOpen && <FileSelect
-        onClose={handleFileSelectOnClose}
-        open={fileSelectOpen}
-        onConfirm={onFileSelectConfirm}
-      />}
+      {fileSelectOpen && (
+        <FileSelect
+          onClose={handleFileSelectOnClose}
+          open={fileSelectOpen}
+          onConfirm={onFileSelectConfirm}
+        />
+      )}
     </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-27 20:50:36
+ * @LastEditTime: 2022-07-06 11:55:41
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -11,10 +11,12 @@ import { ITemplateConfig } from "../interface";
 
 interface IProps {
   templateConfigInfo?: ITemplateConfig;
+  setSelectedNodeId?: (val:string) => void;
+  selectedNodeId?: string;
 }
 const WorkFlow = (props: IProps) => {
-  const { templateConfigInfo } = props;
-  return <Flow tasks={templateConfigInfo?.tasks} />;
+  const { templateConfigInfo,setSelectedNodeId, selectedNodeId } = props;
+  return <Flow tasks={templateConfigInfo?.tasks} setSelectedNodeId={setSelectedNodeId} selectedNodeId={selectedNodeId}/>;
 };
 
 export default WorkFlow;

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

@@ -60,3 +60,16 @@
   flex: 1;
   height: calc(100vh - 56px);
 }
+
+.fullScreenBox {
+  position: absolute;
+  background-color: #fff;
+  cursor: pointer;
+  z-index: 1000;
+  right: 24px;
+  bottom: 24px;
+  padding: 8px;
+}
+.fullScreenBox:hover {
+  opacity: 0.6;
+}
\ No newline at end of file

src/views/Project/ProjectSubmitWork/index.tsx

@@ -2,30 +2,35 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-26 17:24:46
+ * @LastEditTime: 2022-07-06 11:55:03
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
+import { toJS } from "mobx";
 import React, { useEffect, useState } from "react";
-import styles from "./index.module.css";
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import IconButton from "@mui/material/IconButton";
+import _ from "lodash";
+import { useLocation, useNavigate } from "react-router-dom";
+import moment from "moment";
+
 import ConfigForm from "./ConfigForm";
 import WorkFlow from "./WorkFlow";
 import ButtonComponent from "@/components/mui/Button";
-import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
-import IconButton from "@mui/material/IconButton";
 import { ITemplateConfig } from "./interface";
-import _ from "lodash";
 import useMyRequest from "@/hooks/useMyRequest";
 import { fetchTemplateConfigInfo, submitWorkFlow } from "@/api/project_api";
-import { useLocation, useNavigate } from "react-router-dom";
 import { getCheckResult } from "./util";
 import { IResponse } from "@/api/http";
-import { templateConfigJson } from "./mock";
+import fullScreen from "@/assets/project/fullScreen.svg";
+import partialScreen from "@/assets/project/partialScreen.svg";
 import { useMessage } from "@/components/MySnackbar";
-import { toJS } from "mobx";
 import { useStores } from "@/store";
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
 
+import styles from "./index.module.css";
+
+
 const ProjectSubmitWork = () => {
   const Message = useMessage();
   const { currentProjectStore } = useStores();
@@ -35,10 +40,15 @@ const ProjectSubmitWork = () => {
   const location: any = useLocation();
   const navigate = useNavigate();
   let configFormRef: any = React.createRef();
+  /** 是否全屏 */
+  const [fullScreenShow, setFullScreenShow] = useState<boolean>(false);
+  const [selectedNodeId, setSelectedNodeId] = useState<string>("");
 
   // 前往工作台
-  const goToWorkbench = () => {
-    navigate("/product/cadd/projectWorkbench");
+  const goToWorkbench = (toWorkbenchList = false) => {
+    navigate("/product/cadd/projectWorkbench", {
+      state: { type: toWorkbenchList ? "workbenchList" : "" },
+    });
   };
 
   // 返回
@@ -54,6 +64,22 @@ const ProjectSubmitWork = () => {
   const { run } = useMyRequest(fetchTemplateConfigInfo, {
     onSuccess: (res: IResponse<ITemplateConfig>) => {
       // setTemplateConfigInfo(templateConfigJson as ITemplateConfig);
+      res.data.tasks.forEach((task) => {
+        task.parameters.forEach((parameter) => {
+          let value: any = undefined;
+          if (parameter.defaultValue) {
+            value = parameter.defaultValue;
+          } else if (
+            parameter.domType.toLowerCase() === "multipleselect" ||
+            parameter.domType.toLowerCase() === "checkbox"
+          ) {
+            value = [];
+          } else {
+            value = "";
+          }
+          parameter.value = value;
+        });
+      });
       setTemplateConfigInfo(res.data);
       configFormRef.current.setInitName(res.data.title);
     },
@@ -65,7 +91,7 @@ const ProjectSubmitWork = () => {
   const { run: submitWorkFlowRun } = useMyRequest(submitWorkFlow, {
     onSuccess: (res) => {
       Message.success("提交成功");
-      goToWorkbench();
+      goToWorkbench(true);
     },
   });
 
@@ -80,20 +106,20 @@ const ProjectSubmitWork = () => {
     result.tasks.forEach((tack) => {
       if (tack.id === taskId) {
         let isCheck = true;
-        tack.parameters.forEach((parameter) => {
-          if (parameter.name === parameterName) {
-            parameter.value = value;
-            const checkResult = getCheckResult(parameter, value);
-            parameter.error = checkResult.error;
-            parameter.helperText = checkResult.helperText;
-          } else {
-            return;
-          }
-          if (getCheckResult(parameter, value).error === true) {
-            isCheck = false;
-          }
-          tack.isCheck = isCheck;
-        });
+        tack.parameters
+          .filter((parameter) => parameter.hidden === false)
+          .forEach((parameter) => {
+            if (parameter.name === parameterName) {
+              parameter.value = value;
+              const checkResult = getCheckResult(parameter, value);
+              parameter.error = checkResult.error;
+              parameter.helperText = checkResult.helperText;
+            }
+            if (getCheckResult(parameter, parameter.value).error === true) {
+              isCheck = false;
+            }
+          });
+        tack.isCheck = isCheck;
       } else {
         return;
       }
@@ -106,7 +132,6 @@ const ProjectSubmitWork = () => {
     const { name, outputPath, nameAndOutputPathCheck } =
       configFormRef.current.getNameAndPath();
     if (!nameAndOutputPathCheck) {
-      console.log(123);
       check = false;
     }
     const result: ITemplateConfig = _.cloneDeep(templateConfigInfo);
@@ -118,8 +143,6 @@ const ProjectSubmitWork = () => {
           parameter.error = checkResult.error;
           parameter.helperText = checkResult.helperText;
           if (checkResult.error) {
-            console.log(tack);
-            console.log(parameter);
             check = false;
           }
         });
@@ -170,7 +193,7 @@ const ProjectSubmitWork = () => {
 
   return (
     <div className={styles.swBox}>
-      <div className={styles.swHeader}>
+     { fullScreenShow ? null : <div className={styles.swHeader}>
         <div className={styles.swHeaderLeft}>
           <MyPopconfirm
             title="返回后，当前页面已填写内容将不保存，确认返回吗？"
@@ -199,13 +222,17 @@ const ProjectSubmitWork = () => {
           <div className={styles.swTemplateVersionBox}>
             <span className={styles.swHeaderLable}>版本：</span>
             <span className={styles.swHeaderValue}>
-              {templateConfigInfo?.version}
+              {templateConfigInfo?.languageVersion}
             </span>
           </div>
           <div className={styles.swTemplateUpdateTimeBox}>
             <span className={styles.swHeaderLable}>更新时间：</span>
             <span className={styles.swHeaderValue}>
-              {templateConfigInfo?.updateTime}
+              {templateConfigInfo?.updateTime
+                ? moment(templateConfigInfo?.updateTime).format(
+                    "YYYY-MM-DD HH:mm:ss"
+                  )
+                : "-"}
             </span>
           </div>
           <div className={styles.swHeaderGoback}></div>
@@ -221,19 +248,26 @@ const ProjectSubmitWork = () => {
             ></ButtonComponent>
           </MyPopconfirm>
         </div>
-      </div>
+      </div>}
       <div className={styles.swContent}>
-        <div className={styles.swFormBox}>
+       {fullScreenShow ? null : <div className={styles.swFormBox}>
           <ConfigForm
             onRef={configFormRef}
             templateConfigInfo={templateConfigInfo}
             setParameter={setParameter}
+            setSelectedNodeId={setSelectedNodeId}
           />
-        </div>
-        <div className={styles.swFlowBox}>
-          <WorkFlow templateConfigInfo={templateConfigInfo} />
+        </div>}
+        <div className={styles.swFlowBox}  style={fullScreenShow ? { height: "100vh" } : undefined}>
+          <WorkFlow templateConfigInfo={templateConfigInfo} setSelectedNodeId={setSelectedNodeId} selectedNodeId={selectedNodeId}/>
         </div>
       </div>
+      <img
+        className={styles.fullScreenBox}
+        src={fullScreenShow ? partialScreen : fullScreen}
+        onClick={() => setFullScreenShow(!fullScreenShow)}
+        alt="全屏"
+      />
     </div>
   );
 };

src/views/Project/ProjectSubmitWork/interface.ts

@@ -12,6 +12,7 @@ export interface IParameter {
   id?: string;
   name: string;
   required: boolean;
+  defaultValue: any;
   domType: IDomType;
   classType: string;
   classTypeName: string;

src/views/Project/ProjectSubmitWork/util.ts

-import { IParameter } from "./interface"
-export const getCheckResult = (parameter: IParameter, value: string): {
-    error: boolean,
-    helperText: string
+import { IParameter } from "./interface";
+export const getCheckResult = (
+  parameter: IParameter,
+  value: string
+): {
+  error: boolean;
+  helperText: string;
 } => {
-    let error = false
-    let helperText = ''
-    // 表单校验
-    if (parameter.required) {
-        if (Array.isArray(value)) {
-            if (value.length === 0) {
-                error = true
-                helperText = '该选项是必填项'
-            }
-        } else if (value === '' || value === null || value === undefined) {
-            error = true
-            helperText = '该选项是必填项'
-        }
+  let error = false;
+  let helperText = "";
+  // 表单校验
+  if (parameter.required) {
+    if (Array.isArray(value)) {
+      if (value.length === 0) {
+        error = true;
+        helperText = "该选项是必填项";
+      }
+    } else if (value === "" || value === null || value === undefined) {
+      error = true;
+      helperText = "该选项是必填项";
     }
-    if (parameter.validators.length > 0) {
-        parameter.validators.forEach((validator)=>{
-            const reg = new RegExp(validator.regex)
-            if (!reg.test(value)) {
-                error = true
-                helperText = validator.message
-            }
-        })
-    }
-    return {
-        error,
-        helperText
-    }
-}
+  }
+  if (parameter.validators.length > 0) {
+    parameter.validators.forEach((validator) => {
+      const reg = new RegExp(validator.regex);
+      if (!reg.test(value)) {
+        error = true;
+        helperText = validator.message;
+      }
+    });
+  }
+  return {
+    error,
+    helperText,
+  };
\ No newline at end of file
+};

src/views/Project/ProjectWorkbench/index.tsx

 /*
  * @Author: rocosen
  * @Date: 2022-06-12 10:05:13
- * @LastEditors: rocosen
- * @LastEditTime: 2022-06-07 20:23:02
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-04 20:23:26
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import { memo, useState, useMemo, useEffect } from "react";
-
+import { memo, useMemo } from "react";
 import { Box } from "@mui/system";
-import { useStores } from "@/store/index";
-import NoProject from "@/components/NoProject";
 import { observer } from "mobx-react-lite";
+import { useLocation } from "react-router-dom";
+
 import projectImg from "@/assets/project/projectIconSmall.svg";
 import WorkbenchTemplate from "./workbenchTemplate";
 import WorkbenchList from "./workbenchList";
 import Tabs from "@/components/mui/Tabs";
 import usePass from "@/hooks/usePass";
-
 import Template from "@/assets/project/workbenchTemplate.svg"
 import Template_select from "@/assets/project/workbenchTemplate_select.svg"
 import List from "@/assets/project/workbenchList.svg"
@@ -25,54 +23,43 @@ import List_select from "@/assets/project/workbenchList_select.svg"
 
 
 
-//ui
-import ButtonDemo from "@/views/mui_demo/button"
-import InputDemo from "@/views/mui_demo/input"
-
 const ProjectWorkbench = observer(() => {
-    const { currentProjectStore } = useStores();
-    const isPass = usePass();
-
-    useEffect(() => {
-        console.log(isPass("PROJECT_WORKBENCH_FLOES_USE", 'USER'), "11111111111");
-        console.log(isPass("PROJECT_WORKBENCH_FLOES"), 'wwwwwwwwwww')
-    }, [])
-
-    const tabList = useMemo(() => {
-        return [
-            {
-                label: "工作流模版",
-                value: "workbenchTemplate",
-                component: <WorkbenchTemplate />,
-                hide: !isPass("PROJECT_WORKBENCH_FLOES"),
-                icon: Template,
-                iconed: Template_select
-            },
-            {
-                label: "任务列表",
-                value: "workbenchList",
-                component: <WorkbenchList />,
-                hide: !isPass("PROJECT_WORKBENCH_JOBS"),
-                icon: List,
-                iconed: List_select
-            },
-            {
-                label: "按钮组件",
-                value: "MUI_BUTTON",
-                component: <ButtonDemo />,
-                icon: List,
-                iconed: List_select
-            },
-            {
-                label: "输入框组件",
-                value: "MUI_INPUT",
-                component: <InputDemo />,
-                icon: List,
-                iconed: List_select
-            },
-        ];
-    }, []);
-
+  const isPass = usePass();
+  const location: any = useLocation()
+  const tabList = useMemo(() => {
+    return [
+      {
+        label: "工作流模版",
+        value: "workbenchTemplate",
+        component: <WorkbenchTemplate />,
+        hide: !isPass("PROJECT_WORKBENCH_FLOES"),
+        icon: Template,
+        iconed: Template_select,
+      },
+      {
+        label: "任务列表",
+        value: "workbenchList",
+        component: <WorkbenchList />,
+        hide: !isPass("PROJECT_WORKBENCH_JOBS"),
+        icon: List,
+        iconed: List_select,
+      },
+      //   {
+      //     label: "按钮组件",
+      //     value: "MUI_BUTTON",
+      //     component: <ButtonDemo />,
+      //     icon: List,
+      //     iconed: List_select,
+      //   },
+      //   {
+      //     label: "输入框组件",
+      //     value: "MUI_INPUT",
+      //     component: <InputDemo />,
+      //     icon: List,
+      //     iconed: List_select,
+      //   },
+    ];
+  }, [isPass]);
 
     return (
         <div style={{ padding: 24 }}>
@@ -83,7 +70,7 @@ const ProjectWorkbench = observer(() => {
                 </span>
             </div>
             <Box sx={{ width: "100%", typography: "body1" }}>
-                <Tabs tabList={tabList} />
+                <Tabs tabList={tabList} defaultValue={location?.state?.type || 'workbenchTemplate'}  />
             </Box>
         </div>
     );

src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx

@@ -2,18 +2,20 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-07 21:39:30
+ * @LastEditTime: 2022-07-05 18:06:17
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import { memo, SetStateAction, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { Box, Typography } from "@mui/material";
-import styles from "./index.module.css";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import SearchIcon from "@mui/icons-material/Search";
-import Button from "@/components/mui/Button";
+import { toJS } from "mobx";
+import { observer } from "mobx-react-lite";
 // import Button from "@mui/material/Button";
 import Add from "@mui/icons-material/Add";
+
+import Button from "@/components/mui/Button";
 import useMyRequest from "@/hooks/useMyRequest";
 import TemplateBox from "./components/templateBox"
 import SimpleDialog from "./components/simpleDialog"
@@ -25,12 +27,12 @@ import {
     getAddWorkbenchTemplate,
     addWorkbenchTemplate
 } from "@/api/workbench_api";
-import _ from "lodash";
-import { IResponse, useHttp } from "@/api/http";
-import { useStores } from "@/store";
 import usePass from "@/hooks/usePass";
-import { toJS } from "mobx";
-import { observer } from "mobx-react-lite";
+import ReactFlowEdit from '@/views/WorkFlowEdit'
+import { useStores } from "@/store";
+
+import styles from "./index.module.css";
+
 
 const ProjectMembers = observer(() => {
     const { currentProjectStore } = useStores();
@@ -101,12 +103,6 @@ const ProjectMembers = observer(() => {
         console.log('projectIdData: ', projectIdData);
     }, [projectIdData])
 
-
-    /** 点击添加工作流模版 */
-    const onAddMember = () => {
-        // setAddMemberDialog(true);
-    };
-
     /** 删除模板 */
     const deleteTemplate = () => {
         delTemplate({
@@ -241,6 +237,8 @@ const ProjectMembers = observer(() => {
                 addTemplateCallback={addTemplateCallback}
                 searchTemplateNameCallback={searchTemplateNameCallback}
             />
+            
+            {/* <ReactFlowEdit/> */}
 
             <SimpleDialog
                 text={'确认移除该模板吗？'}

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

@@ -84,17 +84,16 @@ const AddProject = (props: any) => {
 
   const handleClickOpen = () => {
     DialogRef.current.handleClickOpen();
-    initData()
+    initData();
   };
 
   const initData = () => {
-    setName('')
-    setDesc('')
+    setName("");
+    setDesc("");
     if (zoneIdOptions.length > 0) {
-      setZoneId(zoneIdOptions[0].id)
+      setZoneId(zoneIdOptions[0].id);
     }
-  }
-
+  };
 
   const checkName = (name: string) => {
     if (name) {

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

@@ -45,7 +45,6 @@ const CurrentProject = observer(() => {
 
   const openAddProject = () => {
     addProjectRef.current.handleClickOpen();
-    // setAddProjectOpen(true);
     setProjectListOpen(false);
   };
 
@@ -59,9 +58,12 @@ const CurrentProject = observer(() => {
         <img src={logo} alt="" className={style.logo} />
         <div className={style.info}>
           <div className={style.productName}>
-            {currentProjectStore.currentProductInfo.name || "CADD"}
+            {currentProjectStore.currentProductInfo.name}
           </div>
-          <div className={style.projectName} title={currentProjectStore.currentProjectInfo.name}>
+          <div
+            className={style.projectName}
+            title={currentProjectStore.currentProjectInfo.name}
+          >
             {currentProjectStore.currentProjectInfo.name || "暂无项目"}
           </div>
         </div>

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

@@ -30,6 +30,8 @@ interface IProps extends ReactFlowProps {
   tasks?: ITask[];
   /** 点击batch事件 */
   onBatchClick?: (val: string) => void;
+  setSelectedNodeId?: (val:string) => void;
+  selectedNodeId?: string;
 }
 
   /** 获取imgUrl */
@@ -119,9 +121,7 @@ const FlowNode = (props: any) => {
 };
 
 const Flow = (props: IProps) => {
-  const { tasks, onBatchClick } = props;
-  console.log(tasks,'tasks')
-  const [selectedNodeId, setSelectedNodeId] = useState<string>("");
+  const { tasks, onBatchClick, setSelectedNodeId, selectedNodeId } = props;
   /** 自定义的节点类型 */
   const nodeTypes = useMemo(() => {
     return { batchNode: BatchNode, flowNode: FlowNode };
@@ -272,21 +272,24 @@ const Flow = (props: IProps) => {
 
   /** flowNode点击事件 */
   const onNodeClick = (e: any, node: Node) => {
+    
     tasks?.forEach((item) => {
       if (item.id === node.id) {   
         if (item.parentNode) {
-          setSelectedNodeId(item.parentNode);
+          setSelectedNodeId && setSelectedNodeId(item.parentNode);
           onBatchClick && onBatchClick(item.parentNode);
+          document.getElementById(`point${item.parentNode}`)?.scrollIntoView(true)
         } else {
-          setSelectedNodeId(node.id);
+          setSelectedNodeId && setSelectedNodeId(node.id);
           onBatchClick && onBatchClick(node.id || "");
+          document.getElementById(`point${node.id}`)?.scrollIntoView(true)
         }
       }
     });
   };
 
   const handlePaneClick = () => {
-    setSelectedNodeId('');
+    setSelectedNodeId && setSelectedNodeId('');
     onBatchClick && onBatchClick('');
   }
 

src/views/Project/project.ts

-import { product, hpczone, getDataFileToken } from "@/api/project_api";
+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-17 14:48:57
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-04 19:38:48
+ * @FilePath: /bkunyun/src/views/Project/project.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import {
+  getProjectList as getProjectListApi,
+  hpczone,
+  getDataFileToken,
+} from "@/api/project_api";
 
 export const getProjectList = async () => {
-  const res = await product({ product: "CADD" });
+  const res = await getProjectListApi({ product: "CADD" });
   return res.data;
 };
 
@@ -12,7 +24,7 @@ export const setFileServerEndPointLocalStorage = async (zoneId: string) => {
   if (Array.isArray(res)) {
     res.forEach((item: any) => {
       if (item.id === zoneId) {
-        fileServerEndPoint = item.storageConfig.fileServerEndPoint;
+        fileServerEndPoint = item.storageConfig?.fileServerEndPoint;
       }
     });
     localStorage.setItem("fileServerEndPoint", fileServerEndPoint);

src/views/WorkFlowEdit/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;
+  }
+  .swContent {
+    display: flex;
+    height: calc(100vh - 56px);
+  }
+  .swFormBox {
+    background-color: #fff;
+    border-right: 1xp solid rgba(235, 237, 240, 1);
+    width: 608px;
+    overflow-y: scroll;
+    box-sizing: border-box;
+    padding: 36px;
+  }
+  .swFlowBox {
+    flex: 1;
+    height: calc(100vh - 56px);
+  }
+  
\ No newline at end of file

src/views/WorkFlowEdit/index.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-21 20:03:56
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-05 16:31:28
+ * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import React, {  useState } from "react";
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import IconButton from "@mui/material/IconButton";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import MyPopconfirm from "@/components/mui/MyPopconfirm";
+import ButtonComponent from "@/components/mui/Button";
+import { ITemplateConfig } from "../Project/ProjectSubmitWork/interface";
+
+import styles from './index.module.css'
+
+
+const WorkFlowEdit = () => {
+  const [templateConfigInfo, setTemplateConfigInfo] =
+    useState<ITemplateConfig>();
+  const location: any = useLocation();
+  const navigate = useNavigate();
+
+ 
+  return (
+    <div className={styles.swBox}>
+      <div className={styles.swHeader}>
+        <div className={styles.swHeaderLeft}>
+          <MyPopconfirm
+            title="返回后，当前页面已填写内容将不保存，确认返回吗？"
+            onConfirm={()=>console.log(11)}
+          >
+            <IconButton
+              color="primary"
+              // onClick={() => handleGoBack()}
+              aria-label="upload picture"
+              component="span"
+              size="small"
+            >
+              <ArrowBackIosNewIcon
+                sx={{
+                  color: "rgba(194, 198, 204, 1)",
+                  width: "12px",
+                  height: "12px",
+                }}
+              />
+            </IconButton>
+          </MyPopconfirm>
+        </div>
+        <div className={styles.swHeaderRight}>
+          <MyPopconfirm
+            title="提交前请先确认参数填写无误，确认提交吗？"
+            onConfirm={()=>console.log(2)}
+          >
+            <ButtonComponent
+              text="保存"
+              // click={handleSubmitForm}
+            ></ButtonComponent>
+          </MyPopconfirm>
+        </div>
+      </div>
+      <div className={styles.swContent}>
+        <div className={styles.swFormBox}>
+          左侧
+        </div>
+        <div className={styles.swFlowBox}>
+          右侧
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WorkFlowEdit;