fix: 解决任务详情删除终止权限bug

src/views/Project/ProjectJobDetail/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-06 17:05:13
+ * @LastEditTime: 2022-07-08 15:02:08
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -37,6 +37,7 @@ import MyPopconfirm from "@/components/mui/MyPopconfirm";
 import { storageUnitFromB } from "@/utils/util";
 
 import styles from "./index.module.css";
+import usePass from "@/hooks/usePass";
 
 const stateMap = {
 	RUNNING: "正在运行",
@@ -69,6 +70,7 @@ const ProjectSubmitWork = observer(() => {
 	const location: any = useLocation();
 	const navigate = useNavigate();
 	const message = useMessage();
+	const isPass = usePass();
 	const [fullScreenShow, setFullScreenShow] = useState<boolean>(false);
 
 	const { name, state } = workFlowJobInfo || {};
@@ -283,6 +285,14 @@ const ProjectSubmitWork = observer(() => {
 		});
 	}, [deleteWorkJob, workFlowJobInfo?.id]);
 
+	const returnPermission = useMemo(() => {
+		if (state === "RUNNING") {
+			return isPass("PROJECT_WORKBENCH_JOBS_STOP", "USER");
+		} else {
+			return isPass("PROJECT_WORKBENCH_JOBS_DELETE", "MANAGER");
+		}
+	}, [isPass, state]);
+
 	return (
 		<div className={styles.swBox}>
 			{fullScreenShow ? null : (
@@ -306,25 +316,27 @@ const ProjectSubmitWork = observer(() => {
 
 						<div className={styles.swTemplateTitle}>{name}</div>
 					</div>
-					<div className={styles.swHeaderRight}>
-						<MyPopconfirm
-							title={
-								state === "RUNNING"
-									? "正在运行的任务终止后将无法重新运行，确认继续吗？"
-									: "任务被删除后将无法恢复，确认继续吗？"
-							}
-							onConfirm={() => {
-								state === "RUNNING" ? onStopJob() : onDeleteJob();
-							}}
-						>
-							<ButtonComponent
-								text={state === "RUNNING" ? "终止" : "删除"}
-								variant="outlined"
-								color="secondary"
-								// click={onStopJob}
-							></ButtonComponent>
-						</MyPopconfirm>
-					</div>
+					{returnPermission && (
+						<div className={styles.swHeaderRight}>
+							<MyPopconfirm
+								title={
+									state === "RUNNING"
+										? "正在运行的任务终止后将无法重新运行，确认继续吗？"
+										: "任务被删除后将无法恢复，确认继续吗？"
+								}
+								onConfirm={() => {
+									state === "RUNNING" ? onStopJob() : onDeleteJob();
+								}}
+							>
+								<ButtonComponent
+									text={state === "RUNNING" ? "终止" : "删除"}
+									variant="outlined"
+									color="secondary"
+									// click={onStopJob}
+								></ButtonComponent>
+							</MyPopconfirm>
+						</div>
+					)}
 				</div>
 			)}
 			<div className={styles.swContent}>

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

@@ -36,6 +36,7 @@ interface IProps extends ReactFlowProps {
 	onBatchClick?: (val: string) => void;
 	setSelectedNodeId?: (val: string) => void;
 	selectedNodeId?: string;
+	type?: "edit" | "default";
 }
 
 /** 获取imgUrl */
@@ -133,7 +134,13 @@ const FlowNode = (props: any) => {
 };
 
 const Flow = (props: IProps) => {
-	const { tasks, onBatchClick, setSelectedNodeId, selectedNodeId } = props;
+	const {
+		tasks,
+		onBatchClick,
+		setSelectedNodeId,
+		selectedNodeId,
+		type: flowType = "default",
+	} = props;
 	/** 自定义的节点类型 */
 	const nodeTypes = useMemo(() => {
 		return { batchNode: BatchNode, flowNode: FlowNode };
@@ -333,7 +340,7 @@ const Flow = (props: IProps) => {
 		<ReactFlow
 			nodes={nodes}
 			edges={edges}
-			fitView
+			fitView={flowType === "default" ? false : true}
 			proOptions={{ hideAttribution: true, account: "" }}
 			nodeTypes={nodeTypes}
 			onPaneClick={handlePaneClick}

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

@@ -44,7 +44,7 @@
 }
 
 .operatorListBox {
-	height: 100%;
+	height: calc(100% - 84px);
 }
 
 .listBox {

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

@@ -16,6 +16,7 @@ import { useStores } from "@/store";
 import { uuid } from "@/utils/util";
 
 import styles from "./index.module.css";
+import MyMenu from "@/components/mui/MyMenu";
 
 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
@@ -42,25 +43,39 @@ const OperatorItem = (props: IOperatorItemProps) => {
 	const onDragEnd = useCallback(
 		(e: React.DragEvent<HTMLDivElement>) => {
 			const dom = document.getElementById("workFlowEditRight");
+			const clientX = e.clientX;
+			const clientY = e.clientY;
 			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
+				clientX > upperLeftPointX &&
+				clientY > upperLeftPointY &&
+				clientX < lowerRightX &&
+				clientY < lowerRightY
 			) {
+				console.log(
+					clientX - upperLeftPointX,
+					clientY - upperLeftPointY,
+					"0000000"
+				);
 				const newVal = [
 					...cloneDeep(templateConfigInfo),
-					{ ...props.info, uuid: uuid() },
+					{
+						...props.info,
+						uuid: uuid(),
+						position: {
+							x: clientX - upperLeftPointX,
+							y: clientY - upperLeftPointY,
+						},
+					},
 				];
 				setTemplateConfigInfo(newVal);
 			}
 			setIsDragStyle(false);
 		},
-		[setTemplateConfigInfo, templateConfigInfo]
+		[props.info, setTemplateConfigInfo, templateConfigInfo]
 	);
 
 	return (
@@ -90,7 +105,9 @@ const OperatorItem = (props: IOperatorItemProps) => {
 						</span>
 					);
 				})}
-				{/* <MySelect options={[]} /> */}
+				<MyMenu options={[]} value="dd">
+					<div>ddd</div>
+				</MyMenu>
 			</div>
 		</div>
 	);
@@ -102,15 +119,13 @@ const OperatorList = observer((props: IOperatorListProps) => {
 
 	const { templateConfigInfo, setTemplateConfigInfo } = props;
 
-	const [operatorListData, setOperatorListData] = useState<ITask[]>(
-		mockData as any
-	);
+	const [operatorListData, setOperatorListData] = useState<ITask[]>([]);
+	const [keyword, setKeyword] = useState<string>("");
 
-	console.log(templateConfigInfo, "templateConfigInfo");
 	// 取消作业
 	const { run } = useMyRequest(fetchOperatorList, {
 		onSuccess: (res: IResponse<any>) => {
-			console.log(res, "1111");
+			setOperatorListData(res?.data || []);
 		},
 	});
 
@@ -118,18 +133,29 @@ const OperatorList = observer((props: IOperatorListProps) => {
 		run({
 			owner: "root",
 			productId: "cadd" || "",
-			// keyword	: ''
 		});
 	}, [productId, run]);
 
+	/** 处理回车键 */
+	const handleEnterCode = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.keyCode === 13) {
+			run({
+				owner: "root",
+				productId: "cadd" || "",
+				keyword,
+			});
+		}
+	};
+
 	return (
 		<div className={styles.operatorListBox}>
 			<div className={styles.searchBox}>
 				<OutlinedInput
-					onChange={(e: any) => {
-						console.log(e.target.value);
+					onChange={(e) => {
+						setKeyword(e.target.value);
 					}}
 					placeholder="输入关键词搜索"
+					onKeyUp={handleEnterCode}
 					size="small"
 					sx={{ height: 32, width: "100%" }}
 					endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
@@ -137,7 +163,7 @@ const OperatorList = observer((props: IOperatorListProps) => {
 			</div>
 			<div className={styles.listBox}>
 				{operatorListData
-					.filter((item) => item.type === "BATCH")
+					// .filter((item) => item.type === "BATCH")
 					.map((item) => {
 						return (
 							<OperatorItem

src/views/WorkFlowEdit/index.module.css

@@ -33,6 +33,7 @@
 	background-color: #fff;
 	border-right: 1xp solid rgba(235, 237, 240, 1);
 	width: 360px;
+	height: 100%;
 	/* overflow-y: scroll; */
 	box-sizing: border-box;
 }

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-08 09:25:42
+ * @LastEditTime: 2022-07-08 11:51:07
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -78,7 +78,7 @@ const WorkFlowEdit = (props: IProps) => {
 				</div>
 			</div>
 			<div className={styles.swContent}>
-				<div>
+				<div className={styles.swFormBox}>
 					<div className={styles.radiosBox}>
 						<RadioGroupOfButtonStyle
 							radioOptions={radioOptions}
@@ -95,12 +95,10 @@ const WorkFlowEdit = (props: IProps) => {
 						></RadioGroupOfButtonStyle>
 					</div>
 					{leftContentType === "list" && (
-						<div className={styles.swFormBox}>
-							<OperatorList
-								templateConfigInfo={templateConfigInfo}
-								setTemplateConfigInfo={setTemplateConfigInfo}
-							/>
-						</div>
+						<OperatorList
+							templateConfigInfo={templateConfigInfo}
+							setTemplateConfigInfo={setTemplateConfigInfo}
+						/>
 					)}
 					{leftContentType !== "list" && (
 						<ParameterSetting
@@ -109,8 +107,8 @@ const WorkFlowEdit = (props: IProps) => {
 						/>
 					)}
 				</div>
-				<div id="workFlowEditRight">
-					<Flow tasks={templateConfigInfo} />
+				<div className={styles.swFlowBox} id="workFlowEditRight">
+					<Flow tasks={templateConfigInfo} type="edit" />
 				</div>
 			</div>
 		</div>