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

Feat 20220705 custom template

See merge request !27

src/components/FileSelect/index.module.css

-.rootTitle {
-  border-radius: 4px 4px 0 0;
-  background-color: rgba(25, 118, 210, 0.08);
-  /* background-color: rgba(25, 118, 210, 0.5); */
-  line-height: 44px;
-  color: rgba(30, 38, 51, 1);
-  font-size: 14px;
-  font-weight: 600;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-.rootTitleActive {
-  background-color: rgba(25, 118, 210, 0.2);
-}
-.bigFolderIcon {
-  margin: 0 9px;
-}
-.treeLabel {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-.treeLabelText {
-  line-height: 44px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -o-text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 320px;
-}
-.labelFolderIcon {
-  margin-right: 9px;
-}

src/components/FileSelect/index.tsx

-import MyDialog from "../mui/Dialog";
-import { useStores } from "@/store";
-import { observer } from "mobx-react-lite";
-import { toJS } from "mobx";
-import { useEffect, useState } from "react";
-import CloudEController from "@/api/fileserver/CloudEController";
-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, type = "path" } = props;
-  // const { onConfirm, type = "dataset" } = props;
-  const { currentProjectStore } = useStores();
-  const projectId = toJS(currentProjectStore.currentProjectInfo.id);
-  const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
-  const [treeData, setTreeData] = useState<Array<any>>([]);
-  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(
-        "/",
-        fileToken,
-        projectId,
-        false
-      )?.then((res: any) => {
-        if (Array.isArray(res.data)) {
-          setTreeData(res.data);
-        } else {
-          setTreeData([]);
-        }
-        if (type === "dataset") {
-          getDataFindRun({
-            projectId: projectId as string,
-            path: "/",
-            // path: path === "/" ? "/" : `${path}/`,
-          });
-        }
-      });
-    }
-  }, [projectId, fileToken, type, getDataFindRun]);
-
-  // const renderLabel = (labelNmae: string) => {
-  const renderLabel = (node: any) => {
-    return (
-      <span className={style.treeLabel}>
-        {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>
-    );
-  };
-
-  const handleRoot = () => {
-    setNewPath("/");
-    setRootActive(true);
-  };
-
-  const onNodeSelect = (a: any, b: any) => {
-    setNewPath(b);
-    setRootActive(false);
-  };
-
-  // 给路径去掉第一个'/'然后结尾加上文件名 方便后面直接使用
-  const idFunc = (item: any) => {
-    return `${item.dir.substr(1)}${item.name}`;
-  };
-
-  const fileSelectOnConfirm = () => {
-    onConfirm(newPath);
-  };
-
-  return (
-    <MyDialog
-      open={props.open}
-      onClose={props.onClose}
-      onConfirm={fileSelectOnConfirm}
-      title={type}
-    >
-      <div
-        className={classNames({
-          [style.rootTitle]: true,
-          [style.rootTitleActive]: rootActive,
-        })}
-        onClick={handleRoot}
-      >
-        <img className={style.bigFolderIcon} src={bigFolderIcon} alt="" />
-        ProjectData
-      </div>
-      <MyTreeView
-        treeData={treeData}
-        renderLabel={renderLabel}
-        onNodeSelect={onNodeSelect}
-        idFunc={idFunc}
-        treeViewSx={{
-          width: 400,
-          overflow: "hidden",
-        }}
-      ></MyTreeView>
-    </MyDialog>
-  );
-});
-
-export default FileSelect;

src/views/Project/ProjectData/index.tsx

@@ -21,11 +21,10 @@ import { useStores } from "@/store";
 import CloudEController from "@/api/fileserver/CloudEController";
 import { toJS } from "mobx";
 import moment from "moment";
-import NoProject from "@/components/NoProject";
+import NoProject from "@/components/BusinessComponents/NoProject";
 import usePass from "@/hooks/usePass";
 import { storageUnitFromB } from "@/utils/util";
 import { useLocation } from "react-router-dom";
-import FileSelect from "@/components/BusinessComponents/FileSelect";
 import { getDataFind, getDataFileSearch } from "@/api/project_api";
 
 const theme = createTheme({

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -19,7 +19,7 @@ import {
 import { useStores } from "@/store";
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
-import InformationDisplay from "@/components/InformationDisplay";
+import InformationDisplay from "@/components/CommonComponents/InformationDisplay";
 import classnames from "classnames";
 import { Button, TextField } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";

src/views/Project/ProjectSetting/index.tsx

@@ -10,7 +10,7 @@ import { memo, useMemo } from "react";
 
 import { Box } from "@mui/system";
 import { useStores } from "@/store/index";
-import NoProject from "@/components/NoProject";
+import NoProject from "@/components/BusinessComponents/NoProject";
 import { observer } from "mobx-react-lite";
 import projectImg from "@/assets/project/projectIconSmall.svg";
 import ProjectMembers from "./ProjectMembers";

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

@@ -9,7 +9,6 @@ import ReactFlow, {
 	Edge,
 } from "react-flow-renderer";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import _ from "lodash";
 
 import { uuid } from "@/utils/util";
 import { IEdge, IParameter, ITask } from "../../ProjectSubmitWork/interface";
@@ -41,6 +40,8 @@ interface IProps extends ReactFlowProps {
 	setTasks?: (val: ITask[]) => void;
 	/** 点击流程node 节点 返回唯一标识符 */
 	onFlowNodeClick?: (val: string) => void;
+	/** 监听事件的状态 */
+	ListenState?: boolean;
 }
 
 const Flow = (props: IProps) => {
@@ -52,6 +53,7 @@ const Flow = (props: IProps) => {
 		type: flowType = "default",
 		setTasks,
 		onFlowNodeClick,
+		ListenState = true,
 		...other
 	} = props;
 	/** 自定义的节点类型 */
@@ -126,7 +128,7 @@ const Flow = (props: IProps) => {
 	/** 删除批节点或者线 */
 	const deleteSelectBatchNode = useCallback(
 		(e: any) => {
-			if (e.keyCode === 8) {
+			if (e.keyCode === 8 && ListenState) {
 				/** 删除批节点逻辑 */
 				if (inSideBatchNodeId) {
 					const newVal =

src/views/WorkFlowEdit/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-07-15 16:35:59
+ * @LastEditTime: 2022-07-15 18:44:41
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -224,6 +224,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 						setTasks={setTemplateConfigInfo}
 						type="edit"
 						onFlowNodeClick={handleNodeClick}
+						ListenState={!saveFormDialog}
 					/>
 				</div>
 			</div>