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

cn-Feat 20220705 custom template

See merge request !85

src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css

+.RadiosBox {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #e6e8eb;
+  border-radius: 4px;
+  background-color: #e6e8eb;
+  cursor: pointer;
+  height: 32px;
+  box-sizing: border-box;
+  padding: 2px;
+}
+.radio {
+  height: 28px;
+  box-sizing: border-box;
+  font-size: 14px;
+  color: #565c66;
+  border-radius: 4px;
+  line-height: 20px;
+  padding: 3px 18px;
+  background-color: #e6e8eb;
+  display: flex;
+  align-items: center;
+}
+.radioActive {
+  color: #1370ff;
+  background-color: #fff;
+  border: 1px solid #e6e8eb;
+}

src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx

+// 按钮样式的单选组
+import classnames from "classnames";
+import style from "./index.module.css";
+
+type radioOption = {
+  value: string;
+  label: string;
+};
+
+type IRadioGroupOfButtonStyleProps = {
+  radioOptions: Array<radioOption>;
+  value: string;
+  handleRadio: any;
+};
+
+const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
+  const { radioOptions, value, handleRadio } = props;
+
+  return (
+    <div className={style.RadiosBox}>
+      {radioOptions.map((options) => {
+        return (
+          <div
+            key={options.value}
+            className={classnames({
+              [style.radio]: true,
+              [style.radioActive]: value === options.value,
+            })}
+            onClick={() => handleRadio(options.value)}
+          >
+            {options.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default RadioGroupOfButtonStyle;

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

@@ -34,7 +34,9 @@ const MoveFile = (props: any) => {
   const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false);
   const [treeData, setTreeData] = useState<any>([]);
   const [renderTreeData, setRenderTreeData] = useState<any>([]);
-  let moveFileDialogRef: any = React.createRef();
+  const [moveFileDialogRef, setMoveFileDialogRef] = useState<any>(
+    React.createRef()
+  );
   // 要移动的文件夹  之后用来隐藏文件夹树中同路径的文件夹
   const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]);
 

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

@@ -99,18 +99,20 @@
   color: rgba(138, 144, 153, 1);
   font-size: 14px;
   line-height: 22px;
+  width: 72px;
+  margin-right: 44px;
 }
 .taskInfoValue {
   color: rgba(30, 38, 51, 1);
   font-size: 14px;
   line-height: 22px;
-  max-width: 210px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   display: flex;
-  overflow: hidden;
   position: relative;
   align-items: center;
+  text-align: left;
+  word-break: break-all;
+  flex: 1;
+  justify-content: flex-end;
 }
 .taskInfoValueClick {
   cursor: pointer;
@@ -159,6 +161,7 @@
   background: #ffffff;
   box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
   border-radius: 4px;
+  z-index: 1002;
 }
 .option {
   padding: 7px 16px;

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-07-06 11:01:44
+ * @LastEditTime: 2022-07-06 17:05:13
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -75,8 +75,8 @@ const ProjectSubmitWork = observer(() => {
 
   /** 获取模版数据 */
   const { run } = useMyRequest(fetchWorkFlowJob, {
-    pollingInterval:1000 * 60,
-    pollingWhenHidden:false,
+    pollingInterval: 1000 * 60,
+    pollingWhenHidden: false,
     onSuccess: (res: IResponse<ITaskInfo>) => {
       getOutouts(res.data.outputs);
       setWorkFlowJobInfo(res.data);
@@ -85,7 +85,6 @@ const ProjectSubmitWork = observer(() => {
 
   useEffect(() => {
     const locationInfo: any = location?.state;
-    console.log(333)
     run({
       id: locationInfo.taskId,
     });
@@ -103,15 +102,28 @@ const ProjectSubmitWork = observer(() => {
       navigate(`/product/cadd/projectData`, {
         state: { pathName: path },
       });
+    } else {
+      navigate(`/product/cadd/projectData`, {
+        state: { pathName: "/" },
+      });
     }
   };
 
-/** 返回事件 */
+  // 通过文件路径获取文件所在文件夹路径  如 输入 /home/cloudam/task_a.out  输出/home/cloudam/
+  const getFolderPath = (path: string) => {
+    const lastIndex = path.lastIndexOf("/");
+    if (lastIndex !== -1) {
+      path = path.slice(0, lastIndex + 1);
+    }
+    return path;
+  };
+
+  /** 返回事件 */
   const onBack = useCallback(() => {
-    navigate('/product/cadd/projectWorkbench', {
-      state: {type: 'workbenchList'}
-    })
-  },[navigate])
+    navigate("/product/cadd/projectWorkbench", {
+      state: { type: "workbenchList" },
+    });
+  }, [navigate]);
 
 	const outputPathTransform = (path: string) => {
 		path = path.slice(13);
@@ -202,7 +214,7 @@ const ProjectSubmitWork = observer(() => {
 			if (errorCode === 0) {
 				message.success("操作成功！");
 			}
-      onBack()
+			onBack();
 		},
 	});
 
@@ -213,7 +225,7 @@ const ProjectSubmitWork = observer(() => {
 			if (errorCode === 0) {
 				message.success("操作成功！");
 			}
-      onBack()
+			onBack();
 		},
 	});
 
@@ -327,7 +339,7 @@ const ProjectSubmitWork = observer(() => {
 												<div key={index} className={styles.outputLi}>
 													<MyPopconfirm
 														title="即将跳转至项目数据内该任务的结果目录，确认继续吗？"
-                            onConfirm={() => goToProjectData(item.path)}
+														onConfirm={() => goToProjectData(getFolderPath(item.path))}
 													>
 														<div className={styles.outputLiLeft}>
 															<img
@@ -499,7 +511,11 @@ const ProjectSubmitWork = observer(() => {
 													return (
 														<div
                               key={index}
-                              className={styles.option}
+                              className={classNames({
+                                [styles.option]: true,
+                                [styles.optionActive]:
+                                  activeFlowIndex === index,
+                              })}
                               onClick={() => setActiveFlowIndex(index)}
                             >
                               {item.title}

src/views/Project/ProjectSubmitWork/index.tsx

@@ -30,7 +30,6 @@ import MyPopconfirm from "@/components/mui/MyPopconfirm";
 
 import styles from "./index.module.css";
 
-
 const ProjectSubmitWork = () => {
   const Message = useMessage();
   const { currentProjectStore } = useStores();
@@ -68,7 +67,14 @@ const ProjectSubmitWork = () => {
         task.parameters.forEach((parameter) => {
           let value: any = undefined;
           if (parameter.defaultValue) {
+            if (
+              parameter.domType.toLowerCase() === "multipleselect" ||
+              parameter.domType.toLowerCase() === "checkbox"
+            ) {
+              value = parameter.defaultValue.split(",");
+            } else {
               value = parameter.defaultValue;
+            }
           } else if (
             parameter.domType.toLowerCase() === "multipleselect" ||
             parameter.domType.toLowerCase() === "checkbox"
@@ -193,7 +199,8 @@ const ProjectSubmitWork = () => {
 
   return (
     <div className={styles.swBox}>
-     { fullScreenShow ? null : <div className={styles.swHeader}>
+      {fullScreenShow ? null : (
+        <div className={styles.swHeader}>
           <div className={styles.swHeaderLeft}>
             <MyPopconfirm
               title="返回后，当前页面已填写内容将不保存，确认返回吗？"
@@ -248,18 +255,28 @@ const ProjectSubmitWork = () => {
               ></ButtonComponent>
             </MyPopconfirm>
           </div>
-      </div>}
+        </div>
+      )}
       <div className={styles.swContent}>
-       {fullScreenShow ? null : <div className={styles.swFormBox}>
+        {fullScreenShow ? null : (
+          <div className={styles.swFormBox}>
             <ConfigForm
               onRef={configFormRef}
               templateConfigInfo={templateConfigInfo}
               setParameter={setParameter}
               setSelectedNodeId={setSelectedNodeId}
             />
-        </div>}
-        <div className={styles.swFlowBox}  style={fullScreenShow ? { height: "100vh" } : undefined}>
-          <WorkFlow templateConfigInfo={templateConfigInfo} setSelectedNodeId={setSelectedNodeId} selectedNodeId={selectedNodeId}/>
+          </div>
+        )}
+        <div
+          className={styles.swFlowBox}
+          style={fullScreenShow ? { height: "100vh" } : undefined}
+        >
+          <WorkFlow
+            templateConfigInfo={templateConfigInfo}
+            setSelectedNodeId={setSelectedNodeId}
+            selectedNodeId={selectedNodeId}
+          />
         </div>
       </div>
       <img

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

-
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import styles from "../index.module.css";
 import { Box, Typography } from "@mui/material";
 import Button from "@/components/mui/Button";
 import Dialog from "@/components/mui/Dialog";
 import OutlinedInput from "@mui/material/OutlinedInput";
+import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import SearchIcon from "@mui/icons-material/Search";
-import Checkbox from '@mui/material/Checkbox';
-import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
-import noData from '../../../../../assets/project/noTemplate.svg'
+import Checkbox from "@mui/material/Checkbox";
+import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
+import noData from "../../../../../assets/project/noTemplate.svg";
 import _ from "lodash";
 
 const AddTemplate = (props: any) => {
-    const { openAddTemplate, closeAddTemplateBlock, addTemplateList, templateSelectCallback, selectTemplateData, addTemplateCallback, searchTemplateNameCallback } = props;
+  const {
+    openAddTemplate,
+    closeAddTemplateBlock,
+    addTemplateList,
+    templateSelectCallback,
+    selectTemplateData,
+    addTemplateCallback,
+    searchTemplateNameCallback,
+  } = props;
+
+  const [templateType, setTemplateType] = useState("public");
+  const radioOptions = [
+    {
+      value: "public",
+      label: "公共",
+    },
+    {
+      value: "custom",
+      label: "自定义",
+    },
+  ];
+
+  const handleRadio = (value: string) => {
+    setTemplateType(value);
+  };
 
   return (
-        <Box className={styles.addTemplateMask} sx={{ display: openAddTemplate ? 'flex' : 'none' }}  >
-            <Box sx={{ height: '50px', display: 'flex', alignItems: 'center' }} >
-                <CloseOutlinedIcon sx={{ color: "#ffffff", marginRight: "10px", cursor: "pointer" }} onClick={() => {
-                    closeAddTemplateBlock()
-                }} />
+    <Box
+      className={styles.addTemplateMask}
+      sx={{ display: openAddTemplate ? "flex" : "none" }}
+    >
+      <Box sx={{ height: "50px", display: "flex", alignItems: "center" }}>
+        <CloseOutlinedIcon
+          sx={{ color: "#ffffff", marginRight: "10px", cursor: "pointer" }}
+          onClick={() => {
+            closeAddTemplateBlock();
+          }}
+        />
       </Box>
       <Box className={styles.addTemplateBlock}>
         <Box sx={{ padding: "24px 32px" }}>
-                    <Typography sx={{ fontSize: '18px', fontWeight: '600', color: "#1E2633" }}>添加工作流模版</Typography>
-                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: "20px" }}>
+          <Typography
+            sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }}
+          >
+            添加工作流模版
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: "20px",
+            }}
+          >
             <OutlinedInput
               onChange={(e: any) => {
                 _.debounce(() => {
-                                    searchTemplateNameCallback(e.target.value)
+                  searchTemplateNameCallback(e.target.value);
                 }, 200)();
               }}
               placeholder="输入关键词搜索"
@@ -36,45 +77,128 @@ const AddTemplate = (props: any) => {
               sx={{ width: 340, height: 32, marginTop: "20px" }}
               endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
             />
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center",
+              }}
+            >
+              <RadioGroupOfButtonStyle
+                value={templateType}
+                radioOptions={radioOptions}
+                handleRadio={handleRadio}
+              ></RadioGroupOfButtonStyle>
               <Button
                 click={addTemplateCallback}
                 size={"small"}
-                            text={'添加模版' + (selectTemplateData.length === 0 ? "" : `(${selectTemplateData.length})`)}
+                style={{
+                  marginLeft: "12px",
+                }}
+                text={
+                  "添加模版" +
+                  (selectTemplateData.length === 0
+                    ? ""
+                    : `(${selectTemplateData.length})`)
+                }
               />
             </Box>
+          </Box>
 
-                    {
-                        addTemplateList.length === 0 && <Box sx={{
-                            display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)',
-                            justifyContent: 'center'
-                        }}>
+          {addTemplateList.length === 0 && (
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                flexDirection: "column",
+                minHeight: "calc(100vh - 376px)",
+                justifyContent: "center",
+              }}
+            >
               <img alt="" src={noData} />
-                            <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#8A9099' }}>暂未相关模版</Typography>
+              <Typography
+                sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
+              >
+                暂未相关模版
+              </Typography>
             </Box>
-                    }
+          )}
 
-                    <Box sx={{ display: "flex", flexWrap: 'wrap', overflowX: 'hidden', overflowY: 'overlay', marginLeft: '-8px' }} >
-                        {
-                            addTemplateList.map((item: any, key: any) => {
+          <Box
+            sx={{
+              display: "flex",
+              flexWrap: "wrap",
+              overflowX: "hidden",
+              overflowY: "overlay",
+              marginLeft: "-8px",
+            }}
+          >
+            {addTemplateList.map((item: any, key: any) => {
               return (
-                                    <Box className={styles.addTemplateBox} onClick={() => {
-                                        templateSelectCallback(item.id)
+                <Box
+                  className={styles.addTemplateBox}
+                  onClick={() => {
+                    templateSelectCallback(item.id);
+                  }}
+                  sx={{
+                    border: selectTemplateData.includes(item.id)
+                      ? "1px solid #1370FF"
+                      : "1px solid #EBEDF0;",
+                  }}
+                  key={item.id}
+                >
+                  <Box
+                    sx={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        fontSize: "14px",
+                        fontWeight: "600",
+                        color: "#1E2633",
+                        marginBottom: "4px",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
                       }}
-                                        sx={{ border: selectTemplateData.includes(item.id) ? '1px solid #1370FF' : "1px solid #EBEDF0;" }}
                     >
-                                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', }}>
-                                            <Typography sx={{ fontSize: '14px', fontWeight: '600', color: '#1E2633', marginBottom: "4px", overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.title}</Typography>
-                                            <Checkbox size="small" sx={{ padding: "0px" }} checked={selectTemplateData.includes(item.id)} />
+                      {item.title}
+                    </Typography>
+                    <Checkbox
+                      size="small"
+                      sx={{ padding: "0px" }}
+                      checked={selectTemplateData.includes(item.id)}
+                    />
                   </Box>
-                                        <Box sx={{ display: 'flex', marginBottom: "8px" }}>
-                                            <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#1370FF', marginRight: "24px" }}>版本：{item.version}</Typography>
-                                            <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#1370FF' }}>更新时间：{item.updateTime}</Typography>
+                  <Box sx={{ display: "flex", marginBottom: "8px" }}>
+                    <Typography
+                      sx={{
+                        fontSize: "12px",
+                        fontWeight: "400",
+                        color: "#1370FF",
+                        marginRight: "24px",
+                      }}
+                    >
+                      版本：{item.version}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        fontSize: "12px",
+                        fontWeight: "400",
+                        color: "#1370FF",
+                      }}
+                    >
+                      更新时间：{item.updateTime}
+                    </Typography>
                   </Box>
-                                        <Typography className={styles.templateDescText} >{item.description}</Typography>
+                  <Typography className={styles.templateDescText}>
+                    {item.description}
+                  </Typography>
                 </Box>
-                                )
-                            })
-                        }
+              );
+            })}
           </Box>
         </Box>
       </Box>

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

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-06 14:44:13
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-06 14:47:28
+ * @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/interface.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+export interface ICustomTemplate{
+    show?: boolean;
+    id?: string;
+} 
\ No newline at end of file

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

@@ -14,7 +14,11 @@ import classNames from "classnames";
 import jobFail from "@/assets/project/jobFail.svg";
 import jobRun from "@/assets/project/jobRun.svg";
 import jobSue from "@/assets/project/jobSue.svg";
-import { IEdge, IExecutionStatus, ITask } from "../../ProjectSubmitWork/interface";
+import {
+	IEdge,
+	IExecutionStatus,
+	ITask,
+} from "../../ProjectSubmitWork/interface";
 import { IBatchNode, ILine } from "./interface";
 
 import styles from "./index.module.css";
@@ -30,23 +34,23 @@ interface IProps extends ReactFlowProps {
 	tasks?: ITask[];
 	/** 点击batch事件 */
 	onBatchClick?: (val: string) => void;
-  setSelectedNodeId?: (val:string) => void;
+	setSelectedNodeId?: (val: string) => void;
 	selectedNodeId?: string;
 }
 
-  /** 获取imgUrl */
-  const getImgUrl = (type: IExecutionStatus) => {
-    if(type === 'Done'){
-      return jobSue
+/** 获取imgUrl */
+const getImgUrl = (type: IExecutionStatus) => {
+	if (type === "Done") {
+		return jobSue;
 	}
-    if(type === 'Failed'){
-      return jobFail
+	if (type === "Failed") {
+		return jobFail;
 	}
-    if(type === 'Running'){
-      return jobRun
-    }
-    return undefined
+	if (type === "Running") {
+		return jobRun;
 	}
+	return undefined;
+};
 
 /** 自定义batch节点 */
 const BatchNode = (props: IBatchNode) => {
@@ -106,7 +110,13 @@ const FlowNode = (props: any) => {
 			<div style={{ display: "flex", alignItems: "center" }}>
 				{data?.label || ""}
 				{data.isCheck && <span className={styles.successDot}></span>}
-        {getImgUrl(data.executionStatus) && <img style={{ marginLeft: "6px" }} src={getImgUrl(data.executionStatus)} alt="" />}
+				{getImgUrl(data.executionStatus) && (
+					<img
+						style={{ marginLeft: "6px" }}
+						src={getImgUrl(data.executionStatus)}
+						alt=""
+					/>
+				)}
 			</div>
 			{data?.dotStatus?.isOutput ? (
 				<Handle
@@ -126,6 +136,8 @@ const Flow = (props: IProps) => {
 	const nodeTypes = useMemo(() => {
 		return { batchNode: BatchNode, flowNode: FlowNode };
 	}, []);
+	/** 内部维护的选择的节点Id */
+	const [inSideNodeId, setInSideNodeId] = useState<string>("");
 
 	/** 获取是否有输入节点或者是否有输出节点 */
 	const nodesInputAndOutputStatus = useCallback(
@@ -213,7 +225,9 @@ const Flow = (props: IProps) => {
 									/** 是否有流节点 */
 									isFlowNode: isFlowNode(item.id),
 									/** 选中状态 */
-                  selectedStatus: selectedNodeId === item.id,
+									selectedStatus: selectedNodeId
+										? selectedNodeId === item.id
+										: inSideNodeId === item.id,
 							  }
 							: {}),
 						isCheck: item.isCheck,
@@ -237,6 +251,7 @@ const Flow = (props: IProps) => {
 		tasks,
 		isFlowNode,
 		selectedNodeId,
+		inSideNodeId,
 		nodesInputAndOutputStatus,
 		getBatchStyle,
 	]);
@@ -255,12 +270,13 @@ const Flow = (props: IProps) => {
 				}, []);
 			});
 		return val.map((item: ILine) => {
+			const newSelectId = selectedNodeId ? selectedNodeId : inSideNodeId;
 			return {
 				id: item.id,
 				source: item.source,
 				target: item.target,
 				type: "smoothstep",
-        ...(item?.batchId === selectedNodeId
+				...(item?.batchId === newSelectId
 					? { style: { stroke: "#1370FF" }, animated: true }
 					: {}),
 				labelStyle: { fill: "#8A9099" },
@@ -268,30 +284,35 @@ const Flow = (props: IProps) => {
 				label: item.label ? `(${item.label})` : "",
 			};
 		});
-  }, [selectedNodeId, tasks]);
+	}, [inSideNodeId, selectedNodeId, tasks]);
 
 	/** flowNode点击事件 */
 	const onNodeClick = (e: any, node: Node) => {
-    
 		tasks?.forEach((item) => {
 			if (item.id === node.id) {
 				if (item.parentNode) {
-          setSelectedNodeId && setSelectedNodeId(item.parentNode);
+					setSelectedNodeId
+						? setSelectedNodeId(item.parentNode)
+						: setInSideNodeId(item.parentNode);
 					onBatchClick && onBatchClick(item.parentNode);
-          document.getElementById(`point${item.parentNode}`)?.scrollIntoView(true)
+					document
+						.getElementById(`point${item.parentNode}`)
+						?.scrollIntoView(true);
 				} else {
-          setSelectedNodeId && setSelectedNodeId(node.id);
+					setSelectedNodeId
+						? setSelectedNodeId(node.id)
+						: setInSideNodeId(node.id);
 					onBatchClick && onBatchClick(node.id || "");
-          document.getElementById(`point${node.id}`)?.scrollIntoView(true)
+					document.getElementById(`point${node.id}`)?.scrollIntoView(true);
 				}
 			}
 		});
 	};
 
 	const handlePaneClick = () => {
-    setSelectedNodeId && setSelectedNodeId('');
-    onBatchClick && onBatchClick('');
-  }
+		setSelectedNodeId ? setSelectedNodeId("") : setInSideNodeId("");
+		onBatchClick && onBatchClick("");
+	};
 
 	/** node节点 */
 	const [nodes, setNodes] = useNodesState(initialNodes);

src/views/WorkFlowEdit/components/OperatorList/index.module.css

+.operatorItemBox {
+	background-color: #fff;
+	border-radius: 4px;
+	cursor: grab;
+	padding: 16px 16px 0 24px;
+}
+
+.dragBox {
+	background-color: #f5f6f7;
+}
+.operatorItemTitle {
+	user-select: none;
+	font-size: 14px;
+	color: #1e2633;
+}
+.operatorItemText {
+	color: #8a9099;
+	margin: 8px 0;
+	font-size: 12px;
+	user-select: none;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.labelBox {
+	user-select: none;
+	display: inline-block;
+	border-radius: 2px;
+	font-size: 12px;
+	padding: 2px 8px;
+}
+
+.searchBox {
+	padding: 0 24px 16px 24px;
+}
+
+.footerBox {
+	display: flex;
+	align-items: center;
+	padding-bottom: 16px;
+	border-bottom: 1px solid #f0f2f5;
+}
+
+.operatorListBox {
+	height: 100%;
+}
+
+.listBox {
+	overflow-y: scroll;
+	height: calc(100% - 48px);
+}

src/views/WorkFlowEdit/components/OperatorList/index.tsx

+import { OutlinedInput } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import classNames from "classnames";
+import { useCallback, useState } from "react";
+
+import { mockData } from "./mock";
+import { IOperatorItemProps } from "./interface";
+
+import styles from "./index.module.css";
+
+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-06 15:16:01
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-06 21:23:19
+ * @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+const OperatorItem = (props: IOperatorItemProps) => {
+	const { info } = props;
+	const [isDragStyle, setIsDragStyle] = useState<boolean>(false);
+
+	/** 拖拽开始 */
+	const onDragStart = useCallback(() => {
+		setIsDragStyle(true);
+	}, []);
+
+	/** 拖拽结束 */
+	const onDragEnd = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+		console.log(e);
+		setIsDragStyle(false);
+	}, []);
+
+	return (
+		<div
+			className={classNames({
+				[styles.operatorItemBox]: true,
+				[styles.dragBox]: isDragStyle,
+			})}
+			draggable={true}
+			onDragStart={onDragStart}
+			onDragEnd={onDragEnd}
+		>
+			<h2 className={styles.operatorItemTitle}>说什么呢啊</h2>
+			<div className={styles.operatorItemText}>
+				STU utility
+				是一个R-packa标处理目标处理，目标处理目标处理标处理目标处理后期委屈好委屈农，博啊发布丢我被欺安度切换阿斯顿几切换，i的亲戚我好奇你eqeqeweqeqeeqeqeqeqeq。
+			</div>
+			<div className={styles.footerBox}>
+				<span
+					className={styles.labelBox}
+					style={{
+						background: true ? "#EBF3FF" : "#E3FAEC",
+						color: true ? "#1370FF" : "#02AB83",
+					}}
+				>
+					公共平台
+				</span>
+			</div>
+		</div>
+	);
+};
+
+const OperatorList = () => {
+	return (
+		<div className={styles.operatorListBox}>
+			<div className={styles.searchBox}>
+				<OutlinedInput
+					onChange={(e: any) => {
+						console.log(e.target.value);
+					}}
+					// value={templateName}
+					placeholder="输入关键词搜索"
+					size="small"
+					sx={{ height: 32, width: "100%" }}
+					endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
+				/>
+			</div>
+			<div className={styles.listBox}>
+				{mockData.map((item) => {
+					return <OperatorItem key={item.id} info={item} />;
+				})}
+			</div>
+		</div>
+	);
+};
+
+export default OperatorList;

src/views/WorkFlowEdit/components/OperatorList/interface.ts

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-06 15:32:11
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-06 15:32:42
+ * @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/interface.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+export interface IOperatorItemProps {
+    info: any
+}
\ No newline at end of file

src/views/WorkFlowEdit/index.module.css

@@ -7,8 +7,8 @@
 	height: 100vh;
 	background-color: RGBA(247, 248, 250, 1);
 	overflow-y: scroll;
-  }
-  .swHeader {
+}
+.swHeader {
 	z-index: 1001;
 	position: sticky;
 	top: 0;
@@ -19,26 +19,24 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 24px;
-  }
-  .swHeaderLeft {
+}
+.swHeaderLeft {
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;
-  }
-  .swContent {
+}
+.swContent {
 	display: flex;
 	height: calc(100vh - 56px);
-  }
-  .swFormBox {
+}
+.swFormBox {
 	background-color: #fff;
 	border-right: 1xp solid rgba(235, 237, 240, 1);
-    width: 608px;
-    overflow-y: scroll;
+	width: 360px;
+	/* overflow-y: scroll; */
 	box-sizing: border-box;
-    padding: 36px;
-  }
-  .swFlowBox {
+}
+.swFlowBox {
 	flex: 1;
 	height: calc(100vh - 56px);
-  }
-  
+}
\ No newline at end of file

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-05 16:31:28
+ * @LastEditTime: 2022-07-06 18:35:24
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -14,9 +14,9 @@ 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 OperatorList from "./components/OperatorList";
 
-import styles from './index.module.css'
-
+import styles from "./index.module.css";
 
 const WorkFlowEdit = () => {
 	const [templateConfigInfo, setTemplateConfigInfo] =
@@ -24,14 +24,13 @@ const WorkFlowEdit = () => {
 	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)}
+						onConfirm={() => console.log(11)}
 					>
 						<IconButton
 							color="primary"
@@ -53,7 +52,7 @@ const WorkFlowEdit = () => {
 				<div className={styles.swHeaderRight}>
 					<MyPopconfirm
 						title="提交前请先确认参数填写无误，确认提交吗？"
-            onConfirm={()=>console.log(2)}
+						onConfirm={() => console.log(2)}
 					>
 						<ButtonComponent
 							text="保存"
@@ -64,11 +63,9 @@ const WorkFlowEdit = () => {
 			</div>
 			<div className={styles.swContent}>
 				<div className={styles.swFormBox}>
-          左侧
-        </div>
-        <div className={styles.swFlowBox}>
-          右侧
+					<OperatorList />
 				</div>
+				<div className={styles.swFlowBox}>右侧</div>
 			</div>
 		</div>
 	);