Commit 59e84381 authored by 吴永生#A02208's avatar 吴永生#A02208

fix: 算子列表联调

parent a5a80933
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-13 09:56:57
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-24 16:32:31
* @LastEditTime: 2022-07-07 18:19:20
* @FilePath: /bkunyun/src/api/api_manager.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -36,6 +36,7 @@ const RESTAPI = {
API_WORKBENCH_CANCEL_WORKFLOWJOB: `${BACKEND_API_URI_PREFIX}/cpp/workflow/cancel`, //取消工作流
API_SUBMIT_WORKFLOW: `${BACKEND_API_URI_PREFIX}/cpp/workflow/submit`, //提交工作流
API_WORKBENCH_WORKFLOW_TASKINFO: `${BACKEND_API_URI_PREFIX}/cpp/workbench/workflowjob/task-info`, //查询任务某个算子详情
API_OPERATOR_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflow/actorspecs`, // 获取算子列表
};
export default RESTAPI;
export interface IGetOperatorList {
owner: string;
productId: string;
keyword?: string
}
\ No newline at end of file
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-05 14:00:37
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-07 18:24:16
* @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 { IGetOperatorList } from "./workbenchInterface";
function current() {
return request({
......@@ -119,6 +128,15 @@ const cancelWorkflowJob = (params: workflowJobCancelParams) => {
});
};
// 获取算子列表数据
const fetchOperatorList = (params: IGetOperatorList) => {
return request({
url: Api.API_OPERATOR_LIST,
method: "get",
params,
});
};
export {
current,
menu,
......@@ -128,5 +146,6 @@ export {
addWorkbenchTemplate,
getWorkflowJobList,
deleteWorkflowJob,
cancelWorkflowJob
cancelWorkflowJob,
fetchOperatorList
};
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:17:23
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-14 10:28:43
* @LastEditTime: 2022-07-07 22:03:00
* @FilePath: /bkunyun/src/react-app-env.d.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -80,7 +80,9 @@ declare module "*.module.sass" {
declare module "@mui/lab";
declare module "lodash";
declare module 'lodash/cloneDeep'
declare module "@mui/material/Tab";
declare module "tus-js-client";
declare module "uuid";
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-16 20:49:14
* @LastEditTime: 2022-07-07 18:08:33
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -28,168 +28,176 @@ import { isProjectOwner } from "@/utils/util";
import { observer } from "mobx-react";
const ProjectMembers = observer(() => {
const http = useHttp();
const http = useHttp();
const { currentProjectStore } = useStores();
const { currentProjectStore } = useStores();
/** 删除成员 */
const [removeDialog, setRemoveDialog] = useState<IDialogInfo>({
isShow: false,
username: "",
});
/** 更改权限 */
const [permissionDialog, setPermissionDialog] = useState<IDialogInfo>({
isShow: false,
username: "",
});
/** 添加成员 */
const [addMemberDialog, setAddMemberDialog] = useState<boolean>(false);
/** 表格数据 */
const [tableData, setTableData] = useState([]);
/** 项目名称 */
const [projectName, setProjectMember] = useState("");
/** 过滤后数据 */
const [filterTableData, setFilterTableData] = useState([]);
/** 删除成员 */
const [removeDialog, setRemoveDialog] = useState<IDialogInfo>({
isShow: false,
username: "",
});
/** 更改权限 */
const [permissionDialog, setPermissionDialog] = useState<IDialogInfo>({
isShow: false,
username: "",
});
/** 添加成员 */
const [addMemberDialog, setAddMemberDialog] = useState<boolean>(false);
/** 表格数据 */
const [tableData, setTableData] = useState([]);
/** 当前项目用户权限 */
const [projectRole, setProjectRole] = useState<string>("");
/** 项目名称 */
const [projectName, setProjectMember] = useState("");
/** 过滤后数据 */
const [filterTableData, setFilterTableData] = useState([]);
const columns = useMemo(() => {
const val: any = [
{ id: "username", label: "成员名称" },
{ id: "projectRoleDesc", label: "项目权限" },
{ id: "phone", label: "联系方式" },
{
id: "operation",
label: "操作",
width: 160,
render: (item: any, row: any) => {
return row?.projectRole === "OWNER" ? null : (
<>
<span
style={{ color: "#1370FF", cursor: "pointer" }}
onClick={() => {
onPermissionBtn(row);
}}
>
更改权限
</span>
<span
className={styles.removeItemBox}
onClick={() => {
onRemoveItemBtn(row.username);
}}
>
移出项目
</span>
</>
);
},
},
];
return val;
}, []);
const columns = useMemo(() => {
const val: any = [
{ id: "username", label: "成员名称" },
{ id: "projectRoleDesc", label: "项目权限" },
{ id: "phone", label: "联系方式" },
...(projectRole !== "OWNER"
? []
: [
{
id: "operation",
label: "操作",
width: 160,
render: (item: any, row: any) => {
return row?.projectRole === "OWNER" ? null : (
<>
<span
style={{ color: "#1370FF", cursor: "pointer" }}
onClick={() => {
onPermissionBtn(row);
}}
>
更改权限
</span>
<span
className={styles.removeItemBox}
onClick={() => {
onRemoveItemBtn(row.username);
}}
>
移出项目
</span>
</>
);
},
},
]),
];
return val;
}, [projectRole]);
/** 获取表格数据 */
const getTableList = useCallback(() => {
const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
if (!projectInfo?.id) return;
http
.get<IResponse<any>>("/cpp/project/get", {
params: { id: projectInfo?.id || "" },
})
.then((res) => {
const { data = {} } = res;
setTableData(data?.members || []);
});
}, [currentProjectStore?.currentProjectInfo, http]);
/** 获取表格数据 */
const getTableList = useCallback(() => {
const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
if (!projectInfo?.id) return;
http
.get<IResponse<any>>("/cpp/project/get", {
params: { id: projectInfo?.id || "" },
})
.then((res) => {
const { data = {} } = res;
setTableData(data?.members || []);
console.log(data?.projectRole, data?.projectRole);
setProjectRole(data?.projectRole || "");
});
}, [currentProjectStore?.currentProjectInfo, http]);
useEffect(() => {
getTableList();
}, [getTableList]);
useEffect(() => {
getTableList();
}, [getTableList]);
useEffect(() => {
if (!!projectName) {
const newVal =
tableData.filter((item: any) => {
return item?.username?.includes(projectName);
}) || [];
setFilterTableData(newVal || []);
} else {
setFilterTableData(tableData);
}
}, [projectName, tableData]);
useEffect(() => {
if (!!projectName) {
const newVal =
tableData.filter((item: any) => {
return item?.username?.includes(projectName);
}) || [];
setFilterTableData(newVal || []);
} else {
setFilterTableData(tableData);
}
}, [projectName, tableData]);
/** 点击添加成员 */
const onAddMember = () => {
setAddMemberDialog(true);
};
/** 点击添加成员 */
const onAddMember = () => {
setAddMemberDialog(true);
};
/** 点击删除成员 */
const onRemoveItemBtn = (userName: string) => {
setRemoveDialog({ isShow: true, username: userName });
};
/** 点击删除成员 */
const onRemoveItemBtn = (userName: string) => {
setRemoveDialog({ isShow: true, username: userName });
};
/** 点击更改权限 */
const onPermissionBtn = (row: any) => {
setPermissionDialog({
isShow: true,
username: row?.username || "",
projectRole: row?.projectRole || "",
});
};
/** 点击更改权限 */
const onPermissionBtn = (row: any) => {
setPermissionDialog({
isShow: true,
username: row?.username || "",
projectRole: row?.projectRole || "",
});
};
return (
<>
<Box className={styles.headerBox}>
<OutlinedInput
onChange={(e: any) => {
_.debounce(() => {
setProjectMember(e.target.value);
}, 200)();
}}
placeholder="搜索项目成员"
size="small"
sx={{ width: 340, height: 32 }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
{currentProjectStore?.currentProjectInfo?.projectRole === "OWNER" ? (
<Button
style={{ backgroundColor: "#1370FF " }}
variant="contained"
onClick={onAddMember}
startIcon={<Add />}
size="small"
>
添加成员
</Button>
) : null}
</Box>
<Table
rowHover={true}
stickyheader={true}
rows={filterTableData}
rowsPerPage={"99"}
headCells={columns}
nopadding={true}
footer={false}
tableStyle={{ minWidth: "auto" }}
borderBottom={"none"}
/>
<RemoveItem
removeDialog={removeDialog}
setRemoveDialog={setRemoveDialog}
getTableList={getTableList}
/>
<ChangePermission
permissionDialog={permissionDialog}
getTableList={getTableList}
setPermissionDialog={setPermissionDialog}
/>
<AddMember
addMemberDialog={addMemberDialog}
setAddMemberDialog={setAddMemberDialog}
getTableList={getTableList}
/>
</>
);
return (
<>
<Box className={styles.headerBox}>
<OutlinedInput
onChange={(e: any) => {
_.debounce(() => {
setProjectMember(e.target.value);
}, 200)();
}}
placeholder="搜索项目成员"
size="small"
sx={{ width: 340, height: 32 }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
{currentProjectStore?.currentProjectInfo?.projectRole === "OWNER" ? (
<Button
style={{ backgroundColor: "#1370FF " }}
variant="contained"
onClick={onAddMember}
startIcon={<Add />}
size="small"
>
添加成员
</Button>
) : null}
</Box>
<Table
rowHover={true}
stickyheader={true}
rows={filterTableData}
rowsPerPage={"99"}
headCells={columns}
nopadding={true}
footer={false}
tableStyle={{ minWidth: "auto" }}
borderBottom={"none"}
/>
<RemoveItem
removeDialog={removeDialog}
setRemoveDialog={setRemoveDialog}
getTableList={getTableList}
/>
<ChangePermission
permissionDialog={permissionDialog}
getTableList={getTableList}
setPermissionDialog={setPermissionDialog}
/>
<AddMember
addMemberDialog={addMemberDialog}
setAddMemberDialog={setAddMemberDialog}
getTableList={getTableList}
/>
</>
);
});
export default memo(ProjectMembers);
......@@ -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-28 16:22:13
* @LastEditTime: 2022-07-07 17:39:49
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -40,7 +40,8 @@ export interface ITask {
x: number;
y: number;
};
type: IType;
tags?: string[];
type: IType | string;
parentNode?: string;
parameters: Array<IParameter>;
edges: Array<IEdge>;
......@@ -103,7 +104,7 @@ export type IRenderTask = {
x: number;
y: number;
};
type: IType;
type: IType | string;
parameters: Array<IParameter>;
edges: Array<IEdge>;
flows: ITask[];
......
......@@ -257,7 +257,16 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
})}
</div>
</div>
{customTemplateInfo?.show ? <WorkFlowEdit /> : null}
{customTemplateInfo?.show ? (
<WorkFlowEdit
onBack={() =>
setCustomTemplateInfo({
id: "",
show: false,
})
}
/>
) : null}
</div>
);
});
......
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 21:25:00
* @LastEditTime: 2022-07-07 14:59:11
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -53,7 +53,6 @@ const ProjectMembers = observer(() => {
const [addTemplateList, setAddTemplateList] = useState([]);
/** 已选择增加的模板列表 */
const [selectTemplateData, setSelectTemplateData] = useState<string[]>([]);
const [showAddTemplate, setShowAddTemplate] = useState(false);
// 获取模板列表
......
import { OutlinedInput } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import classNames from "classnames";
import { useCallback, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
import { toJS } from "mobx";
import cloneDeep from "lodash/cloneDeep";
import { mockData } from "./mock";
import { IOperatorItemProps } from "./interface";
import { IOperatorItemProps, IOperatorListProps } from "./interface";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
import useMyRequest from "@/hooks/useMyRequest";
import { IResponse } from "@/api/http";
import { fetchOperatorList } from "@/api/workbench_api";
import { useStores } from "@/store";
import { uuid } from "@/utils/util";
import styles from "./index.module.css";
......@@ -12,12 +21,16 @@ import styles from "./index.module.css";
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-06 15:16:01
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 21:23:19
* @LastEditTime: 2022-07-07 15:48:12
* @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
const OperatorItem = (props: IOperatorItemProps) => {
const { info } = props;
const {
info: { title, description, tags },
setTemplateConfigInfo,
templateConfigInfo,
} = props;
const [isDragStyle, setIsDragStyle] = useState<boolean>(false);
/** 拖拽开始 */
......@@ -26,10 +39,29 @@ const OperatorItem = (props: IOperatorItemProps) => {
}, []);
/** 拖拽结束 */
const onDragEnd = useCallback((e: React.DragEvent<HTMLDivElement>) => {
console.log(e);
setIsDragStyle(false);
}, []);
const onDragEnd = useCallback(
(e: React.DragEvent<HTMLDivElement>) => {
const dom = document.getElementById("workFlowEditRight");
const upperLeftPointX = Number(dom?.offsetLeft);
const upperLeftPointY = Number(dom?.offsetTop);
const lowerRightX = Number(upperLeftPointX) + Number(dom?.offsetWidth);
const lowerRightY = Number(upperLeftPointY) + Number(dom?.offsetHeight);
if (
e.clientX > upperLeftPointX &&
e.clientY > upperLeftPointY &&
e.clientX < lowerRightX &&
e.clientY < lowerRightY
) {
const newVal = [
...cloneDeep(templateConfigInfo),
{ ...props.info, uuid: uuid() },
];
setTemplateConfigInfo(newVal);
}
setIsDragStyle(false);
},
[setTemplateConfigInfo, templateConfigInfo]
);
return (
<div
......@@ -41,27 +73,55 @@ const OperatorItem = (props: IOperatorItemProps) => {
onDragStart={onDragStart}
onDragEnd={onDragEnd}
>
<h2 className={styles.operatorItemTitle}>说什么呢啊</h2>
<div className={styles.operatorItemText}>
STU utility
是一个R-packa标处理目标处理,目标处理目标处理标处理目标处理后期委屈好委屈农,博啊发布丢我被欺安度切换阿斯顿几切换,i的亲戚我好奇你eqeqeweqeqeeqeqeqeqeq。
</div>
<h2 className={styles.operatorItemTitle}>{title}</h2>
<div className={styles.operatorItemText}>{description}</div>
<div className={styles.footerBox}>
<span
className={styles.labelBox}
style={{
background: true ? "#EBF3FF" : "#E3FAEC",
color: true ? "#1370FF" : "#02AB83",
}}
>
公共平台
</span>
{tags?.map((item: string) => {
return (
<span
key={item}
className={styles.labelBox}
style={{
background: true ? "#EBF3FF" : "#E3FAEC",
color: true ? "#1370FF" : "#02AB83",
}}
>
{item}
</span>
);
})}
{/* <MySelect options={[]} /> */}
</div>
</div>
);
};
const OperatorList = () => {
const OperatorList = observer((props: IOperatorListProps) => {
const { currentProjectStore } = useStores();
const productId = toJS(currentProjectStore.currentProductInfo.id);
const { templateConfigInfo, setTemplateConfigInfo } = props;
const [operatorListData, setOperatorListData] = useState<ITask[]>(
mockData as any
);
console.log(templateConfigInfo, "templateConfigInfo");
// 取消作业
const { run } = useMyRequest(fetchOperatorList, {
onSuccess: (res: IResponse<any>) => {
console.log(res, "1111");
},
});
useEffect(() => {
run({
owner: "root",
productId: "cadd" || "",
// keyword : ''
});
}, [productId, run]);
return (
<div className={styles.operatorListBox}>
<div className={styles.searchBox}>
......@@ -69,7 +129,6 @@ const OperatorList = () => {
onChange={(e: any) => {
console.log(e.target.value);
}}
// value={templateName}
placeholder="输入关键词搜索"
size="small"
sx={{ height: 32, width: "100%" }}
......@@ -77,12 +136,21 @@ const OperatorList = () => {
/>
</div>
<div className={styles.listBox}>
{mockData.map((item) => {
return <OperatorItem key={item.id} info={item} />;
})}
{operatorListData
.filter((item) => item.type === "BATCH")
.map((item) => {
return (
<OperatorItem
key={item.id}
info={item}
templateConfigInfo={templateConfigInfo}
setTemplateConfigInfo={setTemplateConfigInfo}
/>
);
})}
</div>
</div>
);
};
});
export default OperatorList;
import { ITask } from "@/views/Project/ProjectSubmitWork/interface"
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-06 15:32:11
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 15:32:42
* @LastEditTime: 2022-07-07 16:22:08
* @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
export interface IOperatorItemProps {
info: any
info: ITask
setTemplateConfigInfo: (val: ITask[]) => void;
templateConfigInfo: ITask[]
}
export interface IOperatorListProps {
templateConfigInfo: ITask[]
setTemplateConfigInfo: (val: ITask[]) => void
}
\ No newline at end of file
......@@ -2,20 +2,20 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 18:35:24
* @LastEditTime: 2022-07-08 09:25:42
* @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 RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import ButtonComponent from "@/components/mui/Button";
import { ITemplateConfig } from "../Project/ProjectSubmitWork/interface";
import OperatorList from "./components/OperatorList";
import Flow from "../Project/components/Flow";
import { ITask } from "../Project/ProjectSubmitWork/interface";
import styles from "./index.module.css";
import { style } from "@mui/system";
......@@ -31,11 +31,13 @@ const radioOptions = [
},
];
const WorkFlowEdit = () => {
const [templateConfigInfo, setTemplateConfigInfo] =
useState<ITemplateConfig>();
const location: any = useLocation();
const navigate = useNavigate();
interface IProps {
onBack?: () => void;
}
const WorkFlowEdit = (props: IProps) => {
const { onBack } = props;
const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]);
const [leftContentType, setLeftContentType] = useState("list");
......@@ -45,11 +47,10 @@ const WorkFlowEdit = () => {
<div className={styles.swHeaderLeft}>
<MyPopconfirm
title="返回后,当前页面已填写内容将不保存,确认返回吗?"
onConfirm={() => console.log(11)}
onConfirm={onBack}
>
<IconButton
color="primary"
// onClick={() => handleGoBack()}
aria-label="upload picture"
component="span"
size="small"
......@@ -95,14 +96,18 @@ const WorkFlowEdit = () => {
</div>
{leftContentType === "list" && (
<div className={styles.swFormBox}>
<OperatorList />
<OperatorList
templateConfigInfo={templateConfigInfo}
setTemplateConfigInfo={setTemplateConfigInfo}
/>
</div>
)}
{leftContentType !== "list" && (
<div className={styles.swFormBox}>123</div>
<div className={styles.swFormBox} id="workFlowEditRight">
<Flow tasks={templateConfigInfo} />
</div>
)}
</div>
<div className={styles.swFlowBox}>右侧</div>
</div>
</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