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

feat: 新增按钮样式的单选组组件

See merge request !81

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/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) {
+            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,7 +199,8 @@ const ProjectSubmitWork = () => {
 
   return (
     <div className={styles.swBox}>
-     { fullScreenShow ? null : <div className={styles.swHeader}>
+      {fullScreenShow ? null : (
+        <div className={styles.swHeader}>
           <div className={styles.swHeaderLeft}>
             <MyPopconfirm
               title="返回后，当前页面已填写内容将不保存，确认返回吗？"
@@ -248,18 +255,28 @@ const ProjectSubmitWork = () => {
               ></ButtonComponent>
             </MyPopconfirm>
           </div>
-      </div>}
+        </div>
+      )}
       <div className={styles.swContent}>
-       {fullScreenShow ? null : <div className={styles.swFormBox}>
+        {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} 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/components/addTemplate.tsx

-
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import styles from "../index.module.css";
 import { Box, Typography } from "@mui/material";
 import Button from "@/components/mui/Button";
 import Dialog from "@/components/mui/Dialog";
 import OutlinedInput from "@mui/material/OutlinedInput";
+import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import SearchIcon from "@mui/icons-material/Search";
-import Checkbox from '@mui/material/Checkbox';
-import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
-import noData from '../../../../../assets/project/noTemplate.svg'
+import Checkbox from "@mui/material/Checkbox";
+import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
+import noData from "../../../../../assets/project/noTemplate.svg";
 import _ from "lodash";
 
 const AddTemplate = (props: any) => {
-    const { openAddTemplate, closeAddTemplateBlock, addTemplateList, templateSelectCallback, selectTemplateData, addTemplateCallback, searchTemplateNameCallback } = props;
+  const {
+    openAddTemplate,
+    closeAddTemplateBlock,
+    addTemplateList,
+    templateSelectCallback,
+    selectTemplateData,
+    addTemplateCallback,
+    searchTemplateNameCallback,
+  } = props;
+
+  const [templateType, setTemplateType] = useState("public");
+  const radioOptions = [
+    {
+      value: "public",
+      label: "公共",
+    },
+    {
+      value: "custom",
+      label: "自定义",
+    },
+  ];
+
+  const handleRadio = (value: string) => {
+    setTemplateType(value);
+  };
 
   return (
-        <Box className={styles.addTemplateMask} sx={{ display: openAddTemplate ? 'flex' : 'none' }}  >
-            <Box sx={{ height: '50px', display: 'flex', alignItems: 'center' }} >
-                <CloseOutlinedIcon sx={{ color: "#ffffff", marginRight: "10px", cursor: "pointer" }} onClick={() => {
-                    closeAddTemplateBlock()
-                }} />
+    <Box
+      className={styles.addTemplateMask}
+      sx={{ display: openAddTemplate ? "flex" : "none" }}
+    >
+      <Box sx={{ height: "50px", display: "flex", alignItems: "center" }}>
+        <CloseOutlinedIcon
+          sx={{ color: "#ffffff", marginRight: "10px", cursor: "pointer" }}
+          onClick={() => {
+            closeAddTemplateBlock();
+          }}
+        />
       </Box>
       <Box className={styles.addTemplateBlock}>
         <Box sx={{ padding: "24px 32px" }}>
-                    <Typography sx={{ fontSize: '18px', fontWeight: '600', color: "#1E2633" }}>添加工作流模版</Typography>
-                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: "20px" }}>
+          <Typography
+            sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }}
+          >
+            添加工作流模版
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: "20px",
+            }}
+          >
             <OutlinedInput
               onChange={(e: any) => {
                 _.debounce(() => {
-                                    searchTemplateNameCallback(e.target.value)
+                  searchTemplateNameCallback(e.target.value);
                 }, 200)();
               }}
               placeholder="输入关键词搜索"
@@ -36,45 +77,128 @@ const AddTemplate = (props: any) => {
               sx={{ width: 340, height: 32, marginTop: "20px" }}
               endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
             />
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center",
+              }}
+            >
+              <RadioGroupOfButtonStyle
+                value={templateType}
+                radioOptions={radioOptions}
+                handleRadio={handleRadio}
+              ></RadioGroupOfButtonStyle>
               <Button
                 click={addTemplateCallback}
                 size={"small"}
-                            text={'添加模版' + (selectTemplateData.length === 0 ? "" : `(${selectTemplateData.length})`)}
+                style={{
+                  marginLeft: "12px",
+                }}
+                text={
+                  "添加模版" +
+                  (selectTemplateData.length === 0
+                    ? ""
+                    : `(${selectTemplateData.length})`)
+                }
               />
             </Box>
+          </Box>
 
-                    {
-                        addTemplateList.length === 0 && <Box sx={{
-                            display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)',
-                            justifyContent: 'center'
-                        }}>
+          {addTemplateList.length === 0 && (
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                flexDirection: "column",
+                minHeight: "calc(100vh - 376px)",
+                justifyContent: "center",
+              }}
+            >
               <img alt="" src={noData} />
-                            <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#8A9099' }}>暂未相关模版</Typography>
+              <Typography
+                sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
+              >
+                暂未相关模版
+              </Typography>
             </Box>
-                    }
+          )}
 
-                    <Box sx={{ display: "flex", flexWrap: 'wrap', overflowX: 'hidden', overflowY: 'overlay', marginLeft: '-8px' }} >
-                        {
-                            addTemplateList.map((item: any, key: any) => {
+          <Box
+            sx={{
+              display: "flex",
+              flexWrap: "wrap",
+              overflowX: "hidden",
+              overflowY: "overlay",
+              marginLeft: "-8px",
+            }}
+          >
+            {addTemplateList.map((item: any, key: any) => {
               return (
-                                    <Box className={styles.addTemplateBox} onClick={() => {
-                                        templateSelectCallback(item.id)
+                <Box
+                  className={styles.addTemplateBox}
+                  onClick={() => {
+                    templateSelectCallback(item.id);
+                  }}
+                  sx={{
+                    border: selectTemplateData.includes(item.id)
+                      ? "1px solid #1370FF"
+                      : "1px solid #EBEDF0;",
+                  }}
+                  key={item.id}
+                >
+                  <Box
+                    sx={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        fontSize: "14px",
+                        fontWeight: "600",
+                        color: "#1E2633",
+                        marginBottom: "4px",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
                       }}
-                                        sx={{ border: selectTemplateData.includes(item.id) ? '1px solid #1370FF' : "1px solid #EBEDF0;" }}
                     >
-                                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', }}>
-                                            <Typography sx={{ fontSize: '14px', fontWeight: '600', color: '#1E2633', marginBottom: "4px", overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.title}</Typography>
-                                            <Checkbox size="small" sx={{ padding: "0px" }} checked={selectTemplateData.includes(item.id)} />
+                      {item.title}
+                    </Typography>
+                    <Checkbox
+                      size="small"
+                      sx={{ padding: "0px" }}
+                      checked={selectTemplateData.includes(item.id)}
+                    />
                   </Box>
-                                        <Box sx={{ display: 'flex', marginBottom: "8px" }}>
-                                            <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#1370FF', marginRight: "24px" }}>版本：{item.version}</Typography>
-                                            <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#1370FF' }}>更新时间：{item.updateTime}</Typography>
+                  <Box sx={{ display: "flex", marginBottom: "8px" }}>
+                    <Typography
+                      sx={{
+                        fontSize: "12px",
+                        fontWeight: "400",
+                        color: "#1370FF",
+                        marginRight: "24px",
+                      }}
+                    >
+                      版本：{item.version}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        fontSize: "12px",
+                        fontWeight: "400",
+                        color: "#1370FF",
+                      }}
+                    >
+                      更新时间：{item.updateTime}
+                    </Typography>
                   </Box>
-                                        <Typography className={styles.templateDescText} >{item.description}</Typography>
+                  <Typography className={styles.templateDescText}>
+                    {item.description}
+                  </Typography>
                 </Box>
-                                )
-                            })
-                        }
+              );
+            })}
           </Box>
         </Box>
       </Box>

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

@@ -17,23 +17,22 @@ import Add from "@mui/icons-material/Add";
 
 import Button from "@/components/mui/Button";
 import useMyRequest from "@/hooks/useMyRequest";
-import TemplateBox from "./components/templateBox"
-import SimpleDialog from "./components/simpleDialog"
-import AddTemplate from "./components/addTemplate"
-import noData from '../../../../assets/project/noTemplate.svg'
+import TemplateBox from "./components/templateBox";
+import SimpleDialog from "./components/simpleDialog";
+import AddTemplate from "./components/addTemplate";
+import noData from "../../../../assets/project/noTemplate.svg";
 import {
   getWorkbenchTemplate,
   deleteWorkbenchTemplate,
   getAddWorkbenchTemplate,
-    addWorkbenchTemplate
+  addWorkbenchTemplate,
 } from "@/api/workbench_api";
 import usePass from "@/hooks/usePass";
-import ReactFlowEdit from '@/views/WorkFlowEdit'
+import ReactFlowEdit from "@/views/WorkFlowEdit";
 import { useStores } from "@/store";
 
 import styles from "./index.module.css";
 
-
 const ProjectMembers = observer(() => {
   const { currentProjectStore } = useStores();
   const projectIdData = toJS(currentProjectStore.currentProjectInfo.id);
@@ -45,7 +44,7 @@ const ProjectMembers = observer(() => {
   /** 模板列表 */
   const [templateList, setTemplateList] = useState([]);
   /** 选中的模板id */
-    const [templateId, setTemplateId] = useState('');
+  const [templateId, setTemplateId] = useState("");
   /** 简单弹窗（删除模板） */
   const [openDialog, setOpenDialog] = useState(false);
   /** 增加模板 */
@@ -68,7 +67,7 @@ const ProjectMembers = observer(() => {
       setOpenDialog(false);
       getTemplateInfo({
         projectId: currentProjectStore.currentProjectInfo.id as string,
-                title: templateName
+        title: templateName,
       });
     },
   });
@@ -76,7 +75,7 @@ const ProjectMembers = observer(() => {
   // 添加工作流模板-获取模板列表
   const { run: getAddTemplateList } = useMyRequest(getAddWorkbenchTemplate, {
     onSuccess: (result: any) => {
-            setAddTemplateList(result.data)
+      setAddTemplateList(result.data);
       setOpenAddTemplate(true);
     },
   });
@@ -84,11 +83,11 @@ const ProjectMembers = observer(() => {
   // 项目管理员-添加工作流模板-提交
   const { run: addTemplate } = useMyRequest(addWorkbenchTemplate, {
     onSuccess: (result: any) => {
-            setOpenAddTemplate(false)
+      setOpenAddTemplate(false);
       getTemplateInfo({
         projectId: currentProjectStore.currentProjectInfo.id as string,
       });
-            setSelectTemplateData([])
+      setSelectTemplateData([]);
     },
   });
 
@@ -98,22 +97,21 @@ const ProjectMembers = observer(() => {
     });
   }, [currentProjectStore.currentProjectInfo.id, getTemplateInfo]);
 
-
   useEffect(() => {
-        console.log('projectIdData: ', projectIdData);
-    }, [projectIdData])
+    console.log("projectIdData: ", projectIdData);
+  }, [projectIdData]);
 
   /** 删除模板 */
   const deleteTemplate = () => {
     delTemplate({
       projectId: currentProjectStore.currentProjectInfo.id as string,
       workflowSpecId: templateId,
-        })
+    });
   };
 
   /** 打开弹窗 */
   const startDialog = (id: string) => {
-        setTemplateId(id)
+    setTemplateId(id);
     setOpenDialog(true);
   };
 
@@ -126,65 +124,63 @@ const ProjectMembers = observer(() => {
   const addTemplateBlock = () => {
     getAddTemplateList({
       projectId: currentProjectStore.currentProjectInfo.id as string,
-            productId: 'cadd',
-        })
+      productId: "cadd",
+    });
   };
 
   /** 关闭增加模板 */
   const closeAddTemplateBlock = () => {
     setOpenAddTemplate(false);
-        setSelectTemplateData([])
+    setSelectTemplateData([]);
   };
 
   /** 增加模板操作 */
   const addTemplateCallback = () => {
     addTemplate({
       projectId: currentProjectStore.currentProjectInfo.id as string,
-            workflowSpecIds: selectTemplateData
-        })
-    }
+      workflowSpecIds: selectTemplateData,
+    });
+  };
 
   /** 搜索模板 */
   const searchTemplateNameCallback = (data: any) => {
     getAddTemplateList({
       projectId: currentProjectStore.currentProjectInfo.id as string,
-            productId: 'cadd',
-            title: data
-        })
-    }
+      productId: "cadd",
+      title: data,
+    });
+  };
 
   const templateSelectCallback = (data: string) => {
-        let list: string[] = [...selectTemplateData]
-        if (selectTemplateData.filter(e => e === data).length > 0) {
-            list = list.filter(e => e !== data)
-            setSelectTemplateData(list)
+    let list: string[] = [...selectTemplateData];
+    if (selectTemplateData.filter((e) => e === data).length > 0) {
+      list = list.filter((e) => e !== data);
+      setSelectTemplateData(list);
     } else {
-            list.push(data)
-            setSelectTemplateData(list)
-        }
-
+      list.push(data);
+      setSelectTemplateData(list);
     }
+  };
 
   const searchChange = (data: any) => {
     setTemplateName(data.length > 30 ? data.slice(0, 30) : data);
-    }
+  };
 
   useEffect(() => {
     setTimeout(() => {
       getTemplateInfo({
         projectId: currentProjectStore.currentProjectInfo.id as string,
-                title: templateName
+        title: templateName,
       });
-        }, 300)
+    }, 300);
   }, [templateName]);
 
   return (
     <Box className={styles.headerBox}>
-
-            <Box className={styles.tabBox} >
+      <Box className={styles.tabBox}>
         <OutlinedInput
           onChange={(e: any) => {
-                        searchChange(e.target.value)
+            searchChange(e.target.value);
           }}
           value={templateName}
           placeholder="输入关键词搜索"
@@ -193,40 +189,70 @@ const ProjectMembers = observer(() => {
           endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
         />
 
-                {
-                    templateList.length > 0 && isPass("PROJECT_WORKBENCH_FLOES_ADD", 'MANAGER') &&
-                    <Button text={'添加工作流模版'} img={<Add />} click={addTemplateBlock} size={'small'} />
-                }
-
+        {templateList.length > 0 &&
+          isPass("PROJECT_WORKBENCH_FLOES_ADD", "MANAGER") && (
+            <Button
+              text={"添加工作流模版"}
+              img={<Add />}
+              click={addTemplateBlock}
+              size={"small"}
+            />
+          )}
       </Box>
 
-            {
-                templateList.length === 0 && templateName.length > 0 &&
-                <Box sx={{
-                    display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)',
-                    justifyContent: 'center'
-                }}>
+      {templateList.length === 0 && templateName.length > 0 && (
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "column",
+            minHeight: "calc(100vh - 376px)",
+            justifyContent: "center",
+          }}
+        >
           <img alt="" src={noData} />
-                    <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#8A9099' }}>暂未开启模版</Typography>
+          <Typography
+            sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
+          >
+            暂未开启模版
+          </Typography>
         </Box>
-            }
-            {
-                templateList.length > 0 && <Box sx={{ display: "flex", flexWrap: 'wrap', marginLeft: "-8px" }} >
-                    {
-                        templateList && templateList.length > 0 && templateList.map((item, key) => {
-                            return <TemplateBox data={item} startDialog={startDialog} />
-                        })
-                    }
+      )}
+      {templateList.length > 0 && (
+        <Box sx={{ display: "flex", flexWrap: "wrap", marginLeft: "-8px" }}>
+          {templateList &&
+            templateList.length > 0 &&
+            templateList.map((item, key) => {
+              return (
+                <TemplateBox data={item} startDialog={startDialog} key={key} />
+              );
+            })}
         </Box>
-            }
-            {
-                templateList.length === 0 && templateName.length === 0 && isPass("PROJECT_WORKBENCH_FLOES_ADD", 'MANAGER') && <Box className={styles.addNewTemplate}
-                    onClick={addTemplateBlock}
+      )}
+      {templateList.length === 0 &&
+        templateName.length === 0 &&
+        isPass("PROJECT_WORKBENCH_FLOES_ADD", "MANAGER") && (
+          <Box className={styles.addNewTemplate} onClick={addTemplateBlock}>
+            <Add
+              sx={{
+                color: "#565C66",
+                fontSize: "20px",
+                width: "30px",
+                height: "30px",
+              }}
+            />
+            <Typography
+              sx={{
+                fontSize: "14px",
+                fontWeight: "400",
+                color: "#8A9099",
+                marginTop: "15px",
+              }}
             >
-                    <Add sx={{ color: "#565C66", fontSize: "20px", width: "30px", height: '30px' }} />
-                    <Typography sx={{ fontSize: '14px', fontWeight: '400', color: '#8A9099', marginTop: "15px" }}>添加工作流模版</Typography>
+              添加工作流模版
+            </Typography>
           </Box>
-            }
+        )}
 
       <AddTemplate
         openAddTemplate={openAddTemplate}
@@ -241,13 +267,12 @@ const ProjectMembers = observer(() => {
       {/* <ReactFlowEdit/> */}
 
       <SimpleDialog
-                text={'确认移除该模板吗？'}
-                title={'删除模板'}
+        text={"确认移除该模板吗？"}
+        title={"删除模板"}
         openDialog={openDialog}
         closeDialog={closeDialog}
         onConfirm={deleteTemplate}
       />
-
     </Box>
   );
 });