feat: 详情开发

src/api/api_manager.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 09:56:57
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-25 18:23:37
+ * @LastEditTime: 2022-10-26 18:28:43
  * @FilePath: /bkunyun/src/api/api_manager.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -38,7 +38,7 @@ const RESTAPI = {
   API_WORKBENCH_CANCEL_WORKFLOWJOB: `${BACKEND_API_URI_PREFIX}/cpp/workflow/cancel`, //取消工作流
   API_SUBMIT_WORKFLOW: `${BACKEND_API_URI_PREFIX}/cpp/workflow/submit`, //提交工作流
   API_WORKBENCH_WORKFLOW_TASKINFO: `${BACKEND_API_URI_PREFIX}/cpp/workbench/workflowjob/task-info`, //查询任务某个算子详情
-  API_OPERATOR_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflow/actorspecs`,  // 获取算子列表
+  API_OPERATOR_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflow/actorspecs/list`,  // 获取算子列表
   API_VERSION_OPERATOR:`${BACKEND_API_URI_PREFIX}/cpp/workflow/actorversion`,  // 获取指定版本算子
   API_SAVE_USERSPEC:`${BACKEND_API_URI_PREFIX}/cpp/workflow/saveuserspec`,  // 保存用户自定义工作流模板
   API_OVERVIEW_GET:`${BACKEND_API_URI_PREFIX}/cpp/basicInformation`,  // 获取概览基本信息

src/api/resourceCenter.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-19 17:09:23
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-25 20:26:42
+ * @LastEditTime: 2022-10-26 19:07:50
  * @FilePath: /bkunyun/src/api/resourceCenter.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -23,9 +23,11 @@ type addActorenvBuildenvParams = {
 
 /** 获取算子列表请求参数 */
 export interface IOperatorListParams {
-	keyword: string;
-	productId: string;
-	type: string;
+	keyword?: string;
+	productId?: string;
+	type?: string;
+  page?: number;
+  size?: number;
 }
 
 // 获取公共项目

src/views/CustomOperator/useCheckOperator.tsx

-import { useMessage } from "@/components/MySnackbar";
 import _ from "lodash";
-import { useState } from "react";
 
+import { useMessage } from "@/components/MySnackbar";
 import { ITask } from "../Project/ProjectSubmitWork/interface";
 
 /*
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-24 18:08:47
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-26 17:15:34
+ * @LastEditTime: 2022-10-26 18:13:41
  * @FilePath: /bkunyun/src/views/CustomOperator/useCheckOperator.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -18,7 +17,6 @@ const useCheckOperator = (
 	nullText?: string
 ) => {
 	const Message = useMessage();
-	let checkStatus = false;
 
 	// 判断   每个起始算子（可以有多个起始点）的输入必须为文件的路径输入或数据集的路径输入。
 	const checkIn = (targetArr: string[]) => {
@@ -104,9 +102,8 @@ const useCheckOperator = (
 
 	const handleCheck = () => {
 		if (operatorList.length === 0) {
-			Message.error(nullText || "内容不能为空！");
-			checkStatus = false;
-			return checkStatus;
+			!nullText && Message.error(nullText || "内容不能为空！");
+			return nullText || "内容不能为空！";
 		}
 		let sourceArr: string[] = [];
 		let targetArr: string[] = [];
@@ -117,25 +114,23 @@ const useCheckOperator = (
 			});
 		});
 		if (!checkHasOneLine([...sourceArr], [...targetArr])) {
-			checkStatus = false;
-			Message.error("部分算子没有流程线，请检查流程！");
-			return checkStatus;
+			!nullText && Message.error("部分算子没有流程线，请检查流程！");
+			return "部分算子没有流程线，请检查流程！";
 		}
 		if (!checkIn([...targetArr])) {
-			checkStatus = false;
-			Message.error("每个流程第一步需读取文件/数据集，请检查流程！");
-			return checkStatus;
+			!nullText &&
+				Message.error("每个流程第一步需读取文件/数据集，请检查流程！");
+			return "每个流程第一步需读取文件/数据集，请检查流程！";
 		}
 		if (!checkOut([...sourceArr])) {
-			checkStatus = false;
-			Message.error(
-				"每个流程最后一步必须将数据写入为文件/数据集，请检查流程！"
-			);
-			return checkStatus;
+			!nullText &&
+				Message.error(
+					"每个流程最后一步必须将数据写入为文件/数据集，请检查流程！"
+				);
+			return "每个流程最后一步必须将数据写入为文件/数据集，请检查流程！";
 		}
-		checkStatus = true;
 		successCallBack();
-		return checkStatus;
+		return "";
 	};
 
 	return { handleCheck };

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 17:31:53
+ * @LastEditTime: 2022-10-26 18:52:52
  * @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
  */
@@ -79,6 +79,8 @@ const AddOperator = observer((props: IAddOperator) => {
 	const [code, setCode] = useState(JSON.stringify(initCode, null, "\t"));
 	/** 参数配置 错误提示 */
 	const [parametersError, setParametersError] = useState<string>("");
+	/** 流程编排错误提示 */
+	const [flowParametersError, setFlowParametersError] = useState<string>("");
 
 	/** 运行脚本 */
 	const [command, setCommand] = useState<string>("");
@@ -246,13 +248,14 @@ const AddOperator = observer((props: IAddOperator) => {
 		const paramsResultError = paramsConfigBlur();
 		setFormErrors(resultErrors);
 
-		let checkStatus = true;
+		let checkStatus = "";
 		if (taskType === "BATCH" && batchBuildType === "OPERATOR") {
 			checkStatus = handleCheck();
+			setFlowParametersError(checkStatus);
 		}
 		if (
 			Object.getOwnPropertyNames(resultErrors)?.length ||
-			!checkStatus ||
+			checkStatus ||
 			paramsResultError
 		)
 			return;
@@ -525,7 +528,10 @@ const AddOperator = observer((props: IAddOperator) => {
 					)}
 				</div>
 				{taskType === "FLOW" ? null : (
-					<div className={style.parameterConfigBox}>
+					<div
+						className={style.parameterConfigBox}
+						style={{ marginBottom: flowParametersError ? "56px" : "24px" }}
+					>
 						<div className={style.codeTitle}>
 							{batchBuildType === "ENVIRONMENT" ? "运行脚本" : "流程编排"}
 						</div>
@@ -540,7 +546,10 @@ const AddOperator = observer((props: IAddOperator) => {
 						) : (
 							<div
 								id="customOperatorFlow"
-								style={{ position: "relative", height: 400 }}
+								style={{
+									position: "relative",
+									height: 400,
+								}}
 							>
 								<OperatorList
 									operatorList={operatorList}
@@ -558,6 +567,9 @@ const AddOperator = observer((props: IAddOperator) => {
 									showVersion={true}
 									showControls={false}
 								/>
+								{flowParametersError ? (
+									<p className={style.codeErrorBox}>{flowParametersError}</p>
+								) : null}
 							</div>
 						)}
 					</div>

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

 .detailsBox {
 	padding: 0 24px;
+	display: flex;
+	flex-direction: column;
+	height: calc(100vh - 58px);
 }
 
 .baseInfoBox {
@@ -37,3 +40,8 @@
 	color: #565c66;
 	border-radius: 2px;
 }
+.contentBox {
+	flex: 1;
+	min-height: 400px;
+	margin-bottom: 24px;
+}

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 17:28:19
+ * @LastEditTime: 2022-10-26 19:51:34
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -21,16 +21,9 @@ import Code from "@/components/CommonComponents/Code";
 import Flow from "@/views/Project/components/Flow";
 
 import styles from "./index.module.css";
+import { Base64 } from "js-base64";
 
 const OperatorDetails = observer(() => {
-	const contentTypeList = useMemo(() => {
-		return [
-			{ value: "flowChart", label: "流程图" },
-			{ value: "parameterList", label: "参数列表" },
-			{ value: "runScript", label: "运行脚本" },
-		];
-	}, []);
-
 	/** 产品store */
 	const { productListStore } = useStores();
 	const navigate = useNavigate();
@@ -59,8 +52,23 @@ const OperatorDetails = observer(() => {
 		creator = "",
 		description = "",
 		type,
+		envName = "",
+		envId,
+		command,
 	} = detailInfo;
 	console.log(detailInfo, "detailInfo");
+
+	const contentTypeList = useMemo(() => {
+		const result = [
+			{ value: "flowChart", label: "流程图" },
+			{ value: "parameterList", label: "参数列表" },
+		];
+		if (envId) {
+			result.push({ value: "runScript", label: "运行脚本" });
+		}
+		return result;
+	}, [envId]);
+
 	/** 切换类型 */
 	const handleRadio = (val: string) => {
 		console.log(val, "2");
@@ -107,28 +115,38 @@ const OperatorDetails = observer(() => {
 						},
 						{ label: "创建人", value: creator },
 						{ label: "算子版本", value: version },
-						{ label: "应用环境", value: "1" },
+						{ label: "应用环境", value: envName },
 					]}
 				/>
-				<BasicInfo infoList={[{ label: "描述", value: description }]} />
-			</div>
-			<div style={{ padding: "26px 0 16px 0" }}>
-				<RadioGroupOfButtonStyle
-					RadiosBoxStyle={{ width: 254 }}
-					value={contentType}
-					radioOptions={contentTypeList}
-					handleRadio={handleRadio}
-				/>
-			</div>
-			<div>
-				{contentType === "flowChart" ? <Flow tasks={[]} /> : null}
-				{contentType === "parameterList" ? null : null}
-				{contentType === "runScript" ? (
-					<div className={styles.code}>
-						<Code value="" editable={false} height="350px" />
-					</div>
+				{description ? (
+					<BasicInfo infoList={[{ label: "描述", value: description }]} />
 				) : null}
 			</div>
+			{type === "BATCH" ? (
+				<div style={{ padding: "26px 0 16px 0" }}>
+					<RadioGroupOfButtonStyle
+						RadiosBoxStyle={{ width: 254 }}
+						value={contentType}
+						radioOptions={contentTypeList}
+						handleRadio={handleRadio}
+					/>
+				</div>
+			) : null}
+			{contentType === "flowChart" ? (
+				<Flow
+					tasks={detailInfo?.parameters || []}
+					className={styles.contentBox}
+				/>
+			) : null}
+			{contentType === "parameterList" ? null : null}
+			{contentType === "runScript" ? (
+				<Code
+					className={styles.contentBox}
+					value={Base64.decode(command || "")}
+					editable={false}
+					height="100%"
+				/>
+			) : null}
 		</div>
 	);
 });

src/views/ResourceCenter/UserResources/WorkflowOperator/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 15:14:32
+ * @LastEditTime: 2022-10-26 19:17:49
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -25,6 +25,7 @@ import { IOperatorInfo } from "./interface";
 
 import styles from "./index.module.css";
 import MyCircularProgress from "@/components/mui/MyCircularProgress";
+import NoData from "@/components/BusinessComponents/NoData";
 
 const WorkflowOperator = observer(() => {
 	const [pageType, setPageType] = useState<string>("");
@@ -45,7 +46,7 @@ const WorkflowOperator = observer(() => {
 		// refreshDeps: [],
 		onSuccess: (res) => {
 			console.log(res);
-			setList(res?.data);
+			setList(res?.data.content);
 		},
 	});
 
@@ -57,7 +58,7 @@ const WorkflowOperator = observer(() => {
 		if (params.type === "all") {
 			params.type = "";
 		}
-		getList(params);
+		getList({ ...params });
 	}, [getList, searchParams]);
 
 	// 按回车搜索
@@ -145,30 +146,8 @@ const WorkflowOperator = observer(() => {
 							})}
 						</div>
 					) : (
-						<div style={{ position: "relative", minHeight: 450 }}>
-							<img
-								src={noFile}
-								alt=""
-								style={{
-									position: "absolute",
-									top: "100px",
-									left: "50%",
-									transform: "translate(-50%, 0)",
-								}}
-							/>
-							<span
-								style={{
-									position: "absolute",
-									top: "165px",
-									left: "50%",
-									transform: "translate(-50%, 0)",
-									fontSize: "14px",
-									lineHeight: "22px",
-									color: "#8a9099",
-								}}
-							>
-								暂无工作流算子
-							</span>
+						<div style={{ height: 300 }}>
+							<NoData text="暂无工作流算子"></NoData>
 						</div>
 					)}
 				</div>