feat: 表格增加禁用功能

src/components/BusinessComponents/QueueSelect/index.tsx

@@ -18,6 +18,7 @@ export type IQueueLi = {
 	memory: number;
 	total: number;
 	partition: string;
+	enabled: boolean;
 };
 
 type IQueueSelectProps = {
@@ -44,6 +45,7 @@ export type IShowCPULi = {
 	cpuName: string;
 	coreNum: number;
 	partition: string;
+	enabled: boolean;
 	memoryList: Array<IMemoryLi>;
 };
 
@@ -153,6 +155,7 @@ const QueueSelect = (props: IQueueSelectProps) => {
 					cpuName: item.cpuName,
 					coreNum: item.coreNum,
 					partition: item.partition,
+					enabled: item.enabled,
 					memoryList: [
 						{
 							memory: item.memory,
@@ -347,6 +350,7 @@ const QueueSelect = (props: IQueueSelectProps) => {
 									activeId={activePartition}
 									tableKey="partition"
 									loading={cpuLoading}
+									disableFn={(row: any) => !row.enabled}
 								></MyTable>
 							)}
 							{queueType === "GPU" && (
@@ -364,6 +368,7 @@ const QueueSelect = (props: IQueueSelectProps) => {
 									activeId={activePartition}
 									tableKey="partition"
 									loading={gpuLoading}
+									disableFn={(row: any) => !row.enabled}
 								></MyTable>
 							)}
 						</div>

src/components/mui/MyTableNew.tsx

@@ -46,6 +46,7 @@ interface IMyTableProps {
 	nodataText?: any; // 无数据文案
 	handleRow?: any; // 点击一行
 	activeId?: string; // 选中的一行的id
+	disableFn?: any; // 禁用时根据disableFn来判断是否禁用
 }
 
 const MyTable = (props: IMyTableProps) => {
@@ -71,6 +72,7 @@ const MyTable = (props: IMyTableProps) => {
 		nodataText,
 		handleRow,
 		activeId,
+		disableFn,
 	} = props;
 
 	const theme = useMemo(() => {
@@ -236,6 +238,17 @@ const MyTable = (props: IMyTableProps) => {
 		[selectItems, setSelectItems]
 	);
 
+	const handleRowFn = useCallback(
+		(row: any) => {
+			if (!disableFn) {
+				handleRow && handleRow(row);
+			} else {
+				!disableFn(row) && handleRow && handleRow(row);
+			}
+		},
+		[disableFn, handleRow]
+	);
+
 	const handleSort = useCallback(
 		(field: string) => {
 			if (sortState?.field === field) {
@@ -370,10 +383,13 @@ const MyTable = (props: IMyTableProps) => {
 				{rows.map((row, rowIndex) => (
 					<TableRow
 						key={row[tableKey] || rowIndex}
-						onClick={() => handleRow && handleRow(row)}
+						// onClick={() => handleRow && handleRow(row)}
+						onClick={() => handleRowFn(row)}
 						sx={{
 							background:
 								activeId === row[tableKey] ? "rgba(237, 244, 255, 1)" : "",
+							cursor: disableFn && disableFn(row) ? "no-drop" : "",
+							opacity: disableFn && disableFn(row) ? "0.3" : "",
 						}}
 					>
 						{hasCheckbox && (
@@ -393,12 +409,10 @@ const MyTable = (props: IMyTableProps) => {
 						)}
 						{headCells.map((headCell, index) => (
 							<TableCell key={index} align="left" width={headCell.width}>
-								{/* {row[headCell.id]} */}
 								{headCell.showOverflowTooltip && (
 									<MyTooltip title={row[headCell.id]}>
 										<div
 											style={{
-												// width: headCell.width,
 												width: Number(headCell.width) - 32 || "",
 												overflow: "hidden",
 												textOverflow: "ellipsis",
@@ -433,8 +447,9 @@ const MyTable = (props: IMyTableProps) => {
 		headCells,
 		nodataText,
 		loading,
-		handleRow,
+		handleRowFn,
 		activeId,
+		disableFn,
 	]);
 
 	const randerTableFooter = useMemo(() => {