feat: 工作流算子新增页面开发

package.json

@@ -72,6 +72,7 @@
     "react-dom": "^18.1.0",
     "react-dropzone": "^14.2.1",
     "react-flow-renderer": "^10.3.7",
+    "react-hook-form": "^7.37.0",
     "react-refresh": "^0.11.0",
     "react-router-dom": "^6.3.0",
     "resolve": "^1.20.0",

src/components/MyRouter/useMyRouter.ts

@@ -7,9 +7,10 @@ import NotFound from "@/views/404";
 import useMyRequest from "@/hooks/useMyRequest";
 import { useEffect } from "react";
 import { menu } from "@/api/routes_api";
+import { IProductOption } from "@/store/modules/productList";
 
 const useMyRouter = () => {
-  const { permissionStore, menuStore } = useStores();
+  const { permissionStore, menuStore, productListStore } = useStores();
   const userInfo = useMyRequest(current);
   const menuInfo = useMyRequest(menu);
 
@@ -66,6 +67,18 @@ const useMyRouter = () => {
       }
       menuStore.initMenu(menuInfo.res.data);
       permissionStore.initAllRoutes();
+
+      // /** 所有产品列表 */
+      const newProductList:IProductOption[] =  [];
+      for (let item of menuInfo.res.data) {
+        if (item.type === "product") {
+          newProductList.push({
+            label: item.name,
+            value: item.id,
+          });
+        }
+      }
+      productListStore.setProductList(newProductList)
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

+.is_require::after {
+	display: inline-block;
+	content: "*";
+	color: #ff4e4e;
+	margin-right: 4px;
+}
+
+.dynamicFormItem_label {
+	display: block;
+	font-size: 14px;
+	font-weight: 600;
+	color: #1e2633;
+}
+.dynamicFormItem_col {
+	position: relative;
+	margin-bottom: 20px;
+}
+.dynamicFormItem_col_helpText {
+	margin-bottom: 46px;
+}
+.dynamicFormItem_content {
+	font-size: 14px;
+	color: #736f7f;
+}
+.dynamicFormitem_child {
+	position: relative;
+	flex: 1;
+	width: 100%;
+	text-align: left;
+}
+.dynamicFormitem_helpText {
+	position: absolute;
+	bottom: -36px;
+	font-size: 13px;
+	line-height: 1.15;
+	color: #9894a5;
+}
+.dynamicFormitem_helpText_warning {
+	color: #ff4e4e;
+}
+.dynamicFormitem_errorTips {
+	position: absolute;
+	bottom: -20px;
+	font-size: 13px;
+	color: #ff4e4e;
+}

src/components/mui/FormItemBox/index.tsx

+import React from "react";
+import classNames from "classnames";
+import styles from "./index.module.css";
+import "./label.css";
+// import { Control, ValidationRules } from 'react-hook-form/dist/types/form';
+
+export interface IHelpText {
+	value: string /** 帮助文字内容 */;
+	className?: string;
+	type?: "normal" | "warning" /** 默认normal */;
+}
+
+export interface IFormItemBoxProps {
+	/** label 标签的文本 */
+	label?: string;
+	/** 标签宽度 */
+	labelWidth?: number;
+	/** 标签文本对齐方式 */
+	labelAlign?: "left" | "center" | "right";
+	/** 标签文本的className */
+	labelClassName?: string;
+	/** 是否必填 */
+	require?: boolean;
+	/**  */
+	children: React.ReactNode;
+	className?: string;
+	/** 最外层class */
+	mainClass?: string;
+	/** 校验信息 */
+	errorMessage?: string;
+	errorClassName?: string;
+	itemFlex?: "row" | "column";
+	/** 帮助文字提示信息 */
+	helpText?: IHelpText;
+}
+const FormItemBox: React.FunctionComponent<IFormItemBoxProps> = (
+	props: IFormItemBoxProps
+) => {
+	const {
+		className,
+		label,
+		children,
+		require,
+		labelWidth,
+		labelAlign,
+		errorMessage,
+		itemFlex,
+		mainClass,
+		helpText,
+		labelClassName,
+		errorClassName,
+	} = props;
+
+	return (
+		<div
+			className={classNames(
+				styles.dynamicFormItem_div,
+				mainClass,
+				helpText && helpText.value && styles.dynamicFormItem_col_helpText
+			)}
+		>
+			<div
+				className={classNames(
+					styles.dynamicFormItem_content,
+					`dynamicFormItem-${itemFlex}`,
+					className
+				)}
+			>
+				<span
+					style={{ width: `${labelWidth}px` }}
+					className={classNames(
+						styles.dynamicFormItem_label,
+						{ [styles.is_require]: require },
+						`align-${itemFlex === "row" ? labelAlign : "left"}`,
+						labelClassName
+					)}
+				>
+					{label}
+				</span>
+				<div className={styles.dynamicFormitem_child}>
+					{children}
+					{errorMessage && (
+						<div
+							className={classNames(
+								styles.dynamicFormitem_errorTips,
+								errorClassName
+							)}
+						>
+							{errorMessage}
+						</div>
+					)}
+					<div
+						className={classNames(
+							styles.dynamicFormitem_helpText,
+							helpText &&
+								helpText.type === "warning" &&
+								styles.dynamicFormitem_helpText_warning,
+							helpText && helpText.className
+						)}
+					>
+						{helpText?.value}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+FormItemBox.defaultProps = {
+	labelWidth: 100,
+	labelAlign: "right",
+	itemFlex: "row",
+};
+export default FormItemBox;

src/components/mui/FormItemBox/label.css

+.dynamicFormItem-row {
+	display: flex;
+	align-items: center;
+}
+
+.dynamicFormItem-column {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}

src/components/mui/MySelect.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2021-12-04 15:46:25
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-21 18:00:58
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-10-19 12:09:32
  * @FilePath: /lionet-slb-pc/src/components/SearchView/components/Collapse.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */

src/store/index.ts

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-09 20:41:05
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-14 20:55:22
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-10-19 16:21:50
  * @FilePath: /bkunyun/src/store/index.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -12,10 +12,11 @@ import permissionStore from "./modules/permission";
 import menuStore from "./modules/menu";
 import currentProjectStore from "./modules/currentProject";
 import fileListStore from "./modules/fileList";
+import productListStore from './modules/productList'
 
 configure({ enforceActions: "always" });
 
-export const stores = { permissionStore, menuStore, currentProjectStore, fileListStore };
+export const stores = { permissionStore, menuStore, currentProjectStore, fileListStore, productListStore };
 
 /** Store类型 */
 export type Stores = typeof stores;

src/store/modules/productList.ts

+/*
+ * @Author: 吴永生 15770852798@163.com
+ * @Date: 2022-07-11 11:49:55
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-10-19 16:25:27
+ * @FilePath: /bkunyun/src/store/modules/currentProject.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { makeAutoObservable } from "mobx";
+
+export interface IProductOption{
+  label: string;
+  value: string;
+}
+
+class newProductList {
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+ 
+  // 产品列表
+  productList: IProductOption[] = [];
+ 
+  setProductList = (list: IProductOption[]) => {
+    this.productList = list;
+  };
+}
+
+const productListStore = new newProductList();
+
+export default productListStore;

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

@@ -45,6 +45,12 @@
 	border-top-left-radius: 4px;
 	border-bottom-left-radius: 4px;
 }
+.newForm {
+	width: 368px;
+	box-sizing: border-box;
+	padding: 16px 32px 0px 0;
+	border-right: 1px solid #ebedf0;
+}
 
 .codeBox {
 	flex: 1;
@@ -70,3 +76,15 @@
 	border: 1px solid #ebedf0;
 	margin-bottom: 24px;
 }
+
+.labelClassName {
+	line-height: 36px;
+}
+
+.operatorFormItem {
+	margin-bottom: 24px;
+}
+
+.descBox {
+	padding-left: 32px;
+}

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

@@ -2,14 +2,18 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-18 16:12:55
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-18 19:41:29
+ * @LastEditTime: 2022-10-19 17:57:14
  * @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
  */
 import { useEffect, useState, useCallback, useMemo } from "react";
+import classNames from "classnames";
+import { observer } from "mobx-react";
+
 import MyInput from "@/components/mui/MyInput";
 import MySelect from "@/components/mui/MySelect";
 import MyButton from "@/components/mui/MyButton";
+import { useForm, Controller } from "react-hook-form";
 import style from "./index.module.css";
 import SwitchBatchFolw from "@/views/ResourceCenter/components/SwitchBatchFolw";
 
@@ -18,6 +22,8 @@ import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfB
 import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
 import BatchOperatorFlow from "@/views/Project/components/Flow/components/BatchOperatorFlow";
 import OperatorList from "@/views/CustomOperator/components/OperatorList";
+import FormItemBox from "@/components/mui/FormItemBox";
+import { useStores } from "@/store";
 
 interface IAddOperator {
 	setAddOpen: (val: boolean) => void;
@@ -25,18 +31,24 @@ interface IAddOperator {
 
 type IBuildType = "ENVIRONMENT" | "OPERATOR";
 
-const AddEnvironment = (props: IAddOperator) => {
+const AddOperator = observer((props: IAddOperator) => {
 	const { setAddOpen } = props;
 
 	/** 创建类型 BATCH - 批算子;  FLOW - 流算子*/
 	const [taskType, setTaskType] = useState<"BATCH" | "FLOW">("BATCH");
-	/** 创建类型 BATCH - 批算子;  FLOW - 流算子*/
+	/** 创建类型 ENVIRONMENT - 基于环境;  OPERATOR - 基于算子*/
 	const [batchBuildType, setBatchBuildType] =
 		useState<IBuildType>("ENVIRONMENT");
 	/** 算子数组 */
 	const [operatorList, setOperatorList] = useState<ITask[]>([]);
 	/** 流程编排 算子是否选中 */
 	const [inputActive, setInputActive] = useState(false);
+	const { control, getValues, reset, setValue } = useForm({
+		mode: "onChange",
+	});
+	/** 产品store */
+	const { productListStore } = useStores();
+	console.log(productListStore, "productListStore");
 
 	const [code, setCode] = useState("");
 
@@ -78,21 +90,165 @@ const AddEnvironment = (props: IAddOperator) => {
 					/>
 				</div>
 				<div className={style.content}>
-					<div className={style.form}>4242</div>
-					<div className={style.codeBox}>
-						<div className={style.codeTitle}>参数配置</div>
-						<div className={style.code}>
-							<Code
-								value={code}
-								onChange={(e: string) => setCode(e)}
-								height="535px"
+					<div
+						className={classNames({
+							[style.form]: batchBuildType === "ENVIRONMENT",
+							[style.newForm]: batchBuildType != "ENVIRONMENT",
+						})}
+					>
+						<FormItemBox
+							label="算子名称"
+							labelClassName={style.labelClassName}
+							className={style.operatorFormItem}
+							itemFlex="column"
+							require
+						>
+							<Controller
+								render={() => {
+									return (
+										<MyInput
+											helperText="30字符以内，仅限字母、数字、中文"
+											placeholder="请输入算子名称"
+										/>
+									);
+								}}
+								control={control}
+								name="name"
+								// rules={
+								// }
 							/>
-						</div>
+						</FormItemBox>
+						<FormItemBox
+							label="算子版本"
+							labelClassName={style.labelClassName}
+							className={style.operatorFormItem}
+							itemFlex="column"
+							require
+						>
+							<Controller
+								render={() => {
+									return <MyInput />;
+								}}
+								control={control}
+								name="name"
+								// rules={
+								// }
+							/>
+						</FormItemBox>
+						<FormItemBox
+							label="所属产品"
+							labelClassName={style.labelClassName}
+							className={style.operatorFormItem}
+							itemFlex="column"
+							require
+						>
+							<Controller
+								render={() => {
+									return (
+										<MySelect
+											fullWidth
+											options={productListStore?.productList || []}
+										/>
+									);
+								}}
+								control={control}
+								name="name"
+								// rules={
+								// }
+							/>
+						</FormItemBox>
+						{batchBuildType === "ENVIRONMENT" ? (
+							<FormItemBox
+								label="应用环境"
+								labelClassName={style.labelClassName}
+								className={style.operatorFormItem}
+								itemFlex="column"
+								require
+							>
+								<Controller
+									render={() => {
+										return (
+											<MySelect
+												fullWidth
+												options={[{ label: "cadd", value: "CADD" }]}
+											/>
+										);
+									}}
+									control={control}
+									name="name"
+									// rules={
+									// }
+								/>
+							</FormItemBox>
+						) : null}
+						{batchBuildType === "ENVIRONMENT" ? (
+							<FormItemBox
+								label="描述"
+								labelClassName={style.labelClassName}
+								className={style.operatorFormItem}
+								itemFlex="column"
+							>
+								<Controller
+									render={() => {
+										return (
+											<MyInput
+												multiline
+												rows={4}
+												placeholder="请输入算子描述"
+											/>
+										);
+									}}
+									control={control}
+									name="desc"
+									// rules={
+									// }
+								/>
+							</FormItemBox>
+						) : null}
 					</div>
+
+					{batchBuildType === "ENVIRONMENT" ? (
+						<div className={style.codeBox}>
+							<div className={style.codeTitle}>参数配置</div>
+							<div className={style.code}>
+								<Code
+									value={code}
+									onChange={(e: string) => setCode(e)}
+									height="535px"
+								/>
+							</div>
+						</div>
+					) : (
+						<div className={style.descBox}>
+							<FormItemBox
+								label="描述"
+								labelClassName={style.labelClassName}
+								className={style.operatorFormItem}
+								itemFlex="column"
+							>
+								<Controller
+									render={() => {
+										return (
+											<MyInput
+												style={{ width: "420px" }}
+												multiline
+												rows={10}
+												placeholder="请输入算子描述"
+											/>
+										);
+									}}
+									control={control}
+									name="desc"
+									// rules={
+									// }
+								/>
+							</FormItemBox>
+						</div>
+					)}
 				</div>
 				<div className={style.parameterConfigBox}>
 					<div className={style.codeTitle}>
-						{batchBuildType === "ENVIRONMENT" ? "参数配置" : "流程编排"}
+						{batchBuildType === "ENVIRONMENT" ? "运行脚本" : "流程编排"}
 					</div>
 					{batchBuildType === "ENVIRONMENT" ? (
 						<div className={style.code}>
@@ -131,5 +287,5 @@ const AddEnvironment = (props: IAddOperator) => {
 			</div>
 		</div>
 	);
-};
-export default AddEnvironment;
+});
+export default AddOperator;

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-17 18:35:09
+ * @LastEditTime: 2022-10-19 14:35:50
  * @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,7 +21,7 @@ const OperatorCard = () => {
 			</div>
 			<div className={styles.itemContentBox}>
 				<p className={styles.infoBox}>
-					产品类型：<span>CADD</span>
+					所属产品：<span>CADD</span>
 				</p>
 				<p className={styles.infoBox}>
 					算子版本：<span>V1.0.0</span>

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

@@ -6,8 +6,7 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-bottom: 20px;
-	padding: 0 20px;
+	padding: 20px;
 }
 
 .searchSelectBox {

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-18 17:05:49
+ * @LastEditTime: 2022-10-19 10:59:16
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */