Commit 8fb30dd9 authored by wuyongsheng's avatar wuyongsheng

feat: MyTable组件替换

parent cef305a1
......@@ -21,8 +21,4 @@
font-size: 14px;
color: #8a9099;
margin-bottom: 24px;
}
.button {
background-color: #1370ff;
color: #fff;
}
}
\ No newline at end of file
/*
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-07-20 17:36:55
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-26 17:48:14
* @FilePath: /bkunyun/src/components/BusinessComponents/NoProject/NoProject.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import style from "./NoProject.module.css";
import noData from "@/assets/project/noData.svg";
import { Button } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import AddProject from "@/views/Project/components/AddProject";
import React, { useState } from "react";
import MyButton from "@/components/mui/MyButton";
const NoProject = () => {
// 新建弹窗显示控制
......@@ -14,16 +22,16 @@ const NoProject = () => {
<img src={noData} alt="" className={style.noDataImg} />
<div className={style.text1}>当前产品暂无项目</div>
<div className={style.text2}>请先创建项目</div>
<Button
<MyButton
text='创建项目'
variant="contained"
size="large"
className={style.button}
startIcon={<AddIcon />}
onClick={() => setAddOpen(true)}
style={{ backgroundColor: "#1370ff", color: "#fff" }}
>
创建项目
</Button>
/>
<AddProject addOpen={addOpen} setAddOpen={setAddOpen} />
</div>
);
......
......@@ -7,10 +7,14 @@ import {
Button,
ThemeProvider,
createTheme,
ExtendButtonBase,
ButtonTypeMap,
} from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
type ButtonTagProps = {
interface ButtonTagProps extends Omit<ExtendButtonBase<ButtonTypeMap<{}, "button">>, 'text'>{
startIcon?: React.ReactNode; /** 开始Icon */
endIcon?: React.ReactNode; /** 结束Icon */
text: string; //文本内容
variant?: "text" | "contained" | "outlined"; //按钮样式
onClick?: any; //点击事件
......@@ -18,7 +22,7 @@ type ButtonTagProps = {
fontSize?: string; //按钮文字大小
dropValue?: boolean; //选择的值
drop?: boolean; //是否开启选择
color?: "inherit" | "primary" | "secondary" | undefined; //按钮颜色风格
color?: "inherit" | "primary" | "secondary" | 'success' | 'error' | 'info' | 'warning'; //按钮颜色风格
size?: "large" | "medium" | "small"; //按钮尺寸
disabled?: boolean; //是否禁用
style?: any; //按钮自定义样式
......@@ -109,7 +113,7 @@ const theme = createTheme({
});
const ButtonComponent = (props: ButtonTagProps) => {
const { size, disabled, variant, color, img, select, selectCallBack } = props;
const { size, disabled, variant, color, img, select, selectCallBack, ...other } = props;
const { classes, cx } = useStyles({});
const [anchorEl, setAnchorEl] = React.useState(null);
......@@ -145,6 +149,7 @@ const ButtonComponent = (props: ButtonTagProps) => {
disabled={disabled || false}
style={{ ...props.style }}
onClick={props.select ? handleClick : props.onClick || defaultClick}
{...other}
>
{img || ""}
<Typography style={{ fontSize: props.fontSize }}>
......
import React from "react";
import {
Button,
Dialog,
DialogActions,
DialogContent,
......@@ -9,6 +8,8 @@ import {
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import MyButton from './MyButton'
export interface IDialogProps {
/** 自定义类名 */
className?: string;
......@@ -83,20 +84,17 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
) : (
<DialogActions style={{ padding: "0 24px 24px 24px" }}>
{showCancel ? (
<Button onClick={onClose} variant="outlined" size="small">
{cancelText || "取消"}
</Button>
<MyButton text={cancelText || "取消"} onClick={onClose} variant="outlined" size="small" />
) : null}
{showConfirm ? (
<Button
<MyButton
text={okText || "确定"}
onClick={onConfirm}
variant="contained"
size="small"
disabled={disabledConfirm}
sx={{ ...okSx }}
>
{okText || "确定"}
</Button>
style={{ ...okSx }}
/>
) : null}
</DialogActions>
);
......
......@@ -2,11 +2,11 @@
import * as React from "react";
import { ReactNode, useMemo } from "react";
import Box from "@mui/material/Box";
import ButtonComponent from "./MyButton";
import MyButton from "./MyButton";
import tipsIcon from "@/assets/project/information-outline.svg";
import Popper from "@mui/material/Popper";
type IMyPopconfirmProps = {
interface IMyPopconfirmProps {
title: string | ReactNode;
placement?:
| "auto-end"
......@@ -83,19 +83,20 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
</Box>
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
{showCancel && (
<ButtonComponent
<MyButton
text={cancelText}
variant='outlined'
size="small"
color="inherit"
onClick={handleCancel}
style={{ marginRight: "12px" }}
></ButtonComponent>
/>
)}
<ButtonComponent
<MyButton
text={okText}
size="small"
onClick={handleOk}
></ButtonComponent>
/>
</Box>
</Popper>
);
......
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-02 10:38:01
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-02 13:45:33
* @FilePath: /bkunyun/src/components/mui/Table.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import * as React from "react";
import MuiTable 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 { Box } from "@mui/material";
interface IColumns {
key: string;
title: string;
align?: "left" | "center" | "right";
render?: (value: any, index: number) => void;
}
interface IProps {
columns: IColumns[];
dataSource: any;
}
export default function Table(props: IProps) {
const { columns = [], dataSource = [] } = props;
return (
<TableContainer component={Paper}>
<MuiTable sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
{columns?.map((item: IColumns) => {
return (
<TableCell {...item} key={item.key}>
{item.title}
</TableCell>
);
})}
</TableRow>
</TableHead>
<TableBody>
{dataSource.length ? (
dataSource?.map(() => (
<TableRow
key={Math.random()}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
{columns?.map((item: IColumns, index: number) => {
if (item.render) {
return <>{item.render(item, index)}</>;
} else {
return (
<TableCell align="right" key={item.key}>
{item.title}
</TableCell>
);
}
})}
</TableRow>
))
) : (
<Box p={2}>暂无数据</Box>
)}
</TableBody>
</MuiTable>
</TableContainer>
);
}
......@@ -10,7 +10,7 @@ import uploadIcon from "@/assets/img/uploadIcon.svg";
import globalText from "@/utils/globalText_CN";
import useIndex from "./useIndex";
import { useStores } from "@/store/index";
import Button from "@/components/mui/MyButton";
import MyButton from "@/components/mui/MyButton";
import logo from "@/assets/img/logo.svg";
import MyPopover from "@/components/mui/MyPopover";
import TranSferList from "./components/TransferList";
......@@ -81,8 +81,7 @@ const ConsoleLayout = observer(() => {
<Box className={style.topApp}>
<Box className={style.topLeftBox}>
<img src={logo} alt="" className={style.logo} />
<Button
<MyButton
text={globalText.console}
variant={"text"}
style={{ color: "#565C66" }}
......@@ -90,7 +89,7 @@ const ConsoleLayout = observer(() => {
/>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Button
<MyButton
text={globalText.product}
variant={"text"}
style={{ color: "#565C66" }}
......
import React, { useState, useEffect } from "react";
import { TextField, Button } from "@mui/material";
import { TextField } from "@mui/material";
import MyDialog from "@/components/mui/MyDialog";
import { checkIsNumberLetterChinese } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar";
import CloudEController from "@/api/fileserver/CloudEController";
import usePass from "@/hooks/usePass";
import InputAdornment from "@mui/material/InputAdornment";
import MyButton from "@/components/mui/MyButton";
type IAddFolderProps = {
list: Array<any>;
......@@ -91,17 +92,16 @@ const AddFolder = (props: IAddFolderProps) => {
return (
<>
<Button
color="neutral"
<MyButton
text='新建文件夹'
variant="outlined"
size="small"
onClick={() => setDeleteDialogOpen(true)}
disabled={
selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", "USER")
}
>
新建文件夹
</Button>
/>
<MyDialog
open={deleteDialogOpen}
onClose={() => setDeleteDialogOpen(false)}
......
import React, { useState, useCallback, useMemo, useEffect } from "react";
import classnames from "classnames";
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { useDropzone } from "react-dropzone";
import style from "./index.module.css";
import MyDialog from "@/components/mui/MyDialog";
import { Button } from "@mui/material";
import { uuid } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar";
import { useDropzone } from "react-dropzone";
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";
import classnames from "classnames";
import { storageUnitFromB } from "@/utils/util";
import { observer } from "mobx-react";
import { useStores } from "@/store";
import { toJS } from "mobx";
import useGlobalStore from "@/hooks/useGlobalStore";
import { APIOPTION, urlToken } from "@/api/fileserver/raysyncApi";
import UseTusUpload from "@/utils/Upload/tusUpload";
import MyButton from "@/components/mui/MyButton";
type IMoveFileProps = {
uploaderDialogOpen: any;
......@@ -172,17 +172,14 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
const renderButtons = (item: any, index: number) => {
return (
<span>
<Button
sx={{ position: "relative", left: "-18px" }}
<MyButton
text='删除'
style={{ position: "relative", left: "-18px" }}
variant="text"
size="small"
color="error"
onClick={() => handleRowDelete(index)}
>
删除
</Button>
</span>
/>
);
};
......
import React, { useState, useCallback, useEffect, useMemo } from "react";
import style from "./index.module.css";
import classnames from "classnames";
import { Button, InputBase, IconButton } from "@mui/material";
import { 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";
......@@ -27,6 +27,7 @@ import { useLocation } from "react-router-dom";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import SeeDataset from "./SeeDataset";
import { getDataFind, getDataFileSearch } from "@/api/project_api";
import MyButton from "@/components/mui/MyButton";
const theme = createTheme({
palette: {
......@@ -389,8 +390,9 @@ const ProjectData = observer(() => {
return (
<span style={{ whiteSpace: "nowrap" }}>
{!isAllDirectory && (
<Button
sx={{
<MyButton
text='下载'
style={{
position: "relative",
left: "-4px",
minWidth: "10px",
......@@ -404,12 +406,12 @@ const ProjectData = observer(() => {
size="small"
disabled={selectIds.length > 0 || !isPass("PROJECT_DATA_DOWNLOAD")}
onClick={() => hanleDownloadFile(item)}
>
下载
</Button>
/>
)}
<Button
sx={{
<MyButton
text='移动至'
style={{
position: "relative",
left: "-4px",
minWidth: "10px",
......@@ -424,11 +426,11 @@ const ProjectData = observer(() => {
disabled={
selectIds.length > 0 || !isPass("PROJECT_DATA_MOVE", "USER")
}
>
移动至
</Button>
<Button
sx={{
/>
<MyButton
text='删除'
style={{
position: "relative",
left: "-4px",
minWidth: "10px",
......@@ -444,9 +446,7 @@ const ProjectData = observer(() => {
disabled={
selectIds.length > 0 || !isPass("PROJECT_DATA_DELETE", "USER")
}
>
删除
</Button>
/>
</span>
);
};
......@@ -539,8 +539,9 @@ const ProjectData = observer(() => {
<div className={style.projectDataHeader}>
<div className={style.projectDataButtonAndSearch}>
<div className={style.projectDataButtonBox}>
<Button
color="neutral"
<MyButton
text='上传文件'
// color="neutral"
variant="contained"
size="small"
style={{ marginRight: "12px" }}
......@@ -549,9 +550,8 @@ const ProjectData = observer(() => {
selectIds.length !== 0 ||
!isPass("PROJECT_DATA_UPLOAD", "USER")
}
>
上传文件
</Button>
/>
<AddFolder
selectIds={selectIds}
list={allList}
......@@ -638,7 +638,8 @@ const ProjectData = observer(() => {
</div>
{selectIds.length > 0 && (
<div className={style.projectDataStickyBox}>
<Button
<MyButton
text={`批量删除(${selectIds.length})`}
color="error"
variant="outlined"
size="small"
......@@ -648,11 +649,10 @@ const ProjectData = observer(() => {
setDeleteDialogOpen(true);
}}
disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
>
批量删除({selectIds.length}
</Button>
<Button
color="neutral"
/>
<MyButton
text={`批量移动(${selectIds.length})`}
// color="neutral"
variant="contained"
size="small"
style={{ marginRight: "24px" }}
......@@ -661,9 +661,9 @@ const ProjectData = observer(() => {
setDeleteDialogOpen(true);
}}
disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
>
批量移动({selectIds.length}
</Button>
/>
</div>
)}
{deleteDialogOpen && (
......
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-14 15:40:27
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-26 20:39:32
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -21,7 +21,7 @@ import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import InformationDisplay from "@/components/CommonComponents/InformationDisplay";
import classnames from "classnames";
import { Button, TextField } from "@mui/material";
import { TextField } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import InputAdornment from '@mui/material/InputAdornment';
import { useMessage } from "@/components/MySnackbar";
......@@ -33,7 +33,7 @@ import {
setFileServerEndPointLocalStorage,
getFiletokenAccordingToId,
} from "@/views/Project/project";
import MyInput from "@/components/mui/MyInput"
import MyButton from "@/components/mui/MyButton";
type zoneIdOption = {
id: string;
......@@ -416,18 +416,17 @@ const BaseInfo = observer(() => {
<div className={style.projectInfoListLiText}>
删除项目将删除其存储的数据和所有相关资源,并且已删除的项目无法恢复!请谨慎操作!
</div>
<Button
<MyButton
text='删除项目'
variant="contained"
className={style.updateButton}
onClick={() => setDialogOpen(true)}
style={{
backgroundColor: "#fff",
color: "#FF4E4E",
border: "1px solid #FF4E4E",
}}
>
删除项目
</Button>
color='error'
// style={{
// backgroundColor: "#fff",
// color: "#FF4E4E",
// border: "1px solid #FF4E4E",
// }}
/>
</div>
<MyDialog
open={dialogOpen}
......
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-26 12:00:56
* @LastEditTime: 2022-07-26 18:39:52
* @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 { 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 { toJS } from "mobx";
......@@ -23,6 +22,7 @@ import ChangePermission from "./components/ChangePermission";
import AddMember from "./components/AddMember";
import { IDialogInfo } from "./interface";
import { useStores } from "@/store";
import MyButton from "@/components/mui/MyButton";
import styles from "./index.module.css";
......@@ -157,15 +157,14 @@ const ProjectMembers = observer(() => {
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
{currentProjectStore?.currentProjectInfo?.projectRole === "OWNER" ? (
<Button
<MyButton
text='添加成员'
style={{ backgroundColor: "#1370FF " }}
variant="contained"
onClick={onAddMember}
startIcon={<Add />}
size="small"
>
添加成员
</Button>
/>
) : null}
</Box>
<MyTable
......
......@@ -5,7 +5,7 @@ import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
import { Box, Typography } from "@mui/material";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import SearchIcon from "@mui/icons-material/Search";
import Button from "@/components/mui/MyButton";
import MyButton from "@/components/mui/MyButton";
import OutlinedInput from "@mui/material/OutlinedInput";
import Checkbox from "@mui/material/Checkbox";
import useMyRequest from "@/hooks/useMyRequest";
......@@ -213,7 +213,7 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
radioOptions={radioOptions}
handleRadio={handleRadio}
></RadioGroupOfButtonStyle>
<Button
<MyButton
onClick={handleAddTemplate}
size={"small"}
style={{
......@@ -295,7 +295,7 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
<div className={style.templateLiDesc}>{item.description}</div>
{templateType !== "public" && (
<div className={style.templateLiEditBox}>
<Button
<MyButton
onClick={() => handleEditTemplate(item)}
size={"small"}
style={{
......
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from "../index.module.css";
import { Box, Typography } from "@mui/material";
import Button from "@/components/mui/MyButton";
import Dialog from "@/components/mui/MyDialog";
import MyButton from "@/components/mui/MyButton";
import OutlinedInput from "@mui/material/OutlinedInput";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import SearchIcon from "@mui/icons-material/Search";
......@@ -89,7 +88,7 @@ const AddTemplate = (props: any) => {
radioOptions={radioOptions}
handleRadio={handleRadio}
></RadioGroupOfButtonStyle>
<Button
<MyButton
onClick={addTemplateCallback}
size={"small"}
style={{
......
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-17 14:48:57
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-20 15:01:04
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-26 18:35:33
* @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { memo, useCallback } from "react";
import styles from "../index.module.css";
import { Box, Typography } from "@mui/material";
import Button from "@/components/mui/MyButton";
import MyButton from "@/components/mui/MyButton";
import usePass from "@/hooks/usePass";
import { useNavigate } from "react-router-dom";
......@@ -91,7 +91,7 @@ const TemplateBox = (props: any) => {
}}
>
{isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
<Button
<MyButton
size={"small"}
text={"删除模版"}
onClick={() => {
......@@ -101,7 +101,7 @@ const TemplateBox = (props: any) => {
/>
)}
{isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
<Button
<MyButton
size={"small"}
text={"使用模版"}
onClick={() => addTemplateBlock(info.id)}
......
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-20 15:01:29
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-26 18:34:46
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -14,7 +14,7 @@ import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import Add from "@mui/icons-material/Add";
import Button from "@/components/mui/MyButton";
import MyButton from "@/components/mui/MyButton";
import useMyRequest from "@/hooks/useMyRequest";
import TemplateBox from "./components/templateBox";
import SimpleDialog from "./components/simpleDialog";
......@@ -122,7 +122,7 @@ const ProjectMembers = observer(() => {
{templateList.length > 0 &&
isPass("PROJECT_WORKBENCH_FLOES_ADD", "MANAGER") && (
<Button
<MyButton
text={"添加工作流模版"}
img={<Add />}
onClick={addTemplateBlock}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment