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

cn-Feat 20220705 custom template

See merge request !85

src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css

+.RadiosBox {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #e6e8eb;
+  border-radius: 4px;
+  background-color: #e6e8eb;
+  cursor: pointer;
+  height: 32px;
+  box-sizing: border-box;
+  padding: 2px;
+}
+.radio {
+  height: 28px;
+  box-sizing: border-box;
+  font-size: 14px;
+  color: #565c66;
+  border-radius: 4px;
+  line-height: 20px;
+  padding: 3px 18px;
+  background-color: #e6e8eb;
+  display: flex;
+  align-items: center;
+}
+.radioActive {
+  color: #1370ff;
+  background-color: #fff;
+  border: 1px solid #e6e8eb;
+}

src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx

+// 按钮样式的单选组
+import classnames from "classnames";
+import style from "./index.module.css";
+
+type radioOption = {
+  value: string;
+  label: string;
+};
+
+type IRadioGroupOfButtonStyleProps = {
+  radioOptions: Array<radioOption>;
+  value: string;
+  handleRadio: any;
+};
+
+const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
+  const { radioOptions, value, handleRadio } = props;
+
+  return (
+    <div className={style.RadiosBox}>
+      {radioOptions.map((options) => {
+        return (
+          <div
+            key={options.value}
+            className={classnames({
+              [style.radio]: true,
+              [style.radioActive]: value === options.value,
+            })}
+            onClick={() => handleRadio(options.value)}
+          >
+            {options.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default RadioGroupOfButtonStyle;

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

@@ -34,7 +34,9 @@ const MoveFile = (props: any) => {
   const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false);
   const [treeData, setTreeData] = useState<any>([]);
   const [renderTreeData, setRenderTreeData] = useState<any>([]);
-  let moveFileDialogRef: any = React.createRef();
+  const [moveFileDialogRef, setMoveFileDialogRef] = useState<any>(
+    React.createRef()
+  );
   // 要移动的文件夹  之后用来隐藏文件夹树中同路径的文件夹
   const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]);
 

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

@@ -99,18 +99,20 @@
   color: rgba(138, 144, 153, 1);
   font-size: 14px;
   line-height: 22px;
+  width: 72px;
+  margin-right: 44px;
 }
 .taskInfoValue {
   color: rgba(30, 38, 51, 1);
   font-size: 14px;
   line-height: 22px;
-  max-width: 210px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   display: flex;
-  overflow: hidden;
   position: relative;
   align-items: center;
+  text-align: left;
+  word-break: break-all;
+  flex: 1;
+  justify-content: flex-end;
 }
 .taskInfoValueClick {
   cursor: pointer;
@@ -159,6 +161,7 @@
   background: #ffffff;
   box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
   border-radius: 4px;
+  z-index: 1002;
 }
 .option {
   padding: 7px 16px;

src/views/Project/ProjectSubmitWork/index.tsx

@@ -30,7 +30,6 @@ import MyPopconfirm from "@/components/mui/MyPopconfirm";
 
 import styles from "./index.module.css";
 
-
 const ProjectSubmitWork = () => {
   const Message = useMessage();
   const { currentProjectStore } = useStores();
@@ -68,7 +67,14 @@ const ProjectSubmitWork = () => {
         task.parameters.forEach((parameter) => {
           let value: any = undefined;
           if (parameter.defaultValue) {
-            value = parameter.defaultValue;
+            if (
+              parameter.domType.toLowerCase() === "multipleselect" ||
+              parameter.domType.toLowerCase() === "checkbox"
+            ) {
+              value = parameter.defaultValue.split(",");
+            } else {
+              value = parameter.defaultValue;
+            }
           } else if (
             parameter.domType.toLowerCase() === "multipleselect" ||
             parameter.domType.toLowerCase() === "checkbox"
@@ -193,73 +199,84 @@ const ProjectSubmitWork = () => {
 
   return (
     <div className={styles.swBox}>
-     { fullScreenShow ? null : <div className={styles.swHeader}>
-        <div className={styles.swHeaderLeft}>
-          <MyPopconfirm
-            title="返回后，当前页面已填写内容将不保存，确认返回吗？"
-            onConfirm={handleGoBack}
-          >
-            <IconButton
-              color="primary"
-              // onClick={() => handleGoBack()}
-              aria-label="upload picture"
-              component="span"
-              size="small"
+      {fullScreenShow ? null : (
+        <div className={styles.swHeader}>
+          <div className={styles.swHeaderLeft}>
+            <MyPopconfirm
+              title="返回后，当前页面已填写内容将不保存，确认返回吗？"
+              onConfirm={handleGoBack}
             >
-              <ArrowBackIosNewIcon
-                sx={{
-                  color: "rgba(194, 198, 204, 1)",
-                  width: "12px",
-                  height: "12px",
-                }}
-              />
-            </IconButton>
-          </MyPopconfirm>
+              <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 className={styles.swTemplateTitle}>
-            {templateConfigInfo?.title}
+            <div className={styles.swTemplateTitle}>
+              {templateConfigInfo?.title}
+            </div>
+            <div className={styles.swTemplateVersionBox}>
+              <span className={styles.swHeaderLable}>版本：</span>
+              <span className={styles.swHeaderValue}>
+                {templateConfigInfo?.languageVersion}
+              </span>
+            </div>
+            <div className={styles.swTemplateUpdateTimeBox}>
+              <span className={styles.swHeaderLable}>更新时间：</span>
+              <span className={styles.swHeaderValue}>
+                {templateConfigInfo?.updateTime
+                  ? moment(templateConfigInfo?.updateTime).format(
+                      "YYYY-MM-DD HH:mm:ss"
+                    )
+                  : "-"}
+              </span>
+            </div>
+            <div className={styles.swHeaderGoback}></div>
           </div>
-          <div className={styles.swTemplateVersionBox}>
-            <span className={styles.swHeaderLable}>版本：</span>
-            <span className={styles.swHeaderValue}>
-              {templateConfigInfo?.languageVersion}
-            </span>
-          </div>
-          <div className={styles.swTemplateUpdateTimeBox}>
-            <span className={styles.swHeaderLable}>更新时间：</span>
-            <span className={styles.swHeaderValue}>
-              {templateConfigInfo?.updateTime
-                ? moment(templateConfigInfo?.updateTime).format(
-                    "YYYY-MM-DD HH:mm:ss"
-                  )
-                : "-"}
-            </span>
+          <div className={styles.swHeaderRight}>
+            <MyPopconfirm
+              title="提交前请先确认参数填写无误，确认提交吗？"
+              onConfirm={handleSubmitForm}
+            >
+              <ButtonComponent
+                text="提交任务"
+                // click={handleSubmitForm}
+              ></ButtonComponent>
+            </MyPopconfirm>
           </div>
-          <div className={styles.swHeaderGoback}></div>
         </div>
-        <div className={styles.swHeaderRight}>
-          <MyPopconfirm
-            title="提交前请先确认参数填写无误，确认提交吗？"
-            onConfirm={handleSubmitForm}
-          >
-            <ButtonComponent
-              text="提交任务"
-              // click={handleSubmitForm}
-            ></ButtonComponent>
-          </MyPopconfirm>
-        </div>
-      </div>}
+      )}
       <div className={styles.swContent}>
-       {fullScreenShow ? null : <div className={styles.swFormBox}>
-          <ConfigForm
-            onRef={configFormRef}
+        {fullScreenShow ? null : (
+          <div className={styles.swFormBox}>
+            <ConfigForm
+              onRef={configFormRef}
+              templateConfigInfo={templateConfigInfo}
+              setParameter={setParameter}
+              setSelectedNodeId={setSelectedNodeId}
+            />
+          </div>
+        )}
+        <div
+          className={styles.swFlowBox}
+          style={fullScreenShow ? { height: "100vh" } : undefined}
+        >
+          <WorkFlow
             templateConfigInfo={templateConfigInfo}
-            setParameter={setParameter}
             setSelectedNodeId={setSelectedNodeId}
+            selectedNodeId={selectedNodeId}
           />
-        </div>}
-        <div className={styles.swFlowBox}  style={fullScreenShow ? { height: "100vh" } : undefined}>
-          <WorkFlow templateConfigInfo={templateConfigInfo} setSelectedNodeId={setSelectedNodeId} selectedNodeId={selectedNodeId}/>
         </div>
       </div>
       <img

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

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-06 14:44:13
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-06 14:47:28
+ * @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/interface.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+export interface ICustomTemplate{
+    show?: boolean;
+    id?: string;
+} 
\ No newline at end of file

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

+.operatorItemBox {
+	background-color: #fff;
+	border-radius: 4px;
+	cursor: grab;
+	padding: 16px 16px 0 24px;
+}
+
+.dragBox {
+	background-color: #f5f6f7;
+}
+.operatorItemTitle {
+	user-select: none;
+	font-size: 14px;
+	color: #1e2633;
+}
+.operatorItemText {
+	color: #8a9099;
+	margin: 8px 0;
+	font-size: 12px;
+	user-select: none;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.labelBox {
+	user-select: none;
+	display: inline-block;
+	border-radius: 2px;
+	font-size: 12px;
+	padding: 2px 8px;
+}
+
+.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 { 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";
+
+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-06 15:16:01
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @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={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.footerBox}>
+				<span
+					className={styles.labelBox}
+					style={{
+						background: true ? "#EBF3FF" : "#E3FAEC",
+						color: true ? "#1370FF" : "#02AB83",
+					}}
+				>
+					公共平台
+				</span>
+			</div>
+		</div>
+	);
+};
+
+const OperatorList = () => {
+	return (
+		<div className={styles.operatorListBox}>
+			<div className={styles.searchBox}>
+				<OutlinedInput
+					onChange={(e: any) => {
+						console.log(e.target.value);
+					}}
+					// value={templateName}
+					placeholder="输入关键词搜索"
+					size="small"
+					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>
+	);
+};
+
+export default OperatorList;

src/views/WorkFlowEdit/components/OperatorList/interface.ts

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-06 15:32:11
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-06 15:32:42
+ * @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/interface.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+export interface IOperatorItemProps {
+    info: any
+}
\ No newline at end of file

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: 608px;
-    overflow-y: scroll;
-    box-sizing: border-box;
-    padding: 36px;
-  }
-  .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-05 16:31:28
+ * @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";
@@ -14,64 +14,61 @@ import { useLocation, useNavigate } from "react-router-dom";
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
 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}>
-          左侧
-        </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;