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

fix: 算子列表开发

See merge request !82

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,
 		});
@@ -106,12 +105,12 @@ const ProjectSubmitWork = observer(() => {
 		}
 	};
 
-/** 返回事件 */
+	/** 返回事件 */
 	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 +201,7 @@ const ProjectSubmitWork = observer(() => {
 			if (errorCode === 0) {
 				message.success("操作成功！");
 			}
-      onBack()
+			onBack();
 		},
 	});
 
@@ -213,7 +212,7 @@ const ProjectSubmitWork = observer(() => {
 			if (errorCode === 0) {
 				message.success("操作成功！");
 			}
-      onBack()
+			onBack();
 		},
 	});
 

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-05 18:06:17
+ * @LastEditTime: 2022-07-06 17:32:50
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -28,8 +28,9 @@ import {
 	addWorkbenchTemplate,
 } from "@/api/workbench_api";
 import usePass from "@/hooks/usePass";
-import ReactFlowEdit from "@/views/WorkFlowEdit";
+import WorkFlowEdit from "@/views/WorkFlowEdit";
 import { useStores } from "@/store";
+import { ICustomTemplate } from "./interface";
 
 import styles from "./index.module.css";
 
@@ -54,6 +55,13 @@ const ProjectMembers = observer(() => {
 	/** 已选择增加的模板列表 */
 	const [selectTemplateData, setSelectTemplateData] = useState<string[]>([]);
 
+	/** 是否显示自定义模版编辑并带有参数 */
+	const [customTemplateInfo, setCustomTemplateInfo] = useState<ICustomTemplate>(
+		{
+			show: false,
+		}
+	);
+
 	// 获取模板列表
 	const { run: getTemplateInfo } = useMyRequest(getWorkbenchTemplate, {
 		onSuccess: (result: any) => {
@@ -223,9 +231,7 @@ const ProjectMembers = observer(() => {
 					{templateList &&
 						templateList.length > 0 &&
 						templateList.map((item, key) => {
-              return (
-                <TemplateBox data={item} startDialog={startDialog} key={key} />
-              );
+							return <TemplateBox data={item} startDialog={startDialog} />;
 						})}
 				</Box>
 			)}
@@ -264,7 +270,7 @@ const ProjectMembers = observer(() => {
 				searchTemplateNameCallback={searchTemplateNameCallback}
 			/>
 
-      {/* <ReactFlowEdit/> */}
+			{customTemplateInfo?.show ? <WorkFlowEdit /> : null}
 
 			<SimpleDialog
 				text={"确认移除该模板吗？"}

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 0;
+	border-bottom: 1px solid #f0f2f5;
+}
+.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;
+}
+
+.footerBx {
+	display: flex;
+	align-items: center;
+}

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

+import { IOperatorItemProps } from "./interface";
+import { OutlinedInput } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+
+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 16:27:16
+ * @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;
+	return (
+		<div className={styles.operatorItemBox}>
+			<h2 className={styles.operatorItemTitle}>说什么呢啊</h2>
+			<div className={styles.operatorItemText}>
+				STU utility
+				是一个R-packa标处理目标处理，目标处理目标处理标处理目标处理后期委屈好委屈农，博啊发布丢我被欺安度切换阿斯顿几切换，i的亲戚我好奇你eqeqeweqeqeeqeqeqeqeq。
+			</div>
+			<div className={styles.footerBx}>
+				<span
+					className={styles.labelBox}
+					style={{
+						background: true ? "#EBF3FF" : "#E3FAEC",
+						color: true ? "#1370FF" : "#02AB83",
+					}}
+				>
+					公共平台
+				</span>
+				<OutlinedInput
+					onChange={(e: any) => {
+						console.log(e.target.value);
+					}}
+					// value={templateName}
+					placeholder="输入关键词搜索"
+					size="small"
+					sx={{ flex: 1, height: 32 }}
+					endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
+				/>
+			</div>
+		</div>
+	);
+};
+
+const OperatorList = () => {
+	const arr = [222, 3333, 339];
+	return (
+		<>
+			{arr.map((item) => {
+				return <OperatorItem key={item} info={item} />;
+			})}
+		</>
+	);
+};
+
+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

@@ -32,10 +32,10 @@
   .swFormBox {
     background-color: #fff;
     border-right: 1xp solid rgba(235, 237, 240, 1);
-    width: 608px;
+    width: 360px;
     overflow-y: scroll;
     box-sizing: border-box;
-    padding: 36px;
+    padding: 24px;
   }
   .swFlowBox {
     flex: 1;

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 15:21:55
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -14,6 +14,7 @@ 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'
 
@@ -64,7 +65,7 @@ const WorkFlowEdit = () => {
       </div>
       <div className={styles.swContent}>
         <div className={styles.swFormBox}>
-          左侧
+          <OperatorList/>
         </div>
         <div className={styles.swFlowBox}>
           右侧