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

fix: 算子列表ui开发

See merge request sunyihao/bkunyun!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,23 +72,17 @@ 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 className={styles.listBox}>
+				{mockData.map((item) => {
+					return <OperatorItem key={item.id} info={item} />;
+				})}
+			</div>
 		</div>
 	);
 };
 
-const OperatorList = () => {
-	const arr = [222, 3333, 339];
-	return (
-		<>
-			{arr.map((item) => {
-				return <OperatorItem key={item} info={item} />;
-			})}
-		</>
-	);
-};
-
 export default OperatorList;

src/views/WorkFlowEdit/index.module.css

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

src/views/WorkFlowEdit/index.tsx

@@ -2,11 +2,11 @@
  * @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
  */
-import React, {  useState } from "react";
+import React, { useState } from "react";
 import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import IconButton from "@mui/material/IconButton";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -16,63 +16,59 @@ 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] =
-    useState<ITemplateConfig>();
-  const location: any = useLocation();
-  const navigate = useNavigate();
+	const [templateConfigInfo, setTemplateConfigInfo] =
+		useState<ITemplateConfig>();
+	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)}
-          >
-            <IconButton
-              color="primary"
-              // onClick={() => handleGoBack()}
-              aria-label="upload picture"
-              component="span"
-              size="small"
-            >
-              <ArrowBackIosNewIcon
-                sx={{
-                  color: "rgba(194, 198, 204, 1)",
-                  width: "12px",
-                  height: "12px",
-                }}
-              />
-            </IconButton>
-          </MyPopconfirm>
-        </div>
-        <div className={styles.swHeaderRight}>
-          <MyPopconfirm
-            title="提交前请先确认参数填写无误，确认提交吗？"
-            onConfirm={()=>console.log(2)}
-          >
-            <ButtonComponent
-              text="保存"
-              // click={handleSubmitForm}
-            ></ButtonComponent>
-          </MyPopconfirm>
-        </div>
-      </div>
-      <div className={styles.swContent}>
-        <div className={styles.swFormBox}>
-          <OperatorList/>
-        </div>
-        <div className={styles.swFlowBox}>
-          右侧
-        </div>
-      </div>
-    </div>
-  );
+	return (
+		<div className={styles.swBox}>
+			<div className={styles.swHeader}>
+				<div className={styles.swHeaderLeft}>
+					<MyPopconfirm
+						title="返回后，当前页面已填写内容将不保存，确认返回吗？"
+						onConfirm={() => console.log(11)}
+					>
+						<IconButton
+							color="primary"
+							// onClick={() => handleGoBack()}
+							aria-label="upload picture"
+							component="span"
+							size="small"
+						>
+							<ArrowBackIosNewIcon
+								sx={{
+									color: "rgba(194, 198, 204, 1)",
+									width: "12px",
+									height: "12px",
+								}}
+							/>
+						</IconButton>
+					</MyPopconfirm>
+				</div>
+				<div className={styles.swHeaderRight}>
+					<MyPopconfirm
+						title="提交前请先确认参数填写无误，确认提交吗？"
+						onConfirm={() => console.log(2)}
+					>
+						<ButtonComponent
+							text="保存"
+							// click={handleSubmitForm}
+						></ButtonComponent>
+					</MyPopconfirm>
+				</div>
+			</div>
+			<div className={styles.swContent}>
+				<div className={styles.swFormBox}>
+					<OperatorList />
+				</div>
+				<div className={styles.swFlowBox}>右侧</div>
+			</div>
+		</div>
+	);
 };
 
 export default WorkFlowEdit;