feat: 任务列表优化

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-09-06 10:17:18
+ * @LastEditTime: 2022-09-09 16:36:03
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -11,14 +11,12 @@ import _ from "lodash";
 import { useNavigate } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import OutlinedInput from "@mui/material/OutlinedInput";
-import { TablePagination } from "@mui/material";
 import MyPagination from "@/components/mui/MyPagination";
 
 import MySelect from "@/components/mui/MySelect";
 import SimpleDialog from "./components/simpleDialog";
 import { useStores } from "@/store";
 import useMyRequest from "@/hooks/useMyRequest";
-import ActionsComponent from "../../../../components/Material.Ui/Table/ActionsComponent";
 import runTime from "../../../../assets/project/runTime.svg";
 import jobCost from "../../../../assets/project/jobCost.svg";
 import jobSue from "../../../../assets/project/jobSue.svg";
@@ -72,7 +70,7 @@ const currencies = [
 	},
 ];
 
-let timer: string | number | NodeJS.Timeout | null | undefined = null;
+// let timer: string | number | NodeJS.Timeout | null | undefined = null;
 const ProjectMembers = observer(() => {
 	const { currentProjectStore } = useStores();
 
@@ -83,7 +81,6 @@ const ProjectMembers = observer(() => {
 	const [currency, setCurrency] = useState("ALL");
 	const [page, setPage] = useState(0);
 	const [size, setSize] = useState(10);
-	const [rowsPerPage, setRowsPerPage] = useState(10);
 	const [count, setCount] = useState(0);
 	/** 简单弹窗 */
 	const [jobData, setJobData] = useState("");
@@ -91,30 +88,27 @@ const ProjectMembers = observer(() => {
 	const [dialogType, setDialogType] = useState("del");
 	const [loading, setLoading] = useState(false);
 	// 获取作业列表
-	const { run: getWorkflowJobInfo } = useMyRequest(getWorkflowJobList, {
+	const { run: fetchWorkflowJobList} = useMyRequest(getWorkflowJobList, {
+		pollingInterval: 1000 * 60,
+		pollingWhenHidden: false,
 		onSuccess: (result: any) => {
 			setLoading(false);
 			setJobList(result.data.content);
 			setCount(result.data.totalPages - 1);
-			timer && clearTimeout(timer as number);
-			timer = null;
-			timer = setTimeout(() => {
-				getWorkflowJobInfo({
-					projectId: currentProjectStore.currentProjectInfo.id as string,
-					page: page,
-					size: size,
-					name: jobName,
-					state: currency === "ALL" ? "" : currency,
-				});
-			}, 60000);
 		},
+		onError: () => {
+			setLoading(false);
+		}
 	});
 
-	useEffect(() => {
-		return () => {
-			clearTimeout(timer as number);
-		};
-	}, []);
+	const fetchWorkflowJobListFun = useCallback(()=>{
+		fetchWorkflowJobList({projectId: currentProjectStore.currentProjectInfo.id as string,
+			page: page,
+			size: size,
+			name: jobName,
+			state: currency === "ALL" ? "" : currency,
+		})
+	},[currency, currentProjectStore.currentProjectInfo.id, fetchWorkflowJobList, jobName, page, size])
 
 	const navigate = useNavigate();
 
@@ -122,13 +116,7 @@ const ProjectMembers = observer(() => {
 	const { run: delWorkflowJob } = useMyRequest(deleteWorkflowJob, {
 		onSuccess: (result: any) => {
 			setOpenDialog(false);
-			getWorkflowJobInfo({
-				projectId: currentProjectStore.currentProjectInfo.id as string,
-				page: page,
-				size: size,
-				name: jobName,
-				state: currency === "ALL" ? "" : currency,
-			});
+			fetchWorkflowJobListFun()
 		},
 	});
 
@@ -136,13 +124,7 @@ const ProjectMembers = observer(() => {
 	const { run: cancelWorkflowJobInfo } = useMyRequest(cancelWorkflowJob, {
 		onSuccess: (result: any) => {
 			setOpenDialog(false);
-			getWorkflowJobInfo({
-				projectId: currentProjectStore.currentProjectInfo.id as string,
-				page: page,
-				size: size,
-				name: jobName,
-				state: currency === "ALL" ? "" : currency,
-			});
+			fetchWorkflowJobListFun()
 		},
 	});
 
@@ -169,50 +151,24 @@ const ProjectMembers = observer(() => {
 	};
 
 	useEffect(() => {
-		getWorkflowJobInfo({
-			projectId: currentProjectStore.currentProjectInfo.id as string,
-			page: page,
-			size: size,
-			name: jobName,
-			state: currency === "ALL" ? "" : currency,
-		});
-	}, [projectId, getWorkflowJobInfo]);
+		fetchWorkflowJobListFun();
+	}, [projectId, fetchWorkflowJobListFun]);
 
 	const handleChangePage = (newPage: any) => {
 		setPage(newPage - 1);
-		getWorkflowJobInfo({
-			projectId: currentProjectStore.currentProjectInfo.id as string,
-			page: newPage - 1,
-			size: size,
-			name: jobName,
-			state: currency === "ALL" ? "" : currency,
-		});
-	};
-
-	const handleChangeRowsPerPage = (event: any) => {
-		setRowsPerPage(event.target.value);
-		setSize(event.target.value);
-		getWorkflowJobInfo({
-			projectId: currentProjectStore.currentProjectInfo.id as string,
-			page: page,
-			size: event.target.value,
-			name: jobName,
-			state: currency === "ALL" ? "" : currency,
-		});
 	};
 
-	useEffect(() => {
-		setLoading(true);
-		setTimeout(() => {
-			getWorkflowJobInfo({
-				projectId: currentProjectStore.currentProjectInfo.id as string,
-				page: page,
-				size: size,
-				name: jobName,
-				state: currency === "ALL" ? "" : currency,
-			});
-		}, 300);
-	}, [jobName, currency]);
+	// const handleChangeRowsPerPage = (event: any) => {
+	// 	setRowsPerPage(event.target.value);
+	// 	setSize(event.target.value);
+	// 	getWorkflowJobInfo({
+	// 		projectId: currentProjectStore.currentProjectInfo.id as string,
+	// 		page: page,
+	// 		size: event.target.value,
+	// 		name: jobName,
+	// 		state: currency === "ALL" ? "" : currency,
+	// 	});
+	// };
 
 	const renderStatusIcon = (data: string) => {
 		switch (data) {
@@ -366,14 +322,8 @@ const ProjectMembers = observer(() => {
 				<Box
 					className={styles.tabUpdate}
 					onClick={() => {
-						getWorkflowJobInfo({
-							projectId: currentProjectStore.currentProjectInfo.id as string,
-							page: page,
-							size: size,
-							name: jobName,
-							state: currency === "ALL" ? "" : currency,
-						});
 						setLoading(true);
+						fetchWorkflowJobListFun();
 					}}
 				>
 					<img alt="" src={onload} />
@@ -392,12 +342,12 @@ const ProjectMembers = observer(() => {
 								justifyContent: "center",
 							}}
 						>
-							<img alt="" src={noData} />
-							<Typography
+							{!loading && <img alt="" src={noData} />}
+							{!loading && 	<Typography
 								sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
 							>
 								暂无任务
-							</Typography>
+							</Typography>}
 						</Box>
 					)}
 					{jobList.length > 0 &&
@@ -511,18 +461,6 @@ const ProjectMembers = observer(() => {
 				<MyPagination page={page} pageChange={handleChangePage} count={count} />
 			</div>
 
-			{/* <TablePagination
-				rowsPerPageOptions={[5, 10, 20, 50]}
-				labelRowsPerPage={"每页行数："}
-				ActionsComponent={ActionsComponent}
-				component="div"
-				count={count || jobList.length}
-				rowsPerPage={rowsPerPage || 10}
-				page={page}
-				onPageChange={handleChangePage} //
-				onRowsPerPageChange={handleChangeRowsPerPage} //
-			/> */}
-
 			<SimpleDialog
 				text={
 					dialogType === "del"