feat: 云平台表格替换

src/components/mui/MyTableNew.tsx

@@ -26,7 +26,7 @@ export type sortState = {
 interface IMyTableProps {
 	rows: Array<any>; // 表格数据
 	headCells: Array<any>; // 表头配置
-	key?: string; // 表格数据的key
+	tableKey?: string; // 表格数据的key
 	loading?: boolean; // 是否正在加载数据
 	hasCheckbox?: boolean; // 是否有复选框
 	selectItems?: Array<any>; // 选中的项
@@ -50,7 +50,7 @@ const MyTable = (props: IMyTableProps) => {
 	const {
 		rows,
 		headCells,
-		key = "id",
+		tableKey = "id",
 		loading = false,
 		hasCheckbox = false,
 		selectItems = [],
@@ -204,12 +204,12 @@ const MyTable = (props: IMyTableProps) => {
 	const onSelectAllClick = useCallback(
 		(e: any) => {
 			if (e.target.checked) {
-				setSelectItems && setSelectItems(rows.map((row) => row[key]));
+				setSelectItems && setSelectItems(rows.map((row) => row[tableKey]));
 			} else {
 				setSelectItems && setSelectItems([]);
 			}
 		},
-		[setSelectItems, key, rows]
+		[setSelectItems, tableKey, rows]
 	);
 
 	const onSelectRowClick = useCallback(
@@ -360,7 +360,7 @@ const MyTable = (props: IMyTableProps) => {
 		return (
 			<TableBody>
 				{rows.map((row) => (
-					<TableRow key={row[key]}>
+					<TableRow key={row[tableKey]}>
 						{hasCheckbox && (
 							<TableCell
 								align="left"
@@ -368,10 +368,11 @@ const MyTable = (props: IMyTableProps) => {
 							>
 								<Checkbox
 									checked={
-										selectItems.filter((selectItem) => selectItem === row[key])
-											.length > 0
+										selectItems.filter(
+											(selectItem) => selectItem === row[tableKey]
+										).length > 0
 									}
-									onChange={(e) => onSelectRowClick(e, row[key])}
+									onChange={(e) => onSelectRowClick(e, row[tableKey])}
 								/>
 							</TableCell>
 						)}
@@ -410,7 +411,7 @@ const MyTable = (props: IMyTableProps) => {
 		);
 	}, [
 		rows,
-		key,
+		tableKey,
 		hasCheckbox,
 		selectItems,
 		onSelectRowClick,

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

@@ -9,15 +9,17 @@
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import _ from "lodash";
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import { Box, OutlinedInput } from "@mui/material";
+import { memo, useCallback, useEffect, useState } from "react";
+import { Box } from "@mui/material";
 
 import Dialog from "@/components/mui/MyDialog";
 import useMyRequest from "@/hooks/useMyRequest";
 import { useStores } from "@/store";
 import { useMessage } from "@/components/MySnackbar";
-import MyBorderlessSelect, { IOption } from "@/components/mui/MyBorderlessSelect";
-import MyTable from "@/components/mui/MyTable";
+import MyBorderlessSelect, {
+	IOption,
+} from "@/components/mui/MyBorderlessSelect";
+import MyTable from "@/components/mui/MyTableNew";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
 import {
 	addProjectUser,
@@ -35,7 +37,6 @@ const AddMember = observer((props: IProps) => {
 	const { addMemberDialog, setAddMemberDialog, getTableList } = props;
 
 	const { currentProjectStore } = useStores();
-
 	const [tableData, setTableData] = useState([]);
 	const [projectMember, setProjectMember] = useState("");
 	const [filterTableData, setFilterTableData] = useState([]);
@@ -54,17 +55,18 @@ const AddMember = observer((props: IProps) => {
 		[tableData]
 	);
 
-	const columns = useMemo(() => {
-		return [
-			{ id: "checkbox", width: 50 },
-			{ id: "username", label: "项目成员", width: 160 },
+	const columns = [
+		{ id: "username", label: "项目成员", width: 200 },
 		{
 			id: "projectRole",
 			label: "项目权限",
-				width: 160,
-				render: (item: string, row: any, index: number) => {
+			width: 100,
+		},
+	];
+
+	const randerRole = (item: any, index: number) => {
 		const defaultValue = selectOptions.filter(
-						(every) => every.value === item
+			(every) => every.value === item.projectRole
 		);
 		return (
 			<MyBorderlessSelect
@@ -72,12 +74,10 @@ const AddMember = observer((props: IProps) => {
 				onChange={(val) => changePermission(val, index)}
 				options={selectOptions}
 				size="small"
+				sx={{ position: "relative", left: "-13px" }}
 			/>
 		);
-				},
-			},
-		];
-	}, [changePermission, selectOptions]);
+	};
 
 	/** 过滤表格数据 */
 	useEffect(() => {
@@ -93,11 +93,14 @@ const AddMember = observer((props: IProps) => {
 	}, [projectMember, tableData]);
 
 	// 获取表格数据接口
-	const { run: getProjectUsersList } = useMyRequest(fetchProjectUsersList, {
+	const { run: getProjectUsersList, loading } = useMyRequest(
+		fetchProjectUsersList,
+		{
 			onSuccess: (res: any) => {
 				setTableData(res?.data);
 			},
-	});
+		}
+	);
 
 	// 获取项目权限
 	const { run: getProjectPower } = useMyRequest(fetchProjectPower, {
@@ -173,23 +176,22 @@ const AddMember = observer((props: IProps) => {
 						placeholder="搜索项目成员"
 						sx={{ mb: 2 }}
 					/>
-					<div style={{ overflow: "overlay", maxHeight: 400 }}>
+					<div style={{ height: "320px" }}>
 						<MyTable
 							noDataText={
 								projectMember ? `暂无 "${projectMember}" 搜索结果` : undefined
 							}
-							tableContainerStyle={{ height: 346 }}
-							checkboxData={(val: string[]) => setCheckData(val)}
-							param="username"
-							disabledParam={"enabled"}
-							rowHover={true}
-							stickyHeader={true}
-							rows={filterTableData}
-							rowsPerPage="99"
+							tableKey="username"
+							hasCheckbox={true}
+							selectItems={checkData}
+							setSelectItems={setCheckData}
+							fixedHead={true}
+							rows={filterTableData.map((item: any, idnex) => ({
+								...item,
+								projectRole: randerRole(item, idnex),
+							}))}
 							headCells={columns}
-							footer={false}
-							tableStyle={{ minWidth: "auto" }}
-							borderBottom="none"
+							loading={loading}
 						/>
 					</div>
 				</Box>

src/views/Project/ProjectSetting/ProjectMembers/index.module.css

@@ -10,3 +10,6 @@
 	margin-left: 32px;
 	cursor: pointer;
 }
+.tableBox {
+	height: calc(100vh - 300px);
+}

src/views/Project/ProjectSetting/ProjectMembers/index.tsx

@@ -7,15 +7,12 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import _ from "lodash";
-import OutlinedInput from "@mui/material/OutlinedInput";
 import { Box } from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
 import Add from "@mui/icons-material/Add";
 import { toJS } from "mobx";
 import { observer } from "mobx-react";
 
-import MyTable from "@/components/mui/MyTable";
+import MyTable from "@/components/mui/MyTableNew";
 import { IResponse, useHttp } from "@/api/http";
 import RemoveItem from "./components/RemoveItem";
 import ChangePermission from "./components/ChangePermission";
@@ -52,26 +49,15 @@ const ProjectMembers = observer(() => {
 	const [projectName, setProjectMember] = useState("");
 	/** 过滤后数据 */
 	const [filterTableData, setFilterTableData] = useState([]);
+	const [loading, setLoading] = useState(false);
 
-	const columns = useMemo(() => {
-		const val: any = [
-			{ id: "username", label: "成员名称" },
-			{ id: "projectRoleDesc", label: "项目权限" },
-			{ id: "phone", label: "联系方式" },
-			...(projectRole !== "OWNER"
-				? []
-				: [
-					{
-						id: "operation",
-						label: "操作",
-						width: 160,
-						render: (item: any, row: any) => {
-							return row?.projectRole === "OWNER" ? null : (
+	const randerOperation = (item: any) => {
+		return item?.projectRole === "OWNER" ? null : (
 			<>
 				<span
 					style={{ color: "#1370FF", cursor: "pointer" }}
 					onClick={() => {
-											onPermissionBtn(row);
+						onPermissionBtn(item);
 					}}
 				>
 					更改权限
@@ -79,17 +65,28 @@ const ProjectMembers = observer(() => {
 				<span
 					className={styles.removeItemBox}
 					onClick={() => {
-											onRemoveItemBtn(row.username);
+						onRemoveItemBtn(item.username);
 					}}
 				>
 					移出项目
 				</span>
 			</>
 		);
-						},
-					},
-				]),
+	};
+
+	const columns = useMemo(() => {
+		let val: any = [
+			{ id: "username", label: "成员名称", width: 200 },
+			{ id: "projectRoleDesc", label: "项目权限", width: 200 },
+			{ id: "phone", label: "联系方式" },
 		];
+		if (projectRole === "OWNER") {
+			val.push({
+				id: "operation",
+				label: "操作",
+				width: 180,
+			});
+		}
 		return val;
 	}, [projectRole]);
 
@@ -97,14 +94,19 @@ const ProjectMembers = observer(() => {
 	const getTableList = useCallback(() => {
 		const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
 		if (!projectInfo?.id) return;
+		setLoading(true);
 		http
 			.get<IResponse<any>>("/cpp/project/get", {
 				params: { id: projectInfo?.id || "" },
 			})
 			.then((res) => {
+				setLoading(false);
 				const { data = {} } = res;
 				setTableData(data?.members || []);
 				setProjectRole(data?.projectRole || "");
+			})
+			.catch(() => {
+				setLoading(false);
 			});
 	}, [currentProjectStore?.currentProjectInfo, http]);
 
@@ -147,7 +149,7 @@ const ProjectMembers = observer(() => {
 		if (e.keyCode === 13) {
 			setProjectMember(e.target.value);
 		}
-    }
+	};
 
 	return (
 		<>
@@ -159,7 +161,7 @@ const ProjectMembers = observer(() => {
 				/>
 				{currentProjectStore?.currentProjectInfo?.projectRole === "OWNER" ? (
 					<MyButton
-						text='添加成员'
+						text="添加成员"
 						style={{ backgroundColor: "#1370FF " }}
 						variant="contained"
 						onClick={onAddMember}
@@ -168,16 +170,18 @@ const ProjectMembers = observer(() => {
 					/>
 				) : null}
 			</Box>
+			<div className={styles.tableBox}>
 				<MyTable
-				rowHover={true}
-				stickyHeader={true}
-				rows={filterTableData}
-				rowsPerPage={"99"}
+					fixedHead={true}
+					rows={filterTableData.map((item: any, index) => ({
+						...item,
+						operation: randerOperation(item),
+					}))}
+					tableKey="username"
 					headCells={columns}
-				footer={false}
-				tableStyle={{ minWidth: "auto" }}
-				borderBottom={"none"}
+					loading={loading}
 				/>
+			</div>
 			<RemoveItem
 				removeDialog={removeDialog}
 				setRemoveDialog={setRemoveDialog}