Merge branch 'feat-20221107-list' into 'master'

Feat 20221107 list

See merge request !194

src/components/CommonComponents/CardTable/index.module.css

@@ -2,7 +2,5 @@
 	display: flex;
 	justify-content: flex-start;
 	flex-wrap: wrap;
-}
-.itemBox {
-	/* flex: 1; */
+	position: relative;
 }

src/components/CommonComponents/CardTable/index.tsx

 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import MyCircularProgress from "@/components/mui/MyCircularProgress";
 import style from "./index.module.css";
 
 interface ICardTableProps {
@@ -10,6 +11,7 @@ interface ICardTableProps {
 	horizontalSpacing?: number; // 水平方向的间隔
 	verticalSpacing?: number; // 垂直方向的间隔
 	renderBefore?: any;
+	loading?: boolean;
 }
 
 const CardTable = (props: ICardTableProps) => {
@@ -22,6 +24,7 @@ const CardTable = (props: ICardTableProps) => {
 		verticalSpacing = 20,
 		itemMinWidth,
 		renderBefore,
+		loading = false,
 	} = props;
 
 	const [numberOfColumns, setNumberOfColumns] = useState(3);
@@ -61,6 +64,7 @@ const CardTable = (props: ICardTableProps) => {
 			}}
 			ref={tableBoxRef}
 		>
+			<MyCircularProgress loading={loading} />
 			{renderBefore && renderBefore() && (
 				<div
 					className={style.itemBox}

src/components/CommonComponents/VirtuallyList/index.tsx

+import { useEffect, useState, useRef } from "react";
+import MyCircularProgress from "@/components/mui/MyCircularProgress";
 import { List } from "react-virtualized";
 
 interface IVirtuallyListProps {
 	list: Array<any>;
 	renderRow: any;
+	rowHeight: Number | Function;
+	listStyle?: Object;
+	loading?: boolean;
+	onScroll?: Function;
 }
 
 const VirtuallyList = (props: IVirtuallyListProps) => {
-	const { list, renderRow } = props;
+	const {
+		list,
+		renderRow,
+		rowHeight,
+		listStyle,
+		loading = false,
+		onScroll,
+	} = props;
+
+	const [width, setWidth] = useState(0);
+	const [height, setHeight] = useState(0);
+
+	const virtuallyListBoxRef: any = useRef(null);
+
+	const getTableWidthHeight = () => {
+		setWidth(virtuallyListBoxRef?.current?.offsetWidth || 1000);
+		setHeight(virtuallyListBoxRef?.current?.offsetHeight || 300);
+	};
+
+	useEffect(() => {
+		getTableWidthHeight();
+	}, []);
+
+	window.onresize = () => {
+		getTableWidthHeight();
+	};
+
 	return (
+		<div
+			ref={virtuallyListBoxRef}
+			style={{ width: "100%", height: "100%", position: "relative" }}
+		>
+			<MyCircularProgress loading={loading} />
 			<List
-			width={300}
-			height={300}
+				width={width}
+				height={height}
 				rowCount={list.length}
-			rowHeight={20}
+				rowHeight={rowHeight}
 				rowRenderer={renderRow}
 				overscanRowCount={20}
+				style={listStyle}
+				onScroll={onScroll}
 			/>
+		</div>
 	);
 };
 export default VirtuallyList;

src/components/CommonComponents/VirtuallyTable/index.tsx

-import React from "react";
 import { useCallback, useEffect, useState, useRef } from "react";
 import { Column, Table } from "react-virtualized";
 import style from "./index.module.scss";
@@ -91,7 +90,6 @@ const VirtuallyTable = (props: IVirtuallyTableProps) => {
 	} = props;
 
 	const virtuallyTableBoxRef: any = useRef(null);
-	const virtuallyTableRef: any = useRef(null);
 
 	const [width, setWidth] = useState(0);
 	const [height, setHeight] = useState(0);
@@ -185,7 +183,6 @@ const VirtuallyTable = (props: IVirtuallyTableProps) => {
 				<MyCircularProgress loading={loading} />
 				{width && height && (
 					<Table
-						ref={virtuallyTableRef}
 						width={width}
 						height={height}
 						headerHeight={headerHeight}

src/components/CommonComponents/VrituallyCardTable/index.module.scss

+.tableBox {
+	display: flex;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+	height: 100%;
+	position: relative;
+}

src/components/CommonComponents/VrituallyCardTable/index.tsx

+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import VirtuallyList from "../VirtuallyList";
+import style from "./index.module.scss";
+
+interface IVrituallyCardTableProps {
+	data: Array<any>; // 列表数据
+	renderItem: any; // 单个卡片的渲染函数 这里面的元素的boxSizing属性最好是"border-box",
+	rowHeight: number; // 行高 这个属性的高度最好是itemHeight + verticalSpacing
+	itemMinWidth?: number; // 单个卡片的最小宽度，有这个参数时numberOfColumns参数失效，效果为根据屏幕大小和单个卡片的最小宽度来适配每行渲染个数
+	tableKey?: string; // 表格数据的key
+	numberOfColumns?: number; // 列数   每行渲染几个
+	horizontalSpacing?: number; // 水平方向的间隔
+	verticalSpacing?: number; // 垂直方向的间隔
+	loading?: boolean;
+}
+
+const VrituallyCardTable = (props: IVrituallyCardTableProps) => {
+	const {
+		data,
+		renderItem,
+		tableKey = "id",
+		rowHeight,
+		numberOfColumns: propsNumberOfColumns = 3,
+		horizontalSpacing = 20,
+		verticalSpacing = 20,
+		itemMinWidth,
+		loading = false,
+	} = props;
+
+	const [numberOfColumns, setNumberOfColumns] = useState(3);
+	const tableBoxRef: any = useRef(null);
+	const getNumberOfColumns = useCallback(() => {
+		if (itemMinWidth) {
+			const boxWidth = tableBoxRef?.current?.offsetWidth;
+			if (boxWidth) {
+				setNumberOfColumns(Math.floor(boxWidth / itemMinWidth));
+			} else {
+				setNumberOfColumns(propsNumberOfColumns);
+			}
+		} else {
+			setNumberOfColumns(propsNumberOfColumns);
+		}
+	}, [itemMinWidth, propsNumberOfColumns]);
+
+	useEffect(() => {
+		getNumberOfColumns();
+	}, [getNumberOfColumns]);
+
+	const boxWidth = useMemo(() => {
+		return `${100 / numberOfColumns}%`;
+	}, [numberOfColumns]);
+
+	window.onresize = () => {
+		getNumberOfColumns();
+	};
+
+	const listData = useMemo(() => {
+		let resData: any = [[]];
+		data.forEach((item) => {
+			if (resData[resData.length - 1].length >= numberOfColumns) {
+				resData.push([item]);
+			} else {
+				resData[resData.length - 1].push(item);
+			}
+		});
+		return resData;
+	}, [numberOfColumns, data]);
+
+	const renderRow = ({
+		index,
+		isScrolling,
+		isVisible,
+		key,
+		parent,
+		style,
+	}: any) => {
+		return (
+			<div key={key} style={style}>
+				<div
+					style={{
+						display: "flex",
+						justifyContent: "space-between",
+						alignItems: "center",
+						boxSizing: "border-box",
+						height: "100%",
+					}}
+				>
+					{listData[index].map((item: any, index: number) => {
+						return (
+							<div
+								className={style.itemBox}
+								key={item[tableKey] ? item[tableKey] : index}
+								style={{
+									width: boxWidth,
+									paddingLeft: `${horizontalSpacing / 2}px`,
+									paddingRight: `${horizontalSpacing / 2}px`,
+									paddingBottom: `${verticalSpacing}px`,
+									boxSizing: "border-box",
+								}}
+							>
+								{renderItem(item, index)}
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		);
+	};
+
+	return (
+		<div
+			className={style.tableBox}
+			style={{
+				marginLeft: `-${horizontalSpacing / 2}px`,
+				marginRight: `-${horizontalSpacing / 2}px`,
+				width: `calc(100% + ${horizontalSpacing}px)`,
+			}}
+			ref={tableBoxRef}
+		>
+			<VirtuallyList
+				list={listData}
+				renderRow={renderRow}
+				rowHeight={rowHeight}
+				loading={loading}
+			></VirtuallyList>
+		</div>
+	);
+};
+
+export default VrituallyCardTable;

src/components/mui/MyTableNew.tsx

-import { useCallback, useMemo } from "react";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import Checkbox from "@mui/material/Checkbox";
-import MyPagination from "@/components/mui/MyPagination";
-import ascIcon from "@/assets/project/ascIcon.svg";
-import descIcon from "@/assets/project/descIcon.svg";
-import sortIcon from "@/assets/project/sort.svg";
-import CircularProgress from "@mui/material/CircularProgress";
-import { createTheme, ThemeProvider } from "@mui/material";
-import MyTooltip from "./MyTooltip";
 import MyMuiTable from "./MyMuiTable";
 import VirtuallyTable from "../CommonComponents/VirtuallyTable";
-import noFile from "@/assets/project/noFile.svg";
 
 type Order = "ASC" | "DESC"; // 升序为asc，降序为desc。
 

src/views/ResourceCenter/UserResources/UserResourcesEnvironment/SeeEnv/index.module.css

@@ -57,6 +57,6 @@
 	margin-left: 4px;
 }
 .LogViewBox {
-	margin: 0 24px;
+	margin: 0 24px 20px;
 	position: relative;
 }

src/views/WorkFlowEdit/components/ParameterSetting/index.tsx

@@ -390,7 +390,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				</MyTooltip>
 			);
 		},
-		[handleParameterChange, cpuList, gpuList]
+		[handleParameterChange, cpuList, gpuList, cpuLoading, gpuLoading]
 	);
 
 	// 输入参数

src/views/demo/CardTableDemo/index.tsx

 import CardTable from "@/components/CommonComponents/CardTable";
+import VrituallyCardTable from "@/components/CommonComponents/VrituallyCardTable";
 
 const CardTableDemo = () => {
 	const list = [
@@ -44,12 +45,28 @@ const CardTableDemo = () => {
 	];
 	const renderItem = (item: any) => {
 		return (
-			<div style={{ border: "1px solid red", height: "200px" }}>{item.id}</div>
+			<div
+				style={{
+					border: "1px solid red",
+					height: "200px",
+					boxSizing: "border-box",
+				}}
+			>
+				{item.id}
+			</div>
 		);
 	};
 	return (
 		<div>
 			CardTableDemo
+			<div style={{ height: "600px" }}>
+				<VrituallyCardTable
+					data={list}
+					renderItem={renderItem}
+					numberOfColumns={4}
+					rowHeight={220}
+				></VrituallyCardTable>
+			</div>
 			<CardTable
 				data={list}
 				renderItem={renderItem}

src/views/demo/VirtuallyListDemo/index.tsx

-import { useCallback, useEffect, useState, useRef, useMemo } from "react";
 import VirtuallyList from "@/components/CommonComponents/VirtuallyList";
-import VirtuallyTable from "@/components/CommonComponents/VirtuallyTable";
-import MyButton from "@/components/mui/MyButton";
 
 const VirtuallyListDemo = () => {
 	let listData: Array<any> = [];
@@ -26,6 +23,9 @@ const VirtuallyListDemo = () => {
 						display: "flex",
 						justifyContent: "space-between",
 						alignItems: "center",
+						boxSizing: "border-box",
+						height: "100%",
+						border: "1px solid red",
 					}}
 				>
 					<div>{listData[index].name}</div>
@@ -40,82 +40,14 @@ const VirtuallyListDemo = () => {
 		);
 	};
 
-	const rows = [
-		{
-			a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
-			b: "werewrw",
-			c: "asdfasf",
-			d: "asdfasdf",
-			e: "asd4534",
-			id: "a1",
-		},
-	];
-	for (let i = 0; i < 10000; i++) {
-		rows.push({
-			a: "xcgh",
-			b: "sdf",
-			c: "sdfg",
-			d: "sdfg",
-			e: "wertwe",
-			id: String(i),
-		});
-	}
-	const buttonHeadCells = [
-		{
-			id: "a",
-			label: "属性a",
-			width: 150,
-		},
-		{
-			id: "b",
-			label: "属性b",
-			width: 150,
-		},
-		{
-			id: "c",
-			label: "属性c",
-			width: 150,
-			// flexGrow: 2,
-		},
-		{
-			id: "d",
-			label: "属性d",
-			width: 200,
-			flexGrow: 2,
-		},
-		{
-			id: "caozuo",
-			label: "操作",
-			width: 150,
-			cellRenderer: (data: any) => {
-				return (
-					<MyButton
-						text="删除"
-						onClick={() => {
-							// handleDelete(row.id);
-						}}
-					></MyButton>
-				);
-			},
-		},
-	];
-
-	const [selectItems, setSelectItems] = useState([]);
-
 	return (
 		<div>
 			<div>
-				{/* <VirtuallyList list={listData} renderRow={renderRow}></VirtuallyList>; */}
-			</div>
-			<div style={{ height: "600px" }}>
-				<VirtuallyTable
-					selectItems={selectItems}
-					setSelectItems={setSelectItems}
-					rows={rows}
-					// rows={[]}
-					headCells={buttonHeadCells}
-					activeId="8"
-				/>
+				<VirtuallyList
+					list={listData}
+					renderRow={renderRow}
+					rowHeight={40}
+				></VirtuallyList>
 			</div>
 		</div>
 	);

src/views/demo/VirtuallyTableDemo/index.tsx

+import { useState } from "react";
+import VirtuallyTable from "@/components/CommonComponents/VirtuallyTable";
+import MyButton from "@/components/mui/MyButton";
+
+const VirtuallyTableDemo = () => {
+	const rows = [
+		{
+			a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
+			b: "werewrw",
+			c: "asdfasf",
+			d: "asdfasdf",
+			e: "asd4534",
+			id: "a1",
+		},
+	];
+	for (let i = 0; i < 10000; i++) {
+		rows.push({
+			a: "xcgh",
+			b: "sdf",
+			c: "sdfg",
+			d: "sdfg",
+			e: "wertwe",
+			id: String(i),
+		});
+	}
+	const buttonHeadCells = [
+		{
+			id: "a",
+			label: "属性a",
+			width: 150,
+		},
+		{
+			id: "b",
+			label: "属性b",
+			width: 150,
+		},
+		{
+			id: "c",
+			label: "属性c",
+			width: 150,
+			// flexGrow: 2,
+		},
+		{
+			id: "d",
+			label: "属性d",
+			width: 200,
+			flexGrow: 2,
+		},
+		{
+			id: "caozuo",
+			label: "操作",
+			width: 150,
+			cellRenderer: (data: any) => {
+				return (
+					<MyButton
+						text="删除"
+						onClick={() => {
+							// handleDelete(row.id);
+						}}
+					></MyButton>
+				);
+			},
+		},
+	];
+
+	const [selectItems, setSelectItems] = useState([]);
+
+	return (
+		<div style={{ height: "600px" }}>
+			<VirtuallyTable
+				selectItems={selectItems}
+				setSelectItems={setSelectItems}
+				rows={rows}
+				headCells={buttonHeadCells}
+				activeId="8"
+			/>
+		</div>
+	);
+};
+
+export default VirtuallyTableDemo;

src/views/demo/index.module.scss

-.box {
-	background-color: red;
-}

src/views/demo/index.tsx

@@ -3,20 +3,24 @@ import QueueSelectDemo from "./QueueSelectDemo";
 import IconfontDemo from "./IconfontDemo";
 import CardTableDemo from "./CardTableDemo";
 import VirtuallyListDemo from "./VirtuallyListDemo";
+import VirtuallyTableDemo from "./VirtuallyTableDemo";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import { useState } from "react";
 import styles from "./index.module.css";
-import style from "./index.module.scss";
 
 const Demo = () => {
 	const radioOptionsArr = [
+		{
+			value: "virtuallyTableDemo",
+			label: "virtuallyTableDemo",
+		},
 		{
 			value: "virtuallyListDemo",
 			label: "virtuallyListDemo",
 		},
 		{
 			value: "cardTable",
-			label: "cardTable",
+			label: "cardTable/virtuallyCardTable",
 		},
 		{
 			value: "iconfont",
@@ -51,6 +55,9 @@ const Demo = () => {
 				{selectDemo === "virtuallyListDemo" && (
 					<VirtuallyListDemo></VirtuallyListDemo>
 				)}
+				{selectDemo === "virtuallyTableDemo" && (
+					<VirtuallyTableDemo></VirtuallyTableDemo>
+				)}
 				{selectDemo === "cardTable" && <CardTableDemo></CardTableDemo>}
 				{selectDemo === "iconfont" && <IconfontDemo></IconfontDemo>}
 				{selectDemo === "队列选择器" && <QueueSelectDemo></QueueSelectDemo>}