Merge branch 'feat-20220620-taskSubmission' into 'release'

Feat 20220620 task submission

See merge request !71

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/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

@@ -12,7 +12,8 @@ import { useState, useMemo, useEffect } 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";
+import { useImperativeHandle } from "react";
 
 interface ITabList {
   label: string;
@@ -20,32 +21,50 @@ interface ITabList {
   component: JSX.Element;
   icon?: string;
   iconed?: string;
-  hide?: boolean
+  hide?: boolean;
 }
 
 interface IProps {
   tabList: ITabList[];
+  onRef?: any;
 }
 
 const Tabs = (props: IProps) => {
   const { tabList } = props;
-  const [value, setValue] = useState(tabList.filter(e => !e.hide)[0].value);
+  const [value, setValue] = useState(tabList.filter((e) => !e.hide)[0].value);
 
   const onChange = (val: string) => {
     setValue(val);
   };
 
+  const setActiveTab = (val: string) => {
+    onChange(val);
+  };
+
+  useImperativeHandle(props.onRef, () => {
+    return {
+      setActiveTab: setActiveTab,
+    };
+  });
+
   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}>
@@ -57,7 +76,7 @@ const Tabs = (props: IProps) => {
           aria-label="lab API tabs example"
         >
           {tabList?.map((item, key) => {
-            if (item.hide) return ""
+            if (item.hide) return "";
             return (
               <Tab
                 key={key}

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/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

@@ -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";
 
@@ -97,11 +98,16 @@ const ProjectSubmitWork = observer(() => {
     path = path.slice(13);
     if (path) {
       navigate(`/product/cadd/projectData`, {
-        state: { pathName: "path" },
+        state: { pathName: path },
       });
     }
   };
 
+  const outputPathTransform = (path: string) => {
+    path = path.slice(13);
+    return `ProjectData${path}`;
+  };
+
   const getOutouts = (outputs: any) => {
     if (outputs) {
       let result = Object.keys(outputs);
@@ -169,7 +175,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]);
           }
         });
@@ -259,7 +267,11 @@ const ProjectSubmitWork = observer(() => {
           <div className={styles.swHeaderLeft}>
             <IconButton
               color="primary"
-              onClick={() => navigate(-1)}
+              onClick={() =>
+                navigate("/product/cadd/projectWorkbench", {
+                  state: { from: "detail" },
+                })
+              }
               aria-label="upload picture"
               component="span"
               size="small"
@@ -352,12 +364,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

@@ -141,24 +141,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;
+                }
+              });
           }
         });
       }
@@ -258,7 +262,7 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
               {parameter.domType.toLowerCase() === "input" && (
                 <MyInput
-                  value={parameter.value}
+                  value={parameter.value || ""}
                   onChange={(e: any) =>
                     handleParameterChange(e, taskId, parameter.name || "")
                   }
@@ -449,11 +453,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/index.tsx

@@ -24,6 +24,7 @@ import { templateConfigJson } from "./mock";
 import { useMessage } from "@/components/MySnackbar";
 import { toJS } from "mobx";
 import { useStores } from "@/store";
+import moment from "moment";
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
 
 const ProjectSubmitWork = () => {
@@ -37,8 +38,10 @@ const ProjectSubmitWork = () => {
   let configFormRef: any = React.createRef();
 
   // 前往工作台
-  const goToWorkbench = () => {
-    navigate("/product/cadd/projectWorkbench");
+  const goToWorkbench = (toWorkbenchList = false) => {
+    navigate("/product/cadd/projectWorkbench", {
+      state: { from: toWorkbenchList ? "submitWork" : "" },
+    });
   };
 
   // 返回
@@ -65,7 +68,7 @@ const ProjectSubmitWork = () => {
   const { run: submitWorkFlowRun } = useMyRequest(submitWorkFlow, {
     onSuccess: (res) => {
       Message.success("提交成功");
-      goToWorkbench();
+      goToWorkbench(true);
     },
   });
 
@@ -80,20 +83,22 @@ 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;
+            } else {
+              return;
+            }
+            if (getCheckResult(parameter, value).error === true) {
+              isCheck = false;
+            }
+            tack.isCheck = isCheck;
+          });
       } else {
         return;
       }
@@ -106,7 +111,6 @@ const ProjectSubmitWork = () => {
     const { name, outputPath, nameAndOutputPathCheck } =
       configFormRef.current.getNameAndPath();
     if (!nameAndOutputPathCheck) {
-      console.log(123);
       check = false;
     }
     const result: ITemplateConfig = _.cloneDeep(templateConfigInfo);
@@ -118,8 +122,6 @@ const ProjectSubmitWork = () => {
           parameter.error = checkResult.error;
           parameter.helperText = checkResult.helperText;
           if (checkResult.error) {
-            console.log(tack);
-            console.log(parameter);
             check = false;
           }
         });
@@ -205,7 +207,11 @@ const ProjectSubmitWork = () => {
           <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>

src/views/Project/ProjectWorkbench/index.tsx

@@ -6,7 +6,7 @@
  * @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 React, { memo, useState, useMemo, useEffect } from "react";
 
 import { Box } from "@mui/system";
 import { useStores } from "@/store/index";
@@ -17,76 +17,84 @@ import WorkbenchTemplate from "./workbenchTemplate";
 import WorkbenchList from "./workbenchList";
 import Tabs from "@/components/mui/Tabs";
 import usePass from "@/hooks/usePass";
+import { useLocation } from "react-router-dom";
 
-import Template from "@/assets/project/workbenchTemplate.svg"
-import Template_select from "@/assets/project/workbenchTemplate_select.svg"
-import List from "@/assets/project/workbenchList.svg"
-import List_select from "@/assets/project/workbenchList_select.svg"
-
-
+import Template from "@/assets/project/workbenchTemplate.svg";
+import Template_select from "@/assets/project/workbenchTemplate_select.svg";
+import List from "@/assets/project/workbenchList.svg";
+import List_select from "@/assets/project/workbenchList_select.svg";
 
 //ui
-import ButtonDemo from "@/views/mui_demo/button"
-import InputDemo from "@/views/mui_demo/input"
+// import ButtonDemo from "@/views/mui_demo/button";
+// import InputDemo from "@/views/mui_demo/input";
 
 const ProjectWorkbench = observer(() => {
-    const { currentProjectStore } = useStores();
-    const isPass = usePass();
+  const { currentProjectStore } = useStores();
+  const isPass = usePass();
+  const location = useLocation();
+
+  let tabsRef: any = React.createRef();
 
-    useEffect(() => {
-        console.log(isPass("PROJECT_WORKBENCH_FLOES_USE", 'USER'), "11111111111");
-        console.log(isPass("PROJECT_WORKBENCH_FLOES"), 'wwwwwwwwwww')
-    }, [])
+  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
-            },
-        ];
-    }, []);
+  useEffect(() => {
+    const locationInfo: any = location?.state;
+    const from = locationInfo?.from;
+    // 如果是从详情页来的，tab展示为任务列表
+    if (from === "detail" || from === "submitWork") {
+      tabsRef?.current?.setActiveTab("workbenchList");
+    }
+  }, [location, tabsRef]);
 
+  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,
+      //   },
+    ];
+  }, []);
 
-    return (
-        <div style={{ padding: 24 }}>
-            <div style={{ display: "flex", alignItems: "center" }}>
-                <img src={projectImg} alt="项目logo" />
-                <span style={{ marginLeft: 12 }}>
-                    工作台
-                </span>
-            </div>
-            <Box sx={{ width: "100%", typography: "body1" }}>
-                <Tabs tabList={tabList} />
-            </Box>
-        </div>
-    );
+  return (
+    <div style={{ padding: 24 }}>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <img src={projectImg} alt="项目logo" />
+        <span style={{ marginLeft: 12 }}>工作台</span>
+      </div>
+      <Box sx={{ width: "100%", typography: "body1" }}>
+        <Tabs onRef={tabsRef} tabList={tabList} />
+      </Box>
+    </div>
+  );
 });
 
 export default memo(ProjectWorkbench);