feat: myButton集成loadingbutton功能， mydialog组件增加loading功能

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": {
@@ -136,7 +148,7 @@ const theme = createTheme({
 	},
 });
 
-const ButtonComponent = (props: ButtonTagProps) => {
+const MyButton = (props: ButtonTagProps) => {
 	const {
 		size,
 		disabled,
@@ -145,6 +157,8 @@ const ButtonComponent = (props: ButtonTagProps) => {
 		img,
 		select,
 		selectCallBack,
+		isLoadingButton,
+		loading,
 		...other
 	} = props;
 	const { classes, cx } = useStyles({});
@@ -173,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}
@@ -235,4 +283,4 @@ const useStyles = makeStyles<{}>()((theme) => ({
 	ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
 }));
 
-export default ButtonComponent;
+export default MyButton;

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/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/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/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}>