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

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-08-15 17:10:49
+ * @LastEditTime: 2022-09-01 15:30:28
  * @FilePath: /bkunyun/src/api/api_manager.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -45,6 +45,9 @@ const RESTAPI = {
   API_TASK_OVERVIEW_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflowJobInformation`,  // 查询任务概览
   API_OPERATOR_LISTSTREAMACTORS:`${BACKEND_API_URI_PREFIX}/cpp/workflow/liststreamactors`,  // 获取流算子列表，可用于模糊查询，返回所有版本流算子
   API_SAVE_BATCHACTOR:`${BACKEND_API_URI_PREFIX}/cpp/workflow/savebatchactor`,  // 保存批算子
+  API_PROJECT_USERS_LIST:`${BACKEND_API_URI_PREFIX}/cpp/project/listusers`,  // 获取项目成员
+  API_ADD_PROJECT_USER:`${BACKEND_API_URI_PREFIX}/cpp/project/updatemember`,  // 添加项目成员
+  API_GET_PROJECT_POWER:`${BACKEND_API_URI_PREFIX}/cpp/project/listroles`,  // 获取项目权限
 };
 
 export default RESTAPI;

src/api/project_api.ts

@@ -318,6 +318,34 @@ const saveBatchActor = (params: saveBatchParams) => {
   });
 };
 
+// 获取项目成员
+const fetchProjectUsersList = (params: {id: string}) => {
+  return request({
+    url: Api.API_PROJECT_USERS_LIST,
+    method: "get",
+    params,
+  });
+};
+
+
+// 修改项目成员信息
+const addProjectUser = (id: string, params: any) => {
+  return request({
+    url: `${Api.API_ADD_PROJECT_USER}?id=${id}`,
+    method: "put",
+    data: params,
+  });
+};
+
+// 获取项目权限
+const fetchProjectPower = (params: {id: string}) => {
+  return request({
+    url: Api.API_GET_PROJECT_POWER,
+    method: "get",
+    params,
+  });
+};
+
 export {
   current,
   menu,
@@ -342,5 +370,8 @@ export {
   getTaskOverview,
   getOperatorList,
   saveBatchActor,
-  fetchFlowOutputNumber
+  fetchFlowOutputNumber,
+  fetchProjectUsersList,
+  addProjectUser,
+  fetchProjectPower
 };

src/assets/project/selectActive.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 4</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="切换产品" transform="translate(-337.000000, -190.000000)">
+            <g id="编组-37" transform="translate(223.000000, 172.000000)">
+                <g id="编组-34" transform="translate(0.000000, 8.000000)">
+                    <g id="编组-4" transform="translate(114.000000, 10.000000)">
+                        <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                        <polyline id="路径-26" stroke="#1370FF" stroke-width="1.5" stroke-linejoin="round" points="4 8.33740166 7.27434245 11 12 5"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/triangle.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 12备份</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-12备份">
+            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            <polygon id="路径-53备份-2" fill="#8A9099" points="4.5 6 11.5 6 8 11"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/mui/MyTable/interface.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-07-26 10:23:43
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-07-26 11:53:00
+ * @LastEditTime: 2022-09-01 16:00:34
  * @FilePath: /bkunyun/src/components/mui/MyTable/interface.ts
  * @Description: 这是默认设置,请设置`customMade`,打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -32,7 +32,7 @@ export interface ITableProps {
   /** 每行双击事件  */
   onDoubleClick?: any,
   /** 是否loading */
-  load?: boolean,
+  loading?: boolean,
   /** table size */
   size?: any,
   /** 选中的checkbox数据 */
@@ -71,4 +71,6 @@ export interface ITableProps {
   onRef?: any;
   /** 手型 */
   cursor?: string
+  /** 没有数据文案 */
+  noDataText?: string
 }
\ No newline at end of file

src/store/modules/currentProject.ts

@@ -18,6 +18,7 @@ type projectInfo = {
 type productInfo = {
   id?: string;
   name?: string;
+  path?: string;
 };
 
 /** 用户信息 */

src/views/ConsoleLayout/components/TransferList/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-10 18:05:21
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-09-01 14:09:28
+ * @LastEditTime: 2022-09-01 15:54:33
  * @FilePath: /bkunyun/src/views/ConsoleLayout/components/TransferList/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */

src/views/ConsoleLayout/index.module.css

@@ -13,10 +13,69 @@
 }
 
 .logo {
-	padding: 0px 16px 0px 20px;
+	padding: 0px 32px 0px 20px;
 	margin-top: -10px;
 }
-
+.menuBox {
+	line-height: 57px;
+	height: 57px;
+	font-size: 14px;
+	color: rgba(86, 92, 102, 1);
+	margin-right: 24px;
+	cursor: pointer;
+	position: relative;
+}
+.menuTitle:hover {
+	color: #1e2633;
+}
+.menuBox:hover .productList {
+	display: block;
+}
+.triangle {
+	width: 16px;
+	height: 16px;
+	position: relative;
+	top: 4px;
+	transition: width 1s;
+	-webkit-transition: width 1s;
+}
+.menuBox:hover .triangle {
+	transform: rotateX(180deg);
+}
+.productList {
+	position: absolute;
+	top: 57px;
+	left: -16px;
+	padding: 8px 0;
+	display: none;
+	background: #ffffff;
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
+	border-radius: 4px;
+	z-index: 1002;
+}
+.productLi {
+	height: 36px;
+	padding: 7px 50px 7px 16px;
+	font-size: 14px;
+	color: rgba(30, 38, 51, 1);
+	line-height: 22px;
+	cursor: pointer;
+	position: relative;
+	box-sizing: border-box;
+}
+.productLi:hover {
+	color: rgba(19, 112, 255, 1);
+}
+.productLiActive {
+	color: rgba(19, 112, 255, 1);
+}
+.selectActive {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	top: 10px;
+	right: 12px;
+}
 .uploadIconBox {
 	width: 32px;
 	height: 32px;
@@ -39,10 +98,18 @@
 }
 
 .topRightItem {
-	margin-right: 20px;
+	margin-right: 24px;
 }
-
-.ArrowDropDownIconRoot {
+.topRightTriangle {
+	color: #8a9099;
+	transition: all 0.2s !important;
+	transform: rotate(0);
+}
+.topRightTriangleOpen {
+	color: #8a9099;
+	transform: rotate(180deg);
+}
+/* .ArrowDropDownIconRoot {
 	color: #8a9099;
 	transition: all 0.2s !important;
 	transform: rotate(0);
@@ -51,7 +118,7 @@
 .ArrowDropDownIconRootOpen {
 	color: #8a9099;
 	transform: rotate(180deg);
-}
+} */
 
 .menuPaper {
 	border: 1px solid #f0f2f5;

src/views/ConsoleLayout/index.tsx

-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import cx from "classnames";
 import { observer } from "mobx-react-lite";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import Avatar from "@mui/material/Avatar";
 import { Box, Menu, MenuItem } from "@mui/material";
 import classNames from "classnames";
 
 import uploadIcon from "@/assets/img/uploadIcon.svg";
+import triangle from "@/assets/project/triangle.svg";
+import selectActive from "@/assets/project/selectActive.svg";
 import globalText from "@/utils/globalText_CN";
 import useIndex from "./useIndex";
 import { useStores } from "@/store/index";
-import MyButton from "@/components/mui/MyButton";
 import logo from "@/assets/img/logo.svg";
 import MyPopover from "@/components/mui/MyPopover";
 import TranSferList from "./components/TransferList";
 import { getProjectList } from "@/api/project_api";
 import useMyRequest from "@/hooks/useMyRequest";
+import { toJS } from "mobx";
 import {
 	setFileServerEndPointLocalStorage,
 	getFiletokenAccordingToId,
@@ -35,19 +36,15 @@ const ConsoleLayout = observer(() => {
 		handleClose,
 	} = useIndex();
 
-	const [currentProduct, setCurrentProduct] = useState<{
-		path: string;
-		name: string;
-	}>();
-
 	const { currentProjectStore } = useStores();
+	const productInfo = toJS(currentProjectStore.currentProductInfo);
 	const { run: runGetProjectList } = useMyRequest(getProjectList, {
 		onSuccess: (res) => {
 			let list = res.data;
 			if (list.length === 0) {
 				currentProjectStore.setProjectList([]);
 				currentProjectStore.changeProject({});
-				navigate(currentProduct?.path as string);
+				navigate(productInfo?.path as string);
 			} else {
 				currentProjectStore.setProjectList(list);
 				currentProjectStore.changeProject(list[0]);
@@ -56,15 +53,18 @@ const ConsoleLayout = observer(() => {
 					list[0].filetoken = res;
 					currentProjectStore.changeProject(list[0]);
 				});
-				navigate(currentProduct?.path as string);
+				navigate(productInfo?.path as string);
 			}
 		},
 	});
 
 	// 切换产品
 	const getProduct = (item: any) => {
-		currentProjectStore.changeProductInfo({ id: item.id, name: item.name });
-		setCurrentProduct(item);
+		currentProjectStore.changeProductInfo({
+			id: item.id,
+			name: item.name,
+			path: item.path,
+		});
 		runGetProjectList({
 			product: item.id,
 		});
@@ -83,58 +83,48 @@ const ConsoleLayout = observer(() => {
 			<Box className={style.topApp}>
 				<Box className={style.topLeftBox}>
 					<img src={logo} alt="" className={style.logo} />
-					<MyButton
+					{/* <MyButton
 						text={globalText.console}
 						variant={"text"}
 						style={{ color: "#565C66" }}
 						onClick={() => navigate("/home")}
-					/>
+					/> */}
+					<div className={style.menuBox} onClick={() => navigate("/home")}>
+						<div className={style.menuTitle}>{globalText.console}</div>
+					</div>
 
-					<Box sx={{ display: "flex", alignItems: "center" }}>
-						<MyButton
-							text={globalText.product}
-							variant={"text"}
-							style={{ color: "#565C66", paddingLeft: '8px' }}
-							onClick={handleProductClick}
-							dropValue={productOpen}
-							drop={true}
-						/>
-						{/* <ArrowDropDownIcon classes={{
-              root: cx({
-                [style.ArrowDropDownIconRoot]: true,
-                [style.ArrowDropDownIconRootOpen]: Boolean(productOpen)
-              })
-            }} /> */}
-						<Menu
-							id="product-menu"
-							anchorEl={productAnchorEl}
-							open={productOpen}
-							onClose={handleClose}
-							classes={{
-								paper: style.menuPaper,
-							}}
-							MenuListProps={{
-								"aria-labelledby": "product-button",
-							}}
-						>
+					<div className={style.menuBox}>
+						<div className={style.menuTitle}>
+							<span>{globalText.product}</span>
+							<img className={style.triangle} src={triangle} alt="" />
+						</div>
+						<div className={style.productList}>
 							{menuStore.productList.map((item) => {
 								return (
-									<MenuItem
+									<div
 										key={item.path}
-										classes={{
-											root: style.menuItemRoot,
-										}}
+										className={classNames({
+											[style.productLi]: true,
+											[style.productLiActive]: productInfo.path === item.path,
+										})}
 										onClick={() => {
 											getProduct(item);
 											handleClose();
 										}}
 									>
 										{item.name}
-									</MenuItem>
+										{productInfo.path === item.path && (
+											<img
+												className={style.selectActive}
+												src={selectActive}
+												alt=""
+											/>
+										)}
+									</div>
 								);
 							})}
-						</Menu>
-					</Box>
+						</div>
+					</div>
 				</Box>
 
 				<Box className={style.topRightBox}>
@@ -152,7 +142,6 @@ const ConsoleLayout = observer(() => {
 								style={{ verticalAlign: "middle" }}
 							/>
 						</div>
-					
 					</MyPopover>
 					<Box className={style.topRightItem}>
 						<Box
@@ -170,13 +159,13 @@ const ConsoleLayout = observer(() => {
 							>
 								H
 							</Avatar>
-							<ArrowDropDownIcon
-								classes={{
-									root: cx({
-										[style.ArrowDropDownIconRoot]: true,
-										[style.ArrowDropDownIconRootOpen]: Boolean(utilityOpen),
-									}),
-								}}
+							<img
+								className={classNames({
+									[style.topRightTriangle]: true,
+									[style.topRightTriangleOpen]: Boolean(utilityOpen),
+								})}
+								src={triangle}
+								alt=""
 							/>
 						</Box>
 

src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-09-01 14:09:34
+ * @LastEditTime: 2022-09-01 16:14:10
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -13,12 +13,17 @@ import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { Box, OutlinedInput } from "@mui/material";
 
 import Dialog from "@/components/mui/MyDialog";
-import { IResponse, useHttp } from "@/api/http";
+import useMyRequest from "@/hooks/useMyRequest";
 import { useStores } from "@/store";
 import { useMessage } from "@/components/MySnackbar";
 import MySelect, { IOption } from "@/components/mui/MySelect";
 import MyTable from "@/components/mui/MyTable";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
+import {
+	addProjectUser,
+	fetchProjectPower,
+	fetchProjectUsersList,
+} from "@/api/project_api";
 
 interface IProps {
 	setAddMemberDialog: (val: boolean) => void;
@@ -29,7 +34,6 @@ interface IProps {
 const AddMember = observer((props: IProps) => {
 	const { addMemberDialog, setAddMemberDialog, getTableList } = props;
 
-	const http = useHttp();
 	const { currentProjectStore } = useStores();
 
 	const [tableData, setTableData] = useState([]);
@@ -76,14 +80,6 @@ const AddMember = observer((props: IProps) => {
 		];
 	}, [changePermission, selectOptions]);
 
-	useEffect(() => {
-		if (addMemberDialog) {
-			http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
-				setSelectOptions(res.data);
-			});
-		}
-	}, [addMemberDialog, http]);
-
 	/** 过滤表格数据 */
 	useEffect(() => {
 		if (!!projectMember) {
@@ -97,18 +93,48 @@ const AddMember = observer((props: IProps) => {
 		}
 	}, [projectMember, tableData]);
 
+	// 获取表格数据接口
+	const { run: getProjectUsersList } = useMyRequest(fetchProjectUsersList, {
+		onSuccess: (res: any) => {
+			setTableData(res?.data);
+		},
+	});
+
+	// 获取项目权限
+	const { run: getProjectPower } = useMyRequest(fetchProjectPower, {
+		onSuccess: (res: any) => {
+			setSelectOptions(res.data);
+		},
+	});
+
+	// 添加项目成员
+	const { run: saveProjectUser } = useMyRequest(addProjectUser, {
+		onSuccess: (res: any) => {
+			const { errorCode } = res;
+			if (errorCode === 0) {
+				Message.success("新增成功！");
+				getTableList();
+				setAddMemberDialog(false);
+			}
+		},
+	});
+
+	useEffect(() => {
+		if (addMemberDialog) {
+			getProjectPower();
+		}
+	}, [addMemberDialog, getProjectPower]);
+
 	/** 获取表格数据 */
 	useEffect(() => {
 		if (!addMemberDialog) return;
 		const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
-		http
-			.get<IResponse<any>>("/cpp/project/listusers", {
-				params: { id: projectInfo?.id || "" },
-			})
-			.then((res) => {
-				setTableData(res?.data);
-			});
-	}, [currentProjectStore?.currentProjectInfo, http, addMemberDialog]);
+		getProjectUsersList({ id: projectInfo?.id || "" });
+	}, [
+		currentProjectStore?.currentProjectInfo,
+		addMemberDialog,
+		getProjectUsersList,
+	]);
 
 	const onClose = (event: any = {}, reason: any = "other") => {
 		// 点击弹窗外不关闭弹窗
@@ -124,19 +150,7 @@ const AddMember = observer((props: IProps) => {
 			return checkData.includes(item?.username);
 		});
 		if (params.length) {
-			http
-				.put<IResponse<any>>(
-					`/cpp/project/updatemember?id=${projectInfo?.id || ""}`,
-					params
-				)
-				.then((res) => {
-					const { errorCode } = res;
-					if (errorCode === 0) {
-						Message.success("新增成功！");
-						getTableList();
-						setAddMemberDialog(false);
-					}
-				});
+			saveProjectUser(projectInfo?.id || "", params);
 		} else {
 			Message.info("请先选择项目成员！");
 		}
@@ -162,6 +176,9 @@ const AddMember = observer((props: IProps) => {
 					/>
 					<div style={{ overflow: "overlay", maxHeight: 400 }}>
 						<MyTable
+							noDataText={
+								projectMember ? `暂无 "${projectMember}" 搜索结果` : undefined
+							}
 							tableContainerStyle={{ height: 346 }}
 							checkboxData={(val: string[]) => setCheckData(val)}
 							param="username"

src/views/Project/ProjectSubmitWork/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-17 10:58:02
+ * @LastEditTime: 2022-09-01 14:39:36
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -223,6 +223,7 @@ const ProjectSubmitWork = observer(() => {
 				promotedParameters,
 			});
 		} else {
+			handleCancel();
 			Message.error("请完善算子信息后提交任务");
 		}
 	};

src/views/Project/ProjectWorkbench/workbenchList/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-22 15:33:02
+ * @LastEditTime: 2022-09-01 16:35:02
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -87,13 +87,11 @@ const ProjectMembers = observer(() => {
 	const [jobData, setJobData] = useState("");
 	const [openDialog, setOpenDialog] = useState(false);
 	const [dialogType, setDialogType] = useState("del");
-	const [loading, setLoading] = useState(false)
+	const [loading, setLoading] = useState(false);
 	// 获取作业列表
-	const { run: getWorkflowJobInfo } = useMyRequest(
-		getWorkflowJobList,
-		{
+	const { run: getWorkflowJobInfo } = useMyRequest(getWorkflowJobList, {
 		onSuccess: (result: any) => {
-				setLoading(false)
+			setLoading(false);
 			setJobList(result.data.content);
 			setCount(result.data.totalElements);
 			timer && clearTimeout(timer as number);
@@ -108,8 +106,7 @@ const ProjectMembers = observer(() => {
 				});
 			}, 60000);
 		},
-		}
-	);
+	});
 
 	useEffect(() => {
 		return () => {
@@ -298,7 +295,7 @@ const ProjectMembers = observer(() => {
 	const handleKeyWordChangeKeyUp = (e: any) => {
 		if (e.keyCode === 13) {
 			setJobName(e.target.value);
-			setLoading(true)
+			setLoading(true);
 		}
 	};
 
@@ -367,7 +364,7 @@ const ProjectMembers = observer(() => {
 							name: jobName,
 							state: currency === "ALL" ? "" : currency,
 						});
-						setLoading(true)
+						setLoading(true);
 					}}
 				>
 					<img alt="" src={onload} />
@@ -375,7 +372,7 @@ const ProjectMembers = observer(() => {
 			</Box>
 
 			<Box className={styles.body} style={{ position: "relative" }}>
-				<MyCircularProgress loading={loading} />
+				<MyCircularProgress loading={loading}>
 					{jobList.length === 0 && !loading && (
 						<Box
 							sx={{
@@ -397,7 +394,10 @@ const ProjectMembers = observer(() => {
 					{jobList.length > 0 &&
 						jobList.map((item: any, key) => {
 							return (
-							<Box className={styles.tabBox} onClick={() => rowClick(item.id)}>
+								<Box
+									className={styles.tabBox}
+									onClick={() => rowClick(item.id)}
+								>
 									<Box className={styles.tabBoxInfo}>
 										<div className={styles.tabBoxTitle}>{item.name}</div>
 										<Box className={styles.tabBoxDescInfo}>
@@ -493,6 +493,7 @@ const ProjectMembers = observer(() => {
 								</Box>
 							);
 						})}
+				</MyCircularProgress>
 			</Box>
 
 			<TablePagination