Merge branch 'feat-20220801' into 'release'

Feat 20220801

See merge request !64

src/components/mui/MyButton.tsx

@@ -54,6 +54,7 @@ const theme = createTheme({
 					"&.MuiButton-outlinedError": {
 						color: "rgba(255, 78, 78, 1)",
 						border: "1px solid rgba(255, 78, 78, 1)",
+						"&:hover": { backgroundColor: 'transparent' },
 					},
 					"& .MuiLoadingButton-loadingIndicator": {
 						color: "#fff",

src/components/mui/MyDialog.tsx

@@ -103,7 +103,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 						disabled={disabledConfirm}
 						isLoadingButton={true}
 						loading={loading}
-						style={{ ...okSx }}
+						style={{ marginLeft: '12px', ...okSx }}
 					/>
 				) : null}
 			</DialogActions>

src/views/MenuLayout/index.module.css

@@ -23,7 +23,7 @@
 	color: #565c66;
 	font-size: 14px;
 	line-height: 22px;
-	border-left: 3px solid #fff;
+	border-left: 3px solid #f7f8fa;
 }
 .listItem:hover {
 	background-color: #eef1f5;

src/views/Project/ProjectData/AddFolder/index.tsx

@@ -54,7 +54,7 @@ const AddFolder = (props: IAddFolderProps) => {
 				refresh();
 			});
 		} else {
-			Message.info(fileNameCheck.help || "请输入文件夹名称");
+			Message.error(fileNameCheck.help || "请输入文件夹名称");
 		}
 	};
 

src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx

@@ -208,7 +208,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 								[styles.required]: parameter.required,
 							})}
 						>
-							{parameter.name}
+							{parameter.title}
 							<span className={styles.parameterDataType}>
 								{parameter.classTypeName}
 							</span>

src/views/Project/ProjectSubmitWork/interface.ts

@@ -11,6 +11,7 @@ export interface IParameter {
   hidden: boolean; // 使用模板时是否展示   true 不展示 用户不需要填写
   id?: string;
   name: string; // 参数名称
+  title: string; // 参数名称
   required: boolean; // 是否必填
   defaultValue: any; // 默认值
   domType: IDomType; // 前端组件类型

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

@@ -583,12 +583,31 @@ const Flow = (props: IProps) => {
 		[connectModifyParameters, tasks]
 	);
 
+	// 获取算子类型   批算还是流算子
+	const getTaskType = useCallback(
+		(taskId: string) => {
+			let type = "";
+			tasks?.forEach((task) => {
+				if (task.id === taskId) {
+					type = task.type;
+				}
+			});
+			return type;
+		},
+		[tasks]
+	);
+
 	/** 已经连接线啦 */
 	const onConnect = useCallback(
 		(connection: Connection) => {
 			const { inputClassType, outClassType } = getClassType(connection);
 			let result: ITask[] = [];
-			if (inputClassType === outClassType) {
+			if (
+				getTaskType(connection.source as string) === "FLOW" ||
+				getTaskType(connection.target as string) === "FLOW"
+			) {
+				return;
+			} else if (inputClassType === outClassType) {
 				result = connectCheck(connection) as ITask[];
 			} else {
 				Message.error("端口数据类型不一致，无法连接！");
@@ -596,7 +615,14 @@ const Flow = (props: IProps) => {
 			}
 			setTasks && setTasks(result);
 		},
-		[Message, connectCheck, getClassType, setTasks, tasksDeleteLine]
+		[
+			Message,
+			connectCheck,
+			getClassType,
+			setTasks,
+			tasksDeleteLine,
+			getTaskType,
+		]
 	);
 
 	/** 点击连线 */

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

@@ -442,7 +442,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 												[styles.required]: parameter.required,
 											})}
 										>
-											{parameter.name}
+											{parameter.title}
 										</div>
 										<div className={styles.parameterClassTypeName}>
 											{parameter.classTypeName}
@@ -569,7 +569,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 													[styles.required]: parameter.required,
 												})}
 											>
-												{parameter.name}
+												{parameter.title}
 											</div>
 											<div className={styles.inOutParameterdataType}>
 												{parameter.classTypeName}
@@ -614,7 +614,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 													[styles.required]: parameter.required,
 												})}
 											>
-												{parameter.name}
+												{parameter.title}
 											</div>
 											<div className={styles.inOutParameterdataType}>
 												{parameter.classTypeName}

src/views/WorkFlowEdit/index.module.css

@@ -45,14 +45,28 @@
 	bottom: 20px;
 	width: 36px;
 	height: 36px;
-	border-radius: 50%;
+	border-radius: 18px;
 	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
 	font-size: 30px;
 	line-height: 36px;
-	text-align: center;
+	text-align: start;
 	color: RGBA(66, 141, 255, 1);
 	cursor: pointer;
 	background-color: #fff;
+	transition: width 1s;
+	-webkit-transition: width 1s;
+	overflow: hidden;
+	display: flex;
+	justify-content: start;
+	align-items: center;
+}
+.addOperator:hover {
+	width: 105px;
+}
+.addText {
+	font-size: 14px;
+	line-height: 36px;
+	white-space: nowrap;
 }
 .swFlowBox {
 	flex: 1;

src/views/WorkFlowEdit/index.tsx

@@ -6,7 +6,7 @@
  * @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, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, useMemo } from "react";
 import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import IconButton from "@mui/material/IconButton";
 import _ from "lodash";
@@ -25,6 +25,7 @@ import { getCustomTemplateParameterCheckResult } from "./util";
 import useMyRequest from "@/hooks/useMyRequest";
 import CustomOperator from "../CustomOperator";
 import SaveCustomTemplate from "./components/SaveCustomTemplate";
+import AddIcon from "@mui/icons-material/Add";
 
 import styles from "./index.module.css";
 
@@ -55,6 +56,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 	const [oldversion, setOldersion] = useState(""); // 编辑是自定义模板的老版本
 	const [description, setDescription] = useState(""); // 自定义模板描述
 	const [creator, setCreator] = useState(""); // 自定义模板创建人
+	const [operatingArea, setOperatingArea] = useState<"form" | "flow">("form"); // 当前操作区域
 
 	const [leftContentType, setLeftContentType] = useState("list"); // 页面左侧展示的是算子列表还是参数设置
 	const [popperTitle, setPopperTitle] = useState(
@@ -62,6 +64,14 @@ const WorkFlowEdit = observer((props: IProps) => {
 		"返回后，当前页面已填写内容将不保存，确认返回吗？"
 	);
 
+	// 是否要监听删除时间
+	const listenState = useMemo(() => {
+		if (operatingArea === "form") {
+			return false;
+		}
+		return !saveFormDialog && !showCustomOperator;
+	}, [operatingArea, saveFormDialog, showCustomOperator]);
+
 	// 编辑时获取模板详情的方法
 	const { run: fetchTemplateConfigInfoRun } = useMyRequest(
 		fetchTemplateConfigInfo,
@@ -206,7 +216,12 @@ const WorkFlowEdit = observer((props: IProps) => {
 				</div>
 			</div>
 			<div className={styles.swContent}>
-				<div className={styles.swFormBox}>
+				<div
+					className={styles.swFormBox}
+					onClick={() => {
+						setOperatingArea("form");
+					}}
+				>
 					<div className={styles.radiosBox}>
 						<RadioGroupOfButtonStyle
 							radioOptions={radioOptions}
@@ -240,16 +255,23 @@ const WorkFlowEdit = observer((props: IProps) => {
 						className={styles.addOperator}
 						onClick={() => setShowCustomOperator(true)}
 					>
-						+
+						<AddIcon sx={{ padding: "6px" }} />
+						<span className={styles.addText}>添加算子</span>
 					</div>
 				</div>
-				<div className={styles.swFlowBox} id="workFlowEditRight">
+				<div
+					className={styles.swFlowBox}
+					id="workFlowEditRight"
+					onClick={() => {
+						setOperatingArea("flow");
+					}}
+				>
 					<Flow
 						tasks={templateConfigInfo}
 						setTasks={setTemplateConfigInfo}
 						type="edit"
 						onFlowNodeClick={handleNodeClick}
-						ListenState={!saveFormDialog && !showCustomOperator}
+						ListenState={listenState}
 					/>
 				</div>
 			</div>