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-19 21:14:11
+ * @LastEditTime: 2022-10-20 14:56:21
  * @FilePath: /bkunyun/src/api/api_manager.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -55,6 +55,7 @@ const RESTAPI = {
   API_ACTORENV_LIST:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/list`, // 查询用户的应用环境（算子环境）
   API_ACTORENV_DELETE:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/delete`, // 删除用户算子环境
   API_ACTORENV_DETAIL:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/detail`, // 查询应用环境的详情信息
+  API_ACTOR_ENV_OPTIONS:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/usableenv`, // 查询用户应用环境下拉
 };
 
 export default RESTAPI;

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-20 09:26:12
+ * @LastEditTime: 2022-10-20 15:01:36
  * @FilePath: /bkunyun/src/api/resourceCenter.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -55,7 +55,7 @@ const addActorenvBuildenv = (params: addActorenvBuildenvParams) => {
 
 // 获取公共环境
 const getActorenvList = (params: {
-  type: 'BATCH' | 'FLOW' | '',
+  type?: 'BATCH' | 'FLOW' | '',
   page: number,
   size: number,
   title?: string,
@@ -93,6 +93,15 @@ const getActorenvDetail = (params: {id: string}) => {
   });
 };
 
+// 查询应用环境的详情信息
+const getActorEnvOptions = (params: {type: string}) => {
+  return request({
+    url: `${Api.API_ACTOR_ENV_OPTIONS}`,
+    method: "get",
+    params
+  });
+};
+
 export {
   getPublicEnv,
   getPublicProject,
@@ -101,4 +110,5 @@ export {
   deleteActorenv,
   getOperatorList,
   getActorenvDetail,
+  getActorEnvOptions
 };

src/components/mui/FormItemBox/index.module.css

@@ -31,7 +31,7 @@
 .dynamicFormitem_helpText {
 	position: absolute;
 	bottom: -36px;
-	font-size: 13px;
+	font-size: 12px;
 	line-height: 1.15;
 	color: #9894a5;
 }
@@ -41,6 +41,6 @@
 .dynamicFormitem_errorTips {
 	position: absolute;
 	bottom: -20px;
-	font-size: 13px;
+	font-size: 12px;
 	color: #ff4e4e;
 }

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-20 11:59:34
+ * @LastEditTime: 2022-10-20 19:44:43
  * @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
  */
@@ -13,9 +13,7 @@ import { observer } from "mobx-react";
 import MyInput from "@/components/mui/MyInput";
 import MySelect from "@/components/mui/MySelect";
 import MyButton from "@/components/mui/MyButton";
-import style from "./index.module.css";
 import SwitchBatchFolw from "@/views/ResourceCenter/components/SwitchBatchFolw";
-
 import Code from "@/components/CommonComponents/Code";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
@@ -23,6 +21,13 @@ import BatchOperatorFlow from "@/views/Project/components/Flow/components/BatchO
 import OperatorList from "@/views/CustomOperator/components/OperatorList";
 import FormItemBox from "@/components/mui/FormItemBox";
 import { useStores } from "@/store";
+import useMyRequest from "@/hooks/useMyRequest";
+import { getActorEnvOptions } from "@/api/resourceCenter";
+import { IOperatorAddFormData } from "../../interface";
+
+import style from "./index.module.css";
+import { checkFormData, checkParamsConfig } from "./utils";
+import { Base64 } from "js-base64";
 
 interface IAddOperator {
 	pageType: string;
@@ -45,9 +50,17 @@ const AddOperator = observer((props: IAddOperator) => {
 	const [inputActive, setInputActive] = useState(false);
 	/** 产品store */
 	const { productListStore } = useStores();
-
+	/** 应用环境下拉 */
+	const [actorEnvOptions, setActorEnvOptions] = useState([]);
+	/** 参数配置 */
 	const [code, setCode] = useState("");
-	// const [formData, setFormData] = useState<any>();
+	/** 运行脚本 */
+	const [command, setCommand] = useState<string>("");
+
+	/** 表单数据 */
+	const [formData, setFormData] = useState<IOperatorAddFormData>({});
+	/** 表单数据修改 */
+	const [formErrors, setFormErrors] = useState<IOperatorAddFormData>({});
 
 	const buildTypeList = useMemo(() => {
 		return [
@@ -56,14 +69,47 @@ const AddOperator = observer((props: IAddOperator) => {
 		];
 	}, []);
 
+	/** 表单数据 */
+	const changeFormData = useCallback(
+		(val: IOperatorAddFormData) => {
+			setFormData({ ...formData, ...val });
+		},
+		[formData]
+	);
+
+	/** 获取应用环境下拉 */
+	const { run: fetchActorEnvOptions } = useMyRequest(getActorEnvOptions, {
+		onSuccess: (res: any) => {
+			if (res.message === "success") {
+				const newActorEnvOptions =
+					res?.data?.map((item: any) => {
+						return { label: item.title, value: item.id };
+					}) || [];
+				setActorEnvOptions(newActorEnvOptions);
+			}
+		},
+	});
+
+	useEffect(() => {
+		fetchActorEnvOptions({ type: taskType });
+	}, [fetchActorEnvOptions, taskType]);
+
 	/** 切换类型 */
 	const handleRadio = (val: IBuildType) => {
 		setBatchBuildType(val);
 	};
 
-	const handleSubmit = () => {
-		console.log(33);
-	};
+	const handleSubmit = useCallback(() => {
+		const paramsError = checkParamsConfig(code);
+		const resultErrors = checkFormData(formData, taskType);
+		setFormErrors(resultErrors);
+		if (!Object.getOwnPropertyNames(resultErrors)?.length) return;
+		const params = {
+			...formData,
+			command: Base64.encode(command),
+		};
+		console.log(params, 33);
+	}, [command, formData, taskType, code]);
 
 	return (
 		<div className={style.addOperatorBox}>
@@ -100,12 +146,23 @@ const AddOperator = observer((props: IAddOperator) => {
 						<FormItemBox
 							label="算子名称"
 							labelClassName={style.labelClassName}
+							className={classNames({
+								[style.operatorFormItem]: formErrors?.title,
+							})}
 							itemFlex="column"
+							errorMessage={formErrors?.title || ""}
 							require
 						>
 							<MyInput
-								helperText="30字符以内，仅限字母、数字、中文"
+								helperText={
+									formErrors?.title ? "" : "15字符以内，仅限字母、数字、中文"
+								}
 								placeholder="请输入算子名称"
+								value={formData?.title}
+								onChange={(e) => {
+									if (e.target.value?.length > 15) return;
+									changeFormData({ title: e.target.value });
+								}}
 							/>
 						</FormItemBox>
 						<FormItemBox
@@ -113,13 +170,20 @@ const AddOperator = observer((props: IAddOperator) => {
 							labelClassName={style.labelClassName}
 							className={style.operatorFormItem}
 							itemFlex="column"
+							errorMessage={formErrors?.version || ""}
 							require
 						>
-							<MyInput />
+							<MyInput
+								value={formData?.version}
+								onChange={(e) => {
+									changeFormData({ version: e.target.value });
+								}}
+							/>
 						</FormItemBox>
 						<FormItemBox
 							label="所属产品"
 							labelClassName={style.labelClassName}
+							errorMessage={formErrors?.productId || ""}
 							className={classNames({
 								[style.operatorFormItem]: batchBuildType === "ENVIRONMENT",
 							})}
@@ -129,6 +193,10 @@ const AddOperator = observer((props: IAddOperator) => {
 							<MySelect
 								fullWidth
 								options={productListStore?.productList || []}
+								value={formData?.productId}
+								onChange={(e) => {
+									changeFormData({ productId: e });
+								}}
 							/>
 						</FormItemBox>
 						{batchBuildType === "ENVIRONMENT" ? (
@@ -136,12 +204,17 @@ const AddOperator = observer((props: IAddOperator) => {
 								label="应用环境"
 								labelClassName={style.labelClassName}
 								className={style.operatorFormItem}
+								errorMessage={formErrors?.envId || ""}
 								itemFlex="column"
 								require
 							>
 								<MySelect
 									fullWidth
-									options={[{ label: "cadd", value: "CADD" }]}
+									options={actorEnvOptions || []}
+									value={formData?.envId}
+									onChange={(e) => {
+										changeFormData({ envId: e });
+									}}
 								/>
 							</FormItemBox>
 						) : null}
@@ -150,8 +223,17 @@ const AddOperator = observer((props: IAddOperator) => {
 								label="描述"
 								labelClassName={style.labelClassName}
 								itemFlex="column"
+								errorMessage={formErrors?.description || ""}
 							>
-								<MyInput multiline rows={4} placeholder="请输入算子描述" />
+								<MyInput
+									multiline
+									rows={4}
+									placeholder="请输入算子描述"
+									value={formData?.description}
+									onChange={(e) => {
+										changeFormData({ description: e.target.value });
+									}}
+								/>
 							</FormItemBox>
 						) : null}
 					</div>
@@ -162,7 +244,9 @@ const AddOperator = observer((props: IAddOperator) => {
 							<div className={style.code}>
 								<Code
 									value={code}
-									onChange={(e: string) => setCode(e)}
+									onChange={(e: string) => {
+										setCode(e);
+									}}
 									height="535px"
 								/>
 							</div>
@@ -174,12 +258,17 @@ const AddOperator = observer((props: IAddOperator) => {
 								labelClassName={style.labelClassName}
 								className={style.operatorFormItem}
 								itemFlex="column"
+								errorMessage={formErrors?.description || ""}
 							>
 								<MyInput
 									style={{ width: "420px" }}
 									multiline
 									rows={10}
 									placeholder="请输入算子描述"
+									value={formData?.description}
+									onChange={(e) => {
+										changeFormData({ description: e.target.value });
+									}}
 								/>
 							</FormItemBox>
 						</div>
@@ -192,8 +281,8 @@ const AddOperator = observer((props: IAddOperator) => {
 					{batchBuildType === "ENVIRONMENT" ? (
 						<div className={style.code}>
 							<Code
-								value={code}
-								onChange={(e: string) => setCode(e)}
+								value={command}
+								onChange={(e: string) => setCommand(e)}
 								height="350px"
 							/>
 						</div>
@@ -221,7 +310,7 @@ const AddOperator = observer((props: IAddOperator) => {
 					)}
 				</div>
 				<div className={style.buttonBox}>
-					<MyButton text="开始构建"></MyButton>
+					<MyButton text="开始构建" onClick={handleSubmit} />
 				</div>
 			</div>
 		</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-20 11:30:10
+ * @LastEditTime: 2022-10-20 17:11:22
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -10,6 +10,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import _ from "lodash";
+import Add from "@mui/icons-material/Add";
 
 import SearchInput from "@/components/BusinessComponents/SearchInput";
 import MySelect from "@/components/mui/MySelect";
@@ -18,11 +19,11 @@ import OperatorCard from "./components/OperatorCard";
 import AddOperator from "./components/AddOperator";
 import { useStores } from "@/store";
 import { getOperatorList, IOperatorListParams } from "@/api/resourceCenter";
-
-import styles from "./index.module.css";
 import useMyRequest from "@/hooks/useMyRequest";
 import { IOperatorInfo } from "./interface";
 
+import styles from "./index.module.css";
+
 const WorkflowOperator = observer(() => {
 	const [pageType, setPageType] = useState<string>("");
 	/** 产品store */
@@ -119,12 +120,7 @@ const WorkflowOperator = observer(() => {
 					</div>
 					<MyButton
 						text="构建算子"
-						img={
-							<span
-								style={{ fontSize: "14px", marginRight: "8px" }}
-								className="iconfont icon-dianzan"
-							></span>
-						}
+						startIcon={<Add />}
 						onClick={() => setPageType("add")}
 					></MyButton>
 				</div>

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-19 20:50:18
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-20 11:03:29
+ * @LastEditTime: 2022-10-20 19:05:27
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -19,4 +19,13 @@ export interface IOperatorInfo{
 export enum operatorType {
   'FLOW' = '流算子',
   'BATCH' = '批算子',
+}
+
+export interface IOperatorAddFormData {
+  title?: string;
+  type?: IOperatorType;
+  version?: string;   
+  productId?: string; 
+  description?: string;
+  envId?: string;
 }
\ No newline at end of file