feat: 任务详情白屏修改

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-12 11:20:29
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-12 20:25:34
+ * @LastEditTime: 2022-07-14 10:14:15
  * @FilePath: /bkunyun/src/views/Project/components/Flow/components/BatchNode.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -25,20 +25,29 @@ const BatchNode = (props: IBatchNode) => {
 		isFlowNode,
 		selectedStatus,
 		info: { title, isCheck, executionStatus, parameters },
+		flowType,
 	} = data;
 
 	/** 获取输入参数数组 */
 	const inParamsArr = useMemo(() => {
-		return parameters.filter((item) => {
-			return item.parameterGroup === "in";
-		});
+		return (
+			(parameters?.length &&
+				parameters?.filter((item) => {
+					return item.parameterGroup === "in";
+				})) ||
+			[]
+		);
 	}, [parameters]);
 
 	/** 获取输出参数数组 */
 	const outParamsArr = useMemo(() => {
-		return parameters.filter((item) => {
-			return item.parameterGroup === "out";
-		});
+		return (
+			(parameters?.length &&
+				parameters?.filter((item) => {
+					return item.parameterGroup === "out";
+				})) ||
+			[]
+		);
 	}, [parameters]);
 
 	return (
@@ -52,25 +61,26 @@ const BatchNode = (props: IBatchNode) => {
 			})}
 			style={style}
 		>
-			{inParamsArr?.length &&
-				inParamsArr.map((item, index) => {
-					return (
-						<Tooltip title={item.name} key={uuid()}>
-							<Handle
-								id={item.name}
-								style={{
-									background: "#fff ",
-									border: item.error
-										? "1px solid #FF4E4E"
-										: "1px solid #D1D6DE",
-									left: index * 20 + 20,
-								}}
-								type="target"
-								position={Position.Top}
-							/>
-						</Tooltip>
-					);
-				})}
+			{inParamsArr?.length && flowType === "edit"
+				? inParamsArr.map((item, index) => {
+						return (
+							<Tooltip title={item.name} key={uuid()}>
+								<Handle
+									id={item.name}
+									style={{
+										background: "#fff ",
+										border: item.error
+											? "1px solid #FF4E4E"
+											: "1px solid #D1D6DE",
+										left: index * 20 + 20,
+									}}
+									type="target"
+									position={Position.Top}
+								/>
+							</Tooltip>
+						);
+				  })
+				: null}
 			<div
 				className={classNames({
 					[styles.batchRotate]: isFlowNode,
@@ -79,23 +89,24 @@ const BatchNode = (props: IBatchNode) => {
 				{title || ""}
 				{isCheck && <span className={styles.successDot}></span>}
 			</div>
-			{outParamsArr?.length &&
-				outParamsArr.map((item, index) => {
-					return (
-						<Tooltip title={item.name} key={uuid()}>
-							<Handle
-								id={item.name}
-								style={{
-									background: "#fff ",
-									border: "1px solid #D1D6DE",
-									left: index * 20 + 20,
-								}}
-								type="source"
-								position={Position.Bottom}
-							/>
-						</Tooltip>
-					);
-				})}
+			{outParamsArr?.length && flowType === "edit"
+				? outParamsArr.map((item, index) => {
+						return (
+							<Tooltip title={item.name} key={uuid()}>
+								<Handle
+									id={item.name}
+									style={{
+										background: "#fff ",
+										border: "1px solid #D1D6DE",
+										left: index * 20 + 20,
+									}}
+									type="source"
+									position={Position.Bottom}
+								/>
+							</Tooltip>
+						);
+				  })
+				: null}
 		</div>
 	);
 };

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

@@ -210,6 +210,8 @@ const Flow = (props: IProps) => {
 						info: item,
 						...(item.type === "BATCH"
 							? {
+									/** flow组件类型 */
+									flowType,
 									/** 是否有流节点 */
 									isFlowNode: isFlowNode(item.id),
 									/** 选中状态 */
@@ -473,16 +475,23 @@ const Flow = (props: IProps) => {
 		[setSelectedBatchNodeId]
 	);
 
+	const reactFlowParams =
+		flowType === "edit"
+			? {
+					onNodesChange,
+					onEdgesChange,
+					onNodeDragStop,
+					onConnect,
+					onEdgeClick,
+			  }
+			: {};
+
 	return (
 		<ReactFlow
 			nodes={nodes}
 			edges={edges}
 			fitView={flowType === "default" ? true : false}
-			onNodesChange={onNodesChange}
-			onEdgesChange={onEdgesChange}
-			onNodeDragStop={onNodeDragStop}
-			onConnect={onConnect}
-			onEdgeClick={onEdgeClick}
+			{...reactFlowParams}
 			// proOptions={{ hideAttribution: true, account: "" }}
 			nodeTypes={nodeTypes}
 			onPaneClick={handlePaneClick}

src/views/Project/components/Flow/interface.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-23 11:00:29
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-12 20:25:50
+ * @LastEditTime: 2022-07-14 10:11:50
  * @FilePath: /bkunyun/src/views/Project/components/Flow/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -45,6 +45,8 @@ export interface IBatchNodeData {
     executionStatus: string
     /** 每一项信息 */
     info: ITask
+    /** flow组件类型 */
+    flowType: 'edit' | 'default'
 }
 
 export interface IBatchNode {

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

@@ -246,8 +246,10 @@ const OperatorList = observer((props: IOperatorListProps) => {
 			<div className={styles.searchBox}>
 				<OutlinedInput
 					onChange={(e) => {
+						if (e.target.value?.length > 30) return;
 						setKeyword(e.target.value);
 					}}
+					value={keyword}
 					placeholder="输入关键词搜索"
 					onKeyUp={handleEnterCode}
 					size="small"