Skip to content

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

feat: 设置默认参数组

parent 79389fd7
Hide whitespace changes
Inline Side-by-side
Showing with 448 additions and 120 deletions
src/components/BusinessComponents/FileSelect/index.module.css
View file @ cb555a05
.FSBox {
width: 900px;
position: relative;
}
.FSTop {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.showPathSpan {
cursor: pointer;
line-height: 22px;
font-size: 14px;
color: #1e2633;
}
.showPathI {
margin: 0 10px;
line-height: 22px;
font-size: 20px;
color: #c2c6cc;
cursor: default;
}
.showPathSpan:hover {
color: #1370ff;
}
.showPathSpanActive {
color: #1370ff;
}
.noDataBox {
background-color: #fff;
height: calc(100vh - 377px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
top: -53px;
}
.noDataText {
margin-top: 8px;
font-size: 14px;
line-height: 22px;
color: #8a9099;
}
src/components/BusinessComponents/FileSelect/index.tsx
View file @ cb555a05
const FileSelect = () => { import React, { useState, useCallback, useEffect, useMemo } from "react";
return <div>FileSelect</div>; import style from "./index.module.css";
import MyDialog from "../../mui/Dialog";
import { useStores } from "@/store";
import { observer } from "mobx-react-lite";
import { toJS } from "mobx";
import CloudEController from "@/api/fileserver/CloudEController";
import MyTreeView from "@/components/mui/MyTreeView";
import classNames from "classnames";
import bigFolderIcon from "@/assets/project/bigFolderIcon.svg";
import Table from "@/components/Material.Ui/Table";
import noFile from "@/assets/project/noFile.svg";
import folderIcon from "@/assets/project/folderIcon.svg";
import SearchIcon from "@mui/icons-material/Search";
import dataSetIcon from "@/assets/project/dataSetIcon.svg";
import fileIcon from "@/assets/project/fileIcon.svg";
import OutlinedInput from "@mui/material/OutlinedInput";
import useMyRequest from "@/hooks/useMyRequest";
import { getDataFind } from "@/api/project_api";
import { storageUnitFromB } from "@/utils/util";
import classnames from "classnames";
import _ from "lodash";
import moment from "moment";
type FileSelectProps = {
open: boolean;
onConfirm: any;
onClose: any;
type?: "file" | "dataset" | "path"; // file 文件选择 dataset数据集选择 path文件夹选择
}; };
const FileSelect = observer((props: FileSelectProps) => {
const { onConfirm, type = "path" } = props;
const { currentProjectStore } = useStores();
const projectId = toJS(currentProjectStore.currentProjectInfo.id);
const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
const [path, setPath] = useState<String>("/");
// 防止用户连续点击文件夹造成路径显示错误
const [debounce, setDebounce] = useState(false);
// 文件夹、文件列表
const [list, setList] = useState<any>([]);
// 数据集列表 不带文件
const [dataSetList, setDataSetList] = useState<any>([]);
const [keyWord, setKeyWord] = useState("");
const fileSelectOnConfirm = () => {
onConfirm(path);
};
// 搜索值改变
const handleKeyWordChange = (e: any) => {
if (e.target.value.length > 30) {
return;
}
setKeyWord(e.target.value);
};
// 按回车搜索
const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
// searchFileList();
// getDataSetListSearch();
}
};
// 文件夹下钻
const handleViewFolders = (item: any) => {
if (debounce) {
return;
} else {
setDebounce(true);
if (path === "/") {
setPath(`/${item.name}`);
} else {
setPath(`${path}/${item.name}`);
}
}
};
// table配置
const renderName = (item: any) => {
if (item.type === "directory") {
return (
<span
className={classnames({
[style.folderIconBox]: true,
[style.folderPointer]: true,
})}
onClick={() => handleViewFolders(item)}
>
<img className={style.folderIcon} src={folderIcon} alt="" />
{item.name}
</span>
);
} else if (item.type === "dataSet") {
return (
<span className={style.folderIconBox}>
<img className={style.folderIcon} src={dataSetIcon} alt="" />
{item.name}
</span>
);
} else {
return (
<span className={style.folderIconBox}>
<img className={style.folderIcon} src={fileIcon} alt="" />
{item.name}
</span>
);
}
};
// table配置
const renderSize = (item: any) => {
if (item.type === "dataSet") {
return `${item.size}条`;
}
return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
};
// table配置
const renderMtime = (item: any) => {
return String(moment(item.mtime).format("YYYY-MM-DD HH:mm:ss"));
};
// table配置
const versionsHeadCells = [
{ id: "name", numeric: false, label: "名称", width: "30%" },
{ id: "size", numeric: false, label: "大小", width: "20%", sort: true },
{
id: "mtime",
numeric: false,
label: "创建时间",
width: "30%",
sort: true,
},
];
// 列表展示的数据
const showList = useMemo(() => {
return [...list, ...dataSetList];
}, [list, dataSetList]);
// 前端展示的文件路径
const showPath = useMemo(() => {
if (path === "/") {
return <span className={style.showPathSpan}>ProjectData</span>;
} else {
const pathArr = path.split("/");
if (pathArr.length <= 4) {
return pathArr.map((item, index) => {
return (
<span
key={index}
onClick={() =>
setPath(
pathArr.slice(0, index + 1).join("/") === ""
? "/"
: pathArr.slice(0, index + 1).join("/")
)
}
className={classnames({
[style.showPathSpan]: true,
[style.showPathSpanActive]: index === pathArr.length - 1,
})}
>
{index === 0 ? "ProjectData" : item}{" "}
{index === pathArr.length - 1 ? null : (
<i className={style.showPathI}>{">"}</i>
)}
</span>
);
});
} else {
return pathArr.map((item, index) => {
return (
<span
key={index}
onClick={() => {
if (index === 1) {
return;
}
setPath(
pathArr.slice(0, index + 1).join("/") === ""
? "/"
: pathArr.slice(0, index + 1).join("/")
);
}}
className={classnames({
[style.showPathSpan]: true,
[style.showPathSpanActive]: index === pathArr.length - 1,
})}
>
{index === 0
? "ProjectData"
: index > pathArr.length - 4
? item
: ""}
{/* && index > pathArr.length - 4 */}
{index === pathArr.length - 1 ||
(index <= pathArr.length - 4 && index > 0) ? null : (
<i className={style.showPathI}>{">"}</i>
)}
{index === 1 && "..."}
{index === 1 && <i className={style.showPathI}>{">"}</i>}
</span>
);
});
}
}
}, [path]);
return (
<MyDialog
open={props.open}
onClose={props.onClose}
onConfirm={fileSelectOnConfirm}
title="文件选择器"
>
<div className={style.FSBox}>
<div className={style.FSTop}>
<div className={style.FSPath}>{showPath}</div>
<div className={style.FSKeyWord}>
<OutlinedInput
value={keyWord}
onChange={handleKeyWordChange}
placeholder="输入关键词搜索"
size="small"
sx={{ width: 240, height: 32 }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
onKeyUp={handleKeyWordChangeKeyUp}
/>
</div>
</div>
<Table
footer={false}
rowHover={true}
nopadding={true}
stickyheader={true}
headCells={versionsHeadCells}
rowsPerPage={"99"}
rows={showList.map((item: any, index: number) => ({
...item,
id: `name=${item.name}&index=${index}`,
name: renderName(item),
size: renderSize(item),
mtime: renderMtime(item),
}))}
></Table>
{showList.length === 0 && (
<div className={style.noDataBox}>
<img className={style.noDataImg} src={noFile} alt="" />
<span className={style.noDataText}>暂未开启模板</span>
</div>
)}
</div>
</MyDialog>
);
});
export default FileSelect; export default FileSelect;
src/components/mui/Dialog.tsx
View file @ cb555a05
import React from "react"; import React from "react";
import { import {
Button, Button,
Dialog, Dialog,
DialogActions, DialogActions,
DialogContent, DialogContent,
DialogTitle, DialogTitle,
} from "@mui/material"; } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close"; import CloseIcon from "@mui/icons-material/Close";
export interface IDialogProps { export interface IDialogProps {
/** 自定义类名 */ /** 自定义类名 */
className?: string; className?: string;
/** 自定义样式 */ /** 自定义样式 */
style?: React.CSSProperties; style?: React.CSSProperties;
/** 弹窗的标题 */ /** 弹窗的标题 */
title?: string; title?: string;
/** 是否显示弹窗 */ /** 是否显示弹窗 */
open: boolean; open: boolean;
isHideHeader?: boolean; isHideHeader?: boolean;
/** 是否隐藏弹窗底部按钮部分 */ /** 是否隐藏弹窗底部按钮部分 */
isHideFooter?: boolean; isHideFooter?: boolean;
/** 自定义底部按钮 */ /** 自定义底部按钮 */
footerRender?: () => React.ReactNode; footerRender?: () => React.ReactNode;
/** 是否显示取消按钮 */ /** 是否显示取消按钮 */
showCancel?: boolean; showCancel?: boolean;
/** 是否显示确定按钮 */ /** 是否显示确定按钮 */
showConfirm?: boolean; showConfirm?: boolean;
/** 关闭弹窗时的回调函数 */ /** 关闭弹窗时的回调函数 */
onClose?: () => void; onClose?: () => void;
/** 点击确定按钮时的回调函数 */ /** 点击确定按钮时的回调函数 */
onConfirm?: () => void; onConfirm?: () => void;
/** 取消按钮文案 */ /** 取消按钮文案 */
cancelText?: string; cancelText?: string;
/** 确认按钮文案 */ /** 确认按钮文案 */
okText?: string; okText?: string;
/** 是否禁用确认按钮 */ /** 是否禁用确认按钮 */
disabledConfirm?: boolean; disabledConfirm?: boolean;
children: React.ReactNode; children: React.ReactNode;
/** 点击遮罩是否关闭 默认为false*/ /** 点击遮罩是否关闭 默认为false*/
clickMaskClose?: boolean; clickMaskClose?: boolean;
} }
const MyDialog: React.FunctionComponent<IDialogProps> = (props) => { const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
const { const {
title, title,
open, open,
style, style,
onClose, onClose,
onConfirm, onConfirm,
isHideFooter, isHideFooter,
isHideHeader, isHideHeader,
children, children,
footerRender, footerRender,
className, className,
showCancel = true, showCancel = true,
/** 是否显示确定按钮 */ /** 是否显示确定按钮 */
showConfirm = true, showConfirm = true,
cancelText, cancelText,
okText, okText,
disabledConfirm, disabledConfirm,
clickMaskClose = false, clickMaskClose = false,
} = props; } = props;
const handelClose = ( const handelClose = (
event: {}, event: {},
reason: "backdropClick" | "escapeKeyDown" reason: "backdropClick" | "escapeKeyDown"
) => { ) => {
if (reason === "backdropClick" && !clickMaskClose) { if (reason === "backdropClick" && !clickMaskClose) {
return; return;
} }
onClose && onClose(); onClose && onClose();
}; };
const Footer = () => { const Footer = () => {
if (isHideFooter) return null; if (isHideFooter) return null;
return footerRender ? ( return footerRender ? (
footerRender() footerRender()
) : ( ) : (
<DialogActions style={{ padding: "0 24px 24px 24px" }}> <DialogActions style={{ padding: "0 24px 24px 24px" }}>
{showCancel ? ( {showCancel ? (
<Button onClick={onClose} variant="outlined" size="small"> <Button onClick={onClose} variant="outlined" size="small">
{cancelText || "取消"} {cancelText || "取消"}
</Button> </Button>
) : null} ) : null}
{showConfirm ? ( {showConfirm ? (
<Button <Button
onClick={onConfirm} onClick={onConfirm}
variant="contained" variant="contained"
size="small" size="small"
disabled={disabledConfirm} disabled={disabledConfirm}
> >
{okText || "确定"} {okText || "确定"}
</Button> </Button>
) : null} ) : null}
</DialogActions> </DialogActions>
); );
}; };
return ( return (
<Dialog <Dialog
open={open} open={open}
onClose={handelClose} onClose={handelClose}
style={style} style={style}
className={className} className={className}
aria-labelledby="alert-dialog-title" aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description" aria-describedby="alert-dialog-description"
> sx={{
{isHideHeader ? null : ( "& .MuiDialog-container": {
<DialogTitle id="alert-dialog-title"> "& .MuiPaper-root": {
<div // 设置最大宽度， 实际宽度让子元素撑大
style={{ maxWidth: "1920px",
display: "flex", },
justifyContent: "space-between", },
alignItems: "center", }}
}} >
> {isHideHeader ? null : (
<span>{title}</span> <DialogTitle id="alert-dialog-title">
<CloseIcon <div
onClick={onClose} style={{
style={{ color: "#C2C6CC", cursor: "pointer" }} display: "flex",
/> justifyContent: "space-between",
</div> alignItems: "center",
</DialogTitle> }}
)} >
<DialogContent style={{ minWidth: 400 }}>{children}</DialogContent> <span>{title}</span>
{Footer()} <CloseIcon
</Dialog> onClick={onClose}
); style={{ color: "#C2C6CC", cursor: "pointer" }}
/>
</div>
</DialogTitle>
)}
<DialogContent style={{ minWidth: 400 }}>{children}</DialogContent>
{Footer()}
</Dialog>
);
}; };
export default MyDialog; export default MyDialog;
src/views/Project/ProjectData/index.tsx
View file @ cb555a05
...@@ -25,6 +25,7 @@ import NoProject from "@/components/NoProject"; ...@@ -25,6 +25,7 @@ import NoProject from "@/components/NoProject";
import usePass from "@/hooks/usePass"; import usePass from "@/hooks/usePass";
import { storageUnitFromB } from "@/utils/util"; import { storageUnitFromB } from "@/utils/util";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import FileSelect from "@/components/BusinessComponents/FileSelect";
import { getDataFind, getDataFileSearch } from "@/api/project_api"; import { getDataFind, getDataFileSearch } from "@/api/project_api";
const theme = createTheme({ const theme = createTheme({
...@@ -558,6 +559,14 @@ const ProjectData = observer(() => { ...@@ -558,6 +559,14 @@ const ProjectData = observer(() => {
} }
}, [path]); }, [path]);
const onConfirm = (e: string) => {
console.log("onConfirm", e);
};
const onClose = () => {
console.log("onClose");
};
if (currentProjectStore.currentProjectInfo.name) { if (currentProjectStore.currentProjectInfo.name) {
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
...@@ -740,6 +749,11 @@ const ProjectData = observer(() => { ...@@ -740,6 +749,11 @@ const ProjectData = observer(() => {
refresh={handleRefresh} refresh={handleRefresh}
showList={showList} showList={showList}
></MoveFile> ></MoveFile>
<FileSelect
open={true}
onConfirm={onConfirm}
onClose={onClose}
></FileSelect>
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
......
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ cb555a05
...@@ -617,7 +617,7 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -617,7 +617,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
} else if (hardwareParameters.length !== 0) { } else if (hardwareParameters.length !== 0) {
return "hardware"; return "hardware";
} else { } else {
return ""; return "basis";
} }
}, [basisParameters, seniorParameters, hardwareParameters]); }, [basisParameters, seniorParameters, hardwareParameters]);
......
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