Skip to content

B
bkunyun
Commit f1d577f4 authored by wuyongsheng's avatar wuyongsheng
Browse files
Options

Merge branch 'feat-20220705-customTemplate' into 'staging' 

Feat 20220705 custom template

See merge request !80
parents 9e55f10c 6997ea3f
Show whitespace changes
Inline Side-by-side
Showing with 612 additions and 213 deletions
src/api/project_api.ts
View file @ f1d577f4
......@@ -21,7 +21,7 @@ type projectListParams = {
};
// 查询当前用户可以看到的项目列表
const product = (params: projectListParams) => {
const getProjectList = (params: projectListParams) => {
return request({
url: Api.API_PROJECT_LIST,
method: "get",
......@@ -246,7 +246,7 @@ const getworkFlowTaskInfo = (params: { jobId: string; taskId: string }) => {
export {
current,
menu,
product,
getProjectList,
hpczone,
addProject,
getProject,
......
src/components/FileSelect/index.tsx
View file @ f1d577f4
......@@ -8,16 +8,23 @@ import MyTreeView from "@/components/mui/MyTreeView";
import classNames from "classnames";
import bigFolderIcon from "@/assets/project/bigFolderIcon.svg";
import folderIcon from "@/assets/project/folderIcon.svg";
import dataSetIcon from "@/assets/project/dataSetIcon.svg";
import fileIcon from "@/assets/project/fileIcon.svg";
import useMyRequest from "@/hooks/useMyRequest";
import { getDataFind } from "@/api/project_api";
import style from "./index.module.css";
import _ from "lodash";
type FileSelectProps = {
open: boolean;
onConfirm: any;
onClose: any;
type?: "file" | "dataset" | "path";
};
const FileSelect = observer((props: FileSelectProps) => {
const { onConfirm } = props;
const { onConfirm, type = "path" } = props;
// const { onConfirm, type = "dataset" } = props;
const { currentProjectStore } = useStores();
const projectId = toJS(currentProjectStore.currentProjectInfo.id);
const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
......@@ -25,6 +32,66 @@ const FileSelect = observer((props: FileSelectProps) => {
const [rootActive, setRootActive] = useState(true);
const [newPath, setNewPath] = useState("/");
// 获取某路径下的数据集
const { run: getDataFindRun } = useMyRequest(getDataFind, {
onSuccess: (res: any) => {
const dataSetList = res.data.map((item: any) => {
return {
...item,
type: "dataset",
dir: `/${item.path}`,
subdirs: "",
};
});
let treeDataArr = _.cloneDeep(treeData);
if (newPath === "/") {
treeDataArr = _.uniqWith([...treeDataArr, ...dataSetList], _.isEqual);
setTreeData(treeDataArr);
} else {
let pathArr: Array<any> = newPath.split("/");
pathArr.shift();
let reduceResult = pathArr.reduce((result, path) => {
if (Array.isArray(result)) {
result.forEach((item: any, index: number) => {
if (item.name === path) {
result = result[index];
}
});
} else if (Array.isArray(result.subdirs)) {
result.subdirs.forEach((item: any, index: number) => {
if (item.name === path) {
result = result.subdirs[index];
}
});
} else {
result = result.subdirs;
}
return result;
}, treeDataArr);
if (Array.isArray(reduceResult.subdirs)) {
reduceResult.subdirs = _.uniqWith(
[...reduceResult.subdirs, ...dataSetList],
_.isEqual
);
} else {
reduceResult.subdirs = dataSetList;
}
treeDataArr = _.uniqWith(treeDataArr, _.isEqual);
setTreeData(treeDataArr);
}
},
});
useEffect(() => {
if (type === "dataset") {
getDataFindRun({
projectId: projectId as string,
path: newPath === "/" ? "/" : `${newPath}/`,
});
}
}, [newPath, getDataFindRun, projectId, type]);
useEffect(() => {
if (fileToken && projectId) {
CloudEController.JobOutFileDirtree(
......@@ -38,15 +105,31 @@ const FileSelect = observer((props: FileSelectProps) => {
} else {
setTreeData([]);
}
if (type === "dataset") {
getDataFindRun({
projectId: projectId as string,
path: "/",
// path: path === "/" ? "/" : `${path}/`,
});
}
});
}
}, [projectId, fileToken]);
}, [projectId, fileToken, type, getDataFindRun]);
const renderLabel = (labelNmae: string) => {
// const renderLabel = (labelNmae: string) => {
const renderLabel = (node: any) => {
return (
<span className={style.treeLabel}>
{node.type === "directory" && (
<img className={style.labelFolderIcon} src={folderIcon} alt="" />
<span className={style.treeLabelText}>{labelNmae}</span>
)}
{node.type === "dataset" && (
<img className={style.labelFolderIcon} src={dataSetIcon} alt="" />
)}
{node.type !== "directory" && node.type !== "dataset" && (
<img className={style.labelFolderIcon} src={fileIcon} alt="" />
)}
<span className={style.treeLabelText}>{node.name}</span>
</span>
);
};
......@@ -75,6 +158,7 @@ const FileSelect = observer((props: FileSelectProps) => {
open={props.open}
onClose={props.onClose}
onConfirm={fileSelectOnConfirm}
title={type}
>
<div
className={classNames({
......
src/components/MyRouter/useMyRouter.ts
View file @ f1d577f4
import { useStores } from "@/store/index";
import { elements } from "@/router";
import { current } from "@/api/demo_api";
import { product } from "@/api/project_api";
import localStorageKey from "@/utils/localStorageKey";
import NotFound from "@/views/404";
import useMyRequest from "@/hooks/useMyRequest";
import { useEffect } from "react";
import { menu } from "@/api/routes_api";
import {
setFileServerEndPointLocalStorage,
getFiletokenAccordingToId,
} from "@/views/Project/project";
const useMyRouter = () => {
const { permissionStore, menuStore, currentProjectStore } = useStores();
const { permissionStore, menuStore } = useStores();
const userInfo = useMyRequest(current);
const menuInfo = useMyRequest(menu);
const productInfo = useMyRequest(product);
useEffect(() => {
userInfo.run();
menuInfo.run();
productInfo.run({
product: "CADD",
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
......@@ -47,24 +38,8 @@ const useMyRouter = () => {
permissionStore.initAllRoutes();
}
if (productInfo.res) {
let list = productInfo.data?.data;
if (list.length === 0) {
currentProjectStore.setProjectList([]);
currentProjectStore.changeProject({});
} else {
currentProjectStore.setProjectList(list);
currentProjectStore.changeProject(list[0]);
setFileServerEndPointLocalStorage(list[0].zoneId);
getFiletokenAccordingToId(list[0].id).then((res) => {
list[0].filetoken = res;
currentProjectStore.changeProject(list[0]);
});
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userInfo.data, menuInfo.data, productInfo.data]);
}, [userInfo.data, menuInfo.data]);
return permissionStore.allRoutes;
};
......
src/components/mui/MyCheckBox.tsx
View file @ f1d577f4
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-05 14:00:37
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 13:52:48
* @FilePath: /bkunyun/src/components/mui/MyCheckBox.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import * as React from "react";
import FormGroup from "@mui/material/FormGroup";
import FormGroup, { FormGroupProps } from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import FormControl from "@mui/material/FormControl";
import FormHelperText from '@mui/material/FormHelperText';
import _ from "lodash";
type IMyCheckBoxProps = {
interface IMyCheckBoxProps extends FormGroupProps{
value: Array<any>;
options: Array<ICheckBoxOption>;
onChange: any; // 直接返回选中项的数组
......@@ -62,7 +70,7 @@ export default function MyCheckBox(props: IMyCheckBoxProps) {
return (
<FormControl fullWidth variant={variant} error={error}>
<FormGroup row>
<FormGroup {...props} row>
{options.map((option) => {
return (
<FormControlLabel
......
src/components/mui/MyInput.tsx
View file @ f1d577f4
import TextField from "@mui/material/TextField";
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-05 14:00:37
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 11:45:10
* @FilePath: /bkunyun/src/components/mui/MyInput.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import TextField, { TextFieldProps } from "@mui/material/TextField";
type MyInputProps = {
interface MyInputProps extends Omit<TextFieldProps, "value"> {
value: any;
inputSx?: any;
onChange?: any;
......@@ -35,9 +43,9 @@ const MyInput = (props: MyInputProps) => {
return (
<TextField
{...props}
error={error}
helperText={helperText}
value={value}
sx={{ ...inputSx }}
id={id}
label={label}
......@@ -50,6 +58,7 @@ const MyInput = (props: MyInputProps) => {
InputProps={{
...InputProps,
}}
value={value}
/>
);
};
......
src/components/mui/MyPopconfirm.tsx
View file @ f1d577f4
import * as React from "react";
import { ReactNode } from "react";
import { ReactNode, useEffect } from "react";
import Box from "@mui/material/Box";
import ButtonComponent from "./Button";
import tipsIcon from "@/assets/project/information-outline.svg";
......@@ -28,7 +28,7 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
console.log(123);
event.nativeEvent.stopImmediatePropagation();
setAnchorEl(anchorEl ? null : event.currentTarget);
};
......@@ -45,6 +45,12 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
onConfirm && onConfirm();
};
useEffect(() => {
document.addEventListener("click", (e) => {
setAnchorEl(null);
});
}, []);
return (
<div>
<div aria-describedby={id} onClick={handleClick}>
......
src/components/mui/MyRadio.tsx
View file @ f1d577f4
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-05 14:00:37
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 13:49:25
* @FilePath: /bkunyun/src/components/mui/MyRadio.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import * as React from "react";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import RadioGroup, { RadioGroupProps } from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormHelperText from '@mui/material/FormHelperText';
type IMyRadioProps = {
interface IMyRadioProps extends RadioGroupProps {
value: any;
options: Array<ICheckBoxOption>;
onChange: any;
......@@ -42,6 +50,7 @@ export default function MyRadio(props: IMyRadioProps) {
return (
<FormControl fullWidth variant={variant} error={error}>
<RadioGroup
{...props}
row
aria-labelledby="demo-row-radio-buttons-group-label"
name="row-radio-buttons-group"
......
src/components/mui/MyTreeView.tsx
View file @ f1d577f4
......@@ -15,7 +15,7 @@ type MyTreeViewProps = {
onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
onNodeToggle?: (event: object, nodeIds: Array<any>) => void; // 点击某一项的回调
renderLabel?: (labelNmae: string) => React.ReactNode;
renderLabel?: (node: any) => React.ReactNode;
treeViewSx?: any;
defaultExpanded?: Array<string>;
idKey?: string;
......@@ -48,7 +48,7 @@ const MyTreeView = (props: MyTreeViewProps) => {
nodeId={String(
idFunc ? idFunc(nodes) : nodes.id || `${nodes.name}${index}`
)}
label={renderLabel === undefined ? nodes.name : renderLabel(nodes.name)}
label={renderLabel === undefined ? nodes.name : renderLabel(nodes)}
disabled={nodes?.disabled ? true : false}
>
{Array.isArray(nodes.subdirs)
......
src/components/mui/Tabs.tsx
View file @ f1d577f4
......@@ -2,17 +2,17 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-07 20:31:40
* @LastEditTime: 2022-07-04 20:18:17
* @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 } from "react";
import { isEqual } from "lodash";
import { useState, useMemo, useEffect } from "react";
import { useState } from "react";
import { Box } from "@mui/system";
import Tab from "@mui/material/Tab";
import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Typography } from '@mui/material';
import { Typography } from "@mui/material";
interface ITabList {
label: string;
......@@ -20,16 +20,18 @@ interface ITabList {
component: JSX.Element;
icon?: string;
iconed?: string;
hide?: boolean
hide?: boolean;
}
interface IProps {
tabList: ITabList[];
defaultValue?: string;
}
const Tabs = (props: IProps) => {
const { tabList } = props;
const [value, setValue] = useState(tabList.filter(e => !e.hide)[0].value);
const { tabList, defaultValue } = props;
const [value, setValue] = useState(defaultValue || tabList.filter(e => !e.hide)[0].value);
const onChange = (val: string) => {
setValue(val);
......@@ -38,14 +40,21 @@ const Tabs = (props: IProps) => {
const labelRender = (item: ITabList, key: number) => {
return (
<Box style={{ display: "flex", alignItems: "center" }}>
{
item.icon ? <img style={{ width: "14px", marginRight: "10px" }} src={value === item.value ? item.iconed : item.icon} alt="" />
: ""
}
<Typography sx={{ fontSize: "14px", fontWeight: '400' }} >{item.label}</Typography>
{item.icon ? (
<img
style={{ width: "14px", marginRight: "10px" }}
src={value === item.value ? item.iconed : item.icon}
alt=""
/>
) : (
""
)}
<Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
{item.label}
</Typography>
</Box>
)
}
);
};
return (
<TabContext value={value}>
......@@ -54,10 +63,9 @@ const Tabs = (props: IProps) => {
onChange={(e: any, val: string) => {
onChange(val);
}}
aria-label="lab API tabs example"
>
{tabList?.map((item, key) => {
if (item.hide) return ""
if (item.hide) return "";
return (
<Tab
key={key}
......
src/store/modules/currentProject.ts
View file @ f1d577f4
......@@ -11,22 +11,39 @@ type productInfo = {
id?: string;
name?: string;
};
const sessionStorageCurrentProjectInfo = JSON.parse(
sessionStorage.getItem("currentProjectInfo") || "{}"
);
const sessionStorageCurrentProductInfo = JSON.parse(
sessionStorage.getItem("currentProductInfo") || "{}"
);
const sessionStorageProjectList = JSON.parse(
sessionStorage.getItem("projectList") || "[]"
);
class currentProject {
constructor() {
makeAutoObservable(this);
}
// 选中的项目
currentProjectInfo: projectInfo = {};
currentProjectInfo: projectInfo = sessionStorageCurrentProjectInfo;
// 选中的产品下的项目列表
projectList: Array<projectInfo> = [];
projectList: Array<projectInfo> = sessionStorageProjectList;
// 选中的产品
currentProductInfo: productInfo = {};
currentProductInfo: productInfo = sessionStorageCurrentProductInfo;
setProjectList = (list: Array<projectInfo>) => {
this.projectList = list;
sessionStorage.setItem("projectList", JSON.stringify(list));
};
changeProject = (project: projectInfo) => {
this.currentProjectInfo = project;
sessionStorage.setItem("currentProjectInfo", JSON.stringify(project));
};
changeProductInfo = (productInfo: productInfo) => {
this.currentProductInfo = productInfo;
sessionStorage.setItem("currentProductInfo", JSON.stringify(productInfo));
};
}
......
src/views/ConsoleLayout/index.tsx
View file @ f1d577f4
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import cx from "classnames";
import { observer } from "mobx-react-lite";
......@@ -14,7 +14,12 @@ import Button from "@/components/mui/Button";
import logo from "@/assets/img/logo.svg";
import MyPopover from "@/components/mui/MyPopover";
import TranSferList from "./components/TransferList";
import { getProjectList } from "@/api/project_api";
import useMyRequest from "@/hooks/useMyRequest";
import {
setFileServerEndPointLocalStorage,
getFiletokenAccordingToId,
} from "@/views/Project/project";
import style from "./index.module.css";
const ConsoleLayout = observer(() => {
......@@ -28,6 +33,41 @@ const ConsoleLayout = observer(() => {
handleClose,
} = useIndex();
const [currentProduct, setCurrentProduct] = useState<{
path: string;
name: string;
}>();
const { currentProjectStore } = useStores();
const { run: runGetProjectList } = useMyRequest(getProjectList, {
onSuccess: (res) => {
let list = res.data;
if (list.length === 0) {
currentProjectStore.setProjectList([]);
currentProjectStore.changeProject({});
navigate(currentProduct?.path as string);
} else {
currentProjectStore.setProjectList(list);
currentProjectStore.changeProject(list[0]);
setFileServerEndPointLocalStorage(list[0].zoneId);
getFiletokenAccordingToId(list[0].id).then((res) => {
list[0].filetoken = res;
currentProjectStore.changeProject(list[0]);
});
navigate(currentProduct?.path as string);
}
},
});
// 切换产品
const getProduct = (item: any) => {
currentProjectStore.changeProductInfo({ id: item.name, name: item.name });
setCurrentProduct(item);
runGetProjectList({
product: item.name,
});
};
const navigate = useNavigate();
const location = useLocation();
const { permissionStore, menuStore } = useStores();
......@@ -86,7 +126,7 @@ const ConsoleLayout = observer(() => {
root: style.menuItemRoot,
}}
onClick={() => {
navigate(item.path);
getProduct(item);
handleClose();
}}
>
......
src/views/MenuLayout/index.module.css
View file @ f1d577f4
......@@ -13,8 +13,7 @@
.content {
flex: 1;
height: calc(100vh - 57px);
overflow: hidden;
/* ??????????? */
overflow: scroll;
}
.list {
/* background-color: red; */
......
src/views/MenuLayout/index.tsx
View file @ f1d577f4
......@@ -6,13 +6,21 @@ import style from "./index.module.css";
import { observer } from "mobx-react-lite";
import { useStores } from "@/store/index";
import classnames from "classnames";
import { toJS } from "mobx";
const MenuLayout = observer(() => {
const { permissionStore } = useStores();
const { permissionStore, currentProjectStore } = useStores();
let pathname = new URL(window.location.href).pathname;
const navigate = useNavigate();
const productInfo = toJS(currentProjectStore.currentProductInfo);
// 未选择产品时 直接跳转home页面
if (!productInfo.name) {
navigate("/home");
}
return (
<Box className={style.container}>
<Box className={style.aside}>
......
src/views/Project/ProjectData/MoveFile/index.tsx
View file @ f1d577f4
......@@ -301,11 +301,11 @@ const MoveFile = (props: any) => {
});
};
const renderLabel = (labelNmae: string) => {
const renderLabel = (node: any) => {
return (
<span className={style.treeLabel}>
<img className={style.labelFolderIcon} src={folderIcon} alt="" />
<span className={style.treeLabelText}>{labelNmae}</span>
<span className={style.treeLabelText}>{node.name}</span>
</span>
);
};
......
src/views/Project/ProjectData/index.tsx
View file @ f1d577f4
......@@ -453,7 +453,10 @@ const ProjectData = observer(() => {
// 下载文件
const hanleDownloadFile = (item: any) => {
const downloadPath = path === "/" ? "/" : `${path}/${item.name}`;
console.log(item);
const downloadPath =
path === "/" ? `/${item.name}` : `${path}/${item.name}`;
console.log(downloadPath);
CloudEController.JobFileDownload(
downloadPath,
fileToken as string,
......
src/views/Project/ProjectJobDetail/index.module.css
View file @ f1d577f4
......@@ -112,6 +112,10 @@
position: relative;
align-items: center;
}
.taskInfoValueClick {
cursor: pointer;
color: rgba(19, 112, 255, 1);
}
.taskInfoDownload {
color: rgba(19, 112, 255, 1);
cursor: pointer;
......@@ -170,7 +174,7 @@
color: rgba(19, 112, 255, 1);
}
.fullScreenBox{
.fullScreenBox {
position: absolute;
background-color: #fff;
cursor: pointer;
......@@ -179,6 +183,6 @@
bottom: 24px;
padding: 8px;
}
.fullScreenBox:hover{
.fullScreenBox:hover {
opacity: 0.6;
}
src/views/Project/ProjectJobDetail/index.tsx
View file @ f1d577f4
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-29 17:07:49
* @LastEditTime: 2022-07-06 11:01:44
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -34,6 +34,7 @@ import Flow from "../components/Flow";
import { cancelWorkflowJob, deleteWorkflowJob } from "@/api/workbench_api";
import { useMessage } from "@/components/MySnackbar";
import MyPopconfirm from "@/components/mui/MyPopconfirm";
import { storageUnitFromB } from "@/utils/util";
import styles from "./index.module.css";
......@@ -74,6 +75,8 @@ const ProjectSubmitWork = observer(() => {
/** 获取模版数据 */
const { run } = useMyRequest(fetchWorkFlowJob, {
pollingInterval:1000 * 60,
pollingWhenHidden:false,
onSuccess: (res: IResponse<ITaskInfo>) => {
getOutouts(res.data.outputs);
setWorkFlowJobInfo(res.data);
......@@ -82,6 +85,7 @@ const ProjectSubmitWork = observer(() => {
useEffect(() => {
const locationInfo: any = location?.state;
console.log(333)
run({
id: locationInfo.taskId,
});
......@@ -97,11 +101,23 @@ const ProjectSubmitWork = observer(() => {
path = path.slice(13);
if (path) {
navigate(`/product/cadd/projectData`, {
state: { pathName: "path" },
state: { pathName: path },
});
}
};
/** 返回事件 */
const onBack = useCallback(() => {
navigate('/product/cadd/projectWorkbench', {
state: {type: 'workbenchList'}
})
},[navigate])
const outputPathTransform = (path: string) => {
path = path.slice(13);
return `ProjectData${path}`;
};
const getOutouts = (outputs: any) => {
if (outputs) {
let result = Object.keys(outputs);
......@@ -169,7 +185,9 @@ const ProjectSubmitWork = observer(() => {
if (Array.isArray(res.data)) {
res.data.forEach((item1) => {
if (item1.name === item.path.slice(item.path.lastIndexOf("/") + 1)) {
randerOutputs[index].size = item1.size;
randerOutputs[index].size = `${
item1.size ? storageUnitFromB(Number(item1.size)) : "-"
}`;
setRanderOutputs([...randerOutputs]);
}
});
......@@ -184,7 +202,7 @@ const ProjectSubmitWork = observer(() => {
if (errorCode === 0) {
message.success("操作成功！");
}
navigate(-1);
onBack()
},
});
......@@ -195,7 +213,7 @@ const ProjectSubmitWork = observer(() => {
if (errorCode === 0) {
message.success("操作成功！");
}
navigate(-1);
onBack()
},
});
......@@ -259,7 +277,7 @@ const ProjectSubmitWork = observer(() => {
<div className={styles.swHeaderLeft}>
<IconButton
color="primary"
onClick={() => navigate(-1)}
onClick={onBack}
aria-label="upload picture"
component="span"
size="small"
......@@ -352,12 +370,17 @@ const ProjectSubmitWork = observer(() => {
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>输出路径</div>
<div
className={styles.taskInfoValue}
className={classNames({
[styles.taskInfoValue]: true,
[styles.taskInfoValueClick]: true,
})}
onClick={() =>
goToProjectData(workFlowJobInfo?.outputPath as string)
}
>
{workFlowJobInfo?.outputPath || "-"}
{workFlowJobInfo?.outputPath
? outputPathTransform(workFlowJobInfo?.outputPath)
: "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ f1d577f4
......@@ -21,10 +21,11 @@ type ConfigFormProps = {
templateConfigInfo?: ITemplateConfig;
setParameter: any;
onRef?: React.Ref<any>;
setSelectedNodeId: (val: string) => void;
};
const ConfigForm = (props: ConfigFormProps) => {
const { templateConfigInfo, setParameter } = props;
const { templateConfigInfo, setParameter,setSelectedNodeId } = props;
const [name, setName] = useState<string>(""); // 任务名称
const [nameHelp, setNameHelp] = useState({
......@@ -97,7 +98,13 @@ const ConfigForm = (props: ConfigFormProps) => {
const checkName = (name: string = "") => {
const reg = new RegExp(/^[a-zA-Z0-9\u4e00-\u9fa5-_]{3,30}$/);
if (reg.test(name)) {
if (!name) {
setNameHelp({
error: true,
helperText: "任务名称不能为空",
});
return true;
} else if (reg.test(name)) {
setNameHelp({
error: false,
helperText: "",
......@@ -141,7 +148,9 @@ const ConfigForm = (props: ConfigFormProps) => {
result.forEach((task) => {
let isCheck = true;
if (task.parameters.length > 0) {
task.parameters.forEach((parameter) => {
task.parameters
.filter((parameter) => parameter.hidden === false)
.forEach((parameter) => {
const { error } = getCheckResult(parameter, parameter.value);
if (error) {
isCheck = false;
......@@ -152,7 +161,9 @@ const ConfigForm = (props: ConfigFormProps) => {
if (task.flows.length > 0) {
task.flows.forEach((flow) => {
if (flow.parameters.length > 0) {
flow.parameters.forEach((parameter) => {
flow.parameters
.filter((parameter) => parameter.hidden === false)
.forEach((parameter) => {
const { error } = getCheckResult(parameter, parameter.value);
if (error) {
isCheck = false;
......@@ -175,7 +186,7 @@ const ConfigForm = (props: ConfigFormProps) => {
setParameter(e.target.value, taskId, parameterName);
};
const randerParameters = (parameters: Array<IParameter>, taskId: string) => {
const randerParameters = (parameters: Array<IParameter>, taskId: string, batchId?: string) => {
return parameters
.filter((parameter) => parameter.hidden === false)
.map((parameter, parameterIndex) => {
......@@ -198,6 +209,8 @@ const ConfigForm = (props: ConfigFormProps) => {
<div className={styles.parameterContent}>
{parameter.domType.toLowerCase() === "file" && (
<MyInput
onFocus={()=> setSelectedNodeId(batchId || '')}
onBlur={()=> setSelectedNodeId('')}
value={parameter.value || ""}
InputProps={{
endAdornment: (
......@@ -218,6 +231,8 @@ const ConfigForm = (props: ConfigFormProps) => {
)}
{parameter.domType.toLowerCase() === "path" && (
<MyInput
onFocus={()=> setSelectedNodeId(batchId || '')}
onBlur={()=> setSelectedNodeId('')}
value={parameter.value || ""}
InputProps={{
endAdornment: (
......@@ -238,6 +253,8 @@ const ConfigForm = (props: ConfigFormProps) => {
)}
{parameter.domType.toLowerCase() === "dataset" && (
<MyInput
onFocus={()=> setSelectedNodeId(taskId)}
onBlur={()=> setSelectedNodeId('')}
value={parameter.value || ""}
InputProps={{
endAdornment: (
......@@ -258,7 +275,10 @@ const ConfigForm = (props: ConfigFormProps) => {
)}
{parameter.domType.toLowerCase() === "input" && (
<MyInput
value={parameter.value}
onFocus={()=> {setSelectedNodeId(batchId || ''); console.log(batchId,'111')}}
onBlur={()=> setSelectedNodeId('')}
value={parameter.value || ""}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
......@@ -269,6 +289,8 @@ const ConfigForm = (props: ConfigFormProps) => {
)}
{parameter.domType.toLowerCase() === "select" && (
<MySelect
onFocus={()=> setSelectedNodeId(batchId || '')}
onBlur={()=> setSelectedNodeId('')}
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
......@@ -280,6 +302,8 @@ const ConfigForm = (props: ConfigFormProps) => {
)}
{parameter.domType.toLowerCase() === "multipleselect" && (
<MySelect
onFocus={()=> setSelectedNodeId(batchId || '')}
onBlur={()=> setSelectedNodeId('')}
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
......@@ -296,6 +320,8 @@ const ConfigForm = (props: ConfigFormProps) => {
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
onFocus={()=> setSelectedNodeId(batchId || '')}
onBlur={()=> setSelectedNodeId('')}
options={optionsTransform(parameter.choices, "label")}
error={parameter.error || false}
helperText={parameter.helperText}
......@@ -316,6 +342,8 @@ const ConfigForm = (props: ConfigFormProps) => {
)
}
options={optionsTransform(parameter.choices, "label")}
onFocus={()=> setSelectedNodeId(batchId || '')}
onBlur={()=> setSelectedNodeId('')}
error={parameter.error || false}
helperText={parameter.helperText}
></MyCheckBox>
......@@ -417,7 +445,7 @@ const ConfigForm = (props: ConfigFormProps) => {
src={jobSueIcon}
alt=""
/>
<span className={styles.backgroundTitleText}>{task.title}</span>
<span id={`point${task.id}`} className={styles.backgroundTitleText}>{task.title}</span>
{task.description && (
<Tooltip title={task.description} placement="top">
<img className={styles.taskDescIcon} src={tipsIcon} alt="" />
......@@ -425,7 +453,7 @@ const ConfigForm = (props: ConfigFormProps) => {
)}
</div>
<div className={styles.taskConfigBox}>
{randerParameters(task.parameters, task.id)}
{randerParameters(task.parameters, task.id, task.id)}
{task.flows.map((flow) => {
return (
<div className={styles.flowConfigBox} key={flow.id}>
......@@ -441,7 +469,7 @@ const ConfigForm = (props: ConfigFormProps) => {
</Tooltip>
)}
</div>
{randerParameters(flow.parameters, flow.id)}
{randerParameters(flow.parameters, flow.id, flow.parentNode ? flow.parentNode : flow.id )}
</div>
);
})}
......@@ -449,11 +477,13 @@ const ConfigForm = (props: ConfigFormProps) => {
</div>
);
})}
{fileSelectOpen && <FileSelect
{fileSelectOpen && (
<FileSelect
onClose={handleFileSelectOnClose}
open={fileSelectOpen}
onConfirm={onFileSelectConfirm}
/>}
/>
)}
</div>
);
};
......
src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
View file @ f1d577f4
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 15:25:25
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-27 20:50:36
* @LastEditTime: 2022-07-06 11:55:41
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -11,10 +11,12 @@ import { ITemplateConfig } from "../interface";
interface IProps {
templateConfigInfo?: ITemplateConfig;
setSelectedNodeId?: (val:string) => void;
selectedNodeId?: string;
}
const WorkFlow = (props: IProps) => {
const { templateConfigInfo } = props;
return <Flow tasks={templateConfigInfo?.tasks} />;
const { templateConfigInfo,setSelectedNodeId, selectedNodeId } = props;
return <Flow tasks={templateConfigInfo?.tasks} setSelectedNodeId={setSelectedNodeId} selectedNodeId={selectedNodeId}/>;
};
export default WorkFlow;
src/views/Project/ProjectSubmitWork/index.module.css
View file @ f1d577f4
......@@ -60,3 +60,16 @@
flex: 1;
height: calc(100vh - 56px);
}
.fullScreenBox {
position: absolute;
background-color: #fff;
cursor: pointer;
z-index: 1000;
right: 24px;
bottom: 24px;
padding: 8px;
}
.fullScreenBox:hover {
opacity: 0.6;
}
\ No newline at end of file
src/views/Project/ProjectSubmitWork/index.tsx
View file @ f1d577f4
......@@ -2,30 +2,35 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-26 17:24:46
* @LastEditTime: 2022-07-06 11:55:03
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { toJS } from "mobx";
import React, { useEffect, useState } from "react";
import styles from "./index.module.css";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import IconButton from "@mui/material/IconButton";
import _ from "lodash";
import { useLocation, useNavigate } from "react-router-dom";
import moment from "moment";
import ConfigForm from "./ConfigForm";
import WorkFlow from "./WorkFlow";
import ButtonComponent from "@/components/mui/Button";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import IconButton from "@mui/material/IconButton";
import { ITemplateConfig } from "./interface";
import _ from "lodash";
import useMyRequest from "@/hooks/useMyRequest";
import { fetchTemplateConfigInfo, submitWorkFlow } from "@/api/project_api";
import { useLocation, useNavigate } from "react-router-dom";
import { getCheckResult } from "./util";
import { IResponse } from "@/api/http";
import { templateConfigJson } from "./mock";
import fullScreen from "@/assets/project/fullScreen.svg";
import partialScreen from "@/assets/project/partialScreen.svg";
import { useMessage } from "@/components/MySnackbar";
import { toJS } from "mobx";
import { useStores } from "@/store";
import MyPopconfirm from "@/components/mui/MyPopconfirm";
import styles from "./index.module.css";
const ProjectSubmitWork = () => {
const Message = useMessage();
const { currentProjectStore } = useStores();
......@@ -35,10 +40,15 @@ const ProjectSubmitWork = () => {
const location: any = useLocation();
const navigate = useNavigate();
let configFormRef: any = React.createRef();
/** 是否全屏 */
const [fullScreenShow, setFullScreenShow] = useState<boolean>(false);
const [selectedNodeId, setSelectedNodeId] = useState<string>("");
// 前往工作台
const goToWorkbench = () => {
navigate("/product/cadd/projectWorkbench");
const goToWorkbench = (toWorkbenchList = false) => {
navigate("/product/cadd/projectWorkbench", {
state: { type: toWorkbenchList ? "workbenchList" : "" },
});
};
// 返回
......@@ -54,6 +64,22 @@ const ProjectSubmitWork = () => {
const { run } = useMyRequest(fetchTemplateConfigInfo, {
onSuccess: (res: IResponse<ITemplateConfig>) => {
// setTemplateConfigInfo(templateConfigJson as ITemplateConfig);
res.data.tasks.forEach((task) => {
task.parameters.forEach((parameter) => {
let value: any = undefined;
if (parameter.defaultValue) {
value = parameter.defaultValue;
} else if (
parameter.domType.toLowerCase() === "multipleselect" ||
parameter.domType.toLowerCase() === "checkbox"
) {
value = [];
} else {
value = "";
}
parameter.value = value;
});
});
setTemplateConfigInfo(res.data);
configFormRef.current.setInitName(res.data.title);
},
......@@ -65,7 +91,7 @@ const ProjectSubmitWork = () => {
const { run: submitWorkFlowRun } = useMyRequest(submitWorkFlow, {
onSuccess: (res) => {
Message.success("提交成功");
goToWorkbench();
goToWorkbench(true);
},
});
......@@ -80,20 +106,20 @@ const ProjectSubmitWork = () => {
result.tasks.forEach((tack) => {
if (tack.id === taskId) {
let isCheck = true;
tack.parameters.forEach((parameter) => {
tack.parameters
.filter((parameter) => parameter.hidden === false)
.forEach((parameter) => {
if (parameter.name === parameterName) {
parameter.value = value;
const checkResult = getCheckResult(parameter, value);
parameter.error = checkResult.error;
parameter.helperText = checkResult.helperText;
} else {
return;
}
if (getCheckResult(parameter, value).error === true) {
if (getCheckResult(parameter, parameter.value).error === true) {
isCheck = false;
}
tack.isCheck = isCheck;
});
tack.isCheck = isCheck;
} else {
return;
}
......@@ -106,7 +132,6 @@ const ProjectSubmitWork = () => {
const { name, outputPath, nameAndOutputPathCheck } =
configFormRef.current.getNameAndPath();
if (!nameAndOutputPathCheck) {
console.log(123);
check = false;
}
const result: ITemplateConfig = _.cloneDeep(templateConfigInfo);
......@@ -118,8 +143,6 @@ const ProjectSubmitWork = () => {
parameter.error = checkResult.error;
parameter.helperText = checkResult.helperText;
if (checkResult.error) {
console.log(tack);
console.log(parameter);
check = false;
}
});
......@@ -170,7 +193,7 @@ const ProjectSubmitWork = () => {
return (
<div className={styles.swBox}>
<div className={styles.swHeader}>
{ fullScreenShow ? null : <div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<MyPopconfirm
title="返回后，当前页面已填写内容将不保存，确认返回吗？"
......@@ -199,13 +222,17 @@ const ProjectSubmitWork = () => {
<div className={styles.swTemplateVersionBox}>
<span className={styles.swHeaderLable}>版本：</span>
<span className={styles.swHeaderValue}>
{templateConfigInfo?.version}
{templateConfigInfo?.languageVersion}
</span>
</div>
<div className={styles.swTemplateUpdateTimeBox}>
<span className={styles.swHeaderLable}>更新时间：</span>
<span className={styles.swHeaderValue}>
{templateConfigInfo?.updateTime}
{templateConfigInfo?.updateTime
? moment(templateConfigInfo?.updateTime).format(
"YYYY-MM-DD HH:mm:ss"
)
: "-"}
</span>
</div>
<div className={styles.swHeaderGoback}></div>
......@@ -221,19 +248,26 @@ const ProjectSubmitWork = () => {
></ButtonComponent>
</MyPopconfirm>
</div>
</div>
</div>}
<div className={styles.swContent}>
<div className={styles.swFormBox}>
{fullScreenShow ? null : <div className={styles.swFormBox}>
<ConfigForm
onRef={configFormRef}
templateConfigInfo={templateConfigInfo}
setParameter={setParameter}
setSelectedNodeId={setSelectedNodeId}
/>
</div>
<div className={styles.swFlowBox}>
<WorkFlow templateConfigInfo={templateConfigInfo} />
</div>}
<div className={styles.swFlowBox} style={fullScreenShow ? { height: "100vh" } : undefined}>
<WorkFlow templateConfigInfo={templateConfigInfo} setSelectedNodeId={setSelectedNodeId} selectedNodeId={selectedNodeId}/>
</div>
</div>
<img
className={styles.fullScreenBox}
src={fullScreenShow ? partialScreen : fullScreen}
onClick={() => setFullScreenShow(!fullScreenShow)}
alt="全屏"
/>
</div>
);
};
......
src/views/Project/ProjectSubmitWork/interface.ts
View file @ f1d577f4
......@@ -12,6 +12,7 @@ export interface IParameter {
id?: string;
name: string;
required: boolean;
defaultValue: any;
domType: IDomType;
classType: string;
classTypeName: string;
......
src/views/Project/ProjectSubmitWork/util.ts
View file @ f1d577f4
import { IParameter } from "./interface"
export const getCheckResult = (parameter: IParameter, value: string): {
error: boolean,
helperText: string
import { IParameter } from "./interface";
export const getCheckResult = (
parameter: IParameter,
value: string
): {
error: boolean;
helperText: string;
} => {
let error = false
let helperText = ''
let error = false;
let helperText = "";
// 表单校验
if (parameter.required) {
if (Array.isArray(value)) {
if (value.length === 0) {
error = true
helperText = '该选项是必填项'
error = true;
helperText = "该选项是必填项";
}
} else if (value === '' || value === null || value === undefined) {
error = true
helperText = '该选项是必填项'
} else if (value === "" || value === null || value === undefined) {
error = true;
helperText = "该选项是必填项";
}
}
if (parameter.validators.length > 0) {
parameter.validators.forEach((validator)=>{
const reg = new RegExp(validator.regex)
parameter.validators.forEach((validator) => {
const reg = new RegExp(validator.regex);
if (!reg.test(value)) {
error = true
helperText = validator.message
error = true;
helperText = validator.message;
}
})
});
}
return {
error,
helperText
}
}
\ No newline at end of file
helperText,
};
};
src/views/Project/ProjectWorkbench/index.tsx
View file @ f1d577f4
/*
* @Author: rocosen
* @Date: 2022-06-12 10:05:13
* @LastEditors: rocosen
* @LastEditTime: 2022-06-07 20:23:02
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-04 20:23:26
* @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, useState, useMemo, useEffect } from "react";
import { memo, useMemo } from "react";
import { Box } from "@mui/system";
import { useStores } from "@/store/index";
import NoProject from "@/components/NoProject";
import { observer } from "mobx-react-lite";
import { useLocation } from "react-router-dom";
import projectImg from "@/assets/project/projectIconSmall.svg";
import WorkbenchTemplate from "./workbenchTemplate";
import WorkbenchList from "./workbenchList";
import Tabs from "@/components/mui/Tabs";
import usePass from "@/hooks/usePass";
import Template from "@/assets/project/workbenchTemplate.svg"
import Template_select from "@/assets/project/workbenchTemplate_select.svg"
import List from "@/assets/project/workbenchList.svg"
......@@ -25,19 +23,9 @@ import List_select from "@/assets/project/workbenchList_select.svg"
//ui
import ButtonDemo from "@/views/mui_demo/button"
import InputDemo from "@/views/mui_demo/input"
const ProjectWorkbench = observer(() => {
const { currentProjectStore } = useStores();
const isPass = usePass();
useEffect(() => {
console.log(isPass("PROJECT_WORKBENCH_FLOES_USE", 'USER'), "11111111111");
console.log(isPass("PROJECT_WORKBENCH_FLOES"), 'wwwwwwwwwww')
}, [])
const location: any = useLocation()
const tabList = useMemo(() => {
return [
{
......@@ -46,7 +34,7 @@ const ProjectWorkbench = observer(() => {
component: <WorkbenchTemplate />,
hide: !isPass("PROJECT_WORKBENCH_FLOES"),
icon: Template,
iconed: Template_select
iconed: Template_select,
},
{
label: "任务列表",
......@@ -54,25 +42,24 @@ const ProjectWorkbench = observer(() => {
component: <WorkbenchList />,
hide: !isPass("PROJECT_WORKBENCH_JOBS"),
icon: List,
iconed: List_select
},
{
label: "按钮组件",
value: "MUI_BUTTON",
component: <ButtonDemo />,
icon: List,
iconed: List_select
},
{
label: "输入框组件",
value: "MUI_INPUT",
component: <InputDemo />,
icon: List,
iconed: List_select
iconed: List_select,
},
// {
// label: "按钮组件",
// value: "MUI_BUTTON",
// component: <ButtonDemo />,
// icon: List,
// iconed: List_select,
// },
// {
// label: "输入框组件",
// value: "MUI_INPUT",
// component: <InputDemo />,
// icon: List,
// iconed: List_select,
// },
];
}, []);
}, [isPass]);
return (
<div style={{ padding: 24 }}>
......@@ -83,7 +70,7 @@ const ProjectWorkbench = observer(() => {
</span>
</div>
<Box sx={{ width: "100%", typography: "body1" }}>
<Tabs tabList={tabList} />
<Tabs tabList={tabList} defaultValue={location?.state?.type || 'workbenchTemplate'} />
</Box>
</div>
);
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ f1d577f4
......@@ -2,18 +2,20 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-07 21:39:30
* @LastEditTime: 2022-07-05 18:06:17
* @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, SetStateAction, useCallback, useEffect, useMemo, useState } from "react";
import { memo, useEffect, useState } from "react";
import { Box, Typography } from "@mui/material";
import styles from "./index.module.css";
import OutlinedInput from "@mui/material/OutlinedInput";
import SearchIcon from "@mui/icons-material/Search";
import Button from "@/components/mui/Button";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
// import Button from "@mui/material/Button";
import Add from "@mui/icons-material/Add";
import Button from "@/components/mui/Button";
import useMyRequest from "@/hooks/useMyRequest";
import TemplateBox from "./components/templateBox"
import SimpleDialog from "./components/simpleDialog"
......@@ -25,12 +27,12 @@ import {
getAddWorkbenchTemplate,
addWorkbenchTemplate
} from "@/api/workbench_api";
import _ from "lodash";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import usePass from "@/hooks/usePass";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import ReactFlowEdit from '@/views/WorkFlowEdit'
import { useStores } from "@/store";
import styles from "./index.module.css";
const ProjectMembers = observer(() => {
const { currentProjectStore } = useStores();
......@@ -101,12 +103,6 @@ const ProjectMembers = observer(() => {
console.log('projectIdData: ', projectIdData);
}, [projectIdData])
/** 点击添加工作流模版 */
const onAddMember = () => {
// setAddMemberDialog(true);
};
/** 删除模板 */
const deleteTemplate = () => {
delTemplate({
......@@ -242,6 +238,8 @@ const ProjectMembers = observer(() => {
searchTemplateNameCallback={searchTemplateNameCallback}
/>
{/* <ReactFlowEdit/> */}
<SimpleDialog
text={'确认移除该模板吗？'}
title={'删除模板'}
......
src/views/Project/components/AddProject/index.tsx
View file @ f1d577f4
......@@ -84,17 +84,16 @@ const AddProject = (props: any) => {
const handleClickOpen = () => {
DialogRef.current.handleClickOpen();
initData()
initData();
};
const initData = () => {
setName('')
setDesc('')
setName("");
setDesc("");
if (zoneIdOptions.length > 0) {
setZoneId(zoneIdOptions[0].id)
setZoneId(zoneIdOptions[0].id);
}
}
};
const checkName = (name: string) => {
if (name) {
......
src/views/Project/components/CurrentProject/index.tsx
View file @ f1d577f4
......@@ -45,7 +45,6 @@ const CurrentProject = observer(() => {
const openAddProject = () => {
addProjectRef.current.handleClickOpen();
// setAddProjectOpen(true);
setProjectListOpen(false);
};
......@@ -59,9 +58,12 @@ const CurrentProject = observer(() => {
<img src={logo} alt="" className={style.logo} />
<div className={style.info}>
<div className={style.productName}>
{currentProjectStore.currentProductInfo.name || "CADD"}
{currentProjectStore.currentProductInfo.name}
</div>
<div className={style.projectName} title={currentProjectStore.currentProjectInfo.name}>
<div
className={style.projectName}
title={currentProjectStore.currentProjectInfo.name}
>
{currentProjectStore.currentProjectInfo.name || "暂无项目"}
</div>
</div>
......
src/views/Project/components/Flow/index.tsx
View file @ f1d577f4
......@@ -30,6 +30,8 @@ interface IProps extends ReactFlowProps {
tasks?: ITask[];
/** 点击batch事件 */
onBatchClick?: (val: string) => void;
setSelectedNodeId?: (val:string) => void;
selectedNodeId?: string;
}
/** 获取imgUrl */
......@@ -119,9 +121,7 @@ const FlowNode = (props: any) => {
};
const Flow = (props: IProps) => {
const { tasks, onBatchClick } = props;
console.log(tasks,'tasks')
const [selectedNodeId, setSelectedNodeId] = useState<string>("");
const { tasks, onBatchClick, setSelectedNodeId, selectedNodeId } = props;
/** 自定义的节点类型 */
const nodeTypes = useMemo(() => {
return { batchNode: BatchNode, flowNode: FlowNode };
......@@ -272,21 +272,24 @@ const Flow = (props: IProps) => {
/** flowNode点击事件 */
const onNodeClick = (e: any, node: Node) => {
tasks?.forEach((item) => {
if (item.id === node.id) {
if (item.parentNode) {
setSelectedNodeId(item.parentNode);
setSelectedNodeId && setSelectedNodeId(item.parentNode);
onBatchClick && onBatchClick(item.parentNode);
document.getElementById(`point${item.parentNode}`)?.scrollIntoView(true)
} else {
setSelectedNodeId(node.id);
setSelectedNodeId && setSelectedNodeId(node.id);
onBatchClick && onBatchClick(node.id || "");
document.getElementById(`point${node.id}`)?.scrollIntoView(true)
}
}
});
};
const handlePaneClick = () => {
setSelectedNodeId('');
setSelectedNodeId && setSelectedNodeId('');
onBatchClick && onBatchClick('');
}
......
src/views/Project/project.ts
View file @ f1d577f4
import { product, hpczone, getDataFileToken } from "@/api/project_api";
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-17 14:48:57
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-04 19:38:48
* @FilePath: /bkunyun/src/views/Project/project.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import {
getProjectList as getProjectListApi,
hpczone,
getDataFileToken,
} from "@/api/project_api";
export const getProjectList = async () => {
const res = await product({ product: "CADD" });
const res = await getProjectListApi({ product: "CADD" });
return res.data;
};
......@@ -12,7 +24,7 @@ export const setFileServerEndPointLocalStorage = async (zoneId: string) => {
if (Array.isArray(res)) {
res.forEach((item: any) => {
if (item.id === zoneId) {
fileServerEndPoint = item.storageConfig.fileServerEndPoint;
fileServerEndPoint = item.storageConfig?.fileServerEndPoint;
}
});
localStorage.setItem("fileServerEndPoint", fileServerEndPoint);
......
src/views/WorkFlowEdit/index.module.css 0 → 100644
View file @ f1d577f4
.swBox {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: RGBA(247, 248, 250, 1);
overflow-y: scroll;
}
.swHeader {
z-index: 1001;
position: sticky;
top: 0;
height: 56px;
background-color: #fff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.swHeaderLeft {
display: flex;
justify-content: flex-start;
align-items: center;
}
.swContent {
display: flex;
height: calc(100vh - 56px);
}
.swFormBox {
background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1);
width: 608px;
overflow-y: scroll;
box-sizing: border-box;
padding: 36px;
}
.swFlowBox {
flex: 1;
height: calc(100vh - 56px);
}
\ No newline at end of file
src/views/WorkFlowEdit/index.tsx 0 → 100644
View file @ f1d577f4
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-05 16:31:28
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import React, { useState } from "react";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import IconButton from "@mui/material/IconButton";
import { useLocation, useNavigate } from "react-router-dom";
import MyPopconfirm from "@/components/mui/MyPopconfirm";
import ButtonComponent from "@/components/mui/Button";
import { ITemplateConfig } from "../Project/ProjectSubmitWork/interface";
import styles from './index.module.css'
const WorkFlowEdit = () => {
const [templateConfigInfo, setTemplateConfigInfo] =
useState<ITemplateConfig>();
const location: any = useLocation();
const navigate = useNavigate();
return (
<div className={styles.swBox}>
<div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<MyPopconfirm
title="返回后，当前页面已填写内容将不保存，确认返回吗？"
onConfirm={()=>console.log(11)}
>
<IconButton
color="primary"
// onClick={() => handleGoBack()}
aria-label="upload picture"
component="span"
size="small"
>
<ArrowBackIosNewIcon
sx={{
color: "rgba(194, 198, 204, 1)",
width: "12px",
height: "12px",
}}
/>
</IconButton>
</MyPopconfirm>
</div>
<div className={styles.swHeaderRight}>
<MyPopconfirm
title="提交前请先确认参数填写无误，确认提交吗？"
onConfirm={()=>console.log(2)}
>
<ButtonComponent
text="保存"
// click={handleSubmitForm}
></ButtonComponent>
</MyPopconfirm>
</div>
</div>
<div className={styles.swContent}>
<div className={styles.swFormBox}>
左侧
</div>
<div className={styles.swFlowBox}>
右侧
</div>
</div>
</div>
);
};
export default WorkFlowEdit;
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