feat: 自定义批算子中流算子拼接id的count计算方式优化

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

@@ -3,7 +3,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import styles from "./index.module.css";
 import cloneDeep from "lodash/cloneDeep";
 import { getScrollLoader } from "@/utils/util";
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useMemo } from "react";
 import { getOperatorList } from "@/api/project_api";
 import CircularProgress from "@mui/material/CircularProgress";
 import useMyRequest from "@/hooks/useMyRequest";
@@ -11,10 +11,8 @@ import { useStores } from "@/store";
 import { toJS } from "mobx";
 import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
 
-let count = 1;
-
 type IProps = {
-	operatorList: any;
+	operatorList: ITask[];
 	setOperatorList: any;
 };
 
@@ -22,16 +20,36 @@ const OperatorList = (props: IProps) => {
 	const { operatorList, setOperatorList } = props; // 流程图中流算子列表
 	const { currentProjectStore } = useStores();
 	const [list, setList] = useState<ITask[]>([]); // 算子列表
-	const productId = toJS(currentProjectStore.currentProductInfo.id);
+	const productId = toJS(currentProjectStore.currentProductInfo.id); // 产品ID
 	const [keyword, setKeyword] = useState(""); // 搜索算子列表时的关键词
 	const [dragItem, setDragItem] = useState<any>({}); // 拖拽的算子
-	const [page, setPage] = useState(0); //
-	const [isLastPage, setIsLastPage] = useState(false);
-	// todo 加载中   没有更多了样式
+	const [page, setPage] = useState(0); // 算子列表页码
+	const [isLastPage, setIsLastPage] = useState(false); // 是否是最后一页
+
+	// 应该一个批算子里可以有多个流算子   流算子也可以重复   所以需要在流算子后加一个_${count}  加上operatorList可能有缓存数据， 所以不一定是1开头
+	const count = useMemo(() => {
+		if (operatorList.length === 0) {
+			return 1;
+		} else {
+			const countArr = operatorList.map((operatorLi) => {
+				const _index = operatorLi.id.indexOf("_");
+				if (_index === -1) {
+					return 1;
+				} else {
+					return Number(operatorLi.id.slice(_index + 1));
+				}
+			});
+			const maxCount = Math.max(...countArr);
+			return maxCount + 1;
+		}
+	}, [operatorList]);
+
+	// 获取算子列表
 	const { run: getOperatorListRun, loading } = useMyRequest(getOperatorList, {
 		onSuccess: (res) => {
 			let arr = res?.data?.content;
 			setIsLastPage(res?.data?.last);
+			// todo  去掉parameters添加
 			arr.forEach((item: any, index: number) => {
 				item.edges = [];
 				item.parameters.push({
@@ -80,10 +98,10 @@ const OperatorList = (props: IProps) => {
 				});
 			});
 			setList([...list, ...arr]);
-			// setList(res?.data?.content || []);
 		},
 	});
 
+	// 获取算子列表方法
 	const getOperatorListFun = useCallback(
 		(keyword: string = "", page = 0) => {
 			getOperatorListRun({
@@ -97,16 +115,19 @@ const OperatorList = (props: IProps) => {
 		[productId, getOperatorListRun]
 	);
 
+	// 打开弹窗时获取算子列表
 	useEffect(() => {
 		getOperatorListFun();
 	}, [getOperatorListFun]);
 
+	// 算子列表搜索关键词变化
 	const keywordChange = (e: any) => {
 		if (e.target.value.length <= 30) {
 			setKeyword(e.target.value);
 		}
 	};
 
+	// 回车搜索
 	const handleKeywordKeyUp = (e: any) => {
 		if (e.keyCode === 13) {
 			setList([]);
@@ -115,70 +136,21 @@ const OperatorList = (props: IProps) => {
 			getOperatorListFun(e.target.value, 0);
 		}
 	};
-	// const list = [
-	// 	{
-	// 		title: "这是中文",
-	// 		version: "1.0.0",
-	// 	},
-	// 	{
-	// 		allVersions: ["1.0.0", "2.0.0"],
-	// 		creator: "root",
-	// 		description: "这是一段Hitlist算子的描述",
-	// 		edges: [
-	// 			{
-	// 				id: "fdd26229-3a1f-46e7-a14a-dd55bcce55e4",
-	// 				label: null,
-	// 				source: "62c7965c9bf7ba39f2dcefcc",
-	// 				sourceHandle: null,
-	// 				target: "62c7965c9bf7ba39f2dcefce",
-	// 				targetHandle: null,
-	// 			},
-	// 		],
-	// 		id: "62c7965c9bf7ba39f2dcefcc",
-	// 		parameters: [
-	// 			{
-	// 				name: "cpus",
-	// 				classType: "INT",
-	// 				classTypeName: "Int",
-	// 				required: false,
-	// 				defaultValue: "1",
-	// 			},
-	// 		],
-	// 		// parentNode: "62c7965c9bf7ba39f2dcefc8",
-	// 		position: { x: 40, y: 200 },
-	// 		productId: "cadd",
-	// 		status: null,
-	// 		title: "Hitlist",
-	// 		type: "FLOW",
-	// 		version: "2.0.0",
-	// 	},
-	// 	{
-	// 		title: "asdf",
-	// 		version: "1.0.0",
-	// 	},
-	// 	{
-	// 		title: "asdf",
-	// 		version: "1.0.0",
-	// 	},
-	// 	{
-	// 		title: "asdf",
-	// 		version: "1.0.0",
-	// 	},
-	// ];
 
+	// 滚动触发
 	const handleScroll = (e: any) => {
+		// 满足快滚动到底部时开始加载
 		if (getScrollLoader(e)) {
-			console.log("加载1");
 			if (loading || isLastPage) {
 				return;
 			} else {
-				console.log("加载2");
 				getOperatorListFun(keyword, page + 1);
 				setPage(page + 1);
 			}
 		}
 	};
 
+	// 渲染六个小点样式
 	const randerIcon = () => {
 		return (
 			<div className={styles.icon}>
@@ -201,9 +173,6 @@ const OperatorList = (props: IProps) => {
 	/** 拖拽开始 */
 	const onDragStart = (item: any) => {
 		setDragItem(item);
-		console.log("onDragStart");
-		// setIsDragStyle(true);
-		count++;
 	};
 
 	/** 生成批流副本 */
@@ -227,38 +196,14 @@ const OperatorList = (props: IProps) => {
 				},
 				edges: newEdges.length ? newEdges : task?.edges,
 			};
-			// const newVal = arr.map((item) => {
-			// 	const newEdges =
-			// 		item?.edges &&
-			// 		item?.edges.map((every) => {
-			// 			return {
-			// 				...every,
-			// 				source: `${every.source}_${count}`,
-			// 				target: `${every.target}_${count}`,
-			// 			};
-			// 		});
-			// 	return {
-			// 		...item,
-			// 		id: `${item.id}_${count}`,
-			// 		parentNode: item.parentNode ? `${item.parentNode}_${count}` : "",
-			// 		position: {
-			// 			x: item.position?.x,
-			// 			y: item.position?.y,
-			// 		},
-			// 		edges: newEdges.length ? newEdges : item?.edges,
-			// 	};
-			// });
-			// return newVal;
 		},
-		[]
+		[count]
 	);
 
 	/** 拖拽结束 */
 	const onDragEnd = useCallback(
 		(e: React.DragEvent<HTMLDivElement>) => {
 			const dom = document.getElementById("customOperatorFlow");
-			console.log(e);
-			console.log(dom);
 			const clientX = e.clientX;
 			const clientY = e.clientY;
 			const upperLeftPointX = Number(dom?.offsetLeft);
@@ -271,30 +216,16 @@ const OperatorList = (props: IProps) => {
 				clientX < lowerRightX &&
 				clientY < lowerRightY
 			) {
-				// const batchFlowArr = getBatchFlowArr(info.id);
 				const newDragItem = cloneDeep(dragItem);
 				const newOperatorItem = getNewOperatorItem(
 					newDragItem,
 					clientX - upperLeftPointX,
 					clientY - upperLeftPointY - 42
 				);
-				// const newOperatorItem = {
-				// 	...newDragItem,
-				// 	id: `${newDragItem.id}_${count}`,
-				// 	source: `${newDragItem.source}_${count}`,
-				// 	target: `${newDragItem.target}_${count}`,
-				// 	position: {
-				// 		x: clientX - upperLeftPointX,
-				// 		y: clientY - upperLeftPointY,
-				// 	},
-				// };
 				const newVal = cloneDeep(operatorList);
 				newVal.push(newOperatorItem);
-				console.log(newVal);
 				setOperatorList(newVal);
-				// setTemplateConfigInfo(newVal);
 			}
-			// setIsDragStyle(false);
 		},
 		[dragItem, operatorList, setOperatorList, getNewOperatorItem]
 	);
@@ -335,12 +266,10 @@ const OperatorList = (props: IProps) => {
 								<span className={styles.name}>{item.title}</span>
 								<span className={styles.version}>v{item.version}</span>
 							</div>
-							{/* <span className={styles.name}>{item.title}</span>
-							<span className={styles.version}>{item.version}</span> */}
 						</div>
 					);
 				})}
-				{!loading && (
+				{loading && (
 					<div className={styles.loading}>
 						<CircularProgress
 							size={12}
@@ -352,7 +281,7 @@ const OperatorList = (props: IProps) => {
 						加载中...
 					</div>
 				)}
-				{!isLastPage && <div className={styles.loading}>已经到底了</div>}
+				{isLastPage && <div className={styles.loading}>已经到底了</div>}
 			</div>
 		</div>
 	);

src/views/CustomOperator/index.tsx

@@ -21,6 +21,7 @@ const CustomOperator = observer((props: IProps) => {
 	const sessionStorageOperatorList = JSON.parse(
 		sessionStorage.getItem("operatorList") || "[]"
 	);
+	console.log("sessionStorageOperatorList", sessionStorageOperatorList);
 	const [operatorList, setOperatorList] = useState<ITask[]>(
 		sessionStorageOperatorList
 	);