Skip to content

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

Merge branch 'feat-20220801' into 'release' 

Feat 20220801

See merge request !51
parents e3101834 87a6abe5
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1740 additions and 412 deletions
config/webpack.config.js
View file @ 41e296fd
......@@ -344,7 +344,7 @@ module.exports = function (webpackEnv) {
// Handle node_modules packages that contain sourcemaps
shouldUseSourceMap && {
enforce: "pre",
exclude: /@babel(?:\/|\\{1,2})runtime/,
exclude: [/@babel(?:\/|\\{1,2})runtime/, /node_modules/],
test: /\.(js|mjs|jsx|ts|tsx|css)$/,
loader: require.resolve("source-map-loader"),
},
......
public/index.html
View file @ 41e296fd
<!--
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-08-02 11:43:28
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-10 10:40:49
* @FilePath: /bkunyun/public/index.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/facicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
......@@ -24,7 +32,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>云平台</title>
<title>北鲲云-工作流平台</title>
<script src="%PUBLIC_URL%/RDKit_minimal.js"></script>
<script>
window
......
src/api/api_manager.ts
View file @ 41e296fd
......@@ -41,6 +41,8 @@ const RESTAPI = {
API_SAVE_USERSPEC:`${BACKEND_API_URI_PREFIX}/cpp/workflow/saveuserspec`, // 保存用户自定义工作流模板
API_OVERVIEW_GET:`${BACKEND_API_URI_PREFIX}/cpp/basicInformation`, // 获取概览基本信息
API_TASK_OVERVIEW_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflowJobInformation`, // 查询任务概览
API_OPERATOR_LISTSTREAMACTORS:`${BACKEND_API_URI_PREFIX}/cpp/workflow/liststreamactors`, // 获取流算子列表，可用于模糊查询，返回所有版本流算子
API_SAVE_BATCHACTOR:`${BACKEND_API_URI_PREFIX}/cpp/workflow/savebatchactor`, // 保存批算子
};
export default RESTAPI;
src/api/fileserver/CloudEController.ts
View file @ 41e296fd
......@@ -30,6 +30,15 @@ type IGetDatasetItemsListParams = {
sort?: string; // 排序
}
type IGetDatasetSizeParams = {
type?: string; // 产品id
projectId: string;
token: string;
filetoken: string;
path: string; // 数据集路径
name: string; // 数据集名称
}
type ISaveDatasetParams = {
type?: string;
projectId: string;
......@@ -229,6 +238,34 @@ class CloudEController {
}
}
// 获取文件文本内容（字符串）
static JobFileDownloadText(url: any, filetoken: string, projectId: string) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
url = url + urlToken(filetoken, projectId);
headers["Cache-Control"] = "no-cache";
headers["Content-Type"] = "multipart/form-data";
return axios.get(
APIOPTION() + "/download" + url + "&showhidden=false",
{
headers: headers,
}
);
}
}
// 获取dataset条数
static GetDatasetSize(params: IGetDatasetSizeParams) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
headers["Cache-Control"] = "no-cache";
let url = getUrlThroughParams(params, ['filetoken','path','token'], '?')
return axios.get(
`${APIOPTION()}:5003/size${url}`,
{
headers: headers,
}
);
}
}
// 获取分子列表
static GetDatasetItemsList(params: IGetDatasetItemsListParams) {
......
src/api/project_api.ts
View file @ 41e296fd
......@@ -270,6 +270,44 @@ const getTaskOverview=(params:getTaskOverviewParams)=>{
})
}
// 获取流算子列表，可用于模糊查询，返回所有版本流算子
type getOperatorListParams = {
productId: string;
keyword?: string;
page?: number;
size?: number;
};
const getOperatorList=(params:getOperatorListParams)=>{
return request({
url:Api.API_OPERATOR_LISTSTREAMACTORS,
method:"get",
params,
})
}
type saveBatchQuery = {
productId: string;
batchName: string;
batchVersion: string;
description?: string;
isEdit?: string;
}
type saveBatchBody = Array<any>
type saveBatchParams = {
query: saveBatchQuery;
body: saveBatchBody;
}
// 提交工作流
const saveBatchActor = (params: saveBatchParams) => {
return request({
url: Api.API_SAVE_BATCHACTOR,
method: "post",
params: params.query,
data: params.body,
});
};
export {
current,
......@@ -292,5 +330,7 @@ export {
submitWorkFlow,
getworkFlowTaskInfo,
getOverviewInfo,
getTaskOverview
getTaskOverview,
getOperatorList,
saveBatchActor
};
src/api/workbench_api.ts
View file @ 41e296fd
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-05 14:00:37
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-10 13:54:04
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-08 16:34:52
* @FilePath: /bkunyun/src/api/workbench_api.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import request from "@/utils/axios/service";
import Api from "./api_manager";
import { IGetOperatorListParams, IFetchOperatorListParams } from "./workbenchInterface";
import { IGetOperatorListParams } from "./workbenchInterface";
function current() {
return request({
......@@ -139,15 +139,6 @@ const fetchOperatorList = (params: IGetOperatorListParams) => {
};
// 获取指定版本算子
const fetchVersionOperator = (params: IFetchOperatorListParams) => {
return request({
url: Api.API_VERSION_OPERATOR,
method: "get",
params,
});
};
// 保存用户自定义工作流模板
const saveUserSpec = (params: any) => {
return request({
......@@ -168,6 +159,5 @@ export {
deleteWorkflowJob,
cancelWorkflowJob,
fetchOperatorList,
fetchVersionOperator,
saveUserSpec
};
src/components/BusinessComponents/FileSelect/index.module.css
View file @ 41e296fd
.FSBox {
width: 900px;
height: 650px;
position: relative;
}
......
src/components/BusinessComponents/NoProject/NoProject.tsx
View file @ 41e296fd
......@@ -12,16 +12,20 @@ import AddIcon from "@mui/icons-material/Add";
import AddProject from "@/views/Project/components/AddProject";
import React, { useState } from "react";
import MyButton from "@/components/mui/MyButton";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import { useStores } from "@/store/index";
const NoProject = () => {
const NoProject = observer((props: any) => {
// 新建弹窗显示控制
const [addOpen, setAddOpen] = useState(false);
const { currentProjectStore } = useStores();
let projectList = toJS(currentProjectStore.projectList)
return (
<div className={style.noProject}>
<img src={noData} alt="" className={style.noDataImg} />
<div className={style.text1}>当前产品暂无项目</div>
<div className={style.text2}>请先创建项目</div>
<div className={style.text1}>{projectList.length > 0 ? "当前未选中任何项目" : "当前产品暂无项目"}</div>
<div className={style.text2}>{projectList.length > 0 ? "或创建新项目" : "请先创建项目"}</div>
<MyButton
text='创建项目'
variant="contained"
......@@ -35,6 +39,6 @@ const NoProject = () => {
<AddProject addOpen={addOpen} setAddOpen={setAddOpen} />
</div>
);
};
});
export default NoProject;
src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css
View file @ 41e296fd
......@@ -4,7 +4,7 @@
align-items: center;
border: 1px solid #e6e8eb;
border-radius: 4px;
background-color: #F0F2F5;
background-color: #f0f2f5;
cursor: pointer;
height: 32px;
box-sizing: border-box;
......@@ -12,7 +12,7 @@
}
.radio {
position: relative;
min-width: 64px;
min-width: 63px;
height: 28px;
box-sizing: border-box;
font-size: 14px;
......@@ -28,18 +28,8 @@
white-space: nowrap;
}
.radio:not(:last-child)::before {
position: absolute;
width: 1px;
height: 16px;
top: 6px;
right: 0;
content: '';
background-color: #D1D6DE;
}
.radioActive {
color: #1370ff;
background-color: #fff;
box-shadow: 2px 4px 12px 0px rgba(0,27,63,0.06);
box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
}
src/components/MySnackbar/MySnackbarProvider.tsx
View file @ 41e296fd
......@@ -43,7 +43,7 @@ const getTransitionComponent = (transition: "grow" | "fade") => {
const MySnackbarProvider = ({
vertical = "top",
horizontal = "center",
autoHideDuration = 890000,
autoHideDuration = 3000,
snackerClasses,
ClickAwayListenerProps,
ContentProps,
......@@ -76,20 +76,20 @@ const MySnackbarProvider = ({
} = useMySnackbar();
// .MuiAlert-filledInfo
const getColorStyle = useMemo(()=>{
if(messageInfo.severity === 'success'){
return '#02AB83'
const getColorStyle = useMemo(() => {
if (messageInfo.severity === "success") {
return "#02AB83";
}
if(messageInfo.severity === 'info'){
return '#1370FF'
if (messageInfo.severity === "info") {
return "#1370FF";
}
if(messageInfo.severity === 'warning'){
return '#FFB919'
if (messageInfo.severity === "warning") {
return "#FFB919";
}
if(messageInfo.severity === 'error'){
return '#FF4E4E'
if (messageInfo.severity === "error") {
return "#FF4E4E";
}
},[messageInfo.severity])
}, [messageInfo.severity]);
const theme = createTheme({
components: {
......@@ -98,20 +98,17 @@ const MySnackbarProvider = ({
root: {
color: getColorStyle,
"& .MuiAlert-icon": {
color: getColorStyle
color: getColorStyle,
},
},
}
},
},
},
});
return (
<Fragment>
<ThemeProvider theme={theme}>
<Snackbar
open={open}
autoHideDuration={autoHideDuration}
......
src/components/mui/MyDialog.tsx
View file @ 41e296fd
......@@ -122,12 +122,16 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
"& .MuiPaper-root": {
// 设置最大宽度， 实际宽度让子元素撑大
maxWidth: "1920px",
borderRadius: "8px"
},
},
}}
>
{isHideHeader ? null : (
<DialogTitle id="alert-dialog-title">
<DialogTitle
id="alert-dialog-title"
sx={{ padding: "20px 24px" }}
>
<div
style={{
display: "flex",
......@@ -136,10 +140,10 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
fontWeight: 600,
}}
>
<span style={{fontSize: 16, lineHeight: '24px', color: '#1E2633'}}>{title}</span>
<span style={{ fontSize: 16, lineHeight: '24px', color: '#1E2633' }}>{title}</span>
<CloseIcon
onClick={onClose}
sx={{ color: "#C2C6CC", cursor: "pointer", ":hover": { background: "#f0f2f5", borderRadius:'2px' } }}
sx={{ color: "#C2C6CC", cursor: "pointer", ":hover": { background: "#f0f2f5", borderRadius: '2px' } }}
/>
</div>
</DialogTitle>
......
src/components/mui/MyPopconfirm.tsx
View file @ 41e296fd
......@@ -68,7 +68,8 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
zIndex: 2000,
bgcolor: "#fff",
minWidth: "200px",
borderRadius: "2px",
borderRadius: "4px",
fontSize:"14px",
padding: "20px 16px",
boxShadow: "0px 3px 10px 0px rgba(0, 24, 57, 0.14)",
}}
......
src/components/mui/MyRadio.tsx
View file @ 41e296fd
......@@ -11,7 +11,7 @@ import Radio from "@mui/material/Radio";
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';
import FormHelperText from "@mui/material/FormHelperText";
interface IMyRadioProps extends RadioGroupProps {
value: any;
......@@ -20,7 +20,7 @@ interface IMyRadioProps extends RadioGroupProps {
variant?: "standard" | "outlined" | "filled";
error?: boolean;
helperText?: string;
};
}
type ICheckBoxOption = {
value: any;
......@@ -45,7 +45,14 @@ export const optionsTransform = (
};
export default function MyRadio(props: IMyRadioProps) {
const { value, options, onChange , error = false, helperText, variant} = props;
const {
value,
options,
onChange,
error = false,
helperText,
variant,
} = props;
return (
<FormControl fullWidth variant={variant} error={error}>
......@@ -62,7 +69,7 @@ export default function MyRadio(props: IMyRadioProps) {
<FormControlLabel
key={option.value}
value={option.value}
control={<Radio />}
control={<Radio sx={{ color: "rgba(209, 214, 222, 1)" }} />}
label={option.label}
disabled={option.disabled}
/>
......
src/components/mui/MySelect.tsx
View file @ 41e296fd
......@@ -128,7 +128,7 @@ export default function MySelect(props: IProps) {
return (
<ThemeProvider theme={theme}>
<FormControl fullWidth={fullWidth} variant={variant}>
<FormControl fullWidth={fullWidth} variant={variant} error={error}>
{isTitle ? (
<InputLabel id="demo-simple-select-label">
{title || "请选择"}
......
src/components/mui/MySwitch.tsx
View file @ 41e296fd
......@@ -11,7 +11,8 @@ import Switch, { SwitchProps } from "@mui/material/Switch";
import { ThemeProvider, createTheme } from "@mui/material/styles";
interface IMySwitchProps extends SwitchProps {
value: boolean;
value?: boolean;
defaultChecked?: boolean;
onChange?: any;
disabled?: boolean;
}
......@@ -52,12 +53,13 @@ const theme = createTheme({
});
const MySwitch = (props: IMySwitchProps) => {
const { value, onChange, disabled = false, size, ...other } = props;
const { value, defaultChecked, onChange, disabled = false, size, ...other } = props;
return (
<ThemeProvider theme={theme}>
<Switch
checked={value}
disabled={disabled}
defaultChecked={defaultChecked}
onChange={onChange}
sx={
size === "medium"
......
src/components/mui/Tabs.tsx
View file @ 41e296fd
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-04 20:18:17
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-10 11:06:12
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -44,6 +44,9 @@ const theme = createTheme({
minWidth: "20px",
marginRight: "32px",
color: "#8A9099",
":hover": {
color: "#1E2633",
},
selected: {
color: "#1976d2",
},
......@@ -95,7 +98,14 @@ const Tabs = (props: IProps) => {
) : (
""
)}
<Typography sx={{ fontSize: "14px", lineHeight: "22px", height: "22px", fontWeight: "400" }}>
<Typography
sx={{
fontSize: "14px",
lineHeight: "22px",
height: "22px",
fontWeight: "400",
}}
>
{item.label}
</Typography>
</Box>
......@@ -118,7 +128,7 @@ const Tabs = (props: IProps) => {
<Tab
key={key}
label={labelRender(item, key)}
value={item.value}
value={item.value || ""}
id={item.value}
disabled={item.disabled}
/>
......@@ -130,7 +140,11 @@ const Tabs = (props: IProps) => {
?.filter((item) => !item.hide)
.map((item) => {
return (
<TabPanel sx={tabPanelSx} value={item.value} key={item.value}>
<TabPanel
sx={tabPanelSx}
value={item.value || ""}
key={item.value}
>
{item.component}
</TabPanel>
);
......
src/views/CustomOperator/components/OperatorList/index.module.css
View file @ 41e296fd
......@@ -38,22 +38,36 @@
}
.li {
background-color: RGBA(240, 242, 245, 1);
padding: 7px 7px 7px 28px;
padding: 7px 9px;
color: rgba(30, 38, 51, 1);
font-size: 14px;
line-height: 22px;
margin-bottom: 12px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.nameVersion {
flex: 1;
/* text-align: left; */
margin-left: 13px;
word-wrap: break-word;
/* text-overflow: clip; */
max-width: 140px;
}
.name {
margin-right: 8px;
}
.version {
white-space: nowrap;
}
.icon {
width: 6px;
height: 10px;
position: absolute;
/* position: absolute;
top: 13px;
left: 9px;
left: 9px; */
display: flex;
flex-direction: column;
justify-content: space-between;
......@@ -67,3 +81,12 @@
height: 2px;
background-color: rgba(86, 92, 102, 1);
}
.loading {
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
font-size: 12px;
color: rgba(86, 92, 102, 1);
padding: 4px;
}
src/views/CustomOperator/components/SaveOperator/index.tsx 0 → 100644
View file @ 41e296fd
import MyDialog from "@/components/mui/MyDialog";
import MyInput from "@/components/mui/MyInput";
import { checkIsNumberLetterChinese } from "@/utils/util";
import _ from "lodash";
import { useState } from "react";
import useMyRequest from "@/hooks/useMyRequest";
import { saveBatchActor } from "@/api/project_api";
import { useStores } from "@/store";
import { useMessage } from "@/components/MySnackbar";
import { toJS } from "mobx";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
interface IProps {
saveFormDialog: boolean;
setSaveFormDialog: (val: boolean) => void;
operatorList: ITask[];
setShowCustomOperator: any;
}
const SaveOperator = (props: IProps) => {
const {
saveFormDialog,
setSaveFormDialog,
operatorList,
setShowCustomOperator,
} = props;
const { currentProjectStore } = useStores();
const Message = useMessage();
const productId = toJS(currentProjectStore.currentProductInfo.id);
const [title, setTitle] = useState("");
const [version, setVersion] = useState("1.0.0");
const [description, setDescription] = useState("");
// 保存批算子
const { run: saveBatchActorRun, loading } = useMyRequest(saveBatchActor, {
onSuccess: (res) => {
Message.success("保存算子成功");
sessionStorage.setItem("operatorList", "[]");
setSaveFormDialog(false);
setShowCustomOperator();
},
});
const [titleHelper, setTitleHelper] = useState({
// 算子名称错误提示
error: false,
helperText: "",
});
const [versionHelper, setVersionHelper] = useState({
// 算子版本错误提示
error: false,
helperText: "",
});
// 关闭表单弹窗
const handleCloseDialog = () => {
setSaveFormDialog(false);
};
// 算子名称
const handleTitleChange = (e: any) => {
const title = e.target.value;
setTitle(title);
checkTitle(title);
};
// 算子版本
const handleVersionChange = (e: any) => {
let version = e.target.value;
setVersion(version);
checkVersion(version);
};
// 算子描述
const handleDescriptionChange = (e: any) => {
let description = e.target.value;
if (description.length < 301) {
setDescription(description);
}
};
// 校验算子名称
const checkTitle = (title: string) => {
if (!title) {
setTitleHelper({
error: true,
helperText: "必须输入算子名称",
});
return false;
} else if (title.length > 15) {
setTitleHelper({
error: true,
helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
});
return false;
} else if (!checkIsNumberLetterChinese(title)) {
setTitleHelper({
error: true,
helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
});
return false;
} else {
setTitleHelper({
error: false,
helperText: "",
});
return true;
}
};
// 校验版本号格式
const checkVersion = (version: string) => {
if (/^[1-9]\d?(\.(0|[1-9]\d?)){2}$/.test(version)) {
setVersionHelper({
error: false,
helperText: "",
});
return true;
} else {
setVersionHelper({
error: true,
helperText: "格式不正确，必须为X.Y.Z格式，且XYZ必须为0~99的正整数",
});
return false;
}
};
// 坐标转换
const positionTransform = () => {
const copyOperatorList: ITask[] = _.cloneDeep(operatorList);
const positionXArr = copyOperatorList.map((operatorLi) => {
return operatorLi.position.x;
});
const positionYArr = copyOperatorList.map((operatorLi) => {
return operatorLi.position.y;
});
let minPositionX = Math.min(...positionXArr);
let minPositionY = Math.min(...positionYArr);
let startingPointX = minPositionX - 40;
let startingPointY = minPositionY - 10;
return copyOperatorList.map((operatorLi) => {
return {
...operatorLi,
position: {
x: operatorLi.position.x - startingPointX,
y: operatorLi.position.y - startingPointY,
},
};
});
};
// 表单弹窗确定，新建算子
const handleOncofirm = () => {
if (checkTitle(title) && checkVersion(version)) {
saveBatchActorRun({
query: {
productId: productId as string,
batchName: title,
batchVersion: version,
description: description,
},
body: positionTransform(),
});
}
};
return (
<MyDialog
open={saveFormDialog}
title="保存算子"
onClose={handleCloseDialog}
onConfirm={handleOncofirm}
loading={loading}
>
<div style={{ width: "388px" }}>
<MyInput
value={title}
label="算子名称"
onChange={handleTitleChange}
required
error={titleHelper.error}
helperText={titleHelper.helperText}
style={{ margin: "20px 0" }}
></MyInput>
<MyInput
value={version}
label="版本号"
onChange={handleVersionChange}
error={versionHelper.error}
helperText={versionHelper.helperText}
style={{ marginBottom: "20px" }}
></MyInput>
<div style={{ position: "relative" }}>
<MyInput
value={description}
id="desc"
label="模板描述"
placeholder="模板描述"
onChange={handleDescriptionChange}
multiline
rows={4}
/>
<span
style={{
position: "absolute",
bottom: "7px",
right: "12px",
color: description.length >= 300 ? "#d32f2f" : "#C2C6CC",
}}
>
{description.length}/300
</span>
</div>
</div>
</MyDialog>
);
};
export default SaveOperator;
src/views/CustomOperator/index.tsx
View file @ 41e296fd
......@@ -3,33 +3,188 @@ import { observer } from "mobx-react-lite";
import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
import MyButton from "@/components/mui/MyButton";
import OperatorList from "./components/OperatorList";
import Flow from "../Project/components/Flow";
// import Flow from "../Project/components/Flow";
import { useMessage } from "@/components/MySnackbar";
import BatchOperatorFlow from "../Project/components/Flow/components/BatchOperatorFlow";
import SaveOperator from "./components/SaveOperator";
import { ITask } from "../Project/ProjectSubmitWork/interface";
import _ from "lodash";
import styles from "./index.module.css";
type IProps = {
setShowCustomOperator: any;
initOperatorList: ITask[];
};
const CustomOperator = observer((props: IProps) => {
const { setShowCustomOperator } = props;
const { setShowCustomOperator, initOperatorList } = props;
const Message = useMessage();
const [operatorList, setOperatorList] = useState<ITask[]>(initOperatorList);
const [saveFormDialog, setSaveFormDialog] = useState(false);
// const [showCustomOperator, setShowCustomOperator] = useState(false);
/** 设置选中唯一标识符 */
const handleNodeClick = useCallback((val: string) => {
// setSelectTaskId(val);
// console.log(val);
}, []);
// 判断 每个流算子必须至少有一条连接线。
const checkHasOneLine = (sourceArr: string[], targetArr: string[]) => {
console.log("checkHasOneLine");
const all = _.uniq([...sourceArr, ...targetArr]);
if (all.length === operatorList.length) {
console.log("checkHasOneLine1");
return true;
} else {
console.log("checkHasOneLine2");
return false;
}
// _.uniq([2, 1, 2]);
};
// 判断 每个起始算子（可以有多个起始点）的输入必须为文件的路径输入或数据集的路径输入。
const checkIn = (targetArr: string[]) => {
console.log("checkIn");
const uniqTargetArr = _.uniq(targetArr);
if (uniqTargetArr.length === operatorList.length) {
// 流节点连成一个圈了
return false;
}
let check = true;
operatorList.forEach((flowNode) => {
if (uniqTargetArr.indexOf(flowNode.id) === -1) {
// 该节点的输入没有连线 也就是说这个节点是起点
const inArr = flowNode.parameters.filter(
(parameter) => parameter.parameterGroup === "in"
);
if (inArr.length > 0) {
if (
!inArr.some((inItem) => {
return (
(inItem.domType || "").toLowerCase() === "dataset" ||
(inItem.domType || "").toLowerCase() === "path" ||
(inItem.domType || "").toLowerCase() === "file"
);
})
) {
check = false;
}
} else {
// 起点没有输入
check = false;
}
}
});
return check;
};
// 判断 起码有一个结尾算子（可以有多个结尾点）的输出必须为文件保存或数据集保存。
const checkOut = (sourceArr: string[]) => {
console.log("checkOut");
const uniqSourceArr = _.uniq(sourceArr);
if (uniqSourceArr.length === operatorList.length) {
// 流节点连成一个圈了
return false;
}
let check = true;
operatorList.forEach((flowNode) => {
if (uniqSourceArr.indexOf(flowNode.id) === -1) {
// 该节点的输入没有连线 也就是说这个节点是起点
const outArr = flowNode.parameters.filter(
(parameter) => parameter.parameterGroup === "out"
);
if (outArr.length > 0) {
if (
!outArr.some((outItem) => {
return (
(outItem.domType || "").toLowerCase() === "dataset" ||
(outItem.domType || "").toLowerCase() === "file" ||
(outItem.domType || "").toLowerCase() === "path"
);
})
) {
check = false;
}
} else {
// 起点没有输入
check = false;
}
}
});
return check;
};
useEffect(() => {
sessionStorage.setItem("operatorList", JSON.stringify(operatorList));
}, [operatorList]);
const handleCheck = () => {
if (operatorList.length === 0) {
Message.error("内容不能为空！");
return;
}
let sourceArr: string[] = [];
let targetArr: string[] = [];
operatorList.forEach((flowNode) => {
flowNode.edges.forEach((edge) => {
edge.source && sourceArr.push(edge.source);
edge.target && targetArr.push(edge.target);
});
});
console.log("operatorList", operatorList);
console.log("sourceArr", sourceArr);
console.log("targetArr", targetArr);
if (!checkHasOneLine([...sourceArr], [...targetArr])) {
console.log("checkHasOneLine");
Message.error("内容校验未通过，请检查！");
return;
}
if (!checkIn([...targetArr])) {
console.log("checkIn");
Message.error("内容校验未通过，请检查！");
return;
}
if (!checkOut([...sourceArr])) {
console.log("checkOut");
Message.error("内容校验未通过，请检查！");
return;
}
setSaveFormDialog(true);
};
return (
<FullScreenDrawer handleClose={setShowCustomOperator} zIndex={1100}>
<div className={styles.customOperator}>
<div className={styles.coTop}>
<div className={styles.coTitle}>添加算子</div>
<MyButton text="添加"></MyButton>
<MyButton
text="添加"
onClick={() => {
handleCheck();
}}
></MyButton>
<SaveOperator
saveFormDialog={saveFormDialog}
setSaveFormDialog={setSaveFormDialog}
operatorList={operatorList}
setShowCustomOperator={setShowCustomOperator}
></SaveOperator>
</div>
<div className={styles.coContent}>
<OperatorList />
<Flow
showControls={false}
// tasks={templateConfigInfo}
// setTasks={setTemplateConfigInfo}
<div className={styles.coContent} id="customOperatorFlow">
<OperatorList
operatorList={operatorList}
setOperatorList={setOperatorList}
/>
<BatchOperatorFlow
tasks={operatorList}
setTasks={setOperatorList}
type="edit"
// onFlowNodeClick={handleNodeClick}
// ListenState={!saveFormDialog}
onFlowNodeClick={handleNodeClick}
flowNodeDraggable={true}
ListenState={!saveFormDialog}
showVersion={true}
showControls={false}
/>
</div>
</div>
......
src/views/MenuLayout/index.module.css
View file @ 41e296fd
......@@ -23,11 +23,12 @@
color: #565c66;
font-size: 14px;
line-height: 22px;
border-left: 3px solid #fff;
}
.listItem:hover {
background-color: #EEF1F5;
background-color: #eef1f5;
}
.routerIcon{
.routerIcon {
vertical-align: middle;
margin-right: 12px;
line-height: 22px;
......
src/views/MenuLayout/index.tsx
View file @ 41e296fd
......@@ -62,7 +62,7 @@ const MenuLayout = observer(() => {
onClick={() => item.type === "page" && navigate(item.path)}
>
<img className={style.routerIcon} src={routerIcon(item.id || '', `/v3${item.path}` === pathname) || undefined} alt='' />
<span style={{ verticalAlign: 'middle' }}>{item.name}</span>
<span style={{ verticalAlign: 'middle', fontWeight: '500' }}>{item.name}</span>
</li>
);
}
......
src/views/Project/ProjectData/AddFolder/index.tsx
View file @ 41e296fd
......@@ -97,7 +97,7 @@ const AddFolder = (props: IAddFolderProps) => {
<MyButton
text="新建文件夹"
variant="outlined"
size="small"
size="medium"
onClick={() => setDeleteDialogOpen(true)}
disabled={
selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", "USER")
......
src/views/Project/ProjectData/SeeDataset/index.tsx
View file @ 41e296fd
......@@ -159,7 +159,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
};
return (
<FullScreenDrawer handleClose={props.handleClose}>
<FullScreenDrawer handleClose={props.handleClose} zIndex={1100}>
<div
className={classNames({
[style.datasetBox]: true,
......
src/views/Project/ProjectData/SeeDataset/save.tsx
View file @ 41e296fd
......@@ -164,12 +164,12 @@ const Save = (props: ISaveProps) => {
value={showDpath}
required
label="保存路径"
InputProps={{
endAdornment: (
<img
onClick={() => {
setFileSelectOpen(true);
}}
InputProps={{
endAdornment: (
<img
src={fileSelectIcon}
alt="选择输出路径"
style={{ cursor: "pointer" }}
......
src/views/Project/ProjectData/UpLoaderFile/index.module.css
View file @ 41e296fd
......@@ -6,6 +6,7 @@
.uploderBoxLeft {
width: 300px;
}
.dropTitle {
line-height: 22px;
font-size: 14px;
......@@ -14,6 +15,7 @@
font-weight: 600;
}
.dropBox {
cursor: pointer;
height: 300px;
display: flex;
flex-direction: column;
......@@ -22,6 +24,9 @@
border: 1px dashed #d1d6de;
border-radius: 4px;
}
.dropBox:hover {
background-color: #f7f8fa;
}
.dropBoxDragActive {
background-color: #f7f8fa;
}
......@@ -54,12 +59,12 @@
justify-content: flex-start;
align-items: center;
}
.fileIconBoxText{
.fileIconBoxText {
display: block;
width: 260px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
.noFile {
......
src/views/Project/ProjectData/index.module.css
View file @ 41e296fd
......@@ -2,7 +2,7 @@
position: relative;
}
.projectDataStickyTop {
padding: 28px 24px;
padding: 28px 24px 64px;
position: relative;
}
.projectDataTitle {
......@@ -56,9 +56,10 @@
.projectDataStickyBox {
height: 64px;
position: sticky;
bottom: -1px;
border: 1px solid #ebedf0;
width: calc(100vw - 220px);
position: fixed;
bottom: 0px;
border-top: 1px solid #ebedf0;
z-index: 100;
background-color: #fff;
display: flex;
......
src/views/Project/ProjectData/index.tsx
View file @ 41e296fd
......@@ -515,7 +515,7 @@ const ProjectData = observer(() => {
<MyButton
text="上传文件"
variant="contained"
size="small"
size="medium"
style={{ marginRight: "12px" }}
onClick={() => setUploaderDialogOpen(true)}
disabled={
......
src/views/Project/ProjectJobDetail/LogView/index.module.css 0 → 100644
View file @ 41e296fd
.logView {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
z-index: 1002;
}
.logViewBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
height: 600px;
background: #282C34;
box-shadow: 2px 4px 20px 0px rgba(0, 15, 45, 0.1200);
border-radius: 8px;
}
.close {
position: absolute;
right: 0;
top: -28px;
cursor: pointer;
color: #fff;
}
.logViewTop {
/* height: 30px; */
background-color: #1D2126;
border-radius: 8px 8px 0 0;
display: flex;
font-size: 12px;
color: #8A9099;
overflow: auto;
}
.logViewTop::-webkit-scrollbar-track {
background-color: #282C34;
}
.logTitle {
display: flex;
align-items: center;
height: 30px;
line-height: 20px;
padding: 0 24px;
cursor: pointer;
}
.logTitleSelected {
background: #282C34;
color: #FFFFFF;
}
.fileIcon{
width: 14px!important;
margin-right: 4px;
}
.logViewContent {
position: relative;
box-sizing: border-box;
height: 510px;
padding: 16px 24px 0;
color: #D1D6DE;
white-space:pre-wrap;
word-break: break-word;
overflow: auto;
font-size: 14px;
line-height: 22px;
}
.logViewContentMask{
height: 16px;
width: 852px;
background-color: #282C34;
position: absolute;
top: 30px;
left: 24px;
z-index: 1005;
}
.logViewContent::-webkit-scrollbar-track {
background-color: #282C34;
}
.logViewBottom {
display: flex;
align-items: center;
justify-content: end;
height: 60px;
padding-right: 24px;
}
\ No newline at end of file
src/views/Project/ProjectJobDetail/LogView/index.tsx 0 → 100644
View file @ 41e296fd
import { useState, useCallback, useEffect, useMemo } from "react";
import classnames from "classnames";
import style from "./index.module.css";
import CloseIcon from "@mui/icons-material/Close";
import MyButton from "@/components/mui/MyButton";
import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
import CloudEController from "@/api/fileserver/CloudEController";
import { useStores } from "@/store";
import { toJS } from "mobx";
type LogViewProps = {
isshow: boolean;
handleClose: () => void;
logs: any[];
};
const LogView = (props: LogViewProps) => {
const { isshow, handleClose, logs } = props;
const { currentProjectStore } = useStores();
const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
const projectId = toJS(currentProjectStore.currentProjectInfo.id);
// 当前选择的日志
const [logCurrent, setLogCurrent] = useState<number>(0);
// 当前日志的内容文本
const [logText, setLogText] = useState('')
// 当前日志路径
const [logPath, setLogPath] = useState('')
useEffect(() => {
setLogPath(logs[logCurrent]?.logPath)
}, [logs]);
// 请求日志文本
useEffect(() => {
if (logPath) {
const path = logPath.slice(12)
CloudEController.JobFileDownloadText(
path,
fileToken as string,
projectId as string
)?.then((res) => {
setLogText(res.data)
})
}else{
setLogText("")
}
}, [logPath]);
// 选择日志时改变日志路径
useEffect(() => {
setLogPath(logs[logCurrent]?.logPath)
}, [logCurrent]);
// 下载当前日志
const handleDownLoad=()=>{
const path = logPath.slice(12)
CloudEController.JobFileDownload(
path,
fileToken as string,
projectId as string
);
}
return <div className={style.logView} style={isshow ? {} : { display: "none" }}>
<div className={style.logViewBox}>
<CloseIcon onClick={handleClose} className={style.close} />
<div className={style.logViewContentMask}></div>
<div className={style.logViewTop}>
{logs.map((item: any, index: number) => {
return <div
key={index}
onClick={() => { setLogCurrent(index) }}
className={classnames({
[style.logTitle]: true,
[style.logTitleSelected]: index === logCurrent,
})}>
<InsertDriveFileOutlinedIcon className={style.fileIcon} />
<span>{item.logName}</span>
</div>
})}
</div>
<div className={style.logViewContent}>
{logText}
</div>
<div className={style.logViewBottom}>
<MyButton text='下载当前日志' onClick={handleDownLoad} />
</div>
</div>
</div>
}
export default LogView
\ No newline at end of file
src/views/Project/ProjectJobDetail/index.module.css
View file @ 41e296fd
......@@ -68,6 +68,7 @@
margin: 6px 0;
}
.outputLiLeft {
cursor: pointer;
display: flex;
align-items: center;
color: rgba(19, 112, 255, 1);
......
src/views/Project/ProjectOverview/TaskCard/index.tsx
View file @ 41e296fd
......@@ -50,7 +50,7 @@ const TaskCard = (props: TaskCardProps) => {
const goToProjectData = (path: string) => {
const lastIndex = path.lastIndexOf("/");
if (lastIndex !== -1) {
path = path.slice(0, lastIndex + 1);
path = path.slice(0, lastIndex);
}
path = path.slice(12);
if (path) {
......@@ -66,7 +66,7 @@ const TaskCard = (props: TaskCardProps) => {
// 跳转详情页
const gotoDetail = (id: string) => {
navigate(`/product/cadd/projectJobDetail`, {
state: { taskId: id },
state: { taskId: id, from: 'projectOverview' },
});
}
// 渲染状态图标
......
src/views/Project/ProjectOverview/index.tsx
View file @ 41e296fd
......@@ -45,6 +45,8 @@ const ProjectOverview = observer(() => {
});
useEffect(() => {
// 切项目时重置为初始7
setDay("7");
if (currentProjectStore.currentProjectInfo.id) {
getOverview({
id: currentProjectStore.currentProjectInfo.id as string,
......
src/views/Project/ProjectSetting/BaseInfo/index.module.css
View file @ 41e296fd
......@@ -17,7 +17,7 @@
line-height: 22px;
font-size: 14px;
font-weight: 550;
margin-bottom: 12px;
margin-bottom: 8px;
}
.projectInfoName::after {
content: "*";
......@@ -64,7 +64,7 @@
font-size: 14px;
line-height: 22px;
color: #ff4e4e;
margin-bottom: 8px;
margin-bottom: 20px;
}
.deleteText2 {
color: #1e2633;
......
src/views/Project/ProjectSetting/BaseInfo/index.tsx
View file @ 41e296fd
......@@ -276,20 +276,20 @@ const BaseInfo = observer(() => {
const projectList = await getProjectList();
currentProjectStore.setProjectList(projectList);
// 项目删完了
if (projectList.length === 0) {
// if (projectList.length === 0) {
currentProjectStore.changeProject({});
localStorage.setItem("fileServerEndPoint", "");
setProjectInfo({});
} else {
projectList[0].filetoken = getFiletokenAccordingToId(projectList[0].id);
currentProjectStore.changeProject(projectList[0]);
setFileServerEndPointLocalStorage(projectList[0].zoneId);
getFiletokenAccordingToId(projectList[0].id).then((res) => {
projectList[0].filetoken = res;
currentProjectStore.changeProject(projectList[0]);
});
setProjectInfo(projectList[0]);
}
// } else {
// projectList[0].filetoken = getFiletokenAccordingToId(projectList[0].id);
// currentProjectStore.changeProject(projectList[0]);
// setFileServerEndPointLocalStorage(projectList[0].zoneId);
// getFiletokenAccordingToId(projectList[0].id).then((res) => {
// projectList[0].filetoken = res;
// currentProjectStore.changeProject(projectList[0]);
// });
// setProjectInfo(projectList[0]);
// }
},
});
......@@ -429,6 +429,9 @@ const BaseInfo = observer(() => {
className={style.updateButton}
onClick={handleClickUpdate}
loading={updateLoading}
sx={{
height:"32px"
}}
>
保存修改
</LoadingButton>
......@@ -459,10 +462,7 @@ const BaseInfo = observer(() => {
>
<div className={style.deleteBox}>
<div className={style.deleteText1}>
您要删除本项目。已删除的项目将无法恢复！您真的确定吗？
</div>
<div className={style.deleteText2}>
此操作可能会导致数据丢失。为防止意外操作，我们要求您确认您的操作。
删除项目会导致数据丢失，已删除的项目将无法恢复。
</div>
<div className={style.deleteText3}>
请输入“
......
src/views/Project/ProjectSetting/ProjectMembers/components/ChangePermission.tsx
View file @ 41e296fd
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-29 11:28:09
* @LastEditTime: 2022-08-11 18:05:06
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -37,15 +37,7 @@ const ChangePermission = observer((props: IProps) => {
useEffect(() => {
if (permissionDialog?.isShow) {
http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
const arr = [];
const { data } = res;
for (const key in data) {
arr.push({
label: String(data[key]),
value: key,
});
}
setSelectOptions(arr);
setSelectOptions(res.data);
});
}
}, [http, permissionDialog]);
......
src/views/Project/ProjectSetting/ProjectMembers/index.tsx
View file @ 41e296fd
......@@ -164,7 +164,7 @@ const ProjectMembers = observer(() => {
variant="contained"
onClick={onAddMember}
startIcon={<Add />}
size="small"
size="medium"
/>
) : null}
</Box>
......
src/views/Project/ProjectSetting/index.tsx
View file @ 41e296fd
......@@ -39,12 +39,9 @@ const ProjectSetting = observer(() => {
if (currentProjectStore.currentProjectInfo.name) {
return (
<div style={{ padding: 24 }}>
<div style={{ padding:'28px 24px 24px' }}>
<div style={{ display: "flex", alignItems: "center" }}>
<img src={projectImg} alt="项目logo" />
<span style={{ marginLeft: 12 }}>
{currentProjectStore.currentProjectInfo.name}
</span>
<span style={{ fontSize: "18px", lineHeight: "26px", fontWeight: "600", color: "#1E2633" }}>项目设置</span>
</div>
<Box sx={{ width: "100%", typography: "body1" }}>
<Tabs tabList={tabList} />
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.module.css
View file @ 41e296fd
......@@ -16,17 +16,30 @@
line-height: 20px;
color: #565c66;
}
.formItemBox {
background: #ffffff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
border-radius: 4px;
border: 1px solid #ebedf0;
margin-bottom: 24px;
}
/* .taskBox {
margin-bottom: 24px;
} */
.backgroundTitle {
background-color: rgba(245, 246, 247, 1);
height: 48px;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 12px 16px;
padding: 12px 24px;
box-sizing: border-box;
position: relative;
}
.backgroundTitleTextIcon {
position: absolute;
top: 16px;
right: 24px;
visibility: hidden;
}
.backgroundTitleTextIconShow {
......@@ -37,7 +50,6 @@
font-weight: 600;
line-height: 24px;
color: rgba(30, 38, 51, 1);
margin-left: 12px;
}
.taskDescIcon {
margin-left: 8px;
......@@ -46,7 +58,7 @@
margin-left: 8px;
}
.formItems {
padding: 20px 44px 40px 44px;
padding: 16px 24px 4px;
}
.formItem {
margin-bottom: 20px;
......@@ -69,18 +81,19 @@
}
.taskConfigBox {
padding: 24px 44px 40px 44px;
padding: 16px 24px 4px;
}
.flowTitle {
line-height: 16px;
margin: 3px 0 27px;
color: rgba(30, 38, 51, 1);
color: rgba(19, 112, 255, 1);
font-size: 14px;
font-weight: 600;
border-left: 3px solid rgba(19, 112, 255, 1);
padding-left: 3px;
display: flex;
align-items: center;
padding-left: 8px;
}
.parameter {
margin-bottom: 20px;
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ 41e296fd
......@@ -215,18 +215,17 @@ const ConfigForm = (props: ConfigFormProps) => {
</div>
<MyTooltip title={parameter.description} placement="right">
<div className={styles.parameterContent}>
{parameter.domType.toLowerCase() === "file" && (
{(parameter.domType || "").toLowerCase() === "file" && (
<MyInput
onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value || ""}
InputProps={{
endAdornment: (
<img
onClick={() => {
setSelectedBatchNodeId(batchId || "");
setFileSelectType("file");
handleOpenFileSelect(taskId, parameter.name);
}}
value={parameter.value || ""}
InputProps={{
endAdornment: (
<img
src={fileSelectIcon}
alt=""
className={styles.fileSelectImg}
......@@ -239,18 +238,17 @@ const ConfigForm = (props: ConfigFormProps) => {
size="medium"
></MyInput>
)}
{parameter.domType.toLowerCase() === "path" && (
{(parameter.domType || "").toLowerCase() === "path" && (
<MyInput
onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value || ""}
InputProps={{
endAdornment: (
<img
onClick={() => {
setSelectedBatchNodeId(batchId || "");
setFileSelectType("path");
handleOpenFileSelect(taskId, parameter.name);
}}
value={parameter.value || ""}
InputProps={{
endAdornment: (
<img
src={fileSelectIcon}
alt=""
className={styles.fileSelectImg}
......@@ -263,18 +261,17 @@ const ConfigForm = (props: ConfigFormProps) => {
size="medium"
></MyInput>
)}
{parameter.domType.toLowerCase() === "dataset" && (
{(parameter.domType || "").toLowerCase() === "dataset" && (
<MyInput
onFocus={() => setSelectedBatchNodeId(taskId)}
onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value || ""}
InputProps={{
endAdornment: (
<img
onClick={() => {
setSelectedBatchNodeId(taskId);
setFileSelectType("dataset");
handleOpenFileSelect(taskId, parameter.name);
}}
value={parameter.value || ""}
InputProps={{
endAdornment: (
<img
src={fileSelectIcon}
alt=""
className={styles.fileSelectImg}
......@@ -287,7 +284,7 @@ const ConfigForm = (props: ConfigFormProps) => {
size="medium"
></MyInput>
)}
{parameter.domType.toLowerCase() === "input" && (
{(parameter.domType || "").toLowerCase() === "input" && (
<MyInput
onFocus={() => {
setSelectedBatchNodeId(batchId || "");
......@@ -304,7 +301,7 @@ const ConfigForm = (props: ConfigFormProps) => {
size="medium"
></MyInput>
)}
{parameter.domType.toLowerCase() === "select" && (
{(parameter.domType || "").toLowerCase() === "select" && (
<MySelect
onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")}
......@@ -326,7 +323,8 @@ const ConfigForm = (props: ConfigFormProps) => {
fullWidth
></MySelect>
)}
{parameter.domType.toLowerCase() === "multipleselect" && (
{(parameter.domType || "").toLowerCase() ===
"multipleselect" && (
<MySelect
onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")}
......@@ -349,7 +347,7 @@ const ConfigForm = (props: ConfigFormProps) => {
fullWidth
></MySelect>
)}
{parameter.domType.toLowerCase() === "radio" && (
{(parameter.domType || "").toLowerCase() === "radio" && (
<MyRadio
value={parameter.value}
onChange={(e: any) =>
......@@ -362,7 +360,7 @@ const ConfigForm = (props: ConfigFormProps) => {
helperText={parameter.helperText}
></MyRadio>
)}
{parameter.domType.toLowerCase() === "checkbox" && (
{(parameter.domType || "").toLowerCase() === "checkbox" && (
<MyCheckBox
value={parameter.value}
onChange={(e: any) =>
......@@ -398,14 +396,21 @@ const ConfigForm = (props: ConfigFormProps) => {
{templateConfigInfo?.description || ""}
</div>
</div>
<div className={styles.formItemBox}>
<div
className={classnames({
[styles.backgroundTitle]: true,
[styles.backgroundTitlePass]: true,
})}
>
<img src="" alt="" />
<span className={styles.backgroundTitleText}>基础信息</span>
<img
className={classnames({
[styles.backgroundTitleTextIcon]: true,
[styles.backgroundTitleTextIconShow]: !nameHelp.error,
})}
src={jobSueIcon}
alt=""
/>
</div>
<div className={styles.formItems}>
<div className={styles.formItem}>
......@@ -439,13 +444,14 @@ const ConfigForm = (props: ConfigFormProps) => {
<div className={styles.formItem}>
<MyInput
value={outputPath || ""}
InputProps={{
endAdornment: (
<img
onClick={() => {
setSelectedBatchNodeId("");
setFileSelectType("path");
handleOpenFileSelect();
}}
InputProps={{
endAdornment: (
<img
src={fileSelectIcon}
alt="选择输出路径"
className={styles.fileSelectImg}
......@@ -458,23 +464,15 @@ const ConfigForm = (props: ConfigFormProps) => {
</div>
</div>
</div>
</div>
{renderTasks.map((task, taskIndex) => {
return (
<div className={styles.taskBox} key={task.id + taskIndex}>
<div className={styles.formItemBox} key={task.id + taskIndex}>
<div
className={classnames({
[styles.backgroundTitle]: true,
[styles.backgroundTitlePass]: true,
})}
>
<img
className={classnames({
[styles.backgroundTitleTextIcon]: true,
[styles.backgroundTitleTextIconShow]: task.isCheck,
})}
src={jobSueIcon}
alt=""
/>
<span
id={`point${task.id}`}
className={styles.backgroundTitleText}
......@@ -486,10 +484,25 @@ const ConfigForm = (props: ConfigFormProps) => {
<img className={styles.taskDescIcon} src={tipsIcon} alt="" />
</MyTooltip>
)}
<img
className={classnames({
[styles.backgroundTitleTextIcon]: true,
[styles.backgroundTitleTextIconShow]: task.isCheck,
})}
src={jobSueIcon}
alt=""
/>
</div>
<div className={styles.taskConfigBox}>
{randerParameters(task.parameters, task.id, task.id)}
{task.flows.map((flow) => {
if (
flow.parameters.filter(
(parameter) => parameter.hidden === false
).length === 0
) {
return null;
}
return (
<div className={styles.flowConfigBox} key={flow.id}>
<div className={styles.flowTitle}>
......
src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
View file @ 41e296fd
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 15:25:25
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-12 14:09:20
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-09 16:07:33
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { useEffect } from "react";
import Flow from "../../components/Flow";
import { ITemplateConfig } from "../interface";
......@@ -17,6 +18,21 @@ interface IProps {
const WorkFlow = (props: IProps) => {
const { templateConfigInfo, setSelectedBatchNodeId, selectedBatchNodeId } =
props;
/** 页面刷新提醒 */
const pageRefreshTips = (e: any) => {
const event: any = window.event || e;
event.returnValue = "是否离开网站？";
};
/** 监听页面刷新事件 */
useEffect(() => {
window.addEventListener("beforeunload", pageRefreshTips, false);
return () => {
window.removeEventListener("beforeunload", pageRefreshTips, false);
};
});
return (
<Flow
tasks={templateConfigInfo?.tasks}
......
src/views/Project/ProjectSubmitWork/index.module.css
View file @ 41e296fd
......@@ -30,13 +30,14 @@
line-height: 22px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
font-weight: 600;
font-weight: 700;
padding-right: 20px;
border-right: 1px solid rgba(235, 237, 240, 1);
border-right: 1px solid rgba(209, 214, 222, 1);
}
.swHeaderLable {
color: rgba(138, 144, 153, 1);
font-size: 12px;
line-height: 22px;
}
.swHeaderValue {
color: rgba(30, 38, 51, 1);
......
src/views/Project/ProjectSubmitWork/index.tsx
View file @ 41e296fd
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-20 15:00:18
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-08 16:41:20
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -70,16 +70,16 @@ const ProjectSubmitWork = observer(() => {
let value: any = undefined;
if (parameter.defaultValue) {
if (
parameter.domType.toLowerCase() === "multipleselect" ||
parameter.domType.toLowerCase() === "checkbox"
(parameter.domType || "").toLowerCase() === "multipleselect" ||
(parameter.domType || "").toLowerCase() === "checkbox"
) {
value = parameter.defaultValue.split(",");
} else {
value = parameter.defaultValue;
}
} else if (
parameter.domType.toLowerCase() === "multipleselect" ||
parameter.domType.toLowerCase() === "checkbox"
(parameter.domType || "").toLowerCase() === "multipleselect" ||
(parameter.domType || "").toLowerCase() === "checkbox"
) {
value = [];
} else {
......@@ -179,9 +179,9 @@ const ProjectSubmitWork = observer(() => {
value = parameter.value;
}
if (
parameter.domType.toLowerCase() === "path" ||
parameter.domType.toLowerCase() === "dataset" ||
parameter.domType.toLowerCase() === "file"
(parameter.domType || "").toLowerCase() === "path" ||
(parameter.domType || "").toLowerCase() === "dataset" ||
(parameter.domType || "").toLowerCase() === "file"
) {
value = `/${value}`;
}
......@@ -240,8 +240,8 @@ const ProjectSubmitWork = observer(() => {
<ArrowBackIosNewIcon
sx={{
color: "rgba(194, 198, 204, 1)",
width: "12px",
height: "12px",
width: "14px",
height: "14px",
}}
/>
</IconButton>
......@@ -258,8 +258,8 @@ const ProjectSubmitWork = observer(() => {
<div className={styles.swTemplateUpdateTimeBox}>
<span className={styles.swHeaderLable}>更新时间：</span>
<span className={styles.swHeaderValue}>
{templateConfigInfo?.updateTime
? moment(templateConfigInfo?.updateTime).format(
{templateConfigInfo?.updatedTime
? moment(templateConfigInfo?.updatedTime).format(
"YYYY-MM-DD HH:mm:ss"
)
: "-"}
......
src/views/Project/ProjectSubmitWork/interface.ts
View file @ 41e296fd
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-12 11:51:17
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-08 15:55:45
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -56,7 +56,7 @@ export interface ITask {
export interface ITemplateConfig { // 模板信息
title: string; // 标题
version: string; // 版本
updateTime?: string; // 更新时间
updatedTime?: string; // 更新时间
description: string; // 模板描述
language: string;
languageVersion: string;
......
src/views/Project/ProjectWorkbench/workbenchList/index.module.css
View file @ 41e296fd
......@@ -60,9 +60,10 @@
.tabBoxTime {
font-size: 12px;
line-height: 20px;
font-weight: 400;
color: #565C66;
margin-left: 4px;
margin-left: 8px;
}
.tabBoxMiddle {
......@@ -82,9 +83,10 @@
.tabBoxStatusText {
font-size: 12px;
line-height: 20px;
font-weight: 400;
color: #1E2633;
margin: 0px 16px 0px 6px;
margin: 0px 16px 0px 8px;
white-space: nowrap;
}
......
src/views/Project/ProjectWorkbench/workbenchList/index.tsx
View file @ 41e296fd
......@@ -79,7 +79,7 @@ const ProjectMembers = observer(() => {
const [size, setSize] = useState(10);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [count, setCount] = useState(0);
const [loading,setLoading]=useState(false)
const [loading, setLoading] = useState(false)
/** 简单弹窗 */
const [jobData, setJobData] = useState("");
const [openDialog, setOpenDialog] = useState(false);
......@@ -209,6 +209,8 @@ const ProjectMembers = observer(() => {
const renderStatusIcon = (data: string) => {
switch (data) {
case "SUBMITTED":
return jobRun;
case "RUNNING":
return jobRun;
case "ABORTED":
......@@ -224,6 +226,8 @@ const ProjectMembers = observer(() => {
const renderStatusText = (data: string) => {
switch (data) {
case "SUBMITTED":
return "正在启动";
case "RUNNING":
return "正在运行";
case "ABORTED":
......@@ -240,6 +244,8 @@ const ProjectMembers = observer(() => {
/** 渲染字体颜色 */
const renderTextColor = (data: any) => {
switch (data) {
case "SUBMITTED":
return "#1370FF";
case "RUNNING":
return "#1370FF";
case "ABORTED":
......@@ -256,6 +262,8 @@ const ProjectMembers = observer(() => {
/** 渲染进度条颜色 */
const renderProgressColor = useCallback((data: any) => {
switch (data) {
case "SUBMITTED":
return "info";
case "RUNNING":
return "info";
case "ABORTED":
......@@ -273,7 +281,7 @@ const ProjectMembers = observer(() => {
const rowClick = useCallback(
(id: string) => {
navigate(`/product/cadd/projectJobDetail`, {
state: { taskId: id },
state: { taskId: id, from: 'workbenchList' },
});
},
[navigate]
......@@ -419,7 +427,7 @@ const ProjectMembers = observer(() => {
/>
</Box>
<div
style={{ color: renderTextColor(item.state) }}
style={{ color: renderTextColor(item.state), margin: '0px' }}
className={styles.tabBoxStatusText}
>
{item.completeNum + "/" + item.totalNum}
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.module.css
View file @ 41e296fd
......@@ -2,21 +2,36 @@
flex: 1;
background-color: #fff;
border-radius: 16px 0 0 0;
padding: 24px 32px;
padding-top: 24px;
box-sizing: border-box;
}
.headerBox {
padding: 0 32px;
}
.headerBoxShadow {
box-shadow: 0 5px 4px -4px rgb(0, 0, 0, .15);
}
.templateBox {
padding: 0 32px;
height: calc(100vh - 168px);
overflow: auto;
}
.templateList {
/* height: 2000px; */
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.templateLi {
height: 146px;
height: 170px;
box-sizing: border-box;
padding: 16px 20px;
cursor: pointer;
/* cursor: pointer; */
border: 1px solid rgba(235, 237, 240, 1);
border-radius: 4px;
min-width: 20%;
......@@ -24,37 +39,45 @@
margin-right: 16px;
margin-bottom: 16px;
}
.templateLiCustom {
height: 194px;
height: 170px;
}
.templateLiHidden {
visibility: hidden;
}
.addCustomTemplate {
height: 194px;
height: 170px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.addCustomTemplateText {
margin-top: 12px;
line-height: 22px;
font-size: 14px;
color: rgba(138, 144, 153, 1);
}
.templateLi:hover {
box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
}
.templateLi:nth-child(4n) {
margin-right: 0;
}
.templateLiTop {
display: flex;
justify-content: space-between;
align-items: center;
}
.templateTitle {
font-size: 14px;
font-weight: 600;
......@@ -64,14 +87,17 @@
text-overflow: ellipsis;
line-height: 22px;
}
.templateLiInfo {
margin-bottom: 8px;
}
.templateLiInfoText {
line-height: 20px;
font-size: 12px;
color: rgba(19, 112, 255, 1);
}
.templateLiDesc {
overflow: hidden;
text-overflow: ellipsis;
......@@ -82,8 +108,9 @@
font-size: 12px;
color: rgba(138, 144, 153, 1);
}
.templateLiEditBox {
display: flex;
justify-content: flex-end;
margin-top: 16px;
/* margin-top: 16px; */
}
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx
View file @ 41e296fd
......@@ -6,6 +6,7 @@ import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfB
import SearchIcon from "@mui/icons-material/Search";
import MyButton from "@/components/mui/MyButton";
import OutlinedInput from "@mui/material/OutlinedInput";
import MySwitch from "@/components/mui/MySwitch";
import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
import Checkbox from "@mui/material/Checkbox";
import useMyRequest from "@/hooks/useMyRequest";
......@@ -17,6 +18,7 @@ import { useMessage } from "@/components/MySnackbar";
import {
getAddWorkbenchTemplate,
addWorkbenchTemplate,
deleteWorkbenchTemplate,
} from "@/api/workbench_api";
type IAddTemplateProps = {
......@@ -50,6 +52,18 @@ const AddTemplate = (props: IAddTemplateProps) => {
const [templateType, setTemplateType] = useState("public");
// 滚轮是否到顶,判断是否显示阴影
const [isTop, setIsTop] = useState(true)
// 滚动滚轮时监听是否到顶
const onscroll = (e: any) => {
if (e.target.scrollTop <= 0) {
setIsTop(true)
} else {
setIsTop(false)
}
}
const handleRadio = (value: string) => {
setTemplateType(value);
};
......@@ -68,25 +82,36 @@ const AddTemplate = (props: IAddTemplateProps) => {
// 项目管理员-添加工作流模板-提交
const { run: addTemplate } = useMyRequest(addWorkbenchTemplate, {
onSuccess: (result: any) => {
Message.success("添加成功");
setSelectTemplateData([]);
setShowAddTemplate();
getTemplateInfo({
projectId: projectId as string,
});
// Message.success("添加成功");
// setSelectTemplateData([]);
// setShowAddTemplate();
// getTemplateInfo({
// projectId: projectId as string,
// });
},
});
const handleAddTemplate = () => {
if (selectTemplateData.length === 0) {
Message.error("请选择要添加的模板");
} else {
addTemplate({
projectId: projectId as string,
workflowSpecIds: selectTemplateData,
// 删除模板
const { run: delTemplate } = useMyRequest(deleteWorkbenchTemplate, {
onSuccess: (result: any) => {
// setOpenDialog(false);
// getTemplateInfo({
// projectId: currentProjectStore.currentProjectInfo.id as string,
// title: templateName,
// });
},
});
}
};
// const handleAddTemplate = () => {
// if (selectTemplateData.length === 0) {
// Message.error("请选择要添加的模板");
// } else {
// addTemplate({
// projectId: projectId as string,
// workflowSpecIds: selectTemplateData,
// });
// }
// };
// 添加工作流模板-获取模板列表
const { run: getAddTemplateList } = useMyRequest(getAddWorkbenchTemplate, {
......@@ -147,6 +172,23 @@ const AddTemplate = (props: IAddTemplateProps) => {
title,
]);
//模板启用切换
const templateSwitch = (e: any, id: string) => {
if (e.target.checked) {
let arr = []
arr.push(id)
addTemplate({
projectId: projectId as string,
workflowSpecIds: arr,
});
} else {
delTemplate({
projectId: projectId as string,
workflowSpecId: id,
});
}
}
useEffect(() => {
getAddTemplateListFun();
}, [getAddTemplateListFun]);
......@@ -164,6 +206,12 @@ const AddTemplate = (props: IAddTemplateProps) => {
return (
<FullScreenDrawer handleClose={setShowAddTemplate}>
<div className={style.content}>
<div
className={classNames({
[style.headerBox]: true,
[style.headerBoxShadow]: !isTop,
})}
>
<Typography
sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }}
>
......@@ -174,7 +222,8 @@ const AddTemplate = (props: IAddTemplateProps) => {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "20px",
paddingBottom: "20px",
paddingTop: "20px",
}}
>
<OutlinedInput
......@@ -184,7 +233,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
}}
placeholder="输入关键词搜索"
size="small"
sx={{ width: 340, height: 32, marginTop: "20px" }}
sx={{ width: 340, height: 32 }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
<Box
......@@ -199,7 +248,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
radioOptions={radioOptions}
handleRadio={handleRadio}
></RadioGroupOfButtonStyle>
<MyButton
{/* <MyButton
onClick={handleAddTemplate}
size={"small"}
style={{
......@@ -211,9 +260,11 @@ const AddTemplate = (props: IAddTemplateProps) => {
? ""
: `(${selectTemplateData.length})`)
}
/>
/> */}
</Box>
</Box>
</div>
<div className={style.templateBox} onScroll={onscroll} >
{templateType === "public" && addTemplateList.length === 0 && (
<Box
sx={{
......@@ -261,11 +312,11 @@ const AddTemplate = (props: IAddTemplateProps) => {
>
<div className={style.templateLiTop}>
<span className={style.templateTitle}>{item.title}</span>
<Checkbox
{/* <Checkbox
size="small"
sx={{ padding: "0px" }}
checked={selectTemplateData.includes(item.id)}
/>
/> */}
</div>
<div className={style.templateLiInfo}>
<span
......@@ -279,8 +330,17 @@ const AddTemplate = (props: IAddTemplateProps) => {
</span>
</div>
<div className={style.templateLiDesc}>{item.description}</div>
{templateType !== "public" && (
<div className={style.templateLiEditBox}>
<MySwitch
defaultChecked={item.favorited}
onChange={(e: any) =>
templateSwitch(e, item.id)
}
></MySwitch>
</div>
{/* {templateType !== "public" && (
<MyButton
onClick={() => handleEditTemplate(item)}
size={"small"}
......@@ -291,7 +351,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
text="编辑模板"
/>
</div>
)}
)} */}
</div>
);
})}
......@@ -310,6 +370,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
})}
</div>
</div>
</div>
{customTemplateInfo?.show ? (
<WorkFlowEdit
id={customTemplateInfo.id || ""}
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
View file @ 41e296fd
......@@ -28,6 +28,7 @@ const TemplateBox = (props: any) => {
);
return (
<Box className={styles.template}>
<Box className={styles.templateBlock}>
<Box>
<Box
......@@ -81,7 +82,7 @@ const TemplateBox = (props: any) => {
</Typography>
</Box>
<Typography className={styles.templateDescText}>
{info.description}
{info.description ? info.description : "此模板暂无描述。"}
</Typography>
</Box>
<Box
......@@ -92,8 +93,8 @@ const TemplateBox = (props: any) => {
>
{isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
<MyButton
size={"small"}
text={"删除模版"}
size="medium"
text="删除模版"
onClick={() => {
props.startDialog(info.id);
}}
......@@ -102,14 +103,15 @@ const TemplateBox = (props: any) => {
)}
{isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
<MyButton
size={"small"}
text={"使用模版"}
size="medium"
text="使用模版"
onClick={() => addTemplateBlock(info.id)}
style={{ marginLeft: "12px" }}
/>
)}
</Box>
</Box>
</Box>
);
};
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css
View file @ 41e296fd
......@@ -16,10 +16,15 @@
margin-bottom: 24px;
}
.template {
padding: 0 8px;
box-sizing: border-box;
}
.templateBlock {
height: 194px;
background: #ffffff;
box-shadow: 0px 3px 10px 0px rgba(0,24,57,0.0400);
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.0400);
border-radius: 4px;
border: 1px solid #ebedf0;
padding: 16px 20px;
......@@ -32,32 +37,20 @@
}
@media screen and (max-width:1220px) {
.templateBlock {
width: 49%;
margin-right: 2%;
}
.templateBlock:nth-child(2n){
margin-right: 0;
.template {
width: 50%;
}
}
@media screen and (min-width:1220px) and (max-width:1600px) {
.templateBlock {
width: 32.423%;
margin-right: 1.365%;
}
.templateBlock:nth-child(3n){
margin-right: 0;
.template {
width: 33.33333%;
}
}
@media screen and (min-width:1600px) {
.templateBlock {
width: 24%;
margin-right: 1.333%;
}
.templateBlock:nth-child(4n){
margin-right: 0;
.template {
width: 25%;
}
}
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ 41e296fd
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-26 18:34:46
* @LastEditTime: 2022-08-09 16:32:42
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -106,27 +106,23 @@ const ProjectMembers = observer(() => {
if (e.keyCode === 13) {
setTemplateName(e.target.value);
}
}
};
return (
<Box className={styles.headerBox}>
<Box className={styles.tabBox}>
<SearchInput
onKeyUp={handleKeyWordChangeKeyUp}
sx={{ width: 340 }}
/>
{templateList.length > 0 &&
isPass("PROJECT_WORKBENCH_FLOES_ADD", "MANAGER") && (
<SearchInput onKeyUp={handleKeyWordChangeKeyUp} sx={{ width: 340 }} />
{isPass("PROJECT_WORKBENCH_FLOES_ADD", "MANAGER") && (
<MyButton
text={"添加工作流模版"}
img={<Add />}
onClick={addTemplateBlock}
size={"small"}
size={"medium"}
/>
)}
</Box>
{templateList.length === 0 && templateName.length > 0 && (
{templateList.length === 0 && (
<Box
sx={{
display: "flex",
......@@ -140,12 +136,12 @@ const ProjectMembers = observer(() => {
<Typography
sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
>
暂未开启模版
{templateName ? "暂未相应搜索结果" : "暂未开启模版"}
</Typography>
</Box>
)}
{templateList.length > 0 && (
<Box sx={{ display: "flex", flexWrap: "wrap" }}>
<Box sx={{ display: "flex", flexWrap: "wrap", margin: "0 -8px" }}>
{templateList &&
templateList.length > 0 &&
templateList.map((item, key) => {
......@@ -155,34 +151,16 @@ const ProjectMembers = observer(() => {
})}
</Box>
)}
{templateList.length === 0 &&
templateName.length === 0 &&
isPass("PROJECT_WORKBENCH_FLOES_ADD", "MANAGER") && (
<Box className={styles.addNewTemplate} onClick={addTemplateBlock}>
<Add
sx={{
color: "#565C66",
fontSize: "20px",
width: "30px",
height: "30px",
}}
/>
<Typography
sx={{
fontSize: "14px",
fontWeight: "400",
color: "#8A9099",
marginTop: "15px",
}}
>
添加工作流模版
</Typography>
</Box>
)}
{showAddTemplate && (
<AddTemplate
setShowAddTemplate={() => setShowAddTemplate(false)}
setShowAddTemplate={() => {
setShowAddTemplate(false);
getTemplateInfo({
projectId: projectIdData as string,
title: templateName,
});
}}
getTemplateInfo={getTemplateInfo}
productId={productId as string}
projectId={projectIdData as string}
......
src/views/Project/components/AddProject/index.tsx
View file @ 41e296fd
......@@ -214,7 +214,7 @@ const AddProject = (props: IAddProjectProps) => {
id="desc"
label="项目描述"
multiline
rows={5}
rows={4}
placeholder="请输入项目描述"
onChange={handleDescChange}
helperText={descCheck.help}
......@@ -224,7 +224,7 @@ const AddProject = (props: IAddProjectProps) => {
position: "absolute",
bottom: "7px",
right: "12px",
color: desc.length >= 100 ? "#d32f2f" : "#C2C6CC"
color: desc.length >= 300 ? "#d32f2f" : "#C2C6CC"
}}
>
{desc.length}/300
......
src/views/Project/components/CurrentProject/index.tsx
View file @ 41e296fd
......@@ -21,6 +21,11 @@ const CurrentProject = observer(() => {
document.addEventListener("click", (e) => {
setProjectListOpen(false);
});
return () => {
document.removeEventListener("click", (e) => {
setProjectListOpen(false);
});
};
}, []);
const handleShowProjectList = (event: React.MouseEvent<HTMLElement>) => {
......@@ -85,6 +90,7 @@ const CurrentProject = observer(() => {
<Fade {...TransitionProps} timeout={350}>
<div>
<ProjectListPopper
setProjectListOpen={setProjectListOpen}
handleClickOpen={openAddProject}
handleChangeCurrentProject={handleChangeCurrentProject}
/>
......
src/views/Project/components/Flow/components/BatchNode/index.module.css
View file @ 41e296fd
......@@ -39,3 +39,12 @@
.batchRotate {
transform: translateX(-50%) rotate(-90deg);
}
.handleBox::before{
content: "";
position: absolute;
left: -4px;
top: -4px;
width: 14px;
height: 14px;
}
src/views/Project/components/Flow/components/BatchNode/index.tsx
View file @ 41e296fd
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-12 11:20:29
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-22 10:43:28
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-09 11:24:38
* @FilePath: /bkunyun/src/views/Project/components/Flow/components/BatchNode.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -65,13 +65,14 @@ const BatchNode = (props: IBatchNode) => {
return (
<MyTooltip title={item.name} key={uuid()}>
<Handle
className={styles.handleBox}
id={item.name}
style={{
background: "#fff ",
border: item.error
? "1px solid #FF4E4E"
: "1px solid #D1D6DE",
left: index * 20 + 20,
left: index * 24 + 20,
}}
type="target"
position={Position.Top}
......@@ -95,11 +96,12 @@ const BatchNode = (props: IBatchNode) => {
return (
<MyTooltip title={item.name} key={uuid()}>
<Handle
className={styles.handleBox}
id={item.name}
style={{
background: "#fff ",
border: "1px solid #D1D6DE",
left: index * 20 + 20,
left: index * 24 + 20,
}}
type="source"
position={Position.Bottom}
......
src/views/Project/components/Flow/components/BatchOperatorFlow/index.tsx 0 → 100644
View file @ 41e296fd
// 自定义批算子时使用的流程图
import ReactFlow, {
Controls,
Background,
useNodesState,
useEdgesState,
ReactFlowProps,
Node,
Connection,
Edge,
} from "react-flow-renderer";
import { useCallback, useEffect, useMemo, useState } from "react";
import { uuid } from "@/utils/util";
import { IParameter, ITask } from "../../../../ProjectSubmitWork/interface";
import { ILine } from "../../interface";
import BatchNode from "../BatchNode";
import FlowNode from "../FlowNode";
import { getCustomTemplateParameterCheckResult } from "@/views/WorkFlowEdit/util";
import { useMessage } from "@/components/MySnackbar";
import styles from "./index.module.css";
interface IProps extends ReactFlowProps {
tasks?: ITask[];
/** 类型， edit为编辑类型 */
type?: "edit" | "default";
/** 设置组件数据 组件为编辑状态使用 */
setTasks?: (val: ITask[]) => void;
/** 点击流程node 节点 返回唯一标识符 */
onFlowNodeClick?: (val: string) => void;
/** 监听事件的状态 */
ListenState?: boolean;
/** 流节点是否可以拖拽 */
flowNodeDraggable?: boolean;
// 是否显示Controls（放大缩小全屏等按钮）
showControls?: boolean;
showVersion?: boolean; // 在流程图中是否显示算子版本
}
const BatchOperatorFlow = (props: IProps) => {
const {
tasks,
type: flowType = "default",
setTasks,
onFlowNodeClick,
ListenState = true,
flowNodeDraggable = false,
showControls = true,
showVersion = false,
...other
} = props;
console.log(tasks);
/** 自定义的节点类型 */
const nodeTypes = useMemo(() => {
return { batchNode: BatchNode, flowNode: FlowNode };
}, []);
/** 内部维护的选择的flow节点Id */
const [inSideFlowNodeId, setInSideFlowNodeId] = useState<string>("");
/** 选中的线 */
const [selectedEdge, setSelectedEdge] = useState<Edge>();
const Message = useMessage();
/** 原始数据删除线 */
const tasksDeleteLine = useCallback(
(connection: Connection | Edge | any) => {
const result =
(tasks?.length &&
tasks.map((item) => {
// /** 删除batch起始的edges中的一项 === 等于删除了一根连线 */
if (item.id === connection.source) {
const newEdges =
(item.edges?.length &&
item.edges?.filter((every) => every.id !== connection.id)) ||
[];
return {
...item,
edges: newEdges,
};
} else {
return item;
}
})) ||
[];
return result;
},
[tasks]
);
/** 删除流节点或者线 */
const deleteSelectFlowNode = useCallback(
(e: any) => {
if (e.keyCode === 8 && ListenState) {
/** 删除流节点逻辑 */
if (inSideFlowNodeId) {
const newVal =
(tasks?.length &&
tasks.filter((item) => {
return item.id !== inSideFlowNodeId;
})) ||
[];
// 删除节点时同时删除相关的线
newVal?.forEach((task) => {
task.edges = task.edges.filter(
(edge) => edge.target !== inSideFlowNodeId
);
});
setTasks && setTasks(newVal);
}
if (selectedEdge) {
const newVal = tasksDeleteLine(selectedEdge);
setTasks && setTasks(newVal);
}
}
},
[
inSideFlowNodeId,
ListenState,
tasks,
selectedEdge,
setTasks,
tasksDeleteLine,
]
);
/** 监听鼠标按下事件 */
useEffect(() => {
window.addEventListener("keyup", deleteSelectFlowNode);
return () => {
window.removeEventListener("keyup", deleteSelectFlowNode);
};
}, [deleteSelectFlowNode]);
/** 生成初始化node节点 */
const initialNodes = useMemo(() => {
const val: any = [];
tasks?.length &&
tasks.forEach((item) => {
val.push({
id: item.id,
type: "flowNode",
/** 每一项的数据 */
data: {
info: item,
...{
selectedStatus: inSideFlowNodeId === item.id,
flowNodeStyle: {
backgroundColor: "#fff",
borderRadius: "4px",
},
inStyle: {
backgroundColor: "rgba(19, 112, 255, 1)",
border: "none",
left: 12,
},
outStyle: {
backgroundColor: "rgba(19, 112, 255, 1)",
border: "none",
left: 12,
},
},
/** 样式 */
style: {
padding: "20px",
},
showVersion,
},
/** 坐标 */
position: {
x: Number(item.position?.x) || 0,
y: Number(item.position?.y) || 0,
},
/**
* extent: "parent" 跟随父节点移动
* draggable: false 节点不可移动
*/
draggable: flowNodeDraggable,
});
});
return val;
}, [tasks, inSideFlowNodeId, flowNodeDraggable, showVersion]);
/** 生成初始化的连线节点 */
const initialEdges = useMemo(() => {
const val: ILine[] = [];
tasks?.length &&
tasks.forEach((item) => {
item?.edges?.length &&
item?.edges.forEach((every) => {
const newLine = {
...every,
};
val.push(newLine);
}, []);
});
return val.map((item: ILine) => {
return {
...item,
/** 点击线选中 */
...(selectedEdge?.id === item.id
? {
style: { stroke: "#1370FF", strokeWidth: 2 },
animated: true,
}
: {}),
labelStyle: { fill: "#8A9099" },
labelBgStyle: { fill: "#F7F8FA " },
label: item.label ? `(${item.label})` : "",
};
});
}, [selectedEdge?.id, tasks]);
/** flowNode点击事件 */
const onNodeClick = (e: any, node: Node) => {
tasks?.forEach((item) => {
if (item.id === node.id) {
setInSideFlowNodeId(node.id);
}
});
if (onFlowNodeClick) {
onFlowNodeClick(node.id);
}
/** 点击node统一清除选中的edge */
setSelectedEdge(undefined);
};
// 点击面板、画布
const handlePaneClick = () => {
setInSideFlowNodeId("");
setSelectedEdge(undefined);
};
/** node节点 */
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
/** 连线数组 */
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
useEffect(() => {
setEdges(initialEdges);
}, [initialEdges, setEdges]);
useEffect(() => {
setNodes(initialNodes);
}, [initialNodes, setNodes]);
/** 节点拖动停止 */
const onNodeDragStop = useCallback(
(event: React.MouseEvent, node: Node) => {
const newVal =
(tasks?.length &&
tasks.map((item) => {
if (item.id === node.id) {
return {
...item,
position: node.position,
};
} else {
return item;
}
})) ||
[];
setTasks && setTasks(newVal);
},
[setTasks, tasks]
);
const connectModifyParameters = useCallback(
(parameters: IParameter[], edgeItem: Connection) => {
return parameters.map((item) => {
if (item.name === edgeItem.targetHandle) {
const { error, helperText } = getCustomTemplateParameterCheckResult({
...item,
linked: true,
hidden: true,
});
return { ...item, linked: true, hidden: true, helperText, error };
} else {
return item;
}
});
},
[]
);
/** 获取连接线的端点类型 */
const getClassType = useCallback(
(connection: Connection) => {
let inputClassType = "",
outClassType: string | undefined = undefined;
tasks?.length &&
tasks.forEach((item) => {
if ([connection.source, connection.target].includes(item.id)) {
item.parameters.forEach((every) => {
if (every.name === connection.targetHandle) {
inputClassType = every.classType;
}
if (every.name === connection.sourceHandle) {
outClassType = every.classType;
}
});
}
});
return { inputClassType, outClassType };
},
[tasks]
);
/** 连接校验并修改值 */
const connectCheck = useCallback(
(connection: Connection) => {
const newVal =
(tasks?.length &&
tasks?.map((item) => {
if (item.id === connection.source) {
return {
...item,
edges: [
...item.edges,
{
...connection,
id: uuid(),
},
],
};
} else if (item.id === connection.target) {
return {
...item,
parameters: connectModifyParameters(
item.parameters,
connection
),
};
} else {
return item;
}
})) ||
[];
return newVal;
},
[connectModifyParameters, tasks]
);
/** 已经连接线啦 */
const onConnect = useCallback(
(connection: Connection) => {
const { inputClassType, outClassType } = getClassType(connection);
let result: ITask[] = [];
if (inputClassType === outClassType) {
result = connectCheck(connection) as ITask[];
} else {
Message.error("端口数据类型不一致，无法连接！");
result = tasksDeleteLine(connection);
}
setTasks && setTasks(result);
},
[Message, connectCheck, getClassType, setTasks, tasksDeleteLine]
);
/** 点击连线 */
const onEdgeClick = useCallback((e: any, val: Edge) => {
setSelectedEdge(val);
/** 点击连线清除选中的node ID */
setInSideFlowNodeId("");
}, []);
const reactFlowParams =
flowType === "edit"
? {
onNodesChange,
onEdgesChange,
onNodeDragStop,
onConnect,
onEdgeClick,
}
: {};
return (
<ReactFlow
className={styles.reactFlowBox}
nodes={nodes}
edges={edges}
fitView={flowType === "default" ? true : false}
{...reactFlowParams}
nodeTypes={nodeTypes}
onPaneClick={handlePaneClick}
onNodeClick={onNodeClick}
{...other}
>
{showControls && <Controls />}
<Background color="#aaa" gap={16} />
</ReactFlow>
);
};
export default BatchOperatorFlow;
src/views/Project/components/Flow/components/FlowNode/index.module.css
View file @ 41e296fd
......@@ -23,3 +23,23 @@
border-radius: 8px;
margin-left: 8px;
}
.errorDot{
display: inline-block;
line-height: 22px;
vertical-align: middle;
width: 8px;
height: 8px;
background-color: #FF4E4E;
border-radius: 8px;
margin-left: 8px;
}
.handleBox::before{
content: "";
position: absolute;
left: -4px;
top: -4px;
width: 14px;
height: 14px;
}
\ No newline at end of file
src/views/Project/components/Flow/components/FlowNode/index.tsx
View file @ 41e296fd
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-12 11:29:46
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-12 21:06:48
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-09 19:06:43
* @FilePath: /bkunyun/src/views/Project/components/Flow/components/FlowNode/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import classNames from "classnames";
import { Handle, Position } from "react-flow-renderer";
import { useMemo } from "react";
// import { IParameter } from "@/views/Project/ProjectSubmitWork/interface";
import { uuid } from "@/utils/util";
import { IExecutionStatus } from "@/views/Project/ProjectSubmitWork/interface";
import jobFail from "@/assets/project/jobFail.svg";
import jobRun from "@/assets/project/jobRun.svg";
import jobSue from "@/assets/project/jobSue.svg";
import MyTooltip from "@/components/mui/MyTooltip";
import styles from "./index.module.css";
/** 自定义flow节点 */
......@@ -35,25 +39,80 @@ const FlowNode = (props: any) => {
const {
dotStatus,
selectedStatus,
info: { title, isCheck, executionStatus },
flowNodeStyle = { display: "flex", alignItems: "center" }, // 样式
inStyle = { background: "#C2C6CC ", left: 12 }, // 样式
outStyle = { background: "#C2C6CC ", left: 12 }, // 样式
flowType,
info: { title, isCheck, executionStatus, parameters, version },
showVersion,
} = data;
/** 获取输入参数数组 */
const inParamsArr = useMemo(() => {
return (
(parameters?.length &&
parameters?.filter((item: any) => {
return item.parameterGroup === "in";
})) ||
[]
);
}, [parameters]);
/** 获取输出参数数组 */
const outParamsArr = useMemo(() => {
return (
(parameters?.length &&
parameters?.filter((item: any) => {
return item.parameterGroup === "out";
})) ||
[]
);
}, [parameters]);
return (
<div
style={flowNodeStyle}
className={classNames({
[styles.flowNode]: true,
[styles.selectedFlowBox]: selectedStatus,
})}
>
{dotStatus?.isInput ? (
{/* {dotStatus?.isInput ? (
<Handle
style={{ background: "#C2C6CC ", left: 12 }}
className={styles.handleBox}
style={inStyle}
type="target"
position={Position.Top}
/>
) : null} */}
{inParamsArr?.length
? inParamsArr.map((item: any, index: number) => {
return (
<MyTooltip title={item.name} key={uuid()}>
<Handle
className={styles.handleBox}
id={item.name}
style={{
background: "#fff ",
border: "1px solid #D1D6DE",
...inStyle,
left: index * 24 + 16,
}}
type="target"
position={Position.Top}
/>
</MyTooltip>
);
})
: null}
<div>
{title || ""} {showVersion && version}
{flowType !== "edit" && isCheck ? (
<span className={styles.successDot}></span>
) : null}
{flowType === "edit" && isCheck === false ? (
<span className={styles.errorDot}></span>
) : null}
<div style={{ display: "flex", alignItems: "center" }}>
{title || ""}
{isCheck && <span className={styles.successDot}></span>}
{getImgUrl(executionStatus) && (
<img
style={{ marginLeft: "6px" }}
......@@ -62,13 +121,34 @@ const FlowNode = (props: any) => {
/>
)}
</div>
{dotStatus?.isOutput ? (
{/* {dotStatus?.isOutput ? (
<Handle
style={{ background: "#C2C6CC ", left: 12 }}
className={styles.handleBox}
style={outStyle}
type="source"
position={Position.Bottom}
/>
) : null}
) : null} */}
{outParamsArr?.length
? outParamsArr.map((item: any, index: number) => {
return (
<MyTooltip title={item.name} key={uuid()}>
<Handle
className={styles.handleBox}
id={item.name}
style={{
background: "#fff ",
border: "1px solid #D1D6DE",
...outStyle,
left: index * 24 + 16,
}}
type="source"
position={Position.Bottom}
/>
</MyTooltip>
);
})
: null}
</div>
);
};
......
src/views/Project/components/Flow/index.tsx
View file @ 41e296fd
......@@ -18,7 +18,7 @@ import FlowNode from "./components/FlowNode";
import { getCustomTemplateParameterCheckResult } from "@/views/WorkFlowEdit/util";
import { useMessage } from "@/components/MySnackbar";
import styles from './index.module.css'
import styles from "./index.module.css";
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
......@@ -61,11 +61,11 @@ const Flow = (props: IProps) => {
showControls = true,
...other
} = props;
console.log(tasks);
/** 自定义的节点类型 */
const nodeTypes = useMemo(() => {
return { batchNode: BatchNode, flowNode: FlowNode };
}, []);
console.log(tasks, "11111");
/** 内部维护的选择的batch节点Id */
const [inSideBatchNodeId, setInSideBatchNodeId] = useState<string>("");
/** 内部维护的选择的flow节点Id */
......@@ -76,7 +76,7 @@ const Flow = (props: IProps) => {
/** 原始数据删除线 */
const tasksDeleteLine = useCallback(
(connection: Connection | Edge) => {
(connection: Connection | Edge | any) => {
const result =
(tasks?.length &&
tasks.map((item) => {
......@@ -84,9 +84,7 @@ const Flow = (props: IProps) => {
if (item.id === connection.source && item.type === "BATCH") {
const newEdges =
(item.edges?.length &&
item.edges?.filter(
(every) => every.sourceHandle !== connection.sourceHandle
)) ||
item.edges?.filter((every) => every.id !== connection.id)) ||
[];
return {
......@@ -145,6 +143,15 @@ const Flow = (props: IProps) => {
);
})) ||
[];
// 删除节点时同时删除相关的线
newVal?.forEach((task) => {
task.edges =
(task?.edges?.length &&
task.edges.filter(
(edge) => edge.target !== inSideBatchNodeId
)) ||
[];
});
setTasks && setTasks(newVal);
}
if (selectedEdge) {
......@@ -153,7 +160,14 @@ const Flow = (props: IProps) => {
}
}
},
[inSideBatchNodeId, selectedEdge, setTasks, tasks, tasksDeleteLine]
[
inSideBatchNodeId,
selectedEdge,
setTasks,
tasks,
tasksDeleteLine,
ListenState,
]
);
/** 监听鼠标按下事件 */
......@@ -165,25 +179,25 @@ const Flow = (props: IProps) => {
}, [deleteSelectBatchNode]);
/** 获取是否有输入节点或者是否有输出节点 */
const nodesInputAndOutputStatus = useCallback(
(id: string) => {
/** 所有的连线 */
const lineArr: IEdge[] = [];
tasks?.length &&
tasks.forEach((item) => {
item.edges?.length && lineArr.push(...item.edges);
});
/** 所有的输入节点ID */
const isInput = lineArr?.some((item) => item.target === id);
/** 所有的输出节点ID */
const isOutput = lineArr?.some((item) => item.source === id);
return {
isInput,
isOutput,
};
},
[tasks]
);
// const nodesInputAndOutputStatus = useCallback(
// (id: string) => {
// /** 所有的连线 */
// const lineArr: IEdge[] = [];
// tasks?.length &&
// tasks.forEach((item) => {
// item.edges?.length && lineArr.push(...item.edges);
// });
// /** 所有的输入节点ID */
// const isInput = lineArr?.some((item) => item.target === id);
// /** 所有的输出节点ID */
// const isOutput = lineArr?.some((item) => item.source === id);
// return {
// isInput,
// isOutput,
// };
// },
// [tasks]
// );
/** 获取是否有流节点 */
const isFlowNode = useCallback(
......@@ -245,10 +259,10 @@ const Flow = (props: IProps) => {
/** 每一项的数据 */
data: {
info: item,
...(item.type === "BATCH"
? {
/** flow组件类型 */
flowType,
...(item.type === "BATCH"
? {
/** 是否有流节点 */
isFlowNode: isFlowNode(item.id),
/** 选中状态 */
......@@ -260,7 +274,7 @@ const Flow = (props: IProps) => {
}
: { selectedStatus: inSideFlowNodeId === item.id }),
/** 输入输出圆点状态 */
dotStatus: nodesInputAndOutputStatus(item.id),
// dotStatus: nodesInputAndOutputStatus(item.id),
/** 样式 */
style: {
......@@ -292,7 +306,7 @@ const Flow = (props: IProps) => {
selectedBatchNodeId,
inSideBatchNodeId,
inSideFlowNodeId,
nodesInputAndOutputStatus,
// nodesInputAndOutputStatus,
getBatchStyle,
]);
......@@ -376,6 +390,7 @@ const Flow = (props: IProps) => {
setInSideFlowNodeId("");
onBatchClick && onBatchClick("");
setSelectedEdge(undefined);
onFlowNodeClick && onFlowNodeClick("");
};
/** node节点 */
......
src/views/Project/components/ProjectListPopper/index.tsx
View file @ 41e296fd
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-08-02 11:43:28
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-02 19:36:32
* @LastEditTime: 2022-08-11 18:50:31
* @FilePath: /bkunyun/src/views/Project/components/ProjectListPopper/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -19,7 +19,8 @@ import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
const ProjectListPopper = observer((props: any) => {
const { handleChangeCurrentProject, handleClickOpen } = props;
const { handleChangeCurrentProject, handleClickOpen, setProjectListOpen } =
props;
const { currentProjectStore } = useStores();
const projectList = toJS(currentProjectStore.projectList);
const currentProjectId = toJS(currentProjectStore.currentProjectInfo.id);
......@@ -36,6 +37,7 @@ const ProjectListPopper = observer((props: any) => {
}, [projectList, name]);
const handleProjectBox = (e: React.SyntheticEvent) => {
setProjectListOpen(false);
e.nativeEvent.stopImmediatePropagation();
};
......
src/views/WorkFlowEdit/components/OperatorList/index.module.css
View file @ 41e296fd
......@@ -32,6 +32,15 @@
padding: 2px 8px;
}
.versionBox {
display: inline-block;
color: #1E2633;
border-radius: 2px;
font-size: 12px;
padding: 2px 8px;
background-color: #F0F2F5;
}
.searchBox {
padding: 0 24px 16px 24px;
}
......
src/views/WorkFlowEdit/components/OperatorList/index.tsx
View file @ 41e296fd
import { OutlinedInput } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import classNames from "classnames";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
import { toJS } from "mobx";
import cloneDeep from "lodash/cloneDeep";
......@@ -10,10 +10,9 @@ import { IOperatorItemProps, IOperatorListProps } from "./interface";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
import useMyRequest from "@/hooks/useMyRequest";
import { IResponse } from "@/api/http";
import { fetchOperatorList, fetchVersionOperator } from "@/api/workbench_api";
import { fetchOperatorList } from "@/api/workbench_api";
import { useStores } from "@/store";
import noTemplate from "@/assets/project/noTemplate.svg";
import MyMenu from "@/components/mui/MyMenu";
import styles from "./index.module.css";
......@@ -30,15 +29,13 @@ let count = 1;
const OperatorItem = (props: IOperatorItemProps) => {
const {
info: { title, description, tags, allVersions, version },
info: { title, description, tags, version },
setTemplateConfigInfo,
templateConfigInfo,
setOperatorListData,
operatorListData,
info,
} = props;
const [isDragStyle, setIsDragStyle] = useState<boolean>(false);
const [versionValue, setVersionValue] = useState<string>("");
/** 拖拽开始 */
const onDragStart = useCallback(() => {
......@@ -46,27 +43,6 @@ const OperatorItem = (props: IOperatorItemProps) => {
count++;
}, []);
// 获取指定版本的算子
const { run: getVersionOperator } = useMyRequest(fetchVersionOperator, {
onSuccess: (res: IResponse<any>) => {
if (res.data) {
let index: number | undefined = undefined;
const newVal = operatorListData.filter((item, i) => {
const bol = item.id === info.id || item.parentNode === info.id;
if (bol && index === undefined) {
index = i;
}
return !bol;
});
if (index !== undefined) {
newVal.splice(index, 0, ...res.data);
}
setOperatorListData(newVal);
}
},
});
/** 通过id查找相对的批流数组 */
const getBatchFlowArr = useCallback(
(id: string) => {
......@@ -99,7 +75,7 @@ const OperatorItem = (props: IOperatorItemProps) => {
x: item.type === "BATCH" ? x : item.position?.x,
y: item.type === "BATCH" ? y : item.position?.y,
},
edges: newEdges.length ? newEdges : item?.edges,
edges: newEdges?.length ? newEdges : item?.edges,
};
});
return newVal;
......@@ -144,27 +120,6 @@ const OperatorItem = (props: IOperatorItemProps) => {
]
);
/** 所有版本信息格式化 */
const getAllVersion = useMemo(() => {
return (
allVersions?.length &&
allVersions?.map((item) => {
return { label: item, value: item };
})
);
}, [allVersions]);
/** 切换版本 */
const changeVersion = useCallback(
(val: string) => {
if (val !== versionValue) {
setVersionValue(val);
getVersionOperator({ title: info.title, version: val });
}
},
[getVersionOperator, info.title, versionValue]
);
return (
<div
className={classNames({
......@@ -192,17 +147,7 @@ const OperatorItem = (props: IOperatorItemProps) => {
</span>
);
})}
<MyMenu
options={getAllVersion || []}
value={versionValue || version || ""}
setValue={(val: string) => {
changeVersion(val);
}}
>
<div className={styles.versionBox}>{`版本：${
versionValue || version
}`}</div>
</MyMenu>
<span className={styles.versionBox}>{version}</span>
</div>
</div>
);
......@@ -211,7 +156,8 @@ const OperatorItem = (props: IOperatorItemProps) => {
const OperatorList = observer((props: IOperatorListProps) => {
const { currentProjectStore } = useStores();
const productId = toJS(currentProjectStore.currentProductInfo.id);
const { templateConfigInfo, setTemplateConfigInfo } = props;
const { templateConfigInfo, setTemplateConfigInfo, showCustomOperator } =
props;
const [operatorListData, setOperatorListData] = useState<ITask[]>([]);
const [keyword, setKeyword] = useState<string>("");
......@@ -223,22 +169,29 @@ const OperatorList = observer((props: IOperatorListProps) => {
});
useEffect(() => {
if (!showCustomOperator) {
run({
owner: "root",
productId: "cadd" || "",
productId: productId as string,
});
}, [productId, run]);
}
}, [productId, run, showCustomOperator]);
/** 处理回车键 */
const handleEnterCode = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.keyCode === 13) {
getOperatorList();
}
};
const getOperatorList = useCallback(() => {
run({
owner: "root",
productId: "cadd" || "",
productId: productId as string,
keyword,
});
}
};
}, [run, keyword, productId]);
return (
<div className={styles.operatorListBox}>
<div className={styles.searchBox}>
......
src/views/WorkFlowEdit/components/OperatorList/interface.ts
View file @ 41e296fd
......@@ -19,4 +19,5 @@ export interface IOperatorItemProps {
export interface IOperatorListProps {
templateConfigInfo: ITask[]
setTemplateConfigInfo: (val: ITask[]) => void
showCustomOperator: boolean
}
\ No newline at end of file
src/views/WorkFlowEdit/components/SaveCustomTemplate/index.tsx
View file @ 41e296fd
......@@ -229,7 +229,7 @@ const SaveCustomTemplate = (props: IProps) => {
required
error={titleHelper.error}
helperText={titleHelper.helperText}
style={{ margin: "20px 0" }}
style={{ margin: "8px 0 20px" }}
disabled={id ? true : false}
></MyInput>
<MyInput
......@@ -240,14 +240,27 @@ const SaveCustomTemplate = (props: IProps) => {
helperText={versionHelper.helperText}
style={{ marginBottom: "20px" }}
></MyInput>
<div style={{ position: "relative" }}>
<MyInput
value={description}
id="desc"
label="模板描述"
placeholder="模板描述"
onChange={handleDescriptionChange}
multiline
rows={4}
></MyInput>
/>
<span
style={{
position: "absolute",
bottom: "7px",
right: "12px",
color: description.length >= 300 ? "#d32f2f" : "#C2C6CC"
}}
>
{description.length}/300
</span>
</div>
</div>
</MyDialog>
);
......
src/views/WorkFlowEdit/index.tsx
View file @ 41e296fd
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-20 15:01:18
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-09 15:49:59
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -101,6 +101,20 @@ const WorkFlowEdit = observer((props: IProps) => {
}
}, [id, fetchTemplateConfigInfoRun]);
/** 页面刷新提醒 */
const pageRefreshTips = (e: any) => {
const event: any = window.event || e;
event.returnValue = "确定回退页面吗？";
};
/** 监听页面刷新事件 */
useEffect(() => {
window.addEventListener("beforeunload", pageRefreshTips, false);
return () => {
window.removeEventListener("beforeunload", pageRefreshTips, false);
};
});
// 确认弹窗相对位置
const [anchorEl, setAnchorEl] = useState<any>(null);
// 隐藏确认弹窗， 确认弹窗点击取消
......@@ -204,6 +218,7 @@ const WorkFlowEdit = observer((props: IProps) => {
</div>
{leftContentType === "list" && (
<OperatorList
showCustomOperator={showCustomOperator}
templateConfigInfo={templateConfigInfo}
setTemplateConfigInfo={setTemplateConfigInfo}
/>
......@@ -228,7 +243,7 @@ const WorkFlowEdit = observer((props: IProps) => {
setTasks={setTemplateConfigInfo}
type="edit"
onFlowNodeClick={handleNodeClick}
ListenState={!saveFormDialog}
ListenState={!saveFormDialog && !showCustomOperator}
/>
</div>
</div>
......@@ -237,6 +252,7 @@ const WorkFlowEdit = observer((props: IProps) => {
anchorEl={anchorEl}
onCancel={handleCancel}
onConfirm={handleConfirm}
placement="bottom-end"
/>
{saveFormDialog && (
<SaveCustomTemplate
......@@ -258,6 +274,9 @@ const WorkFlowEdit = observer((props: IProps) => {
{showCustomOperator && (
<CustomOperator
setShowCustomOperator={() => setShowCustomOperator(false)}
initOperatorList={JSON.parse(
sessionStorage.getItem("operatorList") || "[]"
)}
/>
)}
</div>
......
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