fat: 自定义算子功能交互补充

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

@@ -81,3 +81,12 @@
 	height: 2px;
 	background-color: rgba(86, 92, 102, 1);
 }
+.loading {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	line-height: 20px;
+	font-size: 12px;
+	color: rgba(86, 92, 102, 1);
+	padding: 4px;
+}

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

@@ -5,6 +5,7 @@ import cloneDeep from "lodash/cloneDeep";
 import { getScrollLoader } from "@/utils/util";
 import { useState, useCallback, useEffect } from "react";
 import { getOperatorList } from "@/api/project_api";
+import CircularProgress from "@mui/material/CircularProgress";
 import useMyRequest from "@/hooks/useMyRequest";
 import { useStores } from "@/store";
 import { toJS } from "mobx";
@@ -17,7 +18,6 @@ type IProps = {
 	setOperatorList: any;
 };
 
-let isInRequest = false;
 const OperatorList = (props: IProps) => {
 	const { operatorList, setOperatorList } = props; // 流程图中流算子列表
 	const { currentProjectStore } = useStores();
@@ -27,11 +27,9 @@ const OperatorList = (props: IProps) => {
 	const [dragItem, setDragItem] = useState<any>({}); // 拖拽的算子
 	const [page, setPage] = useState(0); //
 	const [isLastPage, setIsLastPage] = useState(false);
-	const { run: getOperatorListRun } = useMyRequest(getOperatorList, {
+	// todo 加载中   没有更多了样式
+	const { run: getOperatorListRun, loading } = useMyRequest(getOperatorList, {
 		onSuccess: (res) => {
-			isInRequest = false;
-
-			console.log("res", res);
 			let arr = res?.data?.content;
 			setIsLastPage(res?.data?.last);
 			arr.forEach((item: any, index: number) => {
@@ -42,7 +40,7 @@ const OperatorList = (props: IProps) => {
 					classTypeName: "String",
 					defaultValue: null,
 					description: "",
-					domType: "INPUT",
+					domType: "dataset",
 					hidden: false,
 					isnull: false,
 					level: null,
@@ -65,7 +63,7 @@ const OperatorList = (props: IProps) => {
 					classTypeName: "String",
 					defaultValue: null,
 					description: "",
-					domType: "INPUT",
+					domType: "dataset",
 					hidden: false,
 					isnull: false,
 					level: null,
@@ -81,26 +79,20 @@ const OperatorList = (props: IProps) => {
 					validators: [],
 				});
 			});
-			setList(arr);
+			setList([...list, ...arr]);
 			// setList(res?.data?.content || []);
 		},
-		onError: () => {
-			isInRequest = false;
-		},
 	});
 
 	const getOperatorListFun = useCallback(
 		(keyword: string = "", page = 0) => {
-			if (isInRequest) {
-				return;
-			} else {
-				getOperatorListRun({
-					productId: productId as string,
-					keyword,
-					page,
-					size: 5,
-				});
-			}
+			getOperatorListRun({
+				productId: productId as string,
+				keyword,
+				page,
+				size: 5,
+			});
+			// size: 20   todo
 		},
 		[productId, getOperatorListRun]
 	);
@@ -109,8 +101,15 @@ const OperatorList = (props: IProps) => {
 		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([]);
 			setKeyword(e.target.value);
 			setPage(0);
 			getOperatorListFun(e.target.value, 0);
@@ -170,7 +169,7 @@ const OperatorList = (props: IProps) => {
 	const handleScroll = (e: any) => {
 		if (getScrollLoader(e)) {
 			console.log("加载1");
-			if (isInRequest || isLastPage) {
+			if (loading || isLastPage) {
 				return;
 			} else {
 				console.log("加载2");
@@ -316,8 +315,8 @@ const OperatorList = (props: IProps) => {
 				<InputBase
 					className={styles.searchInput}
 					placeholder="请输入算子名称"
-					// value={keyword}
-					// onChange={keywordChange}
+					value={keyword}
+					onChange={keywordChange}
 					onKeyUp={handleKeywordKeyUp}
 				/>
 			</div>
@@ -341,6 +340,19 @@ const OperatorList = (props: IProps) => {
 						</div>
 					);
 				})}
+				{!loading && (
+					<div className={styles.loading}>
+						<CircularProgress
+							size={12}
+							sx={{
+								color: "rgba(19, 112, 255, 1)",
+								marginRight: "8px",
+							}}
+						/>
+						加载中...
+					</div>
+				)}
+				{!isLastPage && <div className={styles.loading}>已经到底了</div>}
 			</div>
 		</div>
 	);

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

@@ -2,46 +2,40 @@ import { saveUserSpec } from "@/api/workbench_api";
 import MyDialog from "@/components/mui/MyDialog";
 import MyInput from "@/components/mui/MyInput";
 import { checkIsNumberLetterChinese } from "@/utils/util";
+import _ from "lodash";
 import { useState } from "react";
 import useMyRequest from "@/hooks/useMyRequest";
+import { saveBatchActor } from "@/api/project_api";
 import { useStores } from "@/store";
 
-import styles from "./index.module.css";
+// import styles from "./index.module.css";
 import { useMessage } from "@/components/MySnackbar";
 import { toJS } from "mobx";
 import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
 interface IProps {
 	saveFormDialog: boolean;
 	setSaveFormDialog: (val: boolean) => void;
-	onBack?: () => void;
-	title: string;
-	setTitle: (val: string) => void;
-	version: string;
-	setVersion: (val: string) => void;
-	description: string;
-	setDescription: (val: string) => void;
-	creator?: string;
-	templateConfigInfo: ITask[];
-	id?: string;
+	operatorList: ITask[];
 }
 const SaveOperator = (props: IProps) => {
-	const {
-		saveFormDialog,
-		setSaveFormDialog,
-		onBack,
-		title,
-		setTitle,
-		version,
-		setVersion,
-		description,
-		setDescription,
-		templateConfigInfo,
-		creator,
-		id,
-	} = props;
+	const { saveFormDialog, setSaveFormDialog, operatorList } = props;
 	const { currentProjectStore } = useStores();
 	const Message = useMessage();
 	const productId = toJS(currentProjectStore.currentProductInfo.id);
+	const [title, setTitle] = useState("");
+	const [version, setVersion] = useState("1.0.0");
+	const [description, setDescription] = useState("");
+
+	// 保存批算子
+	const { run: saveBatchActorRun } = useMyRequest(saveBatchActor, {
+		onSuccess: (res) => {
+			Message.success("保存算子成功");
+			setSaveFormDialog(false);
+			sessionStorage.setItem("operatorList", "[]");
+			console.log("res", res);
+		},
+	});
+
 	const [titleHelper, setTitleHelper] = useState({
 		// 算子名称错误提示
 		error: false,
@@ -53,14 +47,6 @@ const SaveOperator = (props: IProps) => {
 		helperText: "",
 	});
 
-	// 算子保存方法
-	const { run: saveUserSpecRun } = useMyRequest(saveUserSpec, {
-		onSuccess: (res) => {
-			Message.success("保存成功!");
-			onBack && onBack();
-		},
-	});
-
 	// 关闭表单弹窗
 	const handleCloseDialog = () => {
 		setSaveFormDialog(false);
@@ -124,6 +110,7 @@ const SaveOperator = (props: IProps) => {
 				error: false,
 				helperText: "",
 			});
+			return true;
 		} else {
 			setVersionHelper({
 				error: true,
@@ -133,28 +120,63 @@ const SaveOperator = (props: IProps) => {
 		}
 	};
 
+	// 坐标转换
+	const positionTransform = () => {
+		const copyOperatorList: ITask[] = _.cloneDeep(operatorList);
+		const positionXArr = copyOperatorList.map((operatorLi) => {
+			return operatorLi.position.x;
+		});
+		const positionYArr = copyOperatorList.map((operatorLi) => {
+			return operatorLi.position.y;
+		});
+		let minPositionX = Math.min(...positionXArr);
+		let minPositionY = Math.min(...positionYArr);
+		let startingPointX = minPositionX - 40;
+		let startingPointY = minPositionY - 10;
+		return copyOperatorList.map((operatorLi) => {
+			return {
+				...operatorLi,
+				position: {
+					x: operatorLi.position.x - startingPointX,
+					y: operatorLi.position.y - startingPointY,
+				},
+			};
+		});
+	};
+
 	// 表单弹窗确定，新建算子
 	const handleOncofirm = () => {
+		console.log(operatorList);
 		if (checkTitle(title) && checkVersion(version)) {
-			if (id) {
-				saveUserSpecRun({
-					title,
-					version,
-					description,
-					tasks: templateConfigInfo,
-					productId,
-					id,
-					creator,
-				});
-			} else {
-				saveUserSpecRun({
-					title,
-					version,
-					description,
-					tasks: templateConfigInfo,
-					productId,
-				});
-			}
+			saveBatchActorRun({
+				query: {
+					productId: productId as string,
+					batchName: title,
+					batchVersion: version,
+					description: description,
+				},
+				body: positionTransform(),
+			});
+			// operatorList
+			// if (id) {
+			// 	saveUserSpecRun({
+			// 		title,
+			// 		version,
+			// 		description,
+			// 		tasks: templateConfigInfo,
+			// 		productId,
+			// 		id,
+			// 		creator,
+			// 	});
+			// } else {
+			// 	saveUserSpecRun({
+			// 		title,
+			// 		version,
+			// 		description,
+			// 		tasks: templateConfigInfo,
+			// 		productId,
+			// 	});
+			// }
 		}
 	};
 
@@ -165,7 +187,7 @@ const SaveOperator = (props: IProps) => {
 			onClose={handleCloseDialog}
 			onConfirm={handleOncofirm}
 		>
-			<div className={styles.saveBox}>
+			<div style={{ width: "388px" }}>
 				<MyInput
 					value={title}
 					label="算子名称"
@@ -174,7 +196,6 @@ const SaveOperator = (props: IProps) => {
 					error={titleHelper.error}
 					helperText={titleHelper.helperText}
 					style={{ margin: "20px 0" }}
-					disabled={id ? true : false}
 				></MyInput>
 				<MyInput
 					value={version}

src/views/CustomOperator/index.tsx

@@ -4,12 +4,9 @@ import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
 import MyButton from "@/components/mui/MyButton";
 import OperatorList from "./components/OperatorList";
 // import Flow from "../Project/components/Flow";
-import useMyRequest from "@/hooks/useMyRequest";
-import { saveBatchActor } from "@/api/project_api";
 import { useMessage } from "@/components/MySnackbar";
-import { useStores } from "@/store";
 import BatchOperatorFlow from "../Project/components/Flow/components/BatchOperatorFlow";
-import { toJS } from "mobx";
+import SaveOperator from "./components/SaveOperator";
 import { ITask } from "../Project/ProjectSubmitWork/interface";
 import _ from "lodash";
 import styles from "./index.module.css";
@@ -21,9 +18,13 @@ type IProps = {
 const CustomOperator = observer((props: IProps) => {
 	const { setShowCustomOperator } = props;
 	const Message = useMessage();
-	const [operatorList, setOperatorList] = useState<ITask[]>([]);
-	const { currentProjectStore } = useStores();
-	const productId = toJS(currentProjectStore.currentProductInfo.id);
+	const sessionStorageOperatorList = JSON.parse(
+		sessionStorage.getItem("operatorList") || "[]"
+	);
+	const [operatorList, setOperatorList] = useState<ITask[]>(
+		sessionStorageOperatorList
+	);
+	const [saveFormDialog, setSaveFormDialog] = useState(false);
 	// const [showCustomOperator, setShowCustomOperator] = useState(false);
 
 	/** 设置选中唯一标识符 */
@@ -32,25 +33,6 @@ const CustomOperator = observer((props: IProps) => {
 		// console.log(val);
 	}, []);
 
-	// 保存批算子
-	const { run: saveBatchActorRun } = useMyRequest(saveBatchActor, {
-		onSuccess: (res) => {
-			console.log("res", res);
-		},
-	});
-
-	const handleSave = useCallback(() => {
-		saveBatchActorRun({
-			query: {
-				productId: productId as string,
-				batchName: "123456",
-				batchVersion: "1.0.0",
-				description: "",
-			},
-			body: [],
-		});
-	}, [saveBatchActorRun, productId]);
-
 	// 判断   每个流算子必须至少有一条连接线。
 	const checkHasOneLine = (sourceArr: string[], targetArr: string[]) => {
 		const all = _.uniq([...sourceArr, ...targetArr]);
@@ -124,6 +106,10 @@ const CustomOperator = observer((props: IProps) => {
 		return check;
 	};
 
+	useEffect(() => {
+		sessionStorage.setItem("operatorList", JSON.stringify(operatorList));
+	}, [operatorList]);
+
 	const handleCheck = () => {
 		if (operatorList.length === 0) {
 			Message.error("内容不能为空！");
@@ -137,18 +123,25 @@ const CustomOperator = observer((props: IProps) => {
 				edge.target && targetArr.push(edge.target);
 			});
 		});
+		console.log("operatorList", operatorList);
+		console.log("sourceArr", sourceArr);
+		console.log("targetArr", targetArr);
 		if (!checkHasOneLine([...sourceArr], [...targetArr])) {
+			console.log("checkHasOneLine");
 			Message.error("内容校验未通过，请检查！");
 			return;
 		}
 		if (!checkIn([...targetArr])) {
+			console.log("checkIn");
 			Message.error("内容校验未通过，请检查！");
 			return;
 		}
 		if (!checkOut([...sourceArr])) {
+			console.log("checkOut");
 			Message.error("内容校验未通过，请检查！");
 			return;
 		}
+		setSaveFormDialog(true);
 	};
 
 	return (
@@ -162,6 +155,11 @@ const CustomOperator = observer((props: IProps) => {
 							handleCheck();
 						}}
 					></MyButton>
+					<SaveOperator
+						saveFormDialog={saveFormDialog}
+						setSaveFormDialog={setSaveFormDialog}
+						operatorList={operatorList}
+					></SaveOperator>
 				</div>
 				<div className={styles.coContent} id="customOperatorFlow">
 					<OperatorList