feat: 工作流算子页面联调

package.json

@@ -72,7 +72,6 @@
 		"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/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-09-01 15:30:28
+ * @LastEditTime: 2022-10-19 21:14:11
  * @FilePath: /bkunyun/src/api/api_manager.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -55,7 +55,6 @@ 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`, // 查询应用环境的详情信息
-  
 };
 
 export default RESTAPI;

src/api/resourceCenter.ts

+/*
+ * @Author: 吴永生 15770852798@163.com
+ * @Date: 2022-10-19 17:09:23
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-10-19 21:14:35
+ * @FilePath: /bkunyun/src/api/resourceCenter.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import request from "@/utils/axios/service";
 import Api from "./api_manager";
 
@@ -12,6 +20,13 @@ type addActorenvBuildenvParams = {
   publicProjectId: string,
 }
 
+/** 获取算子列表请求参数 */
+export interface IOperatorListParams {
+	keyword: string;
+	productId: string;
+	type: string;
+}
+
 // 获取公共项目
 const getPublicProject = () => {
   return request({
@@ -60,6 +75,15 @@ const deleteActorenv = (params: {id: string}) => {
   });
 };
 
+// 获取算子列表
+const getOperatorList = (data: IOperatorListParams) => {
+  return request({
+    url: Api.API_OPERATOR_LIST,
+    method: "get",
+    data
+  });
+}
+
 
 // 查询应用环境的详情信息
 const getActorenvDetail = (params: {id: string}) => {
@@ -68,11 +92,13 @@ const getActorenvDetail = (params: {id: string}) => {
     method: "get",
   });
 };
+
 export {
   getPublicEnv,
   getPublicProject,
   addActorenvBuildenv,
   getActorenvList,
   deleteActorenv,
+  getOperatorList,
   getActorenvDetail,
 };

src/components/mui/MySelect.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2021-12-04 15:46:25
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-19 12:09:32
+ * @LastEditTime: 2022-10-19 18:41:04
  * @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
  */
@@ -13,6 +13,7 @@ import FormHelperText from "@mui/material/FormHelperText";
 import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
 import { createTheme, ThemeProvider } from "@mui/material";
 import selectActive from "@/assets/project/selectActive.svg";
+import { useState } from "react";
 
 export interface IOption {
 	label: string;
@@ -192,7 +193,10 @@ export default function MySelect(props: IProps) {
 		},
 	});
 
+	const [insideValue, setInsideValue] = useState<string>("");
+
 	const handleChange = (e: SelectChangeEvent<unknown>) => {
+		setInsideValue(e.target.value as string);
 		onChange && onChange(e.target.value as string);
 	};
 
@@ -214,7 +218,7 @@ export default function MySelect(props: IProps) {
 					size="small"
 					multiple={multiple}
 					{...other}
-					value={value || ""}
+					value={value || insideValue || ""}
 					onChange={handleChange}
 				>
 					{options.length

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

@@ -2,29 +2,38 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-19 14:35:50
+ * @LastEditTime: 2022-10-19 21:08:31
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 
 import styles from "./index.module.css";
+import { IOperatorInfo } from "../../interface";
+
+interface IProps {
+	operatorInfo: IOperatorInfo;
+}
+
+const OperatorCard = (props: IProps) => {
+	const {
+		operatorInfo: { title = "", type, version },
+	} = props;
 
-const OperatorCard = () => {
 	return (
 		<div className={styles.itemBox}>
 			<div className={styles.itemHeaderBox}>
 				<img alt="" style={{ width: 36, height: 36 }} />
 				<div>
-					<b className={styles.titleBox}>Desktop</b>
+					<b className={styles.titleBox}>{title}</b>
 					<span className={styles.operatorTypeBox}>批算子</span>
 				</div>
 			</div>
 			<div className={styles.itemContentBox}>
 				<p className={styles.infoBox}>
-					所属产品：<span>CADD</span>
+					所属产品：<span>{type}</span>
 				</p>
 				<p className={styles.infoBox}>
-					算子版本：<span>V1.0.0</span>
+					算子版本：<span>{`V${version}`}</span>
 				</p>
 				<p className={styles.infoBox}>
 					创建时间：<span>2022-10-11</span>

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

@@ -10,7 +10,7 @@
 }
 
 .searchSelectBox {
-	margin-left: 12px;
+	margin-right: 12px;
 }
 
 .contentBox {

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

@@ -2,22 +2,50 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-19 10:59:16
+ * @LastEditTime: 2022-10-19 21:11: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
  */
 // 应用环境
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
 
 import SearchInput from "@/components/BusinessComponents/SearchInput";
 import MySelect from "@/components/mui/MySelect";
 import MyButton from "@/components/mui/MyButton";
 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";
 
-const WorkflowOperator = () => {
+const WorkflowOperator = observer(() => {
 	const [addOpen, setAddOpen] = useState<boolean>(false);
+	/** 产品store */
+	const { productListStore } = useStores();
+	/**  算子列表参数 */
+	const [searchParams, setSearchParams] = useState<IOperatorListParams>({
+		keyword: "",
+		productId: "",
+		type: "",
+	});
+
+	const [list, setList] = useState<IOperatorInfo[]>();
+
+	const { run: getList } = useMyRequest(getOperatorList, {
+		onSuccess: (res) => {
+			console.log(res);
+			setList(res?.data);
+		},
+	});
+
+	useEffect(() => {
+		getList();
+	}, []);
+
 	return (
 		<>
 			<div className={styles.indexBox}>
@@ -26,27 +54,39 @@ const WorkflowOperator = () => {
 						<SearchInput
 							sx={{ width: 340, marginRight: "16px" }}
 							placeholder="输入关键词搜索"
+							value={searchParams.keyword}
+							onChange={(e) => {
+								setSearchParams({ ...searchParams, keyword: e.target.value });
+							}}
 						/>
 						<MySelect
-							options={[
-								{
-									label: "环境类型",
-									value: "a",
-								},
-							]}
-							placeholder="环境类型"
+							title="所属产品"
+							isTitle={true}
+							options={productListStore?.productList || []}
+							value={searchParams.keyword}
+							onChange={(e) => {
+								setSearchParams({ ...searchParams, productId: e });
+							}}
 							className={styles.searchSelectBox}
 							sx={{ width: "150px", height: "32px" }}
 						/>
 						<MySelect
+							title="环境类型"
+							isTitle={true}
+							value={searchParams.keyword}
+							onChange={(e) => {
+								setSearchParams({ ...searchParams, type: e });
+							}}
 							options={[
 								{
-									label: "环境类型",
-									value: "a",
+									label: "批式",
+									value: "BATCH",
+								},
+								{
+									label: "流式",
+									value: "FLOW",
 								},
 							]}
-							placeholder="批/流类型"
-							className={styles.searchSelectBox}
 							sx={{ width: "150px", height: "32px" }}
 						/>
 					</div>
@@ -62,14 +102,14 @@ const WorkflowOperator = () => {
 					></MyButton>
 				</div>
 				<div className={styles.contentBox}>
-					{[1, 2, 3, 4, 5].map((item) => {
-						return <OperatorCard />;
+					{list?.map((item) => {
+						return <OperatorCard operatorInfo={item} />;
 					})}
 				</div>
 			</div>
 			{addOpen && <AddOperator setAddOpen={setAddOpen} />}
 		</>
 	);
-};
+});
 
 export default WorkflowOperator;

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

+/*
+ * @Author: 吴永生 15770852798@163.com
+ * @Date: 2022-10-19 20:50:18
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-10-19 21:09:14
+ * @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 interface IOperatorInfo{
+  title: string;
+  type: IOperatorType;
+  version: string;   
+  productId: string; 
+}
\ No newline at end of file

yarn.lock

@@ -8032,12 +8032,6 @@ react-flow-renderer@^10.3.7:
     d3-selection "^3.0.0"
     d3-zoom "^3.0.0"
     zustand "^3.7.2"
-
-react-hook-form@^7.37.0:
-  version "7.37.0"
-  resolved "https://registry.npmmirror.com/react-hook-form/-/react-hook-form-7.37.0.tgz#4d1738f092d3d8a3ade34ee892d97350b1032b19"
-  integrity sha512-6NFTxsnw+EXSpNNvLr5nFMjPdYKRryQcelTHg7zwBB6vAzfPIcZq4AExP4heVlwdzntepQgwiOQW4z7Mr99Lsg==
-
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"