feat: 详情接口修改

src/api/api_prefix.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:17:48
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-17 11:51:35
+ * @LastEditTime: 2022-10-27 15:39:05
  * @FilePath: /bkunyun/src/api/api_prefix.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */

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

 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";
@@ -10,6 +9,7 @@ import { useStores } from "@/store";
 import { useMessage } from "@/components/MySnackbar";
 import { toJS } from "mobx";
 import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
+import positionTransform from "../../utils";
 interface IProps {
 	saveFormDialog: boolean;
 	setSaveFormDialog: (val: boolean) => void;
@@ -124,30 +124,6 @@ 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 = () => {
 		if (checkTitle(title) && checkVersion(version)) {
@@ -158,7 +134,7 @@ const SaveOperator = (props: IProps) => {
 					batchVersion: version,
 					description: description,
 				},
-				body: positionTransform(),
+				body: positionTransform(operatorList),
 			});
 		}
 	};

src/views/CustomOperator/utils.tsx

+/*
+ * @Author: 吴永生 15770852798@163.com
+ * @Date: 2022-10-27 18:09:14
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-10-27 18:19:06
+ * @FilePath: /bkunyun/src/views/CustomOperator/utils.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import _ from "lodash";
+
+import { ITask } from "../Project/ProjectSubmitWork/interface";
+
+// 坐标转换
+const positionTransform = (operatorList: ITask[]) => {
+	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,
+			},
+		};
+	});
+};
+
+export default positionTransform;

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-17 14:48:57
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-07-26 18:35:33
+ * @LastEditTime: 2022-10-27 14:02:54
  * @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -116,7 +116,7 @@ const TemplateBox = observer((props: any) => {
 						{isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
 							<MyButton
 								size="medium"
-								text="删除模版"
+								text="移除模版"
 								onClick={() => {
 									props.startDialog(info.id);
 								}}

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: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-09-01 10:49:46
+ * @LastEditTime: 2022-10-27 14:04:32
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -224,7 +224,7 @@ const ProjectMembers = observer(() => {
 
 			<SimpleDialog
 				text={"确认移除该模板吗？"}
-				title={"删除模板"}
+				title="移除模板"
 				openDialog={openDialog}
 				closeDialog={closeDialog}
 				onConfirm={deleteTemplate}

src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-18 16:12:55
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-26 18:52:52
+ * @LastEditTime: 2022-10-27 18:43:48
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -41,10 +41,13 @@ import {
 import batchOperator from "@/assets/resourceCenter/batchOperator.svg";
 import flowOperator from "@/assets/resourceCenter/flowOperator.svg";
 import { useMessage } from "@/components/MySnackbar";
-
-import style from "./index.module.css";
 import MyPopover from "@/components/mui/MyPopover";
 import useCheckOperator from "@/views/CustomOperator/useCheckOperator";
+import { saveBatchActor } from "@/api/project_api";
+import positionTransform from "@/views/CustomOperator/utils";
+
+import style from "./index.module.css";
+
 interface IAddOperator {
 	pageType: string;
 	setPageType: (val: string) => void;
@@ -95,6 +98,8 @@ const AddOperator = observer((props: IAddOperator) => {
 	/** 是否打开帮助手册 */
 	const [tipsOpen, setTipsOpen] = useState<boolean>(false);
 	/** 详情数据 */
+	const [detailData, setDetailData] = useState<any>({});
+	/** 详情数据 */
 	const [detailInfo, setDetailInfo] = useState<any>();
 
 	const { handleCheck } = useCheckOperator(
@@ -122,6 +127,27 @@ const AddOperator = observer((props: IAddOperator) => {
 	const { run: fetchOperatorDetail } = useMyRequest(getOperatorDetail, {
 		onSuccess: (res: any) => {
 			if (res.message === "success") {
+				/** 设置详情数据 */
+				setDetailData(res.data);
+				/** 批算子数据 */
+				const batchData = res?.data?.filter((item: any) => {
+					return item.type === "BATCH";
+				});
+				/** 流算子数据 */
+				const flowData = res?.data?.filter((item: any) => {
+					return item.type === "FLOW";
+				});
+
+				/** 确定的算子详情 */
+				let determineInfo;
+				if (batchData?.length) {
+					/** 设置详情信息 */
+					determineInfo = batchData[0];
+				} else {
+					/** 设置详情信息 */
+					determineInfo = res?.data?.length ? res.data[0] : {};
+				}
+
 				const {
 					title = "",
 					type = "BATCH",
@@ -130,7 +156,7 @@ const AddOperator = observer((props: IAddOperator) => {
 					description = "",
 					envId = "",
 					command: newCommand,
-				} = res.data;
+				} = determineInfo;
 
 				const newVersion = editDefaultVersion(version);
 				/** 设置表单数据 */
@@ -152,11 +178,10 @@ const AddOperator = observer((props: IAddOperator) => {
 				setTaskType(type || "BATCH");
 				/** 设置参数配置 */
 				if (type === "BATCH" && !envId) {
-					setOperatorList(res?.data?.parameters || []);
+					setOperatorList(flowData || []);
 				} else {
 					setCode(JSON.stringify(res?.data?.parameters, null, "\t"));
 				}
-				/** 设置详情信息 */
 				setDetailInfo(res.data);
 			}
 		},
@@ -172,6 +197,14 @@ const AddOperator = observer((props: IAddOperator) => {
 			}
 		},
 	});
+	// 基于流算子构建批算子
+	const { run: saveBatchActorRun } = useMyRequest(saveBatchActor, {
+		onSuccess: (res) => {
+			Message.success("构建成功");
+			setPageType("");
+			getList();
+		},
+	});
 
 	useEffect(() => {
 		if (!detailsId) return;
@@ -189,7 +222,6 @@ const AddOperator = observer((props: IAddOperator) => {
 			if (typeof result === "string") {
 				setCode(result);
 				const checkErrorArr = checkParamsConfig(result);
-				console.log(checkErrorArr, "checkErrorArr");
 				if (checkErrorArr.length) {
 					resultError = "参数配置不正确！";
 					const codeDom = document.getElementById("paramsConfig");
@@ -279,13 +311,22 @@ const AddOperator = observer((props: IAddOperator) => {
 			type: taskType,
 		};
 
+		console.log(operatorList, "operatorList");
 		/** 基于流算子没有应用环境字段 */
 		if (batchBuildType === "OPERATOR") {
 			delete params.envId;
-		}
-
-		console.log(params, "params");
+			saveBatchActorRun({
+				query: {
+					productId: params?.productId as string,
+					batchName: params?.title,
+					batchVersion: params?.version,
+					description: params?.description,
+				},
+				body: positionTransform(params?.parameters || []),
+			});
+		} else {
 			runSaveOperator(params, detailsId ? true : false);
+		}
 	}, [
 		batchBuildType,
 		code,
@@ -297,6 +338,7 @@ const AddOperator = observer((props: IAddOperator) => {
 		operatorList,
 		paramsConfigBlur,
 		runSaveOperator,
+		saveBatchActorRun,
 		taskType,
 	]);
 

src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorDetails/index.module.css

@@ -45,3 +45,41 @@
 	min-height: 400px;
 	margin-bottom: 24px;
 }
+
+.paramsBox {
+	border-radius: 4px;
+	border: 1px solid #ebedf0;
+	margin-bottom: 16px;
+}
+.nameBox {
+	height: 40px;
+	line-height: 40px;
+	font-size: 16px;
+	color: #1e2633;
+	font-weight: 600;
+	padding-left: 24px;
+}
+.infoItem {
+	display: flex;
+	height: 40px;
+	line-height: 40px;
+	border-top: 1px solid #ebedf0;
+}
+
+.infoItem > b {
+	font-size: 14px;
+	font-weight: normal;
+	height: 100%;
+	padding-left: 24px;
+	display: inline-block;
+	width: 180px;
+	color: #8a9099;
+	background-color: #f5f6f7;
+}
+.infoItem > span {
+	font-size: 14px;
+	padding-left: 24px;
+	display: inline-block;
+	width: calc(100% - 180px);
+	color: #1e2633;
+}

src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorDetails/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-26 19:51:34
+ * @LastEditTime: 2022-10-27 17:22:54
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -22,6 +22,75 @@ import Flow from "@/views/Project/components/Flow";
 
 import styles from "./index.module.css";
 import { Base64 } from "js-base64";
+import { IParameterClassType, parameterClassType } from "../../interface";
+
+const ParametersInfo = (props: any) => {
+	const {
+		name = "",
+		title = "",
+		classType = "",
+		parameterGroup = "",
+		required,
+		defaultValue,
+		domType,
+		description = "",
+	} = props?.info;
+	console.log(name, "1111");
+	const infoData = useMemo(() => {
+		return [
+			{
+				label: "参数标题",
+				value: title,
+			},
+			{
+				label: "参数类型",
+				value: classType,
+			},
+			{
+				label: "参数分类",
+				value: parameterClassType[parameterGroup as IParameterClassType],
+			},
+			{
+				label: "是否必填",
+				value: Boolean(required) ? "是" : "否",
+			},
+			{
+				label: "默认值",
+				value: defaultValue,
+			},
+			{
+				label: "输入类型",
+				value: domType,
+			},
+			{
+				label: "参数描述",
+				value: description,
+			},
+		];
+	}, [
+		classType,
+		defaultValue,
+		description,
+		domType,
+		parameterGroup,
+		required,
+		title,
+	]);
+	console.log(infoData, "infoData");
+	return (
+		<div className={styles.paramsBox}>
+			<div className={styles.nameBox}>{name}</div>
+			{infoData.map((item) => {
+				return (
+					<div key={item.label} className={styles.infoItem}>
+						<b>{item.label}</b>
+						<span>{item.value || "-"}</span>
+					</div>
+				);
+			})}
+		</div>
+	);
+};
 
 const OperatorDetails = observer(() => {
 	/** 产品store */
@@ -31,13 +100,23 @@ const OperatorDetails = observer(() => {
 	/** 详情类型 */
 	const [contentType, setContentType] = useState<string>("flowChart");
 	/** 详情数据 */
+	const [detailData, setDetailData] = useState<any>({});
+	/** 详情数据 */
 	const [detailInfo, setDetailInfo] = useState<any>({});
 	/** 获取算子详情 */
 	const { run: fetchOperatorDetail } = useMyRequest(getOperatorDetail, {
 		onSuccess: (res: any) => {
 			if (res.message === "success") {
-				/** 设置详情信息 */
-				setDetailInfo(res.data);
+				/** 设置详情数据 */
+				setDetailData(res.data);
+				const filterData = res?.data?.filter((item: any) => {
+					return item.type === "BATCH";
+				});
+				if (filterData?.length) {
+					setDetailInfo(filterData[0]);
+				} else {
+					res?.data?.length && setDetailInfo(res.data[0]);
+				}
 			}
 		},
 	});
@@ -56,16 +135,13 @@ const OperatorDetails = observer(() => {
 		envId,
 		command,
 	} = detailInfo;
-	console.log(detailInfo, "detailInfo");
 
 	const contentTypeList = useMemo(() => {
 		const result = [
-			{ value: "flowChart", label: "流程图" },
+			...(!envId ? [{ value: "flowChart", label: "流程图" }] : []),
 			{ value: "parameterList", label: "参数列表" },
+			...(envId ? [{ value: "runScript", label: "运行脚本" }] : []),
 		];
-		if (envId) {
-			result.push({ value: "runScript", label: "运行脚本" });
-		}
 		return result;
 	}, [envId]);
 
@@ -132,13 +208,16 @@ const OperatorDetails = observer(() => {
 					/>
 				</div>
 			) : null}
-			{contentType === "flowChart" ? (
-				<Flow
-					tasks={detailInfo?.parameters || []}
-					className={styles.contentBox}
-				/>
+			{contentType === "flowChart" && type === "BATCH" ? (
+				<Flow tasks={detailData} className={styles.contentBox} />
+			) : null}
+			{contentType === "parameterList" || type === "FLOW" ? (
+				<>
+					{detailInfo?.parameters?.map((item: any) => {
+						return <ParametersInfo key={item.id} info={item} />;
+					})}
+				</>
 			) : null}
-			{contentType === "parameterList" ? null : null}
 			{contentType === "runScript" ? (
 				<Code
 					className={styles.contentBox}

src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts

@@ -2,12 +2,14 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-19 20:50:18
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-24 20:38:09
+ * @LastEditTime: 2022-10-27 17:14:29
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 
 export type IOperatorType = 'BATCH' | 'FLOW'
+
+export type IParameterClassType = 'in' | 'out' | 'basis' | 'senior'
 export interface IOperatorInfo{
   id: string;
   title: string;
@@ -22,6 +24,13 @@ export enum operatorType {
   'BATCH' = '批算子',
 }
 
+export enum parameterClassType {
+  'in' = '输入',
+  'out' = '输出',
+  'basis' = '基础',
+  'senior' = '高级',
+}
+
 export interface IOperatorAddFormData {
   title?: string;
   type?: IOperatorType;

src/views/ResourceCenter/components/BasinInfo/index.module.css

 .trHeaderBox {
 	display: flex;
+	font-size: 14px;
 }
 
 .trHeaderBox > div {
@@ -7,7 +8,7 @@
 	padding-left: 24px;
 	height: 44px;
 	background: #f5f6f7;
-	color: #565c66;
+	color: #8a9099;
 	line-height: 44px;
 	width: calc(100% / 5);
 }
@@ -29,6 +30,7 @@
 
 .trBodyBox {
 	display: flex;
+	font-size: 14px;
 }
 
 .trBodyBox > div {