feat: MyTable组件封装

src/components/mui/MyProgress.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-11 11:56:58
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-22 15:47:55
+ * @LastEditTime: 2022-07-25 15:58:25
  * @FilePath: /bkunyun/src/components/mui/MyProgress.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -66,7 +66,7 @@ const MyProgress = (props: IMyProgressProps) => {
 
 	return (
 		<ThemeProvider theme={theme}>
-			<LinearProgress {...other} />
+			<LinearProgress  variant={variant} {...other} />
 		</ThemeProvider>
 	);
 };

src/components/mui/MyTable/components/ActionsComponent.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-01 16:53:15
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-25 14:09:57
+ * @FilePath: /bkunyun/src/components/Material.Ui/Table/ActionsComponent.jsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import Button from "@mui/material/Button";
+import IconButton from '@mui/material/IconButton';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import LastPageIcon from '@mui/icons-material/LastPage';
+import { makeStyles } from "@mui/styles";
+const useStyles = makeStyles({
+    firstPageIconStyle: { width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', margin: "0 6px" },
+    KeyboardArrowLeftStyle: { width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', marginRight: "3px" },
+    keyboardArrowRightStyle: { width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', marginLeft: "3px" },
+    lastPageIconStyle: { width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', margin: "0 6px" }
+})
+
+const TablePaginationActionsConsole = (props: any) => {
+    const classes = useStyles();
+    const { count, page, rowsPerPage, onChangePage, onPageChange } = props;
+    const handleFirstPageButtonClick = (event: any) => {
+        if (!onChangePage) {
+            onPageChange(event, 0)
+            return
+        }
+        onChangePage(event, 0)
+    }
+    const handleBackButtonClick = (event: any) => {
+        if (!onChangePage) {
+            onPageChange(event, page - 1)
+            return
+        }
+        onChangePage(event, page - 1)
+    }
+    const handleNextButtonClick = (event: any) => {
+        if (!onChangePage) {
+            onPageChange(event, page + 1);
+            return
+        }
+        onChangePage(event, page + 1)
+    }
+    const btnClick = (event: any, item: any) => {
+        if (!onChangePage) {
+            onPageChange(event, item);
+            return
+        }
+        onChangePage(event, item)
+    }
+    const handleLastPageButtonClick = (event: any) => {
+        if (!onChangePage) {
+            onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+            return
+        }
+        onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
+    }
+    const buttons = (count: any, page: any, rowsPerPage: any) => {
+        let max = 1;
+        if (rowsPerPage !== -1) {
+            max = count % rowsPerPage === 0 ? count / rowsPerPage : parseInt(String(count / rowsPerPage)) + 1;
+        }
+        let arr: any =  Array(max).fill(max).map((item, index) => index)
+        return arr.map((item: number) => {
+            if (item - 4 <= page && item + 4 >= page && count > 4)
+                return <Button
+                    key={item}
+                    onClick={() => btnClick('', item)}
+                    style={{ minWidth: '28px', marginRight: "3px", marginLeft: "3px", minHeight: '28px', lineHeight: '28px', fontSize: "12px", border: page === item ? "1px solid #136EFA" : "1px solid #D8D8D8", color: page === item ? "#fff" : "#111111", background: page === item ? '#136EFA' : "#fff", borderRadius: "2px", padding: '0' }}>
+                    {item + 1}
+                </Button>
+            return ""
+        })
+    }
+    return (
+        <div style={{ flexShrink: 0, }}>
+            <IconButton
+                onClick={handleFirstPageButtonClick}
+                disabled={page === 0}
+                className={classes.firstPageIconStyle}
+                aria-label="first page"
+            >
+                <FirstPageIcon />
+            </IconButton>
+            <IconButton
+                className={classes.KeyboardArrowLeftStyle}
+                onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
+                <KeyboardArrowLeft />
+            </IconButton>
+            {
+                buttons(count, page, rowsPerPage)
+            }
+            <IconButton
+                onClick={handleNextButtonClick}
+                className={classes.keyboardArrowRightStyle}
+                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+                aria-label="next page"
+            >
+                <KeyboardArrowRight />
+            </IconButton>
+            <IconButton
+                className={classes.lastPageIconStyle}
+                onClick={handleLastPageButtonClick}
+                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+                aria-label="last page"
+            >
+                <LastPageIcon />
+            </IconButton>
+        </div>
+    );
+}
+
+export default TablePaginationActionsConsole
\ No newline at end of file

src/components/mui/MyTable/components/EnhancedTableHead.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-01 16:53:15
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-25 12:04:49
+ * @FilePath: /bkunyun/src/components/Material.Ui/Table/EnhancedTableHead.jsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import TableHead from "@mui/material/TableHead";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import Checkbox from "@mui/material/Checkbox";
+import Typography from "@mui/material/Typography";
+import Tooltip from '@mui/material/Tooltip';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+
+const EnhancedTableHead = (props: any) => {
+    const { classes, onSelectAllClick, order, orderBy, TableHeadClasses, numSelected, rowCount, onRequestSort, headCells, headTableCell, headTableCellCheckbox, RowStyle, headTableCellStyle } = props;
+    const createSortHandler = (property: any) => (event: any) => {
+        onRequestSort(event, property);
+    };
+    return (
+        <TableHead classes={{ root: TableHeadClasses || classes.TableHeadClasses }} sx={{
+            th: {
+                backgroundColor: '#F7F8FA',
+            }
+        }}>
+            <TableRow style={{ ...RowStyle }}>
+                {
+                    headCells.filter((k: any) => k.id === "checkbox").length > 0 && <TableCell sx={{
+                        border: 'none'
+                    }} padding="checkbox">
+                        <Checkbox
+                            sx={{ color: '#D1D6DE' }}
+                            color={'primary'}
+                            indeterminate={numSelected > 0 && numSelected < rowCount}
+                            checked={rowCount > 0 && numSelected === rowCount}
+                            onChange={onSelectAllClick}
+                            inputProps={{ "aria-label": "select all desserts" }}
+                        />
+                    </TableCell>
+                }
+                {headCells.map((headCell: any, k: any) => (
+                    <TableCell
+                        sx={{
+                            border: 'none',
+                            ...headTableCellStyle
+                        }}
+                        key={headCell.id}
+                        style={{ width: headCell.width ? headCell.width : "", textAlign: headCell.numeric ? "right" : "left", display: headCell.id !== "checkbox" ? "" : "none" }}
+                        padding={headCell.disablePadding ? "none" : "normal"}
+                        sortDirection={orderBy === headCell.id ? order : false}
+                        classes={{ head: (k && headTableCell) || classes.headTableCell }}
+                    >
+                        {
+                            headCell.sort && <TableSortLabel active={orderBy === headCell.id} direction={order} onClick={createSortHandler(headCell.id)} >
+                                {headCell.label}
+                            </TableSortLabel>
+                        }
+                        {
+                            !headCell.sort && <Typography className={headTableCellCheckbox || ''} style={headCell.tooltip ? { display: "flex", alignItems: "center" } : {}}      >
+                                {headCell.label}
+                                {headCell.tooltip ? <Tooltip title={headCell.tooltip} placement="top" arrow>
+                                    <ErrorOutlineIcon style={{ fontSize: "16px", marginLeft: "5px" }} fontSize="small" />
+                                </Tooltip> : ""}
+                            </Typography>
+                        }
+                    </TableCell>
+                ))}
+            </TableRow>
+        </TableHead>
+    );
+}
+
+
+export default EnhancedTableHead
\ No newline at end of file

src/components/mui/MyTable/components/EnhancedTableToolbar.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-01 16:53:15
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-25 11:40:37
+ * @FilePath: /bkunyun/src/components/Material.Ui/Table/EnhancedTableToolbar.jsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+import { useToolbarStyles } from "../utils";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import clsx from "clsx";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import DeleteIcon from "@mui/icons-material/Delete";
+import FilterListIcon from "@mui/icons-material/FilterList";
+const EnhancedTableToolbar = (props: any) => {
+    const classes = useToolbarStyles();
+    const { numSelected } = props;
+
+    return (
+        <Toolbar
+            className={clsx(classes.root, { [classes.highlight]: numSelected > 0 })}
+        >
+            {numSelected > 0 ? (
+                <Typography
+                    className={classes.title}
+                    color="inherit"
+                    variant="subtitle1"
+                    component="div"
+                >
+                    {numSelected} selected
+                </Typography>
+            ) : (
+                <Typography
+                    className={classes.title}
+                    variant="h6"
+                    id="tableTitle"
+                    component="div"
+                >
+                    Nutrition
+                </Typography>
+            )}
+
+            {numSelected > 0 ? (
+                <Tooltip title="Delete">
+                    <IconButton aria-label="delete">
+                        <DeleteIcon />
+                    </IconButton>
+                </Tooltip>
+            ) : (
+                <Tooltip title="Filter list">
+                    <IconButton aria-label="filter list">
+                        <FilterListIcon />
+                    </IconButton>
+                </Tooltip>
+            )}
+        </Toolbar>
+    );
+};
+
+export default EnhancedTableToolbar;
\ No newline at end of file

src/components/mui/MyTable/index.tsx

+import React, { useCallback, useState} 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 { TablePagination } from '@mui/material';
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import Checkbox from "@mui/material/Checkbox";
+import { useEffect } from "react";
+import { useImperativeHandle } from "react";
+// import Spin from "./Spin";
+
+import EnhancedTableHeadComponent from "./components/EnhancedTableHead"
+import { getComparator, stableSort, useStyles } from "./utils";
+import ActionsComponent from "./components/ActionsComponent";
+import {ITableProps} from './interface'
+
+export default function EnhancedTable(props: ITableProps) {
+  const classes: any = useStyles;
+  const [order, setOrder] = useState("asc");
+  const [orderBy, setOrderBy] = useState("");
+  const { headCells, rows, footer = true, elevation1, tableStyle, tableCellStyle, tableContainerStyle, stickyHeader, onRowClick, defaultRow, minHeight = '', borderBottom = '', onDoubleClick,
+    load, size, checkboxData, rowsPerPage = 10, initSelected, page = 0, changePage = function () { }, toolbar, count, param, disabledParam = "id", headTableCellCheckbox, RowHeight = '', CellWidth = '', rowHover, TableNodataPadding = '', TableNodataLineHeight = '', tableBodySx, radioClick} = props;
+  const [selected, setSelected] = useState(initSelected || []);
+  const [rowsPerPageOptions] = useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
+  const [onRow, setOnRow] = useState('')
+
+  // 重置复选框选中选项
+  const initSelectedFunc = (e: any) => {
+    setSelected(e)
+  }
+
+  useImperativeHandle(props.onRef, () => {
+    return {
+      initSelectedFunc: initSelectedFunc,
+    };
+  });
+
+  useEffect(() => {
+    setOnRow(defaultRow)
+  }, [defaultRow])
+
+  const onRowClickDefault = (value: any) => {
+    setOnRow(value)
+    onRowClick && onRowClick(value)
+  }
+
+  const handleRequestSort = (event: any, property: any) => {
+    const isAsc = orderBy === property && order === "asc";
+    setOrder(isAsc ? "desc" : "asc");
+    setOrderBy(property);
+  };
+
+  const handleSelectAllClick = (event: any) => {
+    if (event.target.checked) {
+      const newSelecteds = rows.map((n: any) => n[param || 'id']);
+      setSelected(newSelecteds);
+      checkboxData(newSelecteds);
+      return;
+    }
+    setSelected([]);
+    checkboxData([]);
+  };
+  const handleClick = (event: any, name: any) => {
+    const selectedIndex = selected.indexOf(name);
+    let newSelected: any[] = [];
+
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, name);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(
+        selected.slice(0, selectedIndex),
+        selected.slice(selectedIndex + 1)
+      );
+    }
+    checkboxData(newSelected)
+    setSelected(newSelected);
+  };
+
+  const handleRadioClick = (id: string) => {
+    setSelected(id)
+  }
+
+  const handleOnPageChange = (event: any, newPage: number) => {
+    changePage(newPage, Number(rowsPerPage));
+  };
+
+  const handleChangeRowsPerPage = (event: any) => {
+    changePage(0, parseInt(event.target.value, 10));
+  };
+
+  const isSelected = (name: any) => selected.indexOf(name) !== -1;
+
+  // const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
+
+  const renderTableCellValue = useCallback(((item: any, row: any, index: number)=>{
+    if(
+      item.render
+    ) {
+      return <>{item.render(row[item.id], row, index)}</>
+    } else if(row[item.id]) {
+      return row[item.id] || '-'
+    } else {
+      return '-'
+    }
+  }),[])
+
+  return (
+    <div className={classes.root}>
+      <Paper sx={{
+        boxShadow: 'none'
+      }} className={classes.paper} classes={{ elevation1: elevation1 || classes.elevation1 }} >
+        {/* <Spin spin={spin} /> */}
+        {toolbar && toolbar}
+        <TableContainer style={{ ...tableContainerStyle }}>
+          <Table stickyHeader={stickyHeader || false} className={classes.table} style={{ ...tableStyle }} aria-labelledby="tableTitle" size={size || "medium"} aria-label="cloudam table header" >
+            <EnhancedTableHeadComponent
+              classes={classes()}
+              {...props}
+              numSelected={selected.length}
+              headTableCellCheckbox={headTableCellCheckbox}
+              order={order}
+              orderBy={orderBy}
+              onSelectAllClick={handleSelectAllClick}
+              onRequestSort={handleRequestSort}
+              rowCount={rows.length}
+              headCells={headCells || []}
+            />
+            <TableBody sx={{
+              ...tableBodySx
+            }}>
+              {
+                (rows.length === 0 && !load) && <TableRow>
+                  <TableCell
+                    sx={{
+                      borderBottom: '1px solid #F0F2F5'
+                    }}
+                    colSpan={headCells?.filter((k: any) => k.id === "checkbox")?.length === 0 ? headCells?.length : headCells?.length + 1}
+                    className={classes.TypographyStyle}
+                    style={{ minHeight: minHeight, height: minHeight, borderBottom: borderBottom, padding: TableNodataPadding, lineHeight: TableNodataLineHeight }}
+                  >
+                    No Data
+                  </TableCell>
+                </TableRow>
+              }
+              {stableSort(rows, getComparator(order, orderBy)).slice(page * Number(rowsPerPage), page * Number(rowsPerPage) + Number(rowsPerPage)).map((row: any, index: number) => {
+                const isItemSelected = isSelected(row[param || "id"]);
+                const labelId = `enhanced-table-checkbox-${index}`;
+                return (
+                  <TableRow
+                    hover={rowHover ? false : (row[disabledParam || "enabled"] ? true : false)}
+                    onDoubleClick={() => {
+                      onDoubleClick && onDoubleClick(row)
+                    }}
+                    style={{
+                      height: RowHeight,
+                      border: onRow === row[param || "id"] ? !row[disabledParam] ? "" : '1px solid #136EFA' : "",
+                      backgroundColor: onRow === row[param || "id"] ? !row[disabledParam] ? "rgba(255, 255, 255, 0.4)" : "rgba(19, 110, 250, 0.1)" : "",
+                      cursor: props.cursor ? (row[props.cursor] ? "pointer" : "auto") : (onRowClick ? !row[disabledParam] ? "no-drop" : "pointer" : "auto"),
+                    }}
+                    role="checkbox"
+                    aria-checked={isItemSelected}
+                    tabIndex={-1}
+                    key={row[param || "id"] || index}
+                    selected={isItemSelected}
+                    onClick={() => {
+                      radioClick && radioClick(row)
+                      radioClick && handleRadioClick(row[param || "id"])
+                    }}
+                  >
+                    {
+                      headCells.filter((k: any) => k.id === "checkbox").length > 0 && <TableCell
+                        sx={{
+                          borderBottom: '1px solid #F0F2F5'
+                        }}
+                        onClick={(event) => {
+                          // if (!row[disabledParam]) return;
+                          onRowClick && onRowClickDefault(row[param || "id"])
+                          headCells.filter((k: any) => k.id === "checkbox").length > 0 && handleClick(event, row[param || "id"])
+                        }}
+                        padding="checkbox">
+                        <Checkbox sx={{ color: '#D1D6DE' }} color={"primary"} checked={isItemSelected} inputProps={{ "aria-labelledby": labelId }} />
+                      </TableCell>
+                    }
+                    {
+                      headCells.filter((item: any) => item.id !== 'checkbox').map((item: any, k: any) => {
+                        return (
+                          <TableCell key={k} component="th" id={labelId + k}
+                            sx={{
+                              borderBottom: '1px solid #F0F2F5'
+                            }}
+                            // align={}
+                            style={{ width: CellWidth, textAlign: item.numeric ? "right" : "left", paddingRight: item.sort && item.numeric ? "40px" : "", border: tableCellStyle }}
+                            scope="row"
+                            padding={item.disablePadding ? "none" : "normal"}
+                            classes={{
+                              body: classes.bodyTableCell
+                            }}
+                          > {
+                            renderTableCellValue(item, row, index)
+                            }
+                          </TableCell>
+                        )
+                      })
+                    }
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        {
+          footer ? <TablePagination
+            rowsPerPageOptions={rowsPerPageOptions}
+            component="div"
+            count={count || rows.length}
+            rowsPerPage={Number(rowsPerPage)}
+            page={page}
+            ActionsComponent={ActionsComponent}
+            onPageChange={handleOnPageChange}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+          /> : null
+        }
+
+      </Paper>
+    </div>
+  );
+}

src/components/mui/MyTable/interface.ts

+/*
+ * @Author: 吴永生 15770852798@163.com
+ * @Date: 2022-07-26 10:23:43
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-07-26 11:53:00
+ * @FilePath: /bkunyun/src/components/mui/MyTable/interface.ts
+ * @Description: 这是默认设置,请设置`customMade`,打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+export interface ITableProps {
+  /** 头部标题 */
+  headCells: any,
+  /** 表格数据 */
+  rows: any,
+  /** 是否显示底部 */
+  footer?: boolean,
+  elevation1?: any,
+  tableStyle?:React.CSSProperties,
+  /**  */
+  tableCellStyle?: string,
+  /** 内容样式 */
+  tableContainerStyle?:React.CSSProperties,
+  /** 是否固定头部 */
+  stickyHeader?: boolean,
+  /** 点击每行 */
+  onRowClick?: (val: any)=> void,
+  /** 默认选中行 */
+  defaultRow?: any,
+  /** 最小高度 */
+  minHeight?: string,
+  /** 底部border */
+  borderBottom?: string,
+  /** 每行双击事件  */
+  onDoubleClick?: any,
+  /** 是否loading */
+  load?: boolean,
+  /** table size */
+  size?: any,
+  /** 选中的checkbox数据 */
+  checkboxData?: any,
+  /** 每一页的行数  */
+  rowsPerPage?: number | string,
+  /** 初始选中数组 */
+  initSelected?: any,
+  /** page */
+  page?: number,
+  /** 翻页事件 newPage: 当前第几页，rowsPerPage： 一页多少数据 */
+  changePage?: (newPage: number, rowsPerPage: number)=> void,
+  /** 页面前置条 */
+  toolbar?: any,
+  count?: number,
+  /** 唯一参数key 默认为id */
+  param?: string,
+  /** 禁止的唯一参数key */
+  disabledParam?: string,
+  /** 每行的checkbox class类名 */
+  headTableCellCheckbox?: any,
+  /** 每格数据高度 */
+  RowHeight?: string,
+  /** 每格数据宽度 */
+  CellWidth?: string,
+  rowHover?: boolean,
+  /** 无数据padding */
+  TableNodataPadding?: string,
+  /** 无数据行高 */
+  TableNodataLineHeight?: string,
+  /** table body样式 */
+  tableBodySx?: any,
+  /** 单选事件 row: 选中的数据 */
+  radioClick?: (row: any)=> void;
+  /** ref实例 */
+  onRef?: any;
+  /** 手型 */
+  cursor?: string
+}
\ No newline at end of file

src/components/mui/MyTable/utils.ts

+import { makeStyles } from "@mui/styles";
+
+/*
+ *@分割线=======================================================================================================================================
+ *@Description: 排序算法
+ *@File:
+ *@param: {} []
+ *@MethodAuthor:  dawei.liu
+ *@Date: 2021-07-22 14:42:51
+ */
+export function descendingComparator(a: any, b: any, orderBy: any) {
+  if (b[orderBy] < a[orderBy]) return -1;
+  if (b[orderBy] > a[orderBy]) return 1;
+  return 0;
+}
+/*
+ *@分割线=======================================================================================================================================
+ *@Description: 表格排序
+ *@File: /commons/components/Material.Ui/Table.jsx
+ *@param: {} []
+ *@MethodAuthor:  dawei.liu
+ *@Date: 2021-07-22 14:42:36
+ */
+export function getComparator(order: any, orderBy: any) {
+  return order === "desc"
+    ? (a: any, b: any) => descendingComparator(a, b, orderBy)
+    : (a: any, b: any) => -descendingComparator(a, b, orderBy);
+}
+/*
+ *@分割线=======================================================================================================================================
+ *@Description: 排序算法
+ *@File:
+ *@param: {} []
+ *@MethodAuthor:  dawei.liu
+ *@Date: 2021-07-22 14:42:24
+ */
+export function stableSort(array: any, comparator: any) {
+  const stabilizedThis = array.map((el: any, index: number) => [el, index]);
+  stabilizedThis.sort((a: any, b: any) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) return order;
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map((el: any) => el[0]);
+}
+/*
+ *@分割线=======================================================================================================================================
+ *@Description: table toolbar styles
+ *@File: EnhancedTableToolbar
+ *@param: {} []
+ *@MethodAuthor:  dawei.liu
+ *@Date: 2021-07-22 14:41:53
+ */
+export const useToolbarStyles = makeStyles((theme: any) => ({
+  root: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(1),
+  },
+  highlight:
+    theme.palette.type === "light"
+      ? {
+          color: theme.palette.primary.main,
+          backgroundColor: "red",
+        }
+      : {
+          color: theme.palette.text.primary,
+          backgroundColor: theme.palette.primary.dark,
+        },
+  title: { flex: "1 1 100%" },
+}));
+/*
+ *@分割线=======================================================================================================================================
+ *@Description: 样式
+ *@File:
+ *@param: {theme} [theme]
+ *@MethodAuthor:  dawei.liu
+ *@Date: 2021-07-22 14:40:37
+ */
+export const useStyles = makeStyles((theme) => ({
+  root: { width: "100%", position: "relative" },
+  paper: { width: "100%", marginBottom: 8 },
+  elevation1: { boxShadow: "none", padding: "20px" },
+  elevationNoPadding: { boxShadow: "none", padding: "0" },
+  table: { minWidth: 500 },
+  visuallyHidden: {
+    border: 0,
+    clip: "rect(0 0 0 0)",
+    height: 1,
+    margin: -1,
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    top: 20,
+    width: 1,
+  },
+  LinearProgressStyle: {
+    position: "absolute",
+    left: 0,
+    top: "0",
+    width: "100%",
+  },
+  TypographyStyle: {
+    height: "300px",
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    color: "#666",
+    fontSize: "16px",
+    textAlign: "center",
+  },
+  bodyTableCell: {
+    color: "#222222",
+    fontSize: "12px",
+    borderBottom: "1px solid rgba(34, 34, 34, 0.08)",
+    padding: "10px",
+    paddingLeft: "16px",
+  },
+  headTableCell: {
+    color: "rgba(34, 34, 34, 0.65)",
+    fontSize: "12px",
+    padding: "16px",
+  },
+  rootTableContainer: {
+    position: "relative",
+    overflowX: "auto",
+    maxHeight: "700px",
+  },
+  TableHeadClasses: { backgroundColor: "rgba(34, 34, 34,  0.03)" },
+  bodyTableCellRoot: { borderBottom: "1px solid rgba(34, 34, 34, 0.08)" },
+  TypographyboderStyle: {
+    height: "300px",
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    color: "#666",
+    fontSize: "16px",
+    textAlign: "center",
+    borderBottom: "none",
+  },
+  rootTableboderContainer: {
+    position: "relative",
+    overflowX: "auto",
+    maxHeight: "700px",
+    border: "1px solid rgb(216, 216, 216)",
+  },
+  cancelHoverStyle: { "&:hover": { background: "none !important" } },
+}));

src/views/Project/ProjectData/UpLoaderFile/index.tsx

@@ -6,7 +6,7 @@ import { Button } from "@mui/material";
 import { uuid } from "@/utils/util";
 import { useMessage } from "@/components/MySnackbar";
 import { useDropzone } from "react-dropzone";
-import Table from "@/components/Material.Ui/Table";
+import MyTable from "@/components/mui/MyTable";
 import fileIcon from "@/assets/project/fileIcon.svg";
 import noFile from "@/assets/project/noFile.svg";
 import uploaderIcon from "@/assets/project/uploaderIcon.svg";
@@ -225,9 +225,9 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
 						</span>
 					</div>
 					<div className={style.tableBox}>
-						<Table
+						<MyTable
 							rowHover={true}
-							stickyheader={true}
+							stickyHeader={true}
 							rows={fileList.map((item: any, index: number) => ({
 								...item,
 								name: renderName(item),
@@ -236,21 +236,20 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
 							}))}
 							rowsPerPage={"99"}
 							headCells={fileListHeadCells}
-							nopadding={true}
 							footer={false}
-							headTableCellStyle={{
-								fontSize: "12px",
-								lineHeight: "20px",
-								color: "#8A9099",
-							}}
-							tableBoySx={{
+							// headTableCellStyle={{
+							// 	fontSize: "12px",
+							// 	lineHeight: "20px",
+							// 	color: "#8A9099",
+							// }}
+							tableBodySx={{
 								backgroundColor:
 									fileList.length >= 10 ? "rgba(255, 0, 0, 0.6)" : "",
 							}}
 							tableContainerStyle={{
 								maxHeight: "300px",
 							}}
-						></Table>
+						/>
 					</div>
 					{fileList.length === 0 && (
 						<div className={style.noFile}>

src/views/Project/ProjectData/index.tsx

@@ -5,7 +5,7 @@ import { Button, InputBase, IconButton } from "@mui/material";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import SearchIcon from "@mui/icons-material/Search";
 import RefreshIcon from "@mui/icons-material/Refresh";
-import Table from "@/components/Material.Ui/Table";
+import MyTable from "@/components/mui/MyTable";
 import dataSetIcon from "@/assets/project/dataSetIcon.svg";
 import fileIcon from "@/assets/project/fileIcon.svg";
 import folderIcon from "@/assets/project/folderIcon.svg";
@@ -609,12 +609,11 @@ const ProjectData = observer(() => {
 								</div>
 							</div>
 						</div>
-						<Table
+						<MyTable
 							footer={false}
 							rowHover={true}
 							onRef={tableRef}
-							nopadding={true}
-							stickyheader={true}
+							stickyHeader={true}
 							initSelected={selectIds}
 							headCells={versionsHeadCells}
 							rowsPerPage={"99"}
@@ -629,7 +628,7 @@ const ProjectData = observer(() => {
 								mtime: renderMtime(item),
 								caozuo: renderButtons(item),
 							}))}
-						></Table>
+						/>
 						{showList.length === 0 && (
 							<div className={style.noDataBox}>
 								<img className={style.noDataImg} src={noFile} alt="" />

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

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-21 11:25:07
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-07-26 11:13:10
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -10,7 +10,6 @@ import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import _ from "lodash";
 
-import Table from "@/components/Material.Ui/Table";
 import Dialog from "@/components/mui/MyDialog";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { Box, OutlinedInput } from "@mui/material";
@@ -19,6 +18,7 @@ import { IResponse, useHttp } from "@/api/http";
 import { useStores } from "@/store";
 import { useMessage } from "@/components/MySnackbar";
 import MySelect, { IOption } from "@/components/mui/MySelect";
+import MyTable from "@/components/mui/MyTable";
 interface IProps {
 	setAddMemberDialog: (val: boolean) => void;
 	addMemberDialog: boolean;
@@ -172,12 +172,12 @@ const AddMember = observer((props: IProps) => {
 						/>
 					</Box>
 					<div style={{ overflowY: "scroll", maxHeight: 400 }}>
-						<Table
+						<MyTable
 							checkboxData={(val: string[]) => setCheckData(val)}
 							param="username"
-							disabledparam={"enabled"}
+							disabledParam={"enabled"}
 							rowHover={true}
-							stickyheader={true}
+							stickyHeader={true}
 							rows={filterTableData}
 							rowsPerPage="99"
 							headCells={columns}

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

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-07 18:08:33
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-07-26 12:00:56
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @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 Button from "@mui/material/Button";
 import SearchIcon from "@mui/icons-material/Search";
 import Add from "@mui/icons-material/Add";
-import Table from "@/components/Material.Ui/Table";
+import { toJS } from "mobx";
+import { observer } from "mobx-react";
+
+import MyTable from "@/components/mui/MyTable";
 import { IResponse, useHttp } from "@/api/http";
 import RemoveItem from "./components/RemoveItem";
 import ChangePermission from "./components/ChangePermission";
 import AddMember from "./components/AddMember";
-
-import styles from "./index.module.css";
 import { IDialogInfo } from "./interface";
-import { toJS } from "mobx";
 import { useStores } from "@/store";
-import { observer } from "mobx-react";
+
+import styles from "./index.module.css";
 
 const ProjectMembers = observer(() => {
 	const http = useHttp();
@@ -168,13 +168,12 @@ const ProjectMembers = observer(() => {
 					</Button>
 				) : null}
 			</Box>
-			<Table
+			<MyTable
 				rowHover={true}
-				stickyheader={true}
+				stickyHeader={true}
 				rows={filterTableData}
 				rowsPerPage={"99"}
 				headCells={columns}
-				nopadding={true}
 				footer={false}
 				tableStyle={{ minWidth: "auto" }}
 				borderBottom={"none"}

src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx

@@ -359,7 +359,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 									onBlur={() => setSelectedBatchNodeId("")}
 									error={parameter.error || false}
 									helperText={parameter.helperText}
-								></MyCheckBox>
+								/>
 							)}
 							{parameter.description && (
 								<MyTooltip title={parameter.description} placement="top">