feat: 任务详情需求变更

src/views/Project/ProjectJobDetail/index.module.css

@@ -110,8 +110,14 @@
 	color: rgba(138, 144, 153, 1);
 	font-size: 14px;
 	line-height: 22px;
-	width: 72px;
+	width: 80px;
 	margin-right: 44px;
+	overflow: hidden;
+	word-wrap: break-word;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 .taskInfoValue {
 	color: rgba(30, 38, 51, 1);

src/views/Project/ProjectJobDetail/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-09-01 09:39:20
+ * @LastEditTime: 2022-09-05 17:33:58
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -75,10 +75,12 @@ const ProjectSubmitWork = observer(() => {
 	const productId = toJS(currentProjectStore.currentProductInfo.id);
 	const [workFlowJobInfo, setWorkFlowJobInfo] = useState<ITaskInfo>();
 	const [patchInfo, setPatchInfo] = useState<any>();
-	const [activePatchId, setActivePatchId] = useState<string>("");
 	const [overviewActive, setOverviewActive] = useState(true);
-	const [activeFlowIndex, setActiveFlowIndex] = useState<number>(0);
-	const [showOptions, setShowOptions] = useState<boolean>(false);
+	/** 选中的node Id */
+	const [activeFlowIndex, setActiveFlowIndex] = useState<string>("");
+	/** 选中的flow Title */
+	const [selectNodeTitle, setSelectNodeTitle] = useState('参数')
+	// const [showOptions, setShowOptions] = useState<boolean>(false);
 	const [randerOutputs1, setRanderOutputs] = useState<Array<any>>([]);
 	const locationInfo: any = useLocation()?.state;
 	// const locationInfo: any = location?.state;
@@ -338,32 +340,51 @@ const ProjectSubmitWork = observer(() => {
 		},
 	});
 
-	const handleBatch = (id: string) => {
-		setActivePatchId(id);
-		if (id) {
-			setActiveFlowIndex(0);
+	const setExternalSelectedNodeId = (id: string) => {
+		setActiveFlowIndex(id);
+		workFlowJobInfo?.tasks &&
+			workFlowJobInfo?.tasks?.forEach((item) => {
+				if (item.id === id) {
 					getworkFlowTaskInfoRun({
 						jobId: workFlowJobInfo?.id as string,
-				taskId: id,
+						taskId: item.parentNode || item.id
 					});
 				}
+			});
 	};
 
-	const randerParameters = useMemo(() => {
-		if (patchInfo?.children) {
-			if (patchInfo.children.length > 0) {
-				return patchInfo.children[activeFlowIndex].parameters;
+	const selectedParameter = useCallback(
+		(list: any) => {
+			let result: any = [];
+			if(patchInfo?.id === activeFlowIndex ) {
+				setSelectNodeTitle(list[0].title || '')
+				result = list[0].parameters
 			} else {
-				return patchInfo?.parameters;
+				list?.length &&
+				list?.forEach((item: any) => {
+					if (item.id === activeFlowIndex) {
+					console.log(1111)
+						setSelectNodeTitle(item?.title || '')
+						result = item.parameters;
 					}
+				});
+			}
+			return result;
+		},
+		[activeFlowIndex, patchInfo]
+	);
+
+	const randerParameters = useMemo(() => {
+		if (patchInfo?.children?.length) {
+			return selectedParameter(patchInfo?.children);
 		} else {
-			return patchInfo?.parameters;
+			return selectedParameter(patchInfo?.parameters);
 		}
-	}, [activeFlowIndex, patchInfo]);
+
+	}, [patchInfo, selectedParameter]);
 
 	const handleParams = () => {
 		setOverviewActive(false);
-		setShowOptions(!showOptions);
 	};
 
 	/** 终止任务 */
@@ -456,7 +477,7 @@ const ProjectSubmitWork = observer(() => {
 			<div className={styles.swContent}>
 				{fullScreenShow ? null : (
 					<div className={styles.swFormBox}>
-						{!activePatchId && (
+						{!activeFlowIndex && (
 							<div className={styles.taskInfo}>
 								<div className={styles.title}>任务结果</div>
 								{workFlowJobInfo?.outputs &&
@@ -626,7 +647,7 @@ const ProjectSubmitWork = observer(() => {
 								</div>
 							</div>
 						)}
-						{activePatchId && (
+						{activeFlowIndex && (
 							<div className={styles.suanziInfo}>
 								<div className={styles.title}>{patchInfo?.title}</div>
 								<div className={styles.tabs}>
@@ -647,28 +668,7 @@ const ProjectSubmitWork = observer(() => {
 										// onClick={() => setOverviewActive(false)}
 										onClick={() => handleParams()}
 									>
-										{patchInfo?.children.length > 0
-											? patchInfo?.children[activeFlowIndex].title
-											: patchInfo?.title}
-										{showOptions && patchInfo?.children.length > 0 && (
-											<div className={styles.options}>
-												{patchInfo?.children.map((item: any, index: number) => {
-													return (
-														<div
-															key={index}
-															className={classNames({
-																[styles.option]: true,
-																[styles.optionActive]:
-																	activeFlowIndex === index,
-															})}
-															onClick={() => setActiveFlowIndex(index)}
-														>
-															{item.title}
-														</div>
-													);
-												})}
-											</div>
-										)}
+										{selectNodeTitle}
 									</div>
 								</div>
 								{overviewActive && (
@@ -721,7 +721,7 @@ const ProjectSubmitWork = observer(() => {
 								)}
 								{!overviewActive && (
 									<div className={styles.params}>
-										{randerParameters.map((parameter: any) => {
+										{randerParameters?.map((parameter: any) => {
 											return (
 												<div className={styles.taskInfoLi} key={parameter.name}>
 													<div className={styles.taskInfoParams}>
@@ -743,7 +743,11 @@ const ProjectSubmitWork = observer(() => {
 					className={styles.swFlowBox}
 					style={fullScreenShow ? { height: "100vh" } : undefined}
 				>
-					<Flow tasks={workFlowJobInfo?.tasks} onBatchClick={handleBatch} />
+					<Flow
+					externalSelectedNodeId={activeFlowIndex}
+						tasks={workFlowJobInfo?.tasks}
+						setExternalSelectedNodeId={setExternalSelectedNodeId}
+					/>
 				</div>
 			</div>
 			<img

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

@@ -415,7 +415,7 @@ const Flow = (props: IProps) => {
 				} else {
 					setInSideFlowNodeId(node.id);
 					setInSideBatchNodeId("");
-					setExternalSelectedNodeId && setExternalSelectedNodeId("");
+					setExternalSelectedNodeId && setExternalSelectedNodeId(node.id);
 				}
 				document.getElementById(`point${node.id}`)?.scrollIntoView(true);
 			}