feat: 完成虚拟表格组件

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

 .VTHeader {
 	font-size: 12px;
-	line-height: 20px;
 	color: rgba(138, 144, 153, 1);
 	padding: 12px 16px;
 	white-space: nowrap;
 	font-weight: 400;
 	box-sizing: border-box;
+	display: flex;
+	align-items: center;
 }
 .VTHeaderRow {
 	background-color: rgba(247, 248, 250, 1);
@@ -18,6 +19,10 @@
 		background-color: rgba(245, 246, 247, 1);
 	}
 }
+.VTActiveRow {
+	@extend .VTRow;
+	background-color: rgba(237, 244, 255, 1);
+}
 .VTRowColumn {
 	text-align: left;
 	box-sizing: border-box;

src/components/CommonComponents/VirtuallyTable/index.tsx

 import React from "react";
-import { useCallback, useEffect, useState, useRef, useMemo } from "react";
-import { Column, Table, AutoSizer } from "react-virtualized";
+import { useCallback, useEffect, useState, useRef } from "react";
+import { Column, Table } from "react-virtualized";
 import style from "./index.module.scss";
 import "react-virtualized/styles.css"; // only needs to be imported once
+import Checkbox from "@mui/material/Checkbox";
 import MyCircularProgress from "@/components/mui/MyCircularProgress";
+import { createTheme, ThemeProvider } from "@mui/material";
+import NoData from "@/components/BusinessComponents/NoData";
+import ascIcon from "@/assets/project/ascIcon.svg";
+import descIcon from "@/assets/project/descIcon.svg";
+import sortIcon from "@/assets/project/sort.svg";
 
 type Order = "ASC" | "DESC"; // 升序为asc，降序为desc。
 
@@ -20,24 +26,51 @@ interface IVirtuallyTableProps {
 	hasCheckbox?: boolean; // 是否有复选框
 	selectItems?: Array<any>; // 选中的项
 	setSelectItems?: any; // 设置选中的项
-	// fixedHead?: boolean; // 是否是固定表头
 	noDataText?: string; // 无数据提示文案
-	// hasTableFooter?: boolean; // 是否有分页组件
-	// page?: number; // 当前页
-	// pageChange?: any; // 页码改变
-	// count?: number; // 总页数
-	// totalElements?: number; // 数据总量 不止是列表渲染的长度
 	sortState?: sortState; // 排序状态
 	setSortState?: any; // 设置排序状态
-	// paginationType?: "simple" | "complex"; // 分页组件的类型   simple简洁式  complex复杂、带每页数量切换、总数等
-	// rowsPerPage?: number; // 每页多少条数据
-	// handleChangeRowsPerPage?: any; // 每页多少条数据变化
 	nodataText?: any; // 无数据文案
 	handleRow?: any; // 点击一行
 	activeId?: string; // 选中的一行的id
 	disableFn?: any; // 禁用时根据disableFn来判断是否禁用
 }
 
+const theme = createTheme({
+	components: {
+		// 复选框样式
+		MuiSvgIcon: {
+			styleOverrides: {
+				root: {
+					color: "rgba(209, 214, 222, 1)",
+					fontSize: "18px",
+				},
+			},
+		},
+		MuiCheckbox: {
+			styleOverrides: {
+				root: {
+					color: "rgba(209, 214, 222, 1)",
+					"&.MuiCheckbox-indeterminate .MuiSvgIcon-root": {
+						color: "rgba(19, 112, 255, 1)",
+					},
+					"&.Mui-checked .MuiSvgIcon-root": {
+						color: "rgba(19, 112, 255, 1)",
+					},
+				},
+			},
+		},
+		MuiButtonBase: {
+			styleOverrides: {
+				root: {
+					"&.MuiCheckbox-root": {
+						padding: 0,
+					},
+				},
+			},
+		},
+	},
+});
+
 const VirtuallyTable = (props: IVirtuallyTableProps) => {
 	const {
 		rows,
@@ -74,7 +107,75 @@ const VirtuallyTable = (props: IVirtuallyTableProps) => {
 		getTableWidthHeight();
 	};
 
+	const onSelectAllClick = useCallback(
+		(e: any) => {
+			if (e.target.checked) {
+				setSelectItems && setSelectItems(rows.map((row) => row[tableKey]));
+			} else {
+				setSelectItems && setSelectItems([]);
+			}
+		},
+		[setSelectItems, tableKey, rows]
+	);
+
+	const onSelectRowClick = useCallback(
+		(e: any, itemValue: string) => {
+			if (e.target.checked) {
+				setSelectItems && setSelectItems([...selectItems, itemValue]);
+			} else {
+				const selectItemIndex = selectItems.indexOf(itemValue);
+				const newSelectItems = [
+					...selectItems.slice(0, selectItemIndex),
+					...selectItems.slice(selectItemIndex + 1, selectItems.length),
+				];
+				setSelectItems && setSelectItems(newSelectItems);
+			}
+		},
+		[selectItems, setSelectItems]
+	);
+
+	const handleSort = useCallback(
+		(field: string) => {
+			if (sortState?.field === field) {
+				if (sortState?.order === "ASC") {
+					setSortState({
+						field,
+						order: "DESC",
+					});
+				} else if (sortState?.order === "DESC") {
+					setSortState({
+						field,
+						order: "ASC",
+					});
+				} else {
+					setSortState({
+						field,
+						order: "DESC",
+					});
+				}
+			} else {
+				setSortState({
+					field,
+					order: "DESC",
+				});
+			}
+		},
+		[sortState, setSortState]
+	);
+
+	const handleRowFn = useCallback(
+		(row: any) => {
+			if (!disableFn) {
+				handleRow && handleRow(row);
+			} else {
+				!disableFn(row) && handleRow && handleRow(row);
+			}
+		},
+		[disableFn, handleRow]
+	);
+
 	return (
+		<ThemeProvider theme={theme}>
 			<div
 				ref={virtuallyTableBoxRef}
 				style={{ width: "100%", height: "100%", position: "relative" }}
@@ -90,20 +191,105 @@ const VirtuallyTable = (props: IVirtuallyTableProps) => {
 						rowCount={rows.length}
 						rowGetter={({ index }: any) => rows[index]}
 						headerClassName={style.VTHeader}
+						onRowClick={(data: any) => {
+							handleRowFn(data.rowData);
+						}}
 						rowClassName={({ index }: any) => {
 							if (index < 0) {
 								return style.VTHeaderRow;
+							} else {
+								if (rows[index][tableKey] === activeId) {
+									return style.VTActiveRow;
 								} else {
 									return style.VTRow;
 								}
+							}
+						}}
+						rowStyle={({ index }: any) => {
+							if (index !== -1) {
+								return {
+									background:
+										activeId === rows[index][tableKey]
+											? "rgba(237, 244, 255, 1)"
+											: "",
+									cursor: disableFn && disableFn(rows[index]) ? "no-drop" : "",
+									opacity: disableFn && disableFn(rows[index]) ? "0.3" : "",
+								};
+							}
 						}}
 					>
+						{hasCheckbox && (
+							<Column
+								dataKey="checkbox"
+								headerRenderer={() => {
+									return (
+										<Checkbox
+											indeterminate={
+												selectItems.length > 0 &&
+												selectItems.length < rows.length
+											}
+											checked={
+												rows.length > 0 && selectItems.length === rows.length
+											}
+											onChange={(e) => onSelectAllClick(e)}
+										/>
+									);
+								}}
+								headerStyle={{ margin: 0 }}
+								style={{ margin: 0 }}
+								width={50}
+								cellRenderer={(data: any) => {
+									return (
+										<Checkbox
+											checked={
+												selectItems.filter(
+													(selectItem) => selectItem === data.rowData[tableKey]
+												).length > 0
+											}
+											onChange={(e) =>
+												onSelectRowClick(e, data.rowData[tableKey])
+											}
+										/>
+									);
+								}}
+								className={style.VTRowColumn}
+							/>
+						)}
 						{headCells.map((headCell) => {
-						console.log(headCell.cellRenderer);
 							return (
 								<Column
 									key={headCell.id}
-								label={headCell.label}
+									// label={headCell.label}
+									headerRenderer={(data: any) => {
+										if (headCell.sort) {
+											return (
+												<div>
+													<span>{headCell.label}</span>
+													<img
+														src={
+															sortState?.field === headCell.id
+																? sortState?.order === "ASC"
+																	? ascIcon
+																	: sortState?.order === "DESC"
+																	? descIcon
+																	: sortIcon
+																: sortIcon
+														}
+														alt=""
+														onClick={() => handleSort(headCell.id)}
+														style={{
+															marginLeft: "8px",
+															cursor: "pointer",
+															position: "relative",
+															top: "3px",
+														}}
+													/>
+												</div>
+											);
+										} else {
+											return headCell.label;
+										}
+									}}
 									dataKey={headCell.id}
 									width={headCell.width}
 									flexGrow={headCell.flexGrow || 0}
@@ -120,7 +306,19 @@ const VirtuallyTable = (props: IVirtuallyTableProps) => {
 						})}
 					</Table>
 				)}
+				{rows.length === 0 && (
+					<NoData
+						text={nodataText}
+						noDataBoxStyle={{
+							position: "absolute",
+							bottom: 0,
+							width: `${width}px`,
+							height: `${height - 59}px`,
+						}}
+					/>
+				)}
 			</div>
+		</ThemeProvider>
 	);
 };
 

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

@@ -174,7 +174,7 @@ const AddMember = observer((props: IProps) => {
 								setProjectMember(e.target.value);
 							}
 						}}
-						placeholder="搜索项目成员"
+						placeholder="按回车搜索项目成员"
 						sx={{ mb: 2 }}
 					/>
 					<div style={{ height: "320px" }}>

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

@@ -203,7 +203,7 @@ const OperatorList = observer((props: IOperatorListProps) => {
 						setKeyword(e.target.value);
 					}}
 					value={keyword}
-					placeholder="输入关键词搜索"
+					placeholder="输入关键词按回车搜索"
 					onKeyUp={handleEnterCode}
 					size="medium"
 					sx={{ height: 32, width: "100%" }}

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";
@@ -46,7 +47,7 @@ const VirtuallyListDemo = () => {
 			c: "asdfasf",
 			d: "asdfasdf",
 			e: "asd4534",
-			id: "1",
+			id: "a1",
 		},
 	];
 	for (let i = 0; i < 10000; i++) {
@@ -56,7 +57,7 @@ const VirtuallyListDemo = () => {
 			c: "sdfg",
 			d: "sdfg",
 			e: "wertwe",
-			id: "12" + i,
+			id: String(i),
 		});
 	}
 	const buttonHeadCells = [
@@ -99,6 +100,8 @@ const VirtuallyListDemo = () => {
 		},
 	];
 
+	const [selectItems, setSelectItems] = useState([]);
+
 	return (
 		<div>
 			<div>
@@ -106,21 +109,12 @@ const VirtuallyListDemo = () => {
 			</div>
 			<div style={{ height: "600px" }}>
 				<VirtuallyTable
-					// rows={rows}
-					rows={rows.map((row) => {
-						return {
-							...row,
-							// caozuo: (
-							// 	<MyButton
-							// 		text="删除"
-							// 		onClick={() => {
-							// 			// handleDelete(row.id);
-							// 		}}
-							// 	></MyButton>
-							// ),
-						};
-					})}
+					selectItems={selectItems}
+					setSelectItems={setSelectItems}
+					rows={rows}
+					// rows={[]}
 					headCells={buttonHeadCells}
+					activeId="8"
 				/>
 			</div>
 		</div>