Merge branch 'feat-20221012-environment' of http://120.77.149.83/root/bkunyun…

Merge branch 'feat-20221012-environment' of http://120.77.149.83/root/bkunyun into feat-20221012-environment

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-19 21:14:35
+ * @LastEditTime: 2022-10-20 09:26:12
  * @FilePath: /bkunyun/src/api/resourceCenter.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -76,11 +76,11 @@ const deleteActorenv = (params: {id: string}) => {
 };
 
 // 获取算子列表
-const getOperatorList = (data: IOperatorListParams) => {
+const getOperatorList = (params: IOperatorListParams) => {
   return request({
     url: Api.API_OPERATOR_LIST,
     method: "get",
-    data
+    params
   });
 }
 

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

 .addOperatorBox {
+	z-index: 2;
 	position: fixed;
 	top: 0;
 	left: 0;

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-19 21:27:03
+ * @LastEditTime: 2022-10-20 11:59:34
  * @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
  */
@@ -25,13 +25,14 @@ import FormItemBox from "@/components/mui/FormItemBox";
 import { useStores } from "@/store";
 
 interface IAddOperator {
-	setAddOpen: (val: boolean) => void;
+	pageType: string;
+	setPageType: (val: string) => void;
 }
 
 type IBuildType = "ENVIRONMENT" | "OPERATOR";
 
 const AddOperator = observer((props: IAddOperator) => {
-	const { setAddOpen } = props;
+	const { setPageType } = props;
 
 	/** 创建类型 BATCH - 批算子;  FLOW - 流算子*/
 	const [taskType, setTaskType] = useState<"BATCH" | "FLOW">("BATCH");
@@ -70,14 +71,18 @@ const AddOperator = observer((props: IAddOperator) => {
 				<SwitchBatchFolw
 					active={taskType}
 					setActive={setTaskType}
-					goBack={() => setAddOpen(false)}
+					goBack={() => setPageType("")}
 				></SwitchBatchFolw>
 			</div>
 			<div className={style.right}>
 				<div className={style.title}>
 					{taskType === "BATCH" ? "批式算子信息" : "流式算子信息"}
 				</div>
-				<div style={{ paddingBottom: "20px" }}>
+				<div
+					style={{
+						paddingBottom: batchBuildType === "ENVIRONMENT" ? "20px" : "2px",
+					}}
+				>
 					<RadioGroupOfButtonStyle
 						RadiosBoxStyle={{ width: 236 }}
 						value={batchBuildType}
@@ -95,7 +100,6 @@ const AddOperator = observer((props: IAddOperator) => {
 						<FormItemBox
 							label="算子名称"
 							labelClassName={style.labelClassName}
-							className={style.operatorFormItem}
 							itemFlex="column"
 							require
 						>
@@ -116,7 +120,9 @@ const AddOperator = observer((props: IAddOperator) => {
 						<FormItemBox
 							label="所属产品"
 							labelClassName={style.labelClassName}
-							className={style.operatorFormItem}
+							className={classNames({
+								[style.operatorFormItem]: batchBuildType === "ENVIRONMENT",
+							})}
 							itemFlex="column"
 							require
 						>
@@ -143,7 +149,6 @@ const AddOperator = observer((props: IAddOperator) => {
 							<FormItemBox
 								label="描述"
 								labelClassName={style.labelClassName}
-								className={style.operatorFormItem}
 								itemFlex="column"
 							>
 								<MyInput multiline rows={4} placeholder="请输入算子描述" />

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

@@ -15,10 +15,20 @@
 .itemHeaderBox {
 	display: flex;
 	justify-content: space-between;
-	align-items: center;
 	margin-bottom: 20px;
 }
 
+.startTitleBox {
+	width: 36px;
+	height: 36px;
+	border-radius: 4px;
+	background: #a657f4;
+	color: #fff;
+	font-size: 18px;
+	font-weight: 600;
+	text-align: center;
+	line-height: 36px;
+}
 .itemContentBox {
 	display: flex;
 	flex-wrap: wrap;
@@ -30,17 +40,26 @@
 	color: #1e2633;
 }
 
-.titleBox {
-	display: block;
-	font-size: 16px;
-	color: #1e2633;
-}
 .operatorTypeBox {
 	display: block;
 	color: #8a9099;
 	font-size: 12px;
 }
 
+.operationBox {
+	display: inline-block;
+	width: 24px;
+	height: 24px;
+	text-align: center;
+	line-height: 24px;
+	cursor: pointer;
+}
+
+.operationBox:hover {
+	background-color: #ebedf0;
+	border-radius: 2px;
+}
+
 .infoBox {
 	width: 50%;
 	font-weight: 400;

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

@@ -2,45 +2,79 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-19 21:08:31
+ * @LastEditTime: 2022-10-20 11:39:55
  * @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";
+import { IOperatorInfo, operatorType } from "../../interface";
+import { observer } from "mobx-react";
+import { useStores } from "@/store";
+import { useMemo } from "react";
+import MyMenu from "@/components/mui/MyMenu";
 
 interface IProps {
 	operatorInfo: IOperatorInfo;
+	setPageType: (val: string) => void;
 }
 
-const OperatorCard = (props: IProps) => {
+const OperatorCard = observer((props: IProps) => {
 	const {
-		operatorInfo: { title = "", type, version },
+		operatorInfo: { title = "", type, version, productId, createTime },
+		setPageType,
 	} = props;
+	/** 产品store */
+	const { productListStore } = useStores();
+
+	const productText = useMemo(() => {
+		const result = productListStore.productList?.filter((item) => {
+			return item.value === productId;
+		});
+		return result?.length ? result[0].label : "";
+	}, [productListStore.productList, productId]);
+
+	const onClickOperation = (val: string) => {
+		if (val === "upgrade") {
+			setPageType("edit");
+		}
+	};
 
 	return (
 		<div className={styles.itemBox}>
 			<div className={styles.itemHeaderBox}>
-				<img alt="" style={{ width: 36, height: 36 }} />
-				<div>
+				<div className={styles.startTitleBox}>{title?.slice(0, 1)}</div>
+				<div style={{ flex: 1, marginLeft: 12 }}>
 					<b className={styles.titleBox}>{title}</b>
-					<span className={styles.operatorTypeBox}>批算子</span>
+					<span className={styles.operatorTypeBox}>
+						{operatorType[type] || ""}
+					</span>
 				</div>
+				<MyMenu
+					value=""
+					options={[{ label: "升级", value: "upgrade" }]}
+					hasTriangle={false}
+					setValue={onClickOperation}
+					sx={{
+						zIndex: 1601,
+					}}
+				>
+					<span className={styles.operationBox}>d</span>
+				</MyMenu>
 			</div>
 			<div className={styles.itemContentBox}>
 				<p className={styles.infoBox}>
-					所属产品：<span>{type}</span>
+					所属产品：<span>{productText}</span>
 				</p>
 				<p className={styles.infoBox}>
 					算子版本：<span>{`V${version}`}</span>
 				</p>
 				<p className={styles.infoBox}>
-					创建时间：<span>2022-10-11</span>
+					创建时间：<span>{createTime}</span>
 				</p>
 			</div>
 		</div>
 	);
-};
+});
 
 export default OperatorCard;

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

@@ -2,13 +2,14 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-19 21:11:50
+ * @LastEditTime: 2022-10-20 11:30:10
  * @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 { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
+import _ from "lodash";
 
 import SearchInput from "@/components/BusinessComponents/SearchInput";
 import MySelect from "@/components/mui/MySelect";
@@ -23,28 +24,47 @@ import useMyRequest from "@/hooks/useMyRequest";
 import { IOperatorInfo } from "./interface";
 
 const WorkflowOperator = observer(() => {
-	const [addOpen, setAddOpen] = useState<boolean>(false);
+	const [pageType, setPageType] = useState<string>("");
 	/** 产品store */
 	const { productListStore } = useStores();
 	/**  算子列表参数 */
 	const [searchParams, setSearchParams] = useState<IOperatorListParams>({
 		keyword: "",
-		productId: "",
-		type: "",
+		productId: "all",
+		type: "all",
 	});
 
 	const [list, setList] = useState<IOperatorInfo[]>();
 
 	const { run: getList } = useMyRequest(getOperatorList, {
+		// refreshDeps: [],
 		onSuccess: (res) => {
 			console.log(res);
 			setList(res?.data);
 		},
 	});
 
+	const newGetList = useCallback(() => {
+		const params = _.cloneDeep(searchParams);
+		if (params.productId === "all") {
+			params.productId = "";
+		}
+		if (params.type === "all") {
+			params.type = "";
+		}
+		getList(params);
+	}, [getList, searchParams]);
+
+	// 按回车搜索
+	const handleKeyWordChangeKeyUp = (e: any) => {
+		if (e.keyCode === 13) {
+			newGetList();
+		}
+	};
+
 	useEffect(() => {
-		getList();
-	}, []);
+		newGetList();
+	}, [searchParams.productId, searchParams.type]);
 
 	return (
 		<>
@@ -55,6 +75,7 @@ const WorkflowOperator = observer(() => {
 							sx={{ width: 340, marginRight: "16px" }}
 							placeholder="输入关键词搜索"
 							value={searchParams.keyword}
+							onKeyUp={handleKeyWordChangeKeyUp}
 							onChange={(e) => {
 								setSearchParams({ ...searchParams, keyword: e.target.value });
 							}}
@@ -62,8 +83,13 @@ const WorkflowOperator = observer(() => {
 						<MySelect
 							title="所属产品"
 							isTitle={true}
-							options={productListStore?.productList || []}
-							value={searchParams.keyword}
+							options={
+								[
+									{ label: "全部", value: "all" },
+									...productListStore?.productList,
+								] || []
+							}
+							value={searchParams.productId}
 							onChange={(e) => {
 								setSearchParams({ ...searchParams, productId: e });
 							}}
@@ -73,11 +99,12 @@ const WorkflowOperator = observer(() => {
 						<MySelect
 							title="环境类型"
 							isTitle={true}
-							value={searchParams.keyword}
+							value={searchParams.type}
 							onChange={(e) => {
 								setSearchParams({ ...searchParams, type: e });
 							}}
 							options={[
+								{ label: "全部", value: "all" },
 								{
 									label: "批式",
 									value: "BATCH",
@@ -98,16 +125,20 @@ const WorkflowOperator = observer(() => {
 								className="iconfont icon-dianzan"
 							></span>
 						}
-						onClick={() => setAddOpen(true)}
+						onClick={() => setPageType("add")}
 					></MyButton>
 				</div>
 				<div className={styles.contentBox}>
 					{list?.map((item) => {
-						return <OperatorCard operatorInfo={item} />;
+						return (
+							<OperatorCard operatorInfo={item} setPageType={setPageType} />
+						);
 					})}
 				</div>
 			</div>
-			{addOpen && <AddOperator setAddOpen={setAddOpen} />}
+			{pageType && (
+				<AddOperator setPageType={setPageType} pageType={pageType} />
+			)}
 		</>
 	);
 });

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-19 21:09:14
+ * @LastEditTime: 2022-10-20 11:03: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
  */
@@ -13,4 +13,10 @@ export interface IOperatorInfo{
   type: IOperatorType;
   version: string;   
   productId: string; 
+  createTime: string;
+}
+
+export enum operatorType {
+  'FLOW' = '流算子',
+  'BATCH' = '批算子',
 }
\ No newline at end of file