Skip to content

B
bkunyun
Commit 59e84381 authored by 吴永生#A02208's avatar 吴永生#A02208
Browse files
Options

fix: 算子列表联调

parent a5a80933
Hide whitespace changes
Inline Side-by-side
Showing with 799 additions and 656 deletions
src/api/api_manager.ts
View file @ 59e84381
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-13 09:56:57 * @Date: 2022-06-13 09:56:57
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/api/api_manager.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -36,6 +36,7 @@ const RESTAPI = { ...@@ -36,6 +36,7 @@ const RESTAPI = {
API_WORKBENCH_CANCEL_WORKFLOWJOB: `${BACKEND_API_URI_PREFIX}/cpp/workflow/cancel`, //取消工作流 API_WORKBENCH_CANCEL_WORKFLOWJOB: `${BACKEND_API_URI_PREFIX}/cpp/workflow/cancel`, //取消工作流
API_SUBMIT_WORKFLOW: `${BACKEND_API_URI_PREFIX}/cpp/workflow/submit`, //提交工作流 API_SUBMIT_WORKFLOW: `${BACKEND_API_URI_PREFIX}/cpp/workflow/submit`, //提交工作流
API_WORKBENCH_WORKFLOW_TASKINFO: `${BACKEND_API_URI_PREFIX}/cpp/workbench/workflowjob/task-info`, //查询任务某个算子详情 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 default RESTAPI;
src/api/workbenchInterface.ts 0 → 100644
View file @ 59e84381
export interface IGetOperatorList {
owner: string;
productId: string;
keyword?: string
}
\ No newline at end of file
src/api/workbench_api.ts
View file @ 59e84381
/*
* @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 request from "@/utils/axios/service";
import Api from "./api_manager"; import Api from "./api_manager";
import { IGetOperatorList } from "./workbenchInterface";
function current() { function current() {
return request({ return request({
...@@ -119,6 +128,15 @@ const cancelWorkflowJob = (params: workflowJobCancelParams) => { ...@@ -119,6 +128,15 @@ const cancelWorkflowJob = (params: workflowJobCancelParams) => {
}); });
}; };
// 获取算子列表数据
const fetchOperatorList = (params: IGetOperatorList) => {
return request({
url: Api.API_OPERATOR_LIST,
method: "get",
params,
});
};
export { export {
current, current,
menu, menu,
...@@ -128,5 +146,6 @@ export { ...@@ -128,5 +146,6 @@ export {
addWorkbenchTemplate, addWorkbenchTemplate,
getWorkflowJobList, getWorkflowJobList,
deleteWorkflowJob, deleteWorkflowJob,
cancelWorkflowJob cancelWorkflowJob,
fetchOperatorList
}; };
src/react-app-env.d.ts
View file @ 59e84381
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:17:23 * @Date: 2022-05-31 10:17:23
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/react-app-env.d.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -80,7 +80,9 @@ declare module "*.module.sass" { ...@@ -80,7 +80,9 @@ declare module "*.module.sass" {
declare module "@mui/lab"; declare module "@mui/lab";
declare module "lodash"; declare module "lodash";
declare module 'lodash/cloneDeep'
declare module "@mui/material/Tab"; declare module "@mui/material/Tab";
declare module "tus-js-client"; declare module "tus-js-client";
declare module "uuid"; declare module "uuid";
src/views/Project/ProjectSetting/ProjectMembers/index.tsx
View file @ 59e84381
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -28,168 +28,176 @@ import { isProjectOwner } from "@/utils/util"; ...@@ -28,168 +28,176 @@ import { isProjectOwner } from "@/utils/util";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
const ProjectMembers = observer(() => { const ProjectMembers = observer(() => {
const http = useHttp(); const http = useHttp();
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
/** 删除成员 */ /** 删除成员 */
const [removeDialog, setRemoveDialog] = useState<IDialogInfo>({ const [removeDialog, setRemoveDialog] = useState<IDialogInfo>({
isShow: false, isShow: false,
username: "", username: "",
}); });
/** 更改权限 */ /** 更改权限 */
const [permissionDialog, setPermissionDialog] = useState<IDialogInfo>({ const [permissionDialog, setPermissionDialog] = useState<IDialogInfo>({
isShow: false, isShow: false,
username: "", username: "",
}); });
/** 添加成员 */ /** 添加成员 */
const [addMemberDialog, setAddMemberDialog] = useState<boolean>(false); const [addMemberDialog, setAddMemberDialog] = useState<boolean>(false);
/** 表格数据 */ /** 表格数据 */
const [tableData, setTableData] = useState([]); const [tableData, setTableData] = useState([]);
/** 项目名称 */ /** 当前项目用户权限 */
const [projectName, setProjectMember] = useState(""); const [projectRole, setProjectRole] = useState<string>("");
/** 过滤后数据 */ /** 项目名称 */
const [filterTableData, setFilterTableData] = useState([]); const [projectName, setProjectMember] = useState("");
/** 过滤后数据 */
const [filterTableData, setFilterTableData] = useState([]);
const columns = useMemo(() => { const columns = useMemo(() => {
const val: any = [ const val: any = [
{ id: "username", label: "成员名称" }, { id: "username", label: "成员名称" },
{ id: "projectRoleDesc", label: "项目权限" }, { id: "projectRoleDesc", label: "项目权限" },
{ id: "phone", label: "联系方式" }, { id: "phone", label: "联系方式" },
{ ...(projectRole !== "OWNER"
id: "operation", ? []
label: "操作", : [
width: 160, {
render: (item: any, row: any) => { id: "operation",
return row?.projectRole === "OWNER" ? null : ( label: "操作",
<> width: 160,
<span render: (item: any, row: any) => {
style={{ color: "#1370FF", cursor: "pointer" }} return row?.projectRole === "OWNER" ? null : (
onClick={() => { <>
onPermissionBtn(row); <span
}} style={{ color: "#1370FF", cursor: "pointer" }}
> onClick={() => {
更改权限 onPermissionBtn(row);
</span> }}
<span >
className={styles.removeItemBox} 更改权限
onClick={() => { </span>
onRemoveItemBtn(row.username); <span
}} className={styles.removeItemBox}
> onClick={() => {
移出项目 onRemoveItemBtn(row.username);
</span> }}
</> >
); 移出项目
}, </span>
}, </>
]; );
return val; },
}, []); },
]),
];
return val;
}, [projectRole]);
/** 获取表格数据 */ /** 获取表格数据 */
const getTableList = useCallback(() => { const getTableList = useCallback(() => {
const projectInfo = toJS(currentProjectStore?.currentProjectInfo); const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
if (!projectInfo?.id) return; if (!projectInfo?.id) return;
http http
.get<IResponse<any>>("/cpp/project/get", { .get<IResponse<any>>("/cpp/project/get", {
params: { id: projectInfo?.id || "" }, params: { id: projectInfo?.id || "" },
}) })
.then((res) => { .then((res) => {
const { data = {} } = res; const { data = {} } = res;
setTableData(data?.members || []); setTableData(data?.members || []);
}); console.log(data?.projectRole, data?.projectRole);
}, [currentProjectStore?.currentProjectInfo, http]); setProjectRole(data?.projectRole || "");
});
}, [currentProjectStore?.currentProjectInfo, http]);
useEffect(() => { useEffect(() => {
getTableList(); getTableList();
}, [getTableList]); }, [getTableList]);
useEffect(() => { useEffect(() => {
if (!!projectName) { if (!!projectName) {
const newVal = const newVal =
tableData.filter((item: any) => { tableData.filter((item: any) => {
return item?.username?.includes(projectName); return item?.username?.includes(projectName);
}) || []; }) || [];
setFilterTableData(newVal || []); setFilterTableData(newVal || []);
} else { } else {
setFilterTableData(tableData); setFilterTableData(tableData);
} }
}, [projectName, tableData]); }, [projectName, tableData]);
/** 点击添加成员 */ /** 点击添加成员 */
const onAddMember = () => { const onAddMember = () => {
setAddMemberDialog(true); setAddMemberDialog(true);
}; };
/** 点击删除成员 */ /** 点击删除成员 */
const onRemoveItemBtn = (userName: string) => { const onRemoveItemBtn = (userName: string) => {
setRemoveDialog({ isShow: true, username: userName }); setRemoveDialog({ isShow: true, username: userName });
}; };
/** 点击更改权限 */ /** 点击更改权限 */
const onPermissionBtn = (row: any) => { const onPermissionBtn = (row: any) => {
setPermissionDialog({ setPermissionDialog({
isShow: true, isShow: true,
username: row?.username || "", username: row?.username || "",
projectRole: row?.projectRole || "", projectRole: row?.projectRole || "",
}); });
}; };
return ( return (
<> <>
<Box className={styles.headerBox}> <Box className={styles.headerBox}>
<OutlinedInput <OutlinedInput
onChange={(e: any) => { onChange={(e: any) => {
_.debounce(() => { _.debounce(() => {
setProjectMember(e.target.value); setProjectMember(e.target.value);
}, 200)(); }, 200)();
}} }}
placeholder="搜索项目成员" placeholder="搜索项目成员"
size="small" size="small"
sx={{ width: 340, height: 32 }} sx={{ width: 340, height: 32 }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />} endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/> />
{currentProjectStore?.currentProjectInfo?.projectRole === "OWNER" ? ( {currentProjectStore?.currentProjectInfo?.projectRole === "OWNER" ? (
<Button <Button
style={{ backgroundColor: "#1370FF " }} style={{ backgroundColor: "#1370FF " }}
variant="contained" variant="contained"
onClick={onAddMember} onClick={onAddMember}
startIcon={<Add />} startIcon={<Add />}
size="small" size="small"
> >
添加成员 添加成员
</Button> </Button>
) : null} ) : null}
</Box> </Box>
<Table <Table
rowHover={true} rowHover={true}
stickyheader={true} stickyheader={true}
rows={filterTableData} rows={filterTableData}
rowsPerPage={"99"} rowsPerPage={"99"}
headCells={columns} headCells={columns}
nopadding={true} nopadding={true}
footer={false} footer={false}
tableStyle={{ minWidth: "auto" }} tableStyle={{ minWidth: "auto" }}
borderBottom={"none"} borderBottom={"none"}
/> />
<RemoveItem <RemoveItem
removeDialog={removeDialog} removeDialog={removeDialog}
setRemoveDialog={setRemoveDialog} setRemoveDialog={setRemoveDialog}
getTableList={getTableList} getTableList={getTableList}
/> />
<ChangePermission <ChangePermission
permissionDialog={permissionDialog} permissionDialog={permissionDialog}
getTableList={getTableList} getTableList={getTableList}
setPermissionDialog={setPermissionDialog} setPermissionDialog={setPermissionDialog}
/> />
<AddMember <AddMember
addMemberDialog={addMemberDialog} addMemberDialog={addMemberDialog}
setAddMemberDialog={setAddMemberDialog} setAddMemberDialog={setAddMemberDialog}
getTableList={getTableList} getTableList={getTableList}
/> />
</> </>
); );
}); });
export default memo(ProjectMembers); export default memo(ProjectMembers);
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ 59e84381
...@@ -18,474 +18,489 @@ import jobSueIcon from "@/assets/project/jobSue.svg"; ...@@ -18,474 +18,489 @@ import jobSueIcon from "@/assets/project/jobSue.svg";
import { IParameter } from "../interface"; import { IParameter } from "../interface";
type ConfigFormProps = { type ConfigFormProps = {
templateConfigInfo?: ITemplateConfig; templateConfigInfo?: ITemplateConfig;
setParameter: any; setParameter: any;
onRef?: React.Ref<any>; onRef?: React.Ref<any>;
setSelectedNodeId: (val: string) => void; setSelectedNodeId: (val: string) => void;
}; };
const ConfigForm = (props: ConfigFormProps) => { const ConfigForm = (props: ConfigFormProps) => {
const { templateConfigInfo, setParameter,setSelectedNodeId } = props; const { templateConfigInfo, setParameter, setSelectedNodeId } = props;
const [name, setName] = useState<string>(""); // 任务名称 const [name, setName] = useState<string>(""); // 任务名称
const [nameHelp, setNameHelp] = useState({ const [nameHelp, setNameHelp] = useState({
error: false, error: false,
helperText: "", helperText: "",
}); });
const [outputPath, setOutputPath] = useState<string>("ProjectData"); // 输出路径 const [outputPath, setOutputPath] = useState<string>("ProjectData"); // 输出路径
const [outputPathHelp, setOutputPathHelp] = useState({ const [outputPathHelp, setOutputPathHelp] = useState({
error: false, error: false,
helperText: "", helperText: "",
}); });
const getNameAndPath = () => { const getNameAndPath = () => {
return { return {
name, name,
outputPath, outputPath,
nameAndOutputPathCheck: !(checkName(name) || checkOutputPath(outputPath)), // 任务名称、输出路径是否通过校验 nameAndOutputPathCheck: !(checkName(name) || checkOutputPath(outputPath)), // 任务名称、输出路径是否通过校验
}; };
}; };
const setInitName = (name: string) => { const setInitName = (name: string) => {
setName(`${name}_${moment(new Date()).format("YYYY_MM_DD_HH_mm")}`); setName(`${name}_${moment(new Date()).format("YYYY_MM_DD_HH_mm")}`);
}; };
useImperativeHandle(props.onRef, () => { useImperativeHandle(props.onRef, () => {
return { return {
getNameAndPath: getNameAndPath, getNameAndPath: getNameAndPath,
setInitName: setInitName, setInitName: setInitName,
}; };
}); });
const [fileSelectOpen, setFileSelectOpen] = useState(false); // 选择输出路径的弹窗显示控制 const [fileSelectOpen, setFileSelectOpen] = useState(false); // 选择输出路径的弹窗显示控制
const [fileSelectObject, setFileSelectObject] = useState({ const [fileSelectObject, setFileSelectObject] = useState({
taskId: "", taskId: "",
parameterName: "", parameterName: "",
}); });
const onFileSelectConfirm = (path: string) => { const onFileSelectConfirm = (path: string) => {
setFileSelectOpen(false); setFileSelectOpen(false);
if (fileSelectObject.taskId) { if (fileSelectObject.taskId) {
setParameter( setParameter(
`ProjectData${path === "/" ? "" : path}`, `ProjectData${path === "/" ? "" : path}`,
fileSelectObject.taskId, fileSelectObject.taskId,
fileSelectObject.parameterName fileSelectObject.parameterName
); );
} else { } else {
setOutputPath(`ProjectData${path === "/" ? "" : path}`); setOutputPath(`ProjectData${path === "/" ? "" : path}`);
checkOutputPath(`ProjectData${path === "/" ? "" : path}`); checkOutputPath(`ProjectData${path === "/" ? "" : path}`);
} }
}; };
const handleFileSelectOnClose = () => { const handleFileSelectOnClose = () => {
setFileSelectOpen(false); setFileSelectOpen(false);
}; };
const handleOpenFileSelect = ( const handleOpenFileSelect = (
taskId: string = "", taskId: string = "",
parameterName: string = "" parameterName: string = ""
) => { ) => {
setFileSelectObject({ setFileSelectObject({
taskId, taskId,
parameterName, parameterName,
}); });
setFileSelectOpen(true); setFileSelectOpen(true);
}; };
const handleNameChange = (e: any) => { const handleNameChange = (e: any) => {
setName(e.target.value); setName(e.target.value);
checkName(e.target.value); checkName(e.target.value);
}; };
const checkName = (name: string = "") => { const checkName = (name: string = "") => {
const reg = new RegExp(/^[a-zA-Z0-9\u4e00-\u9fa5-_]{3,30}$/); const reg = new RegExp(/^[a-zA-Z0-9\u4e00-\u9fa5-_]{3,30}$/);
if (!name) { if (!name) {
setNameHelp({ setNameHelp({
error: true, error: true,
helperText: "任务名称不能为空", helperText: "任务名称不能为空",
}); });
return true; return true;
} else if (reg.test(name)) { } else if (reg.test(name)) {
setNameHelp({ setNameHelp({
error: false, error: false,
helperText: "", helperText: "",
}); });
return false; return false;
} else { } else {
setNameHelp({ setNameHelp({
error: true, error: true,
helperText: helperText:
"请输入正确任务名称（3~30字符，可包含大小写字母、数字、中文、特殊符号“-”、“_”）", "请输入正确任务名称（3~30字符，可包含大小写字母、数字、中文、特殊符号“-”、“_”）",
}); });
return true; return true;
} }
}; };
const checkOutputPath = (outputPath: string = "") => { const checkOutputPath = (outputPath: string = "") => {
if (outputPath) { if (outputPath) {
setOutputPathHelp({ setOutputPathHelp({
error: false, error: false,
helperText: "", helperText: "",
}); });
return false; return false;
} else { } else {
setOutputPathHelp({ setOutputPathHelp({
error: true, error: true,
helperText: "请选择输出路径", helperText: "请选择输出路径",
}); });
return true; return true;
} }
}; };
const renderTasks: IRenderTasks = useMemo(() => { const renderTasks: IRenderTasks = useMemo(() => {
const result: IRenderTasks = []; const result: IRenderTasks = [];
templateConfigInfo?.tasks.forEach((task, taskIndex) => { templateConfigInfo?.tasks.forEach((task, taskIndex) => {
if (task.type === "BATCH") { if (task.type === "BATCH") {
result.push({ ...task, flows: [], isCheck: true }); result.push({ ...task, flows: [], isCheck: true });
} else { } else {
result[result.length - 1]?.flows.push({ ...task }); result[result.length - 1]?.flows.push({ ...task });
} }
}); });
result.forEach((task) => { result.forEach((task) => {
let isCheck = true; let isCheck = true;
if (task.parameters.length > 0) { if (task.parameters.length > 0) {
task.parameters task.parameters
.filter((parameter) => parameter.hidden === false) .filter((parameter) => parameter.hidden === false)
.forEach((parameter) => { .forEach((parameter) => {
const { error } = getCheckResult(parameter, parameter.value); const { error } = getCheckResult(parameter, parameter.value);
if (error) { if (error) {
isCheck = false; isCheck = false;
return; return;
} }
}); });
} }
if (task.flows.length > 0) { if (task.flows.length > 0) {
task.flows.forEach((flow) => { task.flows.forEach((flow) => {
if (flow.parameters.length > 0) { if (flow.parameters.length > 0) {
flow.parameters flow.parameters
.filter((parameter) => parameter.hidden === false) .filter((parameter) => parameter.hidden === false)
.forEach((parameter) => { .forEach((parameter) => {
const { error } = getCheckResult(parameter, parameter.value); const { error } = getCheckResult(parameter, parameter.value);
if (error) { if (error) {
isCheck = false; isCheck = false;
return; return;
} }
}); });
} }
}); });
} }
task.isCheck = isCheck; task.isCheck = isCheck;
}); });
return result; return result;
}, [templateConfigInfo]); }, [templateConfigInfo]);
const handleParameterChange = ( const handleParameterChange = (
e: any, e: any,
taskId: string, taskId: string,
parameterName: string parameterName: string
) => { ) => {
setParameter(e.target.value, taskId, parameterName); setParameter(e.target.value, taskId, parameterName);
}; };
const randerParameters = (parameters: Array<IParameter>, taskId: string, batchId?: string) => { const randerParameters = (
return parameters parameters: Array<IParameter>,
.filter((parameter) => parameter.hidden === false) taskId: string,
.map((parameter, parameterIndex) => { batchId?: string
return ( ) => {
<div return parameters
className={styles.parameter} .filter((parameter) => parameter.hidden === false)
key={parameter.id || "" + parameterIndex} .map((parameter, parameterIndex) => {
> return (
<div <div
className={classnames({ className={styles.parameter}
[styles.parameterTitle]: true, key={parameter.id || "" + parameterIndex}
[styles.required]: parameter.required, >
})} <div
> className={classnames({
{parameter.name} [styles.parameterTitle]: true,
<span className={styles.parameterDataType}> [styles.required]: parameter.required,
{parameter.classTypeName} })}
</span> >
</div> {parameter.name}
<div className={styles.parameterContent}> <span className={styles.parameterDataType}>
{parameter.domType.toLowerCase() === "file" && ( {parameter.classTypeName}
<MyInput </span>
onFocus={()=> setSelectedNodeId(batchId || '')} </div>
onBlur={()=> setSelectedNodeId('')} <div className={styles.parameterContent}>
value={parameter.value || ""} {parameter.domType.toLowerCase() === "file" && (
InputProps={{ <MyInput
endAdornment: ( onFocus={() => setSelectedNodeId(batchId || "")}
<img onBlur={() => setSelectedNodeId("")}
onClick={() => value={parameter.value || ""}
handleOpenFileSelect(taskId, parameter.name) InputProps={{
} endAdornment: (
src={fileSelectIcon} <img
alt="" onClick={() =>
className={styles.fileSelectImg} handleOpenFileSelect(taskId, parameter.name)
/> }
), src={fileSelectIcon}
}} alt=""
placeholder="请选择" className={styles.fileSelectImg}
error={parameter.error || false} />
helperText={parameter.helperText} ),
></MyInput> }}
)} placeholder="请选择"
{parameter.domType.toLowerCase() === "path" && ( error={parameter.error || false}
<MyInput helperText={parameter.helperText}
onFocus={()=> setSelectedNodeId(batchId || '')} ></MyInput>
onBlur={()=> setSelectedNodeId('')} )}
value={parameter.value || ""} {parameter.domType.toLowerCase() === "path" && (
InputProps={{ <MyInput
endAdornment: ( onFocus={() => setSelectedNodeId(batchId || "")}
<img onBlur={() => setSelectedNodeId("")}
onClick={() => value={parameter.value || ""}
handleOpenFileSelect(taskId, parameter.name) InputProps={{
} endAdornment: (
src={fileSelectIcon} <img
alt="" onClick={() =>
className={styles.fileSelectImg} handleOpenFileSelect(taskId, parameter.name)
/> }
), src={fileSelectIcon}
}} alt=""
placeholder="请选择" className={styles.fileSelectImg}
error={parameter.error || false} />
helperText={parameter.helperText} ),
></MyInput> }}
)} placeholder="请选择"
{parameter.domType.toLowerCase() === "dataset" && ( error={parameter.error || false}
<MyInput helperText={parameter.helperText}
onFocus={()=> setSelectedNodeId(taskId)} ></MyInput>
onBlur={()=> setSelectedNodeId('')} )}
value={parameter.value || ""} {parameter.domType.toLowerCase() === "dataset" && (
InputProps={{ <MyInput
endAdornment: ( onFocus={() => setSelectedNodeId(taskId)}
<img onBlur={() => setSelectedNodeId("")}
onClick={() => value={parameter.value || ""}
handleOpenFileSelect(taskId, parameter.name) InputProps={{
} endAdornment: (
src={fileSelectIcon} <img
alt="" onClick={() =>
className={styles.fileSelectImg} handleOpenFileSelect(taskId, parameter.name)
/> }
), src={fileSelectIcon}
}} alt=""
placeholder="请选择" className={styles.fileSelectImg}
error={parameter.error || false} />
helperText={parameter.helperText} ),
></MyInput> }}
)} placeholder="请选择"
{parameter.domType.toLowerCase() === "input" && ( error={parameter.error || false}
<MyInput helperText={parameter.helperText}
onFocus={()=> {setSelectedNodeId(batchId || ''); console.log(batchId,'111')}} ></MyInput>
)}
{parameter.domType.toLowerCase() === "input" && (
<MyInput
onFocus={() => {
setSelectedNodeId(batchId || "");
console.log(batchId, "111");
}}
onBlur={() => setSelectedNodeId("")}
value={parameter.value || ""}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
placeholder="请输入"
error={parameter.error || false}
helperText={parameter.helperText}
></MyInput>
)}
{parameter.domType.toLowerCase() === "select" && (
<MySelect
onFocus={() => setSelectedNodeId(batchId || "")}
onBlur={() => setSelectedNodeId("")}
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
error={parameter.error || false}
helpertext={parameter.helperText}
options={optionsTransform(parameter?.choices || [], "label")}
></MySelect>
)}
{parameter.domType.toLowerCase() === "multipleselect" && (
<MySelect
onFocus={() => setSelectedNodeId(batchId || "")}
onBlur={() => setSelectedNodeId("")}
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
multiple={true}
error={parameter.error || false}
helpertext={parameter.helperText}
options={optionsTransform(parameter.choices, "label")}
></MySelect>
)}
{parameter.domType.toLowerCase() === "radio" && (
<MyRadio
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
onFocus={() => setSelectedNodeId(batchId || "")}
onBlur={() => setSelectedNodeId("")}
options={optionsTransform(parameter.choices, "label")}
error={parameter.error || false}
helperText={parameter.helperText}
></MyRadio>
)}
{parameter.domType.toLowerCase() === "checkbox" && (
<MyCheckBox
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(
{
target: {
value: e,
},
},
taskId,
parameter.name || ""
)
}
options={optionsTransform(parameter.choices, "label")}
onFocus={() => setSelectedNodeId(batchId || "")}
onBlur={() => setSelectedNodeId("")}
error={parameter.error || false}
helperText={parameter.helperText}
></MyCheckBox>
)}
{parameter.description && (
<Tooltip title={parameter.description} placement="top">
<img
className={styles.parameterDesc}
src={questionMark}
alt=""
/>
</Tooltip>
)}
</div>
</div>
);
});
};
onBlur={()=> setSelectedNodeId('')} return (
value={parameter.value || ""} <div className={styles.formBox}>
onChange={(e: any) => <div className={styles.templateDescBox}>
handleParameterChange(e, taskId, parameter.name || "") <div className={styles.templateDescTitle}>模板描述</div>
} <div className={styles.templateDesc}>
placeholder="请输入" {templateConfigInfo?.description || ""}
error={parameter.error || false} </div>
helperText={parameter.helperText} </div>
></MyInput> <div
)} className={classnames({
{parameter.domType.toLowerCase() === "select" && ( [styles.backgroundTitle]: true,
<MySelect [styles.backgroundTitlePass]: true,
onFocus={()=> setSelectedNodeId(batchId || '')} })}
onBlur={()=> setSelectedNodeId('')} >
value={parameter.value} <img src="" alt="" />
onChange={(e: any) => <span className={styles.backgroundTitleText}>基础信息</span>
handleParameterChange(e, taskId, parameter.name || "") </div>
} <div className={styles.formItems}>
error={parameter.error || false} <div className={styles.formItem}>
helpertext={parameter.helperText} <div
options={optionsTransform(parameter.choices, "label")} className={classnames({
></MySelect> [styles.formItemLable]: true,
)} [styles.required]: true,
{parameter.domType.toLowerCase() === "multipleselect" && ( })}
<MySelect >
onFocus={()=> setSelectedNodeId(batchId || '')} 任务名称
onBlur={()=> setSelectedNodeId('')} </div>
value={parameter.value} <div className={styles.formItem}>
onChange={(e: any) => <MyInput
handleParameterChange(e, taskId, parameter.name || "") value={name}
} onChange={handleNameChange}
multiple={true} placeholder="请输入任务名称"
error={parameter.error || false} error={nameHelp.error}
helpertext={parameter.helperText} helperText={nameHelp.helperText}
options={optionsTransform(parameter.choices, "label")} ></MyInput>
></MySelect> </div>
)} </div>
{parameter.domType.toLowerCase() === "radio" && ( <div className={styles.formItem}>
<MyRadio <div
value={parameter.value} className={classnames({
onChange={(e: any) => [styles.formItemLable]: true,
handleParameterChange(e, taskId, parameter.name || "") [styles.required]: true,
} })}
onFocus={()=> setSelectedNodeId(batchId || '')} >
onBlur={()=> setSelectedNodeId('')} 输出路径
options={optionsTransform(parameter.choices, "label")} </div>
error={parameter.error || false} <div className={styles.formItem}>
helperText={parameter.helperText} <MyInput
></MyRadio> value={outputPath || ""}
)} InputProps={{
{parameter.domType.toLowerCase() === "checkbox" && ( endAdornment: (
<MyCheckBox <img
value={parameter.value} onClick={() => handleOpenFileSelect()}
onChange={(e: any) => src={fileSelectIcon}
handleParameterChange( alt="选择输出路径"
{ className={styles.fileSelectImg}
target: { />
value: e, ),
}, }}
}, error={outputPathHelp.error}
taskId, helperText={outputPathHelp.helperText}
parameter.name || "" ></MyInput>
) </div>
} </div>
options={optionsTransform(parameter.choices, "label")} </div>
onFocus={()=> setSelectedNodeId(batchId || '')} {renderTasks.map((task, taskIndex) => {
onBlur={()=> setSelectedNodeId('')} return (
error={parameter.error || false} <div className={styles.taskBox} key={task.id + taskIndex}>
helperText={parameter.helperText} <div
></MyCheckBox> className={classnames({
)} [styles.backgroundTitle]: true,
{parameter.description && ( [styles.backgroundTitlePass]: true,
<Tooltip title={parameter.description} placement="top"> })}
<img >
className={styles.parameterDesc} <img
src={questionMark} className={classnames({
alt="" [styles.backgroundTitleTextIcon]: true,
/> [styles.backgroundTitleTextIconShow]: task.isCheck,
</Tooltip> })}
)} src={jobSueIcon}
</div> alt=""
</div> />
); <span
}); id={`point${task.id}`}
}; className={styles.backgroundTitleText}
>
return ( {task.title}
<div className={styles.formBox}> </span>
<div className={styles.templateDescBox}> {task.description && (
<div className={styles.templateDescTitle}>模板描述</div> <Tooltip title={task.description} placement="top">
<div className={styles.templateDesc}> <img className={styles.taskDescIcon} src={tipsIcon} alt="" />
{templateConfigInfo?.description || ""} </Tooltip>
</div> )}
</div> </div>
<div <div className={styles.taskConfigBox}>
className={classnames({ {randerParameters(task.parameters, task.id, task.id)}
[styles.backgroundTitle]: true, {task.flows.map((flow) => {
[styles.backgroundTitlePass]: true, return (
})} <div className={styles.flowConfigBox} key={flow.id}>
> <div className={styles.flowTitle}>
<img src="" alt="" /> {flow.title}
<span className={styles.backgroundTitleText}>基础信息</span> {flow.description && (
</div> <Tooltip title={flow.description} placement="top">
<div className={styles.formItems}> <img
<div className={styles.formItem}> className={styles.flowDescIcon}
<div src={tipsIcon}
className={classnames({ alt=""
[styles.formItemLable]: true, />
[styles.required]: true, </Tooltip>
})} )}
> </div>
任务名称 {randerParameters(
</div> flow.parameters,
<div className={styles.formItem}> flow.id,
<MyInput flow.parentNode ? flow.parentNode : flow.id
value={name} )}
onChange={handleNameChange} </div>
placeholder="请输入任务名称" );
error={nameHelp.error} })}
helperText={nameHelp.helperText} </div>
></MyInput> </div>
</div> );
</div> })}
<div className={styles.formItem}> {fileSelectOpen && (
<div <FileSelect
className={classnames({ onClose={handleFileSelectOnClose}
[styles.formItemLable]: true, open={fileSelectOpen}
[styles.required]: true, onConfirm={onFileSelectConfirm}
})} />
> )}
输出路径 </div>
</div> );
<div className={styles.formItem}>
<MyInput
value={outputPath || ""}
InputProps={{
endAdornment: (
<img
onClick={() => handleOpenFileSelect()}
src={fileSelectIcon}
alt="选择输出路径"
className={styles.fileSelectImg}
/>
),
}}
error={outputPathHelp.error}
helperText={outputPathHelp.helperText}
></MyInput>
</div>
</div>
</div>
{renderTasks.map((task, taskIndex) => {
return (
<div className={styles.taskBox} 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}>{task.title}</span>
{task.description && (
<Tooltip title={task.description} placement="top">
<img className={styles.taskDescIcon} src={tipsIcon} alt="" />
</Tooltip>
)}
</div>
<div className={styles.taskConfigBox}>
{randerParameters(task.parameters, task.id, task.id)}
{task.flows.map((flow) => {
return (
<div className={styles.flowConfigBox} key={flow.id}>
<div className={styles.flowTitle}>
{flow.title}
{flow.description && (
<Tooltip title={flow.description} placement="top">
<img
className={styles.flowDescIcon}
src={tipsIcon}
alt=""
/>
</Tooltip>
)}
</div>
{randerParameters(flow.parameters, flow.id, flow.parentNode ? flow.parentNode : flow.id )}
</div>
);
})}
</div>
</div>
);
})}
{fileSelectOpen && (
<FileSelect
onClose={handleFileSelectOnClose}
open={fileSelectOpen}
onConfirm={onFileSelectConfirm}
/>
)}
</div>
);
}; };
export default ConfigForm; export default ConfigForm;
src/views/Project/ProjectSubmitWork/interface.ts
View file @ 59e84381
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56 * @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -40,7 +40,8 @@ export interface ITask { ...@@ -40,7 +40,8 @@ export interface ITask {
x: number; x: number;
y: number; y: number;
}; };
type: IType; tags?: string[];
type: IType | string;
parentNode?: string; parentNode?: string;
parameters: Array<IParameter>; parameters: Array<IParameter>;
edges: Array<IEdge>; edges: Array<IEdge>;
...@@ -103,7 +104,7 @@ export type IRenderTask = { ...@@ -103,7 +104,7 @@ export type IRenderTask = {
x: number; x: number;
y: number; y: number;
}; };
type: IType; type: IType | string;
parameters: Array<IParameter>; parameters: Array<IParameter>;
edges: Array<IEdge>; edges: Array<IEdge>;
flows: ITask[]; flows: ITask[];
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx
View file @ 59e84381
...@@ -257,7 +257,16 @@ const AddTemplate = observer((props: IAddTemplateProps) => { ...@@ -257,7 +257,16 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
})} })}
</div> </div>
</div> </div>
{customTemplateInfo?.show ? <WorkFlowEdit /> : null} {customTemplateInfo?.show ? (
<WorkFlowEdit
onBack={() =>
setCustomTemplateInfo({
id: "",
show: false,
})
}
/>
) : null}
</div> </div>
); );
}); });
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ 59e84381
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -53,7 +53,6 @@ const ProjectMembers = observer(() => { ...@@ -53,7 +53,6 @@ const ProjectMembers = observer(() => {
const [addTemplateList, setAddTemplateList] = useState([]); const [addTemplateList, setAddTemplateList] = useState([]);
/** 已选择增加的模板列表 */ /** 已选择增加的模板列表 */
const [selectTemplateData, setSelectTemplateData] = useState<string[]>([]); const [selectTemplateData, setSelectTemplateData] = useState<string[]>([]);
const [showAddTemplate, setShowAddTemplate] = useState(false); const [showAddTemplate, setShowAddTemplate] = useState(false);
// 获取模板列表 // 获取模板列表
......
src/views/WorkFlowEdit/components/OperatorList/index.tsx
View file @ 59e84381
import { OutlinedInput } from "@mui/material"; import { OutlinedInput } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import classNames from "classnames"; 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 { 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"; import styles from "./index.module.css";
...@@ -12,12 +21,16 @@ import styles from "./index.module.css"; ...@@ -12,12 +21,16 @@ import styles from "./index.module.css";
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-06 15:16:01 * @Date: 2022-07-06 15:16:01
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
const OperatorItem = (props: IOperatorItemProps) => { const OperatorItem = (props: IOperatorItemProps) => {
const { info } = props; const {
info: { title, description, tags },
setTemplateConfigInfo,
templateConfigInfo,
} = props;
const [isDragStyle, setIsDragStyle] = useState<boolean>(false); const [isDragStyle, setIsDragStyle] = useState<boolean>(false);
/** 拖拽开始 */ /** 拖拽开始 */
...@@ -26,10 +39,29 @@ const OperatorItem = (props: IOperatorItemProps) => { ...@@ -26,10 +39,29 @@ const OperatorItem = (props: IOperatorItemProps) => {
}, []); }, []);
/** 拖拽结束 */ /** 拖拽结束 */
const onDragEnd = useCallback((e: React.DragEvent<HTMLDivElement>) => { const onDragEnd = useCallback(
console.log(e); (e: React.DragEvent<HTMLDivElement>) => {
setIsDragStyle(false); 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 ( return (
<div <div
...@@ -41,27 +73,55 @@ const OperatorItem = (props: IOperatorItemProps) => { ...@@ -41,27 +73,55 @@ const OperatorItem = (props: IOperatorItemProps) => {
onDragStart={onDragStart} onDragStart={onDragStart}
onDragEnd={onDragEnd} onDragEnd={onDragEnd}
> >
<h2 className={styles.operatorItemTitle}>说什么呢啊</h2> <h2 className={styles.operatorItemTitle}>{title}</h2>
<div className={styles.operatorItemText}> <div className={styles.operatorItemText}>{description}</div>
STU utility
是一个R-packa标处理目标处理，目标处理目标处理标处理目标处理后期委屈好委屈农，博啊发布丢我被欺安度切换阿斯顿几切换，i的亲戚我好奇你eqeqeweqeqeeqeqeqeqeq。
</div>
<div className={styles.footerBox}> <div className={styles.footerBox}>
<span {tags?.map((item: string) => {
className={styles.labelBox} return (
style={{ <span
background: true ? "#EBF3FF" : "#E3FAEC", key={item}
color: true ? "#1370FF" : "#02AB83", className={styles.labelBox}
}} style={{
> background: true ? "#EBF3FF" : "#E3FAEC",
公共平台 color: true ? "#1370FF" : "#02AB83",
</span> }}
>
{item}
</span>
);
})}
{/* <MySelect options={[]} /> */}
</div> </div>
</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 ( return (
<div className={styles.operatorListBox}> <div className={styles.operatorListBox}>
<div className={styles.searchBox}> <div className={styles.searchBox}>
...@@ -69,7 +129,6 @@ const OperatorList = () => { ...@@ -69,7 +129,6 @@ const OperatorList = () => {
onChange={(e: any) => { onChange={(e: any) => {
console.log(e.target.value); console.log(e.target.value);
}} }}
// value={templateName}
placeholder="输入关键词搜索" placeholder="输入关键词搜索"
size="small" size="small"
sx={{ height: 32, width: "100%" }} sx={{ height: 32, width: "100%" }}
...@@ -77,12 +136,21 @@ const OperatorList = () => { ...@@ -77,12 +136,21 @@ const OperatorList = () => {
/> />
</div> </div>
<div className={styles.listBox}> <div className={styles.listBox}>
{mockData.map((item) => { {operatorListData
return <OperatorItem key={item.id} info={item} />; .filter((item) => item.type === "BATCH")
})} .map((item) => {
return (
<OperatorItem
key={item.id}
info={item}
templateConfigInfo={templateConfigInfo}
setTemplateConfigInfo={setTemplateConfigInfo}
/>
);
})}
</div> </div>
</div> </div>
); );
}; });
export default OperatorList; export default OperatorList;
src/views/WorkFlowEdit/components/OperatorList/interface.ts
View file @ 59e84381
import { ITask } from "@/views/Project/ProjectSubmitWork/interface"
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-06 15:32:11 * @Date: 2022-07-06 15:32:11
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
export interface IOperatorItemProps { 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
src/views/WorkFlowEdit/index.tsx
View file @ 59e84381
...@@ -2,20 +2,20 @@ ...@@ -2,20 +2,20 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56 * @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import React, { useState } from "react"; import React, { useState } from "react";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew"; import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import { useLocation, useNavigate } from "react-router-dom";
import MyPopconfirm from "@/components/mui/MyPopconfirm"; import MyPopconfirm from "@/components/mui/MyPopconfirm";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle"; import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import ButtonComponent from "@/components/mui/Button"; import ButtonComponent from "@/components/mui/Button";
import { ITemplateConfig } from "../Project/ProjectSubmitWork/interface";
import OperatorList from "./components/OperatorList"; import OperatorList from "./components/OperatorList";
import Flow from "../Project/components/Flow";
import { ITask } from "../Project/ProjectSubmitWork/interface";
import styles from "./index.module.css"; import styles from "./index.module.css";
import { style } from "@mui/system"; import { style } from "@mui/system";
...@@ -31,11 +31,13 @@ const radioOptions = [ ...@@ -31,11 +31,13 @@ const radioOptions = [
}, },
]; ];
const WorkFlowEdit = () => { interface IProps {
const [templateConfigInfo, setTemplateConfigInfo] = onBack?: () => void;
useState<ITemplateConfig>(); }
const location: any = useLocation();
const navigate = useNavigate(); const WorkFlowEdit = (props: IProps) => {
const { onBack } = props;
const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]);
const [leftContentType, setLeftContentType] = useState("list"); const [leftContentType, setLeftContentType] = useState("list");
...@@ -45,11 +47,10 @@ const WorkFlowEdit = () => { ...@@ -45,11 +47,10 @@ const WorkFlowEdit = () => {
<div className={styles.swHeaderLeft}> <div className={styles.swHeaderLeft}>
<MyPopconfirm <MyPopconfirm
title="返回后，当前页面已填写内容将不保存，确认返回吗？" title="返回后，当前页面已填写内容将不保存，确认返回吗？"
onConfirm={() => console.log(11)} onConfirm={onBack}
> >
<IconButton <IconButton
color="primary" color="primary"
// onClick={() => handleGoBack()}
aria-label="upload picture" aria-label="upload picture"
component="span" component="span"
size="small" size="small"
...@@ -95,14 +96,18 @@ const WorkFlowEdit = () => { ...@@ -95,14 +96,18 @@ const WorkFlowEdit = () => {
</div> </div>
{leftContentType === "list" && ( {leftContentType === "list" && (
<div className={styles.swFormBox}> <div className={styles.swFormBox}>
<OperatorList /> <OperatorList
templateConfigInfo={templateConfigInfo}
setTemplateConfigInfo={setTemplateConfigInfo}
/>
</div> </div>
)} )}
{leftContentType !== "list" && ( {leftContentType !== "list" && (
<div className={styles.swFormBox}>123</div> <div className={styles.swFormBox} id="workFlowEditRight">
<Flow tasks={templateConfigInfo} />
</div>
)} )}
</div> </div>
<div className={styles.swFlowBox}>右侧</div>
</div> </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