Merge branch 'feat-20220718' into 'release'

Feat 20220718

See merge request !36

src/components/BusinessComponents/SearchInput/index.tsx

@@ -17,7 +17,7 @@ interface SearchInputProps extends OutlinedInputProps {
 const SearchInput = (props: SearchInputProps) => {
     const {
         size = "small",
-        placeholder = "输入关键词搜索",
+        placeholder = "输入关键词按回车搜索",
         fullWidth = true,
         ...other
     } = props;

src/components/mui/MyButton.tsx

@@ -10,6 +10,7 @@ import {
 	ExtendButtonBase,
 	ButtonTypeMap,
 } from "@mui/material";
+import LoadingButton from "@mui/lab/LoadingButton";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 
 interface ButtonTagProps
@@ -35,6 +36,8 @@ interface ButtonTagProps
 	disabled?: boolean; //是否禁用
 	style?: any; //按钮自定义样式
 	img?: JSX.Element; //图标按钮中的图标
+	isLoadingButton?: boolean; // 是否是loadingbutton
+	loading?: boolean; // 是否处于loading状态
 	selectCallBack?: (item: any, key: number) => void; //选择按钮的回调
 }
 
@@ -51,6 +54,9 @@ const theme = createTheme({
 						color: "rgba(255, 78, 78, 1)",
 						border: "1px solid rgba(255, 78, 78, 1)",
 					},
+					"& .MuiLoadingButton-loadingIndicator": {
+						color: "#fff",
+					},
 				},
 				contained: {
 					backgroundColor: "#1370FF",
@@ -75,6 +81,12 @@ const theme = createTheme({
 					"&:hover": { backgroundColor: "#ECF4FF " },
 				},
 
+				containedPrimary: {
+					"&.Mui-disabled": {
+						backgroundColor: "#A6D3FF",
+					},
+				},
+
 				containedSecondary: {
 					backgroundColor: "#FF4E4E",
 					"&:hover": {
@@ -126,10 +138,17 @@ const theme = createTheme({
 				},
 			},
 		},
+		MuiTypography: {
+			styleOverrides: {
+				root: {
+					whiteSpace: "nowrap",
+				},
+			},
+		},
 	},
 });
 
-const ButtonComponent = (props: ButtonTagProps) => {
+const MyButton = (props: ButtonTagProps) => {
 	const {
 		size,
 		disabled,
@@ -138,6 +157,8 @@ const ButtonComponent = (props: ButtonTagProps) => {
 		img,
 		select,
 		selectCallBack,
+		isLoadingButton,
+		loading,
 		...other
 	} = props;
 	const { classes, cx } = useStyles({});
@@ -166,34 +187,68 @@ const ButtonComponent = (props: ButtonTagProps) => {
 
 	return (
 		<ThemeProvider theme={theme}>
-			<Button
-				size={size || "medium"}
-				variant={variant || "contained"}
-				color={color || "primary"}
-				disableRipple={true}
-				disableFocusRipple={true}
-				disabled={disabled || false}
-				style={{ ...props.style }}
-				onClick={props.select ? handleClick : props.onClick || defaultClick}
-				{...other}
-			>
-				{img || ""}
-				<Typography style={{ fontSize: props.fontSize }}>
-					{props.text}
-				</Typography>
-				{((props.select && props.select.length > 0) || props.drop) && (
-					<ArrowDropDownIcon
-						classes={{
-							root: cx({
-								[classes.ArrowDropDownIconRoot]: true,
-								[classes.ArrowDropDownIconRootOpen]: Boolean(
-									props.dropValue || anchorEl
-								),
-							}),
-						}}
-					/>
-				)}
-			</Button>
+			{isLoadingButton && (
+				<LoadingButton
+					size={size || "medium"}
+					variant={variant || "contained"}
+					color={color || "primary"}
+					disableRipple={true}
+					disableFocusRipple={true}
+					disabled={disabled || false}
+					style={{ ...props.style }}
+					onClick={props.select ? handleClick : props.onClick || defaultClick}
+					loading={loading}
+					{...other}
+				>
+					{img || ""}
+					<Typography style={{ fontSize: props.fontSize }}>
+						{props.text}
+					</Typography>
+					{((props.select && props.select.length > 0) || props.drop) && (
+						<ArrowDropDownIcon
+							classes={{
+								root: cx({
+									[classes.ArrowDropDownIconRoot]: true,
+									[classes.ArrowDropDownIconRootOpen]: Boolean(
+										props.dropValue || anchorEl
+									),
+								}),
+							}}
+						/>
+					)}
+				</LoadingButton>
+			)}
+			{!isLoadingButton && (
+				<Button
+					size={size || "medium"}
+					variant={variant || "contained"}
+					color={color || "primary"}
+					disableRipple={true}
+					disableFocusRipple={true}
+					disabled={disabled || false}
+					style={{ ...props.style }}
+					onClick={props.select ? handleClick : props.onClick || defaultClick}
+					{...other}
+				>
+					{img || ""}
+					<Typography style={{ fontSize: props.fontSize }}>
+						{props.text}
+					</Typography>
+					{((props.select && props.select.length > 0) || props.drop) && (
+						<ArrowDropDownIcon
+							classes={{
+								root: cx({
+									[classes.ArrowDropDownIconRoot]: true,
+									[classes.ArrowDropDownIconRootOpen]: Boolean(
+										props.dropValue || anchorEl
+									),
+								}),
+							}}
+						/>
+					)}
+				</Button>
+			)}
+
 			<Menu
 				id="simple-menu"
 				anchorEl={anchorEl}
@@ -228,4 +283,4 @@ const useStyles = makeStyles<{}>()((theme) => ({
 	ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
 }));
 
-export default ButtonComponent;
+export default MyButton;

src/components/mui/MyCircularProgress.tsx

-// 局部loading组件  挂载在目标块下，目标块最少要添加一个position: relative; 或者absolute
+// 局部loading组件
+
+// 使用方法1  用一个div包裹children，在children上加一个蒙层和loading
+// <MyCircularProgress loading={loading}>children</MyCircularProgress>
+
+// 使用方法2  挂载在目标块下，目标块最少要添加一个position: relative; 或者absolute
+// <div style={{ position: "relative", }} >
+//   <MyCircularProgress loading={loading}/>
+// </div>
 import CircularProgress from "@mui/material/CircularProgress";
 
 type IMyCircularProgressProps = {
-	loading: boolean;
+	loading: boolean; // 是否处于loading状态
+	children?: React.ReactNode; // 包裹的子元素
 	minHeight?: string;
 	maxHeight?: string;
 	zIndex?: number;
@@ -14,43 +23,86 @@ const MyCircularProgress = (props: IMyCircularProgressProps) => {
 		minHeight = "none",
 		maxHeight = "100vh",
 		zIndex = "100",
+		children,
 	} = props;
 	if (loading) {
-		return (
-			<div
-				style={{
-					minHeight: minHeight,
-					width: "100%",
-					height: "100%",
-					position: "absolute",
-					top: 0,
-					zIndex: zIndex,
-				}}
-			>
-				<div
-					style={{
-						width: "100%",
-						height: "100%",
-						position: "absolute",
-						top: 0,
-						opacity: 0.6,
-						background: "#fff",
-					}}
-				></div>
+		if (children) {
+			return (
 				<div
 					style={{
-						width: "100%",
-						height: "100%",
-						maxHeight: maxHeight,
-						display: "flex",
-						justifyContent: "center",
-						alignItems: "center",
+						position: "relative",
 					}}
 				>
-					<CircularProgress></CircularProgress>
+					<div
+						style={{
+							width: "100%",
+							height: "100%",
+							position: "absolute",
+							top: 0,
+							opacity: 0.6,
+							background: "#fff",
+							zIndex: zIndex,
+						}}
+					></div>
+					<div
+						style={{
+							width: "100%",
+							height: "100%",
+							display: "flex",
+							justifyContent: "center",
+							alignItems: "center",
+							position: "absolute",
+							top: 0,
+							zIndex: zIndex,
+							maxHeight: maxHeight,
+						}}
+					>
+						<CircularProgress></CircularProgress>
+					</div>
+					{children}
 				</div>
-			</div>
-		);
+			);
+		} else {
+			if (children) {
+				return children;
+			} else {
+				return (
+					<div
+						style={{
+							width: "100%",
+							height: "100%",
+							position: "absolute",
+							top: 0,
+							zIndex: zIndex,
+							minHeight: minHeight,
+						}}
+					>
+						<div
+							style={{
+								width: "100%",
+								height: "100%",
+								position: "absolute",
+								top: 0,
+								opacity: 0.6,
+								background: "#fff",
+							}}
+						></div>
+						<div
+							style={{
+								width: "100%",
+								height: "100%",
+								display: "flex",
+								justifyContent: "center",
+								alignItems: "center",
+								maxHeight: maxHeight,
+							}}
+						>
+							<CircularProgress></CircularProgress>
+						</div>
+					</div>
+				);
+			}
+		}
 	} else {
 		return null;
 	}

src/components/mui/MyDialog.tsx

@@ -43,6 +43,7 @@ export interface IDialogProps {
 	clickMaskClose?: boolean;
 	/** 确认按钮样式*/
 	okSx?: any;
+	loading?: boolean; // 确认按钮是否处于loading状态
 }
 
 const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
@@ -64,6 +65,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 		okText,
 		disabledConfirm,
 		clickMaskClose = false,
+		loading = false,
 		okSx = {},
 	} = props;
 
@@ -99,6 +101,8 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 						variant="contained"
 						size="small"
 						disabled={disabledConfirm}
+						isLoadingButton={true}
+						loading={loading}
 						style={{ ...okSx }}
 					/>
 				) : null}
@@ -140,7 +144,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 					</div>
 				</DialogTitle>
 			)}
-			<DialogContent style={{ minWidth: 400 }}>{children}</DialogContent>
+			<DialogContent style={{ minWidth: 388 }}>{children}</DialogContent>
 			{Footer()}
 		</Dialog>
 	);

src/components/mui/MyPopconfirm.tsx

@@ -6,7 +6,7 @@ import MyButton from "./MyButton";
 import tipsIcon from "@/assets/project/information-outline.svg";
 import Popper from "@mui/material/Popper";
 
-interface IMyPopconfirmProps  {
+interface IMyPopconfirmProps {
 	title: string | ReactNode;
 	placement?:
 		| "auto-end"
@@ -30,7 +30,7 @@ interface IMyPopconfirmProps  {
 	showCancel?: boolean;
 	onCancel?: any;
 	onConfirm?: any;
-};
+}
 
 const MyPopconfirm = (props: IMyPopconfirmProps) => {
 	const {
@@ -75,7 +75,12 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
 		>
 			<Box sx={{ marginBottom: "16px" }}>
 				<img
-					style={{ marginRight: "12px", position: "relative", top: "3px" }}
+					style={{
+						width: "16px",
+						marginRight: "12px",
+						position: "relative",
+						top: "3px",
+					}}
 					src={tipsIcon}
 					alt=""
 				/>
@@ -85,18 +90,14 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
 				{showCancel && (
 					<MyButton
 						text={cancelText}
-						variant='outlined'
+						variant="outlined"
 						size="small"
 						color="inherit"
 						onClick={handleCancel}
 						style={{ marginRight: "12px" }}
 					/>
 				)}
-				<MyButton
-					text={okText}
-					size="small"
-					onClick={handleOk}
-				/>
+				<MyButton text={okText} size="small" onClick={handleOk} />
 			</Box>
 		</Popper>
 	);

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

@@ -120,7 +120,7 @@ const FileItem = observer((props: IProps) => {
 								width: 300,
 								margin: "6px 0",
 							}}
-							color="error"
+							color="success"
 							value={itemInfo?.percentage}
 						/>
 					) : null}

src/views/Project/ProjectData/SeeDataset/index.tsx

@@ -4,7 +4,7 @@ import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfB
 import MyMultipleMenu, { IOption } from "@/components/mui/MyMultipleMenu";
 import MySelect from "@/components/mui/MySelect";
 import MyInput from "@/components/mui/MyInput";
-import ButtonComponent from "@/components/mui/MyButton";
+import MyButton from "@/components/mui/MyButton";
 import SearchIcon from "@mui/icons-material/Search";
 import MyPagination from "@/components/mui/MyPagination";
 import NglView from "@/components/BusinessComponents/NglView";
@@ -240,13 +240,13 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 									height: "32px",
 								}}
 							></MyInput>
-							<ButtonComponent
+							<MyButton
 								text="确认"
 								style={{ width: "68px" }}
 								onClick={() => {
 									getList();
 								}}
-							></ButtonComponent>
+							></MyButton>
 						</div>
 					</div>
 				</div>
@@ -366,19 +366,19 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 			</div>
 			<div className={style.foot}>
 				{isCadd && (
-					<ButtonComponent
+					<MyButton
 						variant="outlined"
 						text={`下载(${selectItems.length})`}
 						style={{ marginRight: "12px" }}
 						disabled={selectItems.length === 0}
 						onClick={() => setDownloadOpen(true)}
-					></ButtonComponent>
+					></MyButton>
 				)}
-				<ButtonComponent
+				<MyButton
 					disabled={selectItems.length === 0}
 					text={`另存为(${selectItems.length})`}
 					onClick={() => setSaveOpen(true)}
-				></ButtonComponent>
+				></MyButton>
 			</div>
 			{saveOpen && (
 				<Save

src/views/Project/ProjectJobDetail/index.tsx

@@ -14,7 +14,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import IconButton from "@mui/material/IconButton";
 
-import ButtonComponent from "@/components/mui/MyButton";
+import MyButton from "@/components/mui/MyButton";
 import useMyRequest from "@/hooks/useMyRequest";
 import { fetchWorkFlowJob, getworkFlowTaskInfo } from "@/api/project_api";
 import { IResponse } from "@/api/http";
@@ -352,7 +352,7 @@ const ProjectSubmitWork = observer(() => {
 									state === "RUNNING" ? onStopJob() : onDeleteJob();
 								}}
 							> */}
-							<ButtonComponent
+							<MyButton
 								text={state === "RUNNING" ? "终止" : "删除"}
 								variant="outlined"
 								color="secondary"
@@ -365,7 +365,7 @@ const ProjectSubmitWork = observer(() => {
 									)
 								}
 								// click={onStopJob}
-							></ButtonComponent>
+							></MyButton>
 							{/* </MyPopconfirm> */}
 						</div>
 					)}

src/views/Project/ProjectSetting/BaseInfo/index.module.css

@@ -41,6 +41,7 @@
   height: 82px;
   padding: 7px 12px;
   resize: none;
+  font-size: 14px;
 }
 .projectInfoSelect {
   width: 560px;

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -395,6 +395,14 @@ const BaseInfo = observer(() => {
 								<InputAdornment position="start">¥</InputAdornment>
 							),
 						}}
+						sx={{
+							"& .MuiOutlinedInput-input": {
+								padding: "6.5px 2px",
+							},
+							"& .MuiTypography-root": {
+								fontSize: '14px'
+							}
+						}}
 					/>
 				</div>
 				<div className={style.projectInfoListLi}>

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

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-21 11:34:55
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-07-29 11:28:09
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -94,6 +94,7 @@ const ChangePermission = observer((props: IProps) => {
 			>
 				<div style={{ marginTop: 12 }}>
 					<MySelect
+						fullWidth
 						title="项目权限"
 						isTitle={true}
 						value={selectValue}

src/views/Project/ProjectSetting/ProjectMembers/index.tsx

@@ -154,7 +154,7 @@ const ProjectMembers = observer(() => {
 			<Box className={styles.headerBox}>
 				<SearchInput
 					onKeyUp={handleKeyWordChangeKeyUp}
-					placeholder="搜索项目成员"
+					placeholder="输入项目成员按回车搜索"
 					sx={{ width: 340 }}
 				/>
 				{currentProjectStore?.currentProjectInfo?.projectRole === "OWNER" ? (

src/views/Project/ProjectSubmitWork/index.tsx

@@ -16,7 +16,7 @@ import moment from "moment";
 
 import ConfigForm from "./ConfigForm";
 import WorkFlow from "./WorkFlow";
-import ButtonComponent from "@/components/mui/MyButton";
+import MyButton from "@/components/mui/MyButton";
 import { ITemplateConfig } from "./interface";
 import useMyRequest from "@/hooks/useMyRequest";
 import { fetchTemplateConfigInfo, submitWorkFlow } from "@/api/project_api";
@@ -272,12 +272,12 @@ const ProjectSubmitWork = observer(() => {
 							title="提交前请先确认参数填写无误，确认提交吗？"
 							onConfirm={handleSubmitForm}
 						> */}
-						<ButtonComponent
+						<MyButton
 							text="提交任务"
 							onClick={(e: any) =>
 								handleShowPopper(e, "提交前请先确认参数填写无误，确认提交吗？")
 							}
-						></ButtonComponent>
+						></MyButton>
 						{/* </MyPopconfirm> */}
 					</div>
 				</div>

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

@@ -395,7 +395,7 @@ const ProjectMembers = observer(() => {
 								</Box>
 								<Box className={styles.tabBoxMiddle}>
 									<img alt="" src={jobCost} />
-									<div className={styles.tabBoxTime}>{item.jobCost}</div>
+									<div className={styles.tabBoxTime}>{item.jobCost.toFixed(2)}元</div>
 								</Box>
 								<Box className={styles.tabBoxJobStatus}>
 									<img alt="" src={renderStatusIcon(item.state)} />

src/views/WorkFlowEdit/index.tsx

@@ -14,7 +14,7 @@ import { observer } from "mobx-react-lite";
 
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
-import ButtonComponent from "@/components/mui/MyButton";
+import MyButton from "@/components/mui/MyButton";
 import OperatorList from "./components/OperatorList";
 import Flow from "../Project/components/Flow";
 import ParameterSetting from "./components/ParameterSetting";
@@ -181,10 +181,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 					</IconButton>
 				</div>
 				<div className={styles.swHeaderRight}>
-					<ButtonComponent
-						text="保存"
-						onClick={() => handlePreserve()}
-					></ButtonComponent>
+					<MyButton text="保存" onClick={() => handlePreserve()}></MyButton>
 				</div>
 			</div>
 			<div className={styles.swContent}>