Merge branch 'feat-20220705-customTemplate' into 'release'

fix: 算子列表ui开发

See merge request !84

src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-06 17:32:50
+ * @LastEditTime: 2022-07-06 21:25:00
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */

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

@@ -2,8 +2,11 @@
 	background-color: #fff;
 	border-radius: 4px;
 	cursor: grab;
-	padding: 16px 0;
-	border-bottom: 1px solid #f0f2f5;
+	padding: 16px 16px 0 24px;
+}
+
+.dragBox {
+	background-color: #f5f6f7;
 }
 .operatorItemTitle {
 	user-select: none;
@@ -29,7 +32,22 @@
 	padding: 2px 8px;
 }
 
-.footerBx {
+.searchBox {
+	padding: 0 24px 16px 24px;
+}
+
+.footerBox {
 	display: flex;
 	align-items: center;
+	padding-bottom: 16px;
+	border-bottom: 1px solid #f0f2f5;
+}
+
+.operatorListBox {
+	height: 100%;
+}
+
+.listBox {
+	overflow-y: scroll;
+	height: calc(100% - 48px);
 }

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

-import { IOperatorItemProps } from "./interface";
 import { OutlinedInput } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
+import classNames from "classnames";
+import { useCallback, useState } from "react";
+
+import { mockData } from "./mock";
+import { IOperatorItemProps } from "./interface";
 
 import styles from "./index.module.css";
 
@@ -8,20 +12,41 @@ import styles from "./index.module.css";
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-06 15:16:01
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-06 16:27:16
+ * @LastEditTime: 2022-07-06 21:23:19
  * @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 const OperatorItem = (props: IOperatorItemProps) => {
 	const { info } = props;
+	const [isDragStyle, setIsDragStyle] = useState<boolean>(false);
+
+	/** 拖拽开始 */
+	const onDragStart = useCallback(() => {
+		setIsDragStyle(true);
+	}, []);
+
+	/** 拖拽结束 */
+	const onDragEnd = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+		console.log(e);
+		setIsDragStyle(false);
+	}, []);
+
 	return (
-		<div className={styles.operatorItemBox}>
+		<div
+			className={classNames({
+				[styles.operatorItemBox]: true,
+				[styles.dragBox]: isDragStyle,
+			})}
+			draggable={true}
+			onDragStart={onDragStart}
+			onDragEnd={onDragEnd}
+		>
 			<h2 className={styles.operatorItemTitle}>说什么呢啊</h2>
 			<div className={styles.operatorItemText}>
 				STU utility
 				是一个R-packa标处理目标处理，目标处理目标处理标处理目标处理后期委屈好委屈农，博啊发布丢我被欺安度切换阿斯顿几切换，i的亲戚我好奇你eqeqeweqeqeeqeqeqeqeq。
 			</div>
-			<div className={styles.footerBx}>
+			<div className={styles.footerBox}>
 				<span
 					className={styles.labelBox}
 					style={{
@@ -31,6 +56,15 @@ const OperatorItem = (props: IOperatorItemProps) => {
 				>
 					公共平台
 				</span>
+			</div>
+		</div>
+	);
+};
+
+const OperatorList = () => {
+	return (
+		<div className={styles.operatorListBox}>
+			<div className={styles.searchBox}>
 				<OutlinedInput
 					onChange={(e: any) => {
 						console.log(e.target.value);
@@ -38,22 +72,16 @@ const OperatorItem = (props: IOperatorItemProps) => {
 					// value={templateName}
 					placeholder="输入关键词搜索"
 					size="small"
-					sx={{ flex: 1, height: 32 }}
+					sx={{ height: 32, width: "100%" }}
 					endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
 				/>
 			</div>
-		</div>
-	);
-};
-
-const OperatorList = () => {
-	const arr = [222, 3333, 339];
-	return (
-		<>
-			{arr.map((item) => {
-				return <OperatorItem key={item} info={item} />;
+			<div className={styles.listBox}>
+				{mockData.map((item) => {
+					return <OperatorItem key={item.id} info={item} />;
 				})}
-		</>
+			</div>
+		</div>
 	);
 };
 

src/views/WorkFlowEdit/index.module.css

@@ -7,8 +7,8 @@
 	height: 100vh;
 	background-color: RGBA(247, 248, 250, 1);
 	overflow-y: scroll;
-  }
-  .swHeader {
+}
+.swHeader {
 	z-index: 1001;
 	position: sticky;
 	top: 0;
@@ -19,26 +19,24 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 24px;
-  }
-  .swHeaderLeft {
+}
+.swHeaderLeft {
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;
-  }
-  .swContent {
+}
+.swContent {
 	display: flex;
 	height: calc(100vh - 56px);
-  }
-  .swFormBox {
+}
+.swFormBox {
 	background-color: #fff;
 	border-right: 1xp solid rgba(235, 237, 240, 1);
 	width: 360px;
-    overflow-y: scroll;
+	/* overflow-y: scroll; */
 	box-sizing: border-box;
-    padding: 24px;
-  }
-  .swFlowBox {
+}
+.swFlowBox {
 	flex: 1;
 	height: calc(100vh - 56px);
-  }
-  
+}
\ No newline at end of file

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-06 15:21:55
+ * @LastEditTime: 2022-07-06 18:35:24
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -16,8 +16,7 @@ import ButtonComponent from "@/components/mui/Button";
 import { ITemplateConfig } from "../Project/ProjectSubmitWork/interface";
 import OperatorList from "./components/OperatorList";
 
-import styles from './index.module.css'
-
+import styles from "./index.module.css";
 
 const WorkFlowEdit = () => {
 	const [templateConfigInfo, setTemplateConfigInfo] =
@@ -25,14 +24,13 @@ const WorkFlowEdit = () => {
 	const location: any = useLocation();
 	const navigate = useNavigate();
 
- 
 	return (
 		<div className={styles.swBox}>
 			<div className={styles.swHeader}>
 				<div className={styles.swHeaderLeft}>
 					<MyPopconfirm
 						title="返回后，当前页面已填写内容将不保存，确认返回吗？"
-            onConfirm={()=>console.log(11)}
+						onConfirm={() => console.log(11)}
 					>
 						<IconButton
 							color="primary"
@@ -54,7 +52,7 @@ const WorkFlowEdit = () => {
 				<div className={styles.swHeaderRight}>
 					<MyPopconfirm
 						title="提交前请先确认参数填写无误，确认提交吗？"
-            onConfirm={()=>console.log(2)}
+						onConfirm={() => console.log(2)}
 					>
 						<ButtonComponent
 							text="保存"
@@ -65,11 +63,9 @@ const WorkFlowEdit = () => {
 			</div>
 			<div className={styles.swContent}>
 				<div className={styles.swFormBox}>
-          <OperatorList/>
-        </div>
-        <div className={styles.swFlowBox}>
-          右侧
+					<OperatorList />
 				</div>
+				<div className={styles.swFlowBox}>右侧</div>
 			</div>
 		</div>
 	);