Skip to content

B
bkunyun
Commit 14087e5c authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 完成上传文件样式和交互

parent 0b48bd60
Hide whitespace changes
Inline Side-by-side
Showing with 382 additions and 153 deletions
src/api/api_manager.ts
View file @ 14087e5c
......@@ -9,6 +9,7 @@ const RESTAPI = {
API_PROJECT_DELETE: `${BACKEND_API_URI_PREFIX}/cpp/project/delete`, //删除项目
API_PROJECT_GET: `${BACKEND_API_URI_PREFIX}/cpp/project/get`, //获取项目信息
API_CPCE_HPCZONE: `${BACKEND_API_URI_PREFIX}/cpp/cpce/hpczone`, //获取计算区列表
API_DATA_FILETOKEN: `${BACKEND_API_URI_PREFIX}/cpp/data/filetoken`, //获取项目目录的filetoken
};
export default RESTAPI;
src/api/api_prefix.ts
View file @ 14087e5c
......@@ -7,42 +7,34 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
// const AWSPREFIX = "/0xaws";
// const PRIVATIZATIONPREFIX = "/fileserver"
const PRIVATIZATIONPREFIX = "/fileserver";
// const PRIVATIZATION_API_URI_PREFIX = process.env.NODE_ENV === 'development' ? "http://123.57.131.31" : "";
let BACKEND_API_URI_PREFIX = "";
console.log('process.env.REACT_APP_ENV: ', process.env.REACT_APP_ENV)
console.log("process.env.REACT_APP_ENV: ", process.env.REACT_APP_ENV);
switch (process.env.REACT_APP_ENV) {
case "dev-cn":
BACKEND_API_URI_PREFIX = "http://47.57.4.97";
break;
case "dev-en":
BACKEND_API_URI_PREFIX = "http://47.75.109.159";
break;
case "release-cn":
BACKEND_API_URI_PREFIX = "http://47.75.104.171";
break;
case "release-en":
BACKEND_API_URI_PREFIX = "http://47.57.235.86";
break;
case "global":
BACKEND_API_URI_PREFIX = "https://www.cloudam.io";
break;
default:
if (['www.bkunyun.com'].includes(window.location.host)) {
BACKEND_API_URI_PREFIX = "https://www.bkunyun.com";
} else {
BACKEND_API_URI_PREFIX = "http://47.57.4.97";
}
break;
case "dev-cn":
BACKEND_API_URI_PREFIX = "http://47.57.4.97";
break;
case "dev-en":
BACKEND_API_URI_PREFIX = "http://47.75.109.159";
break;
case "release-cn":
BACKEND_API_URI_PREFIX = "http://47.75.104.171";
break;
case "release-en":
BACKEND_API_URI_PREFIX = "http://47.57.235.86";
break;
case "global":
BACKEND_API_URI_PREFIX = "https://www.cloudam.io";
break;
default:
if (["www.bkunyun.com"].includes(window.location.host)) {
BACKEND_API_URI_PREFIX = "https://www.bkunyun.com";
} else {
BACKEND_API_URI_PREFIX = "http://47.57.4.97";
}
break;
}
export { BACKEND_API_URI_PREFIX } // 导出放在11行后面，避免发布时被替换
export { BACKEND_API_URI_PREFIX, PRIVATIZATIONPREFIX }; // 导出放在11行后面，避免发布时被替换
src/api/project_api.ts
View file @ 14087e5c
......@@ -87,6 +87,18 @@ const deleteProject = (params: deleteProjectParams) => {
});
};
type getDataFileTokenParams = {
id: string;
};
// 获取项目目录的filetoken
const getDataFileToken = (params: getDataFileTokenParams) => {
return request({
url: Api.API_DATA_FILETOKEN,
method: "get",
params,
});
};
export {
current,
menu,
......@@ -96,4 +108,5 @@ export {
getProject,
updateProject,
deleteProject,
getDataFileToken,
};
src/api/raysyncApi.js 0 → 100644
View file @ 14087e5c
// const API = "https://fileserver.cloudam.cn:8091"
// const APIOPTION = "https://fileserver.cloudam.cn"
// const APIPORT = "39.105.230.38"
import { isPrivatization } from './helper.js'
import { Constants } from "./constants";
import { PRIVATIZATIONPREFIX } from "./api_prefix.js";
const API = function () {
return localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY) ? "https://" + JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).srcAddr + ":8091" : "";
}
const APIOPTION = function () {
if (isPrivatization) {
if (localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY) && JSON.parse(localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY))) {
let json = JSON.parse(localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY))
if (json['location'] && json['location'] === "ON_PREMISE") {
return JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).fileServerEndPoint
} else if (json['location'] && json['location'] === "CLOUDAM") {
return localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY) ? JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).fileServerEndPoint + PRIVATIZATIONPREFIX : "";
} else if (json['location'] && json['location'] === "CLOUD") {
return (window.location.host === "localhost:3000" ? "http://8.140.168.27" : window.location.origin) + PRIVATIZATIONPREFIX
}
return false
}
return false;
}
return localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY) && localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY) && JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).fileServerEndPoint ? JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).fileServerEndPoint : "";
}
const APIPORT = function () {
return localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY) ? JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).srcIp : "";
}
let currentRegion = localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY);
let currentRegionJson = currentRegion && JSON.parse(currentRegion);
let user = localStorage.getItem(Constants.USER_INFO_TOKEN_KEY) && JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY));
const FILEPATH = currentRegionJson && currentRegionJson.location && currentRegionJson.location === "ON_PREMISE" && localStorage.getItem(Constants.USER_INFO_TOKEN_KEY) ? `/home/${user.name}` : "/home/cloudam"
const FILEPATH_SHARE = "/share"
const APIJOBLOGPOINT = function () {
return localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY) ? JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).jobLogServerEndPoint : "";
}
const ZONEID = function (params) {
return localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY) ? JSON.parse(localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY))[params || "id"] : "";
}
const urlToken = function (root) {
let token = localStorage.getItem(Constants.TOKEN_KEY) && JSON.parse(localStorage.getItem(Constants.TOKEN_KEY)).access_token
let json = JSON.parse(localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY))
if (json['location'] && json['location'] === "ON_PREMISE") {
return "?username=" + JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['name'] + "&token=" + token + "&filetoken=" + encodeURIComponent(JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['onpremFileAccessToken']) + "&share=false";
}
if (root && root === "home") {
return "?username=" + JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['homeDirectoryMountPoint'] + "&token=" + token + "&filetoken=" + encodeURIComponent(JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['fileAccessToken']) + "&share=false";
}
if (localStorage.getItem(Constants.CURRENT_ISFILESYSTEM) && localStorage.getItem(Constants.CURRENT_ISFILESYSTEM) === "true") {
return "?username=" + JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['shareDirectoryMountPoint'] + "&token=" + token + "&filetoken=" + encodeURIComponent(JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['shareFileAccessToken']) + "&share=true";
} else {
return "?username=" + JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['homeDirectoryMountPoint'] + "&token=" + token + "&filetoken=" + encodeURIComponent(JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['fileAccessToken']) + "&share=false";
}
}
const getUuid = function () {
if (localStorage.getItem(Constants.CURRENT_ISFILESYSTEM) && localStorage.getItem(Constants.CURRENT_ISFILESYSTEM) === "true") {
return JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['shareDirectoryMountPoint'];
} else {
return JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['homeDirectoryMountPoint'];
}
}
const USERNAME = function () {
return JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['name']
}
const encryptTransfer = function () {
if (localStorage.getItem(Constants.USER_INFO_TOKEN_KEY) && JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))) {
let encryptTransfer = JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY)).encryptTransfer
if (encryptTransfer) {
return true;
}
return false;
}
return false;
}
const getType = function () {
if (localStorage.getItem(Constants.CURRENT_ISFILESYSTEM) && localStorage.getItem(Constants.CURRENT_ISFILESYSTEM) === "true") {
return "share";
} else {
return "data";
}
}
export { API, APIPORT, FILEPATH, FILEPATH_SHARE, APIOPTION, APIJOBLOGPOINT, ZONEID, urlToken, USERNAME, getUuid, encryptTransfer, getType }
\ No newline at end of file
src/components/Material.Ui/Table.jsx
View file @ 14087e5c
......@@ -20,8 +20,8 @@ export default function EnhancedTable(props) {
const classes = useStyles;
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState("");
const { headCells, rows, footer = true, elevation1, tableStyle,tablecellstyle, tableContainerStyle, stickyheader, TableHeadClasses, 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=''} = props;
const { headCells, rows, footer = true, elevation1, tableStyle, tablecellstyle, tableContainerStyle, stickyheader, TableHeadClasses, 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 = '', tableBoySx } = props;
const [selected, setSelected] = React.useState(initSelected || []);
const [rowsPerPageOptions, setRowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
// const [spin, setSpin] = React.useState(false)
......@@ -91,8 +91,8 @@ export default function EnhancedTable(props) {
return (
<div className={classes.root}>
<Paper sx={{
boxShadow: 'none'
}} className={classes.paper} classes={{ elevation1: elevation1 || classes.elevation1 }} >
boxShadow: 'none'
}} className={classes.paper} classes={{ elevation1: elevation1 || classes.elevation1 }} >
{/* <Spin spin={spin} /> */}
{toolbar && toolbar}
<TableContainer style={{ ...tableContainerStyle }}>
......@@ -109,7 +109,9 @@ export default function EnhancedTable(props) {
rowCount={rows.length}
headCells={headCells || []}
/>
<TableBody>
<TableBody sx={{
...tableBoySx
}}>
{
(rows.length === 0 && !load) && <TableRow>
<TableCell
......@@ -118,7 +120,7 @@ export default function EnhancedTable(props) {
}}
colSpan={headCells?.filter(k => k.id === "checkbox")?.length === 0 ? headCells?.length : headCells?.length + 1}
className={classes.TypographyStyle}
style={{ minHeight: minHeight, height: minHeight, borderBottom: borderBottom ,padding:TableNodataPadding,lineHeight:TableNodataLineHeight}}
style={{ minHeight: minHeight, height: minHeight, borderBottom: borderBottom, padding: TableNodataPadding, lineHeight: TableNodataLineHeight }}
>
No Data
</TableCell>
......@@ -129,13 +131,13 @@ export default function EnhancedTable(props) {
const labelId = `enhanced-table-checkbox-${index}`;
return (
<TableRow
hover={ rowHover ? false : (row[disabledparam || "enabled"] ? true : false)}
hover={rowHover ? false : (row[disabledparam || "enabled"] ? true : false)}
onDoubleClick={() => {
onDoubleClick && onDoubleClick(row)
}}
style={{
height:RowHeight,
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"),
......@@ -147,37 +149,37 @@ export default function EnhancedTable(props) {
selected={isItemSelected}
>
{
headCells.filter(k => 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 => k.id === "checkbox").length > 0 && handleClick(event, row[param || "id"])
}}
padding="checkbox">
headCells.filter(k => 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 => 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=>item.id !== 'checkbox').map((item, k) => {
headCells.filter(item => item.id !== 'checkbox').map((item, k) => {
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 }}
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: props.bodyTableCell || classes.bodyTableCell
}}
> {
item.render ? <>{item.render(row[item.id],row,index)}</> :
row[item.id]
}
item.render ? <>{item.render(row[item.id], row, index)}</> :
row[item.id]
}
</TableCell>
)
})
......
src/components/Material.Ui/Table/EnhancedTableHead.jsx
View file @ 14087e5c
......@@ -13,26 +13,26 @@ import PropTypes from "prop-types";
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 Typography from "@mui/material/Typography";
import Tooltip from '@mui/material/Tooltip';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
const EnhancedTableHead = (props) => {
const { classes, onSelectAllClick, order, orderBy, TableHeadClasses, numSelected, rowCount, onRequestSort, headCells, headTableCell, headTableCellCheckbox,RowStyle } = props;
const { classes, onSelectAllClick, order, orderBy, TableHeadClasses, numSelected, rowCount, onRequestSort, headCells, headTableCell, headTableCellCheckbox, RowStyle, headTableCellStyle } = props;
const createSortHandler = (property) => (event) => {
onRequestSort(event, property);
};
return (
<TableHead classes={{ root: TableHeadClasses || classes.TableHeadClasses }} sx={{
th:{
th: {
backgroundColor: '#F7F8FA',
}
}}>
<TableRow style={{...RowStyle}}>
<TableRow style={{ ...RowStyle }}>
{
headCells.filter(k => k.id === "checkbox").length > 0 && <TableCell sx={{
border: 'none'
}} padding="checkbox">
}} padding="checkbox">
<Checkbox
sx={{ color: '#D1D6DE' }}
color={'primary'}
......@@ -43,31 +43,32 @@ const EnhancedTableHead = (props) => {
/>
</TableCell>
}
{headCells.map((headCell,k) => (
<TableCell
sx={{
border: 'none'
}}
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>
{headCells.map((headCell, k) => (
<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>
......
src/components/mui/MyDialog.tsx
View file @ 14087e5c
......@@ -18,6 +18,8 @@ const MyDialog = (props: any) => {
handleSubmit,
submitloading,
submitStyle = { backgroundColor: "#1370FF" },
showCloseButton = true,
submitText = "确定",
} = props;
const handleClickOpen = () => {
......@@ -66,15 +68,17 @@ const MyDialog = (props: any) => {
</IconButton>
</DialogContent>
<DialogActions style={{ padding: "16px 24px" }}>
<Button
onClick={handleClose}
color="inherit"
variant="contained"
style={{ color: "#1E2633", backgroundColor: "#fff" }}
size="small"
>
取消
</Button>
{showCloseButton && (
<Button
onClick={handleClose}
color="inherit"
variant="contained"
style={{ color: "#1E2633", backgroundColor: "#fff" }}
size="small"
>
取消
</Button>
)}
<LoadingButton
loading={submitloading}
onClick={handleSubmit}
......@@ -83,7 +87,7 @@ const MyDialog = (props: any) => {
style={submitStyle}
size="small"
>
确认
{submitText}
</LoadingButton>
</DialogActions>
</Dialog>
......
src/react-app-env.d.ts
View file @ 14087e5c
......@@ -12,72 +12,72 @@
declare namespace NodeJS {
interface ProcessEnv {
readonly NODE_ENV: 'development' | 'production' | 'test';
readonly NODE_ENV: "development" | "production" | "test";
readonly PUBLIC_URL: string;
}
}
declare module '*.avif' {
declare module "*.avif" {
const src: string;
export default src;
}
declare module '*.bmp' {
declare module "*.bmp" {
const src: string;
export default src;
}
declare module '*.gif' {
declare module "*.gif" {
const src: string;
export default src;
}
declare module '*.jpg' {
declare module "*.jpg" {
const src: string;
export default src;
}
declare module '*.jpeg' {
declare module "*.jpeg" {
const src: string;
export default src;
}
declare module '*.png' {
declare module "*.png" {
const src: string;
export default src;
}
declare module '*.webp' {
const src: string;
export default src;
declare module "*.webp" {
const src: string;
export default src;
}
declare module '*.svg' {
import * as React from 'react';
declare module "*.svg" {
import * as React from "react";
export const ReactComponent: React.FunctionComponent<React.SVGProps<
SVGSVGElement
> & { title?: string }>;
export const ReactComponent: React.FunctionComponent<
React.SVGProps<SVGSVGElement> & { title?: string }
>;
const src: string;
export default src;
}
declare module '*.module.css' {
declare module "*.module.css" {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module '*.module.scss' {
declare module "*.module.scss" {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module '*.module.sass' {
declare module "*.module.sass" {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module '@mui/lab';
declare module 'lodash';
declare module "@mui/material/Tab"
declare module "@mui/lab";
declare module "lodash";
declare module "@mui/material/Tab";
src/utils/util.ts
View file @ 14087e5c
......@@ -21,3 +21,7 @@ const IsNumberLetterChineseReg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
export const checkIsNumberLetterChinese = (string: string) => {
return IsNumberLetterChineseReg.test(string);
};
export const getMbfromB = (b: number) => {
return Math.floor(b / 1048576);
};
src/views/Project/ProjectData/UpLoaderFolder/index.module.css → src/views/Project/ProjectData/UpLoaderFile/index.module.css
View file @ 14087e5c
......@@ -22,6 +22,9 @@
border: 1px dashed #d1d6de;
border-radius: 4px;
}
.dropBoxDragActive {
background-color: #f7f8fa;
}
.uploaderIcon {
width: 56px;
margin-bottom: 24px;
......@@ -37,20 +40,49 @@
font-size: 12px;
color: #8a9099;
}
.folderListBox {
.fileListBox {
width: 528px;
box-sizing: border-box;
position: relative;
}
.tableBox {
height: 300px;
overflow: scroll;
}
.folderIconBox {
.fileIconBox {
display: flex;
justify-content: flex-start;
align-items: center;
}
.folderIcon {
.noFile {
position: absolute;
top: 92px;
height: 200px;
width: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.noFileIcon {
width: 83px;
height: 70px;
height: auto;
margin-bottom: 6px;
}
.noFileText {
line-height: 18px;
font-size: 12px;
color: rgba(34, 34, 34, 0.45);
}
.fileIcon {
margin-right: 12px;
}
.red {
color: #ff4e4e;
}
src/views/Project/ProjectData/UpLoaderFolder/index.tsx → src/views/Project/ProjectData/UpLoaderFile/index.tsx
View file @ 14087e5c
......@@ -9,17 +9,46 @@ import { useMessage } from "@/components/MySnackbar";
import { useDropzone } from "react-dropzone";
import Table from "@/components/Material.Ui/Table";
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 { getMbfromB } from "@/utils/util";
const UpLoaderFolder = (props: any) => {
const [folderList, setFolderList] = useState([]);
const { path } = props;
const UpLoaderFile = (props: any) => {
const message = useMessage();
const [fileList, setFileList] = useState<any>([]);
// list 是项目数据table的数据
const { path, list } = props;
const onDrop = useCallback(
(acceptedFiles: any) => {
// 判断是否有文件名重复
const fileListRepeatName = getRepeatName(fileList, acceptedFiles);
const listRepeatName = getRepeatName(list, acceptedFiles);
if (fileListRepeatName || listRepeatName) {
message.error(`${fileListRepeatName || listRepeatName}文件已存在`);
return;
}
// 插入新的文件列表
const popLength = 10 - fileList.length;
let newFileList = [...acceptedFiles.slice(0, popLength), ...fileList];
setFileList(newFileList);
},
[fileList, list, message]
);
const getRepeatName = (fList: Array<any>, Alist: Array<any>) => {
let repeatName = "";
Alist.forEach((aItem) => {
fList.forEach((fItem: any) => {
if (fItem.name === aItem.name) {
repeatName = fItem.name;
}
});
});
return repeatName;
};
const onDrop = useCallback((acceptedFiles: any) => {
console.log(acceptedFiles);
setFolderList(acceptedFiles);
// Do something with the files
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
const submitloading = false;
......@@ -40,7 +69,7 @@ const UpLoaderFolder = (props: any) => {
};
});
const folderListHeadCells = [
const fileListHeadCells = [
{ id: "name", numeric: false, label: "名称", width: "60%" },
{ id: "size", numeric: false, label: "大小", width: "25%" },
{ id: "caozuo", numeric: false, label: "操作", width: "15%" },
......@@ -48,18 +77,25 @@ const UpLoaderFolder = (props: any) => {
const renderName = (item: any) => {
return (
<span className={style.folderIconBox}>
<img className={style.folderIcon} src={fileIcon} alt="" />
<span className={style.fileIconBox}>
<img className={style.fileIcon} src={fileIcon} alt="" />
{item.name}
</span>
);
};
// 1,048,576
const renderSize = (item: any) => {
return <span>{item.size ? `${item.size}b` : "-"}</span>;
return (
<span>{item.size ? `${getMbfromB(Number(item.size))}MB` : "-"}</span>
);
};
const renderButtons = (item: any) => {
const handleRowDelete = (index: number) => {
fileList.splice(index, 1);
setFileList([...fileList]);
};
const renderButtons = (item: any, index: number) => {
return (
<span>
<Button
......@@ -67,6 +103,7 @@ const UpLoaderFolder = (props: any) => {
variant="text"
size="small"
color="error"
onClick={() => handleRowDelete(index)}
>
删除
</Button>
......@@ -80,14 +117,23 @@ const UpLoaderFolder = (props: any) => {
onRef={dialogRef}
title="上传文件"
submitloading={submitloading}
submitText="开始上传"
showCloseButton={false}
>
<div className={style.uploderBox}>
<div className={style.uploderBoxLeft}>
<div className={style.dropTitle}>添加文件</div>
<div {...getRootProps()} className={style.dropBox}>
{/* <div {...getRootProps()} className={style.dropBox}> */}
<div
{...getRootProps()}
className={classnames({
[style.dropBox]: true,
[style.dropBoxDragActive]: isDragActive,
})}
>
{/* isDragActive */}
<input {...getInputProps()} multiple />
{/* <input {...getInputProps()} webkitdirectory="true" multiple /> */}
<img className={style.uploaderIcon} src={uploaderIcon} alt="" />
<div className={style.uploderText1}>
点击添加文件或将文件拖到此处添加
......@@ -95,30 +141,53 @@ const UpLoaderFolder = (props: any) => {
<div className={style.uploderText2}>一次最多添加10个文件</div>
</div>
</div>
<div className={style.folderListBox}>
<div className={style.fileListBox}>
<div className={style.dropTitle}>
已添加文件（{folderList.length}/10）
已添加文件
<span
className={classnames({
[style.red]: fileList.length >= 10,
})}
>
（{fileList.length}/10）
</span>
</div>
<div className={style.tableBox}>
<Table
rowHover={true}
stickyheader={true}
rows={folderList.map((item: any) => ({
rows={fileList.map((item: any, index: number) => ({
...item,
name: renderName(item),
size: renderSize(item),
caozuo: renderButtons(item),
caozuo: renderButtons(item, index),
}))}
rowsPerPage={"99"}
headCells={folderListHeadCells}
headCells={fileListHeadCells}
nopadding={true}
footer={false}
headTableCellStyle={{
fontSize: "12px",
lineHeight: "20px",
color: "#8A9099",
// padding: "12px 24px",
}}
tableBoySx={{
backgroundColor:
fileList.length >= 10 ? "rgba(255, 0, 0, 0.6)" : "",
}}
></Table>
</div>
{fileList.length === 0 && (
<div className={style.noFile}>
<img className={style.noFileIcon} src={noFile} alt="" />
<span className={style.noFileText}>暂无添加文件</span>
</div>
)}
</div>
</div>
</MyDialog>
);
};
export default UpLoaderFolder;
export default UpLoaderFile;
src/views/Project/ProjectData/index.tsx
View file @ 14087e5c
import React, { useState, useCallback } from "react";
import React, { useState, useCallback, useEffect } from "react";
import style from "./index.module.css";
import classnames from "classnames";
......@@ -13,10 +13,13 @@ import fileIcon from "@/assets/project/fileIcon.svg";
import folderIcon from "@/assets/project/folderIcon.svg";
import noFile from "@/assets/project/noFile.svg";
import MyDialog from "@/components/mui/MyDialog";
import { checkIsNumberLetterChinese } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar";
import { getDataFileToken } from "@/api/project_api";
import AddFolder from "./AddFolder";
import UpLoaderFolder from "./UpLoaderFolder";
import UpLoaderFile from "./UpLoaderFile";
import useMyRequest from "@/hooks/useMyRequest";
import { observer } from "mobx-react-lite";
import { useStores } from "@/store";
const theme = createTheme({
palette: {
......@@ -44,10 +47,25 @@ declare module "@mui/material/Button" {
}
}
const ProjectData = () => {
const ProjectData = observer(() => {
const { currentProjectStore } = useStores();
const [path, setPath] = useState("ProjectData");
const [activeTab, setActiveTab] = useState(1);
const [keyWord, setKeyWord] = useState("");
const [fileToken, setFileToken] = useState("");
const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
onSuccess: (res: any) => {
console.log("res", res);
setFileToken(res.data);
},
});
useEffect(() => {
getDataFileTokenRun({
id: currentProjectStore.currentProjectInfo.id as string,
});
}, [getDataFileTokenRun, currentProjectStore]);
const handleKeyWordChange = (e: any) => {
setKeyWord(e.target.value);
......@@ -139,9 +157,9 @@ const ProjectData = () => {
);
};
let uploaderFolderRef: any = React.createRef();
const hanleShowUploaderFolderDialog = () => {
uploaderFolderRef.current.showDialog();
let UpLoaderFileRef: any = React.createRef();
const hanleShowUpLoaderFileDialog = () => {
UpLoaderFileRef.current.showDialog();
};
let addFolderRef: any = React.createRef();
......@@ -163,7 +181,7 @@ const ProjectData = () => {
variant="contained"
size="small"
style={{ marginRight: "12px" }}
onClick={hanleShowUploaderFolderDialog}
onClick={hanleShowUpLoaderFileDialog}
>
上传文件
</Button>
......@@ -268,11 +286,15 @@ const ProjectData = () => {
</Button>
</div>
)}
<UpLoaderFolder onRef={uploaderFolderRef} path={path}></UpLoaderFolder>
<UpLoaderFile
onRef={UpLoaderFileRef}
path={path}
list={list}
></UpLoaderFile>
<AddFolder onRef={addFolderRef} list={list}></AddFolder>
</div>
</ThemeProvider>
);
};
});
export default ProjectData;
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