Merge branch 'feat-20220705-customTemplate' of http://120.77.149.83/root/bkunyun…

Merge branch 'feat-20220705-customTemplate' of http://120.77.149.83/root/bkunyun into feat-20220705-customTemplate

src/views/Project/components/Flow/index.tsx

@@ -52,6 +52,7 @@ const Flow = (props: IProps) => {
 		type: flowType = "default",
 		setTasks,
 		onFlowNodeClick,
+		...other
 	} = props;
 	/** 自定义的节点类型 */
 	const nodeTypes = useMemo(() => {
@@ -96,10 +97,9 @@ const Flow = (props: IProps) => {
 	const deleteSelectBatchNode = useCallback(
 		(e: any) => {
 			if (e.keyCode === 8) {
-				let val: ITask[] = [];
 				/** 删除批节点逻辑 */
 				if (inSideBatchNodeId) {
-					val =
+					const newVal =
 						(tasks?.length &&
 							tasks.filter((item) => {
 								return (
@@ -108,11 +108,12 @@ const Flow = (props: IProps) => {
 								);
 							})) ||
 						[];
+					setTasks && setTasks(newVal);
 				}
 				if (selectedEdge) {
-					val = tasksDeleteLine(selectedEdge);
+					const newVal = tasksDeleteLine(selectedEdge);
+					setTasks && setTasks(newVal);
 				}
-				setTasks && setTasks(val);
 			}
 		},
 		[inSideBatchNodeId, selectedEdge, setTasks, tasks, tasksDeleteLine]
@@ -316,11 +317,16 @@ const Flow = (props: IProps) => {
 				} else {
 					setInSideFlowNodeId(node.id);
 					setInSideBatchNodeId("");
+
 					setSelectedBatchNodeId && setSelectedBatchNodeId("");
 				}
 			}
 		});
-		onFlowNodeClick && onFlowNodeClick(node.id);
+		if (onFlowNodeClick) {
+			onFlowNodeClick(node.id);
+		}
+		/** 点击node统一清除选中的edge */
+		setSelectedEdge(undefined);
 	};
 
 	const handlePaneClick = () => {
@@ -456,9 +462,16 @@ const Flow = (props: IProps) => {
 	);
 
 	/** 点击连线 */
-	const onEdgeClick = useCallback((e: any, val: Edge) => {
-		setSelectedEdge(val);
-	}, []);
+	const onEdgeClick = useCallback(
+		(e: any, val: Edge) => {
+			setSelectedEdge(val);
+			/** 点击连线清除选中的node ID */
+			setInSideFlowNodeId("");
+			setInSideBatchNodeId("");
+			setSelectedBatchNodeId && setSelectedBatchNodeId("");
+		},
+		[setSelectedBatchNodeId]
+	);
 
 	return (
 		<ReactFlow
@@ -474,7 +487,7 @@ const Flow = (props: IProps) => {
 			nodeTypes={nodeTypes}
 			onPaneClick={handlePaneClick}
 			onNodeClick={onNodeClick}
-			{...props}
+			{...other}
 		>
 			<Controls />
 			<Background color="#aaa" gap={16} />

src/views/WorkFlowEdit/components/OperatorList/index.module.css

@@ -59,3 +59,18 @@
 	padding: 0 8px;
 	border-radius: 2px;
 }
+
+.noData {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+.noDataImg {
+	margin: 160px 0 8px 0;
+}
+.noDataText {
+	font-size: 14px;
+	line-height: 22px;
+	color: rgba(138, 144, 153, 1);
+}

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

@@ -12,9 +12,10 @@ import useMyRequest from "@/hooks/useMyRequest";
 import { IResponse } from "@/api/http";
 import { fetchOperatorList, fetchVersionOperator } 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";
-import MyMenu from "@/components/mui/MyMenu";
 
 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
@@ -255,20 +256,27 @@ const OperatorList = observer((props: IOperatorListProps) => {
 				/>
 			</div>
 			<div className={styles.listBox}>
-				{operatorListData
-					.filter((item) => item.type === "BATCH")
-					.map((item) => {
-						return (
-							<OperatorItem
-								key={item.id}
-								info={item}
-								setOperatorListData={setOperatorListData}
-								operatorListData={operatorListData}
-								templateConfigInfo={templateConfigInfo}
-								setTemplateConfigInfo={setTemplateConfigInfo}
-							/>
-						);
-					})}
+				{operatorListData.filter((item) => item.type === "BATCH")?.length ? (
+					operatorListData
+						.filter((item) => item.type === "BATCH")
+						.map((item) => {
+							return (
+								<OperatorItem
+									key={item.id}
+									info={item}
+									setOperatorListData={setOperatorListData}
+									operatorListData={operatorListData}
+									templateConfigInfo={templateConfigInfo}
+									setTemplateConfigInfo={setTemplateConfigInfo}
+								/>
+							);
+						})
+				) : (
+					<div className={styles.noData}>
+						<img src={noTemplate} alt="" className={styles.noDataImg} />
+						<span className={styles.noDataText}>没有找到相关算子</span>
+					</div>
+				)}
 			</div>
 		</div>
 	);

src/views/WorkFlowEdit/index.tsx

@@ -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-07-11 14:40:34
+ * @LastEditTime: 2022-07-13 14:31:27
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -56,7 +56,6 @@ const WorkFlowEdit = observer((props: IProps) => {
 	// const projectId = toJS(currentProjectStore.currentProjectInfo.id);
 	const productId = toJS(currentProjectStore.currentProductInfo.id);
 	const [saveFormDialog, setSaveFormDialog] = useState(false); // 保存弹窗显示与否控制
-	const [showFlow, setShowFlow] = useState(true); // 是否显示右侧流程图
 	const [title, setTitle] = useState(""); // 自定义模板名称
 	const [version, setVersion] = useState("1.0.0"); // 自定义模板版本
 	const [oldversion, setOldersion] = useState(""); // 编辑是自定义模板的老版本
@@ -233,7 +232,6 @@ const WorkFlowEdit = observer((props: IProps) => {
 	const { run: saveUserSpecRun } = useMyRequest(saveUserSpec, {
 		onSuccess: (res) => {
 			Message.success("保存成功!");
-			setShowFlow(true);
 			onBack && onBack();
 		},
 	});
@@ -281,21 +279,18 @@ const WorkFlowEdit = observer((props: IProps) => {
 		if (!check) {
 			Message.error("工作流校验未通过，请检查！");
 		} else {
-			setShowFlow(false);
 			setSaveFormDialog(true);
 		}
 	};
 
 	// 关闭表单弹窗
 	const handleCloseDialog = () => {
-		setShowFlow(true);
 		setSaveFormDialog(false);
 	};
 
 	// 表单弹窗确定，新建/编辑自定义模板保存
 	const handleOncofirm = () => {
 		checkTitle(title);
-		setShowFlow(true);
 		checkVersion(version);
 		if (!titleHelper.error && !versionHelper.error) {
 			saveUserSpecRun({
@@ -380,14 +375,12 @@ const WorkFlowEdit = observer((props: IProps) => {
 					)}
 				</div>
 				<div className={styles.swFlowBox} id="workFlowEditRight">
-					{showFlow && (
-						<Flow
-							tasks={templateConfigInfo}
-							setTasks={setTemplateConfigInfo}
-							type="edit"
-							onFlowNodeClick={handleNodeClick}
-						/>
-					)}
+					<Flow
+						tasks={templateConfigInfo}
+						setTasks={setTemplateConfigInfo}
+						type="edit"
+						onFlowNodeClick={handleNodeClick}
+					/>
 				</div>
 			</div>
 			<MyPopconfirm