fix: 算子列表联调

src/api/api_manager.ts

@@ -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;

src/api/workbenchInterface.ts

+export interface IGetOperatorList {
+  owner: string;
+  productId: string;
+  keyword?: string
+}
\ No newline at end of file

src/api/workbench_api.ts

+/*
+ * @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
 };

src/react-app-env.d.ts

@@ -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";
 
+

src/views/Project/ProjectSetting/ProjectMembers/index.tsx

@@ -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);

src/views/Project/ProjectSubmitWork/interface.ts

@@ -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[];

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx

@@ -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>
 	);
 });

src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx

@@ -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);
 
 	// 获取模板列表

src/views/WorkFlowEdit/components/OperatorList/index.tsx

 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;

src/views/WorkFlowEdit/components/OperatorList/interface.ts

+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

src/views/WorkFlowEdit/index.tsx

@@ -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>
 	);