Skip to content

B
bkunyun
Commit 90965ac8 authored by chenshouchao's avatar chenshouchao
Browse files
Options

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

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

See merge request !81
parents 61b7dc0e 82b14568
Hide whitespace changes
Inline Side-by-side
Showing with 577 additions and 343 deletions
src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css 0 → 100644
View file @ 90965ac8
.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 0 → 100644
View file @ 90965ac8
// 按钮样式的单选组
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
View file @ 90965ac8
...@@ -30,7 +30,6 @@ import MyPopconfirm from "@/components/mui/MyPopconfirm"; ...@@ -30,7 +30,6 @@ import MyPopconfirm from "@/components/mui/MyPopconfirm";
import styles from "./index.module.css"; import styles from "./index.module.css";
const ProjectSubmitWork = () => { const ProjectSubmitWork = () => {
const Message = useMessage(); const Message = useMessage();
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
...@@ -68,7 +67,14 @@ const ProjectSubmitWork = () => { ...@@ -68,7 +67,14 @@ const ProjectSubmitWork = () => {
task.parameters.forEach((parameter) => { task.parameters.forEach((parameter) => {
let value: any = undefined; let value: any = undefined;
if (parameter.defaultValue) { 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 ( } else if (
parameter.domType.toLowerCase() === "multipleselect" || parameter.domType.toLowerCase() === "multipleselect" ||
parameter.domType.toLowerCase() === "checkbox" parameter.domType.toLowerCase() === "checkbox"
...@@ -193,73 +199,84 @@ const ProjectSubmitWork = () => { ...@@ -193,73 +199,84 @@ const ProjectSubmitWork = () => {
return ( return (
<div className={styles.swBox}> <div className={styles.swBox}>
{ fullScreenShow ? null : <div className={styles.swHeader}> {fullScreenShow ? null : (
<div className={styles.swHeaderLeft}> <div className={styles.swHeader}>
<MyPopconfirm <div className={styles.swHeaderLeft}>
title="返回后，当前页面已填写内容将不保存，确认返回吗？" <MyPopconfirm
onConfirm={handleGoBack} title="返回后，当前页面已填写内容将不保存，确认返回吗？"
> onConfirm={handleGoBack}
<IconButton
color="primary"
// onClick={() => handleGoBack()}
aria-label="upload picture"
component="span"
size="small"
> >
<ArrowBackIosNewIcon <IconButton
sx={{ color="primary"
color: "rgba(194, 198, 204, 1)", // onClick={() => handleGoBack()}
width: "12px", aria-label="upload picture"
height: "12px", component="span"
}} size="small"
/> >
</IconButton> <ArrowBackIosNewIcon
</MyPopconfirm> sx={{
color: "rgba(194, 198, 204, 1)",
width: "12px",
height: "12px",
}}
/>
</IconButton>
</MyPopconfirm>
<div className={styles.swTemplateTitle}> <div className={styles.swTemplateTitle}>
{templateConfigInfo?.title} {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>
<div className={styles.swTemplateVersionBox}> <div className={styles.swHeaderRight}>
<span className={styles.swHeaderLable}>版本：</span> <MyPopconfirm
<span className={styles.swHeaderValue}> title="提交前请先确认参数填写无误，确认提交吗？"
{templateConfigInfo?.languageVersion} onConfirm={handleSubmitForm}
</span> >
</div> <ButtonComponent
<div className={styles.swTemplateUpdateTimeBox}> text="提交任务"
<span className={styles.swHeaderLable}>更新时间：</span> // click={handleSubmitForm}
<span className={styles.swHeaderValue}> ></ButtonComponent>
{templateConfigInfo?.updateTime </MyPopconfirm>
? moment(templateConfigInfo?.updateTime).format(
"YYYY-MM-DD HH:mm:ss"
)
: "-"}
</span>
</div> </div>
<div className={styles.swHeaderGoback}></div>
</div> </div>
<div className={styles.swHeaderRight}> )}
<MyPopconfirm
title="提交前请先确认参数填写无误，确认提交吗？"
onConfirm={handleSubmitForm}
>
<ButtonComponent
text="提交任务"
// click={handleSubmitForm}
></ButtonComponent>
</MyPopconfirm>
</div>
</div>}
<div className={styles.swContent}> <div className={styles.swContent}>
{fullScreenShow ? null : <div className={styles.swFormBox}> {fullScreenShow ? null : (
<ConfigForm <div className={styles.swFormBox}>
onRef={configFormRef} <ConfigForm
onRef={configFormRef}
templateConfigInfo={templateConfigInfo}
setParameter={setParameter}
setSelectedNodeId={setSelectedNodeId}
/>
</div>
)}
<div
className={styles.swFlowBox}
style={fullScreenShow ? { height: "100vh" } : undefined}
>
<WorkFlow
templateConfigInfo={templateConfigInfo} templateConfigInfo={templateConfigInfo}
setParameter={setParameter}
setSelectedNodeId={setSelectedNodeId} setSelectedNodeId={setSelectedNodeId}
selectedNodeId={selectedNodeId}
/> />
</div>}
<div className={styles.swFlowBox} style={fullScreenShow ? { height: "100vh" } : undefined}>
<WorkFlow templateConfigInfo={templateConfigInfo} setSelectedNodeId={setSelectedNodeId} selectedNodeId={selectedNodeId}/>
</div> </div>
</div> </div>
<img <img
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/addTemplate.tsx
View file @ 90965ac8
import { memo, useCallback, useEffect, useMemo, useState } from "react"; import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from "../index.module.css"; import styles from "../index.module.css";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import Button from "@/components/mui/Button"; import Button from "@/components/mui/Button";
import Dialog from "@/components/mui/Dialog"; import Dialog from "@/components/mui/Dialog";
import OutlinedInput from "@mui/material/OutlinedInput"; import OutlinedInput from "@mui/material/OutlinedInput";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import Checkbox from '@mui/material/Checkbox'; import Checkbox from "@mui/material/Checkbox";
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined'; import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
import noData from '../../../../../assets/project/noTemplate.svg' import noData from "../../../../../assets/project/noTemplate.svg";
import _ from "lodash"; import _ from "lodash";
const AddTemplate = (props: any) => { 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 ( return (
<Box className={styles.addTemplateMask} sx={{ display: openAddTemplate ? 'flex' : 'none' }} > <Box
<Box sx={{ height: '50px', display: 'flex', alignItems: 'center' }} > className={styles.addTemplateMask}
<CloseOutlinedIcon sx={{ color: "#ffffff", marginRight: "10px", cursor: "pointer" }} onClick={() => { sx={{ display: openAddTemplate ? "flex" : "none" }}
closeAddTemplateBlock() >
}} /> <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",
}}
>
<OutlinedInput
onChange={(e: any) => {
_.debounce(() => {
searchTemplateNameCallback(e.target.value);
}, 200)();
}}
placeholder="输入关键词搜索"
size="small"
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"}
style={{
marginLeft: "12px",
}}
text={
"添加模版" +
(selectTemplateData.length === 0
? ""
: `(${selectTemplateData.length})`)
}
/>
</Box> </Box>
<Box className={styles.addTemplateBlock}> </Box>
<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" }}>
<OutlinedInput
onChange={(e: any) => {
_.debounce(() => {
searchTemplateNameCallback(e.target.value)
}, 200)();
}}
placeholder="输入关键词搜索"
size="small"
sx={{ width: 340, height: 32, marginTop: "20px" }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
<Button
click={addTemplateCallback}
size={"small"}
text={'添加模版' + (selectTemplateData.length === 0 ? "" : `(${selectTemplateData.length})`)}
/>
</Box>
{ {addTemplateList.length === 0 && (
addTemplateList.length === 0 && <Box sx={{ <Box
display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)', sx={{
justifyContent: 'center' display: "flex",
}}> alignItems: "center",
<img alt="" src={noData} /> flexDirection: "column",
<Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#8A9099' }}>暂未相关模版</Typography> minHeight: "calc(100vh - 376px)",
</Box> justifyContent: "center",
} }}
>
<img alt="" src={noData} />
<Typography
sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
>
暂未相关模版
</Typography>
</Box>
)}
<Box sx={{ display: "flex", flexWrap: 'wrap', overflowX: 'hidden', overflowY: 'overlay', marginLeft: '-8px' }} > <Box
{ sx={{
addTemplateList.map((item: any, key: any) => { display: "flex",
return ( flexWrap: "wrap",
<Box className={styles.addTemplateBox} onClick={() => { overflowX: "hidden",
templateSelectCallback(item.id) overflowY: "overlay",
}} marginLeft: "-8px",
sx={{ border: selectTemplateData.includes(item.id) ? '1px solid #1370FF' : "1px solid #EBEDF0;" }} }}
> >
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', }}> {addTemplateList.map((item: any, key: any) => {
<Typography sx={{ fontSize: '14px', fontWeight: '600', color: '#1E2633', marginBottom: "4px", overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.title}</Typography> return (
<Checkbox size="small" sx={{ padding: "0px" }} checked={selectTemplateData.includes(item.id)} /> <Box
</Box> className={styles.addTemplateBox}
<Box sx={{ display: 'flex', marginBottom: "8px" }}> onClick={() => {
<Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#1370FF', marginRight: "24px" }}>版本：{item.version}</Typography> templateSelectCallback(item.id);
<Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#1370FF' }}>更新时间：{item.updateTime}</Typography> }}
</Box> sx={{
<Typography className={styles.templateDescText} >{item.description}</Typography> border: selectTemplateData.includes(item.id)
</Box> ? "1px solid #1370FF"
) : "1px solid #EBEDF0;",
}) }}
} key={item.id}
</Box> >
<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)}
/>
</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>
<Typography className={styles.templateDescText}>
{item.description}
</Typography>
</Box> </Box>
</Box> );
})}
</Box>
</Box> </Box>
); </Box>
</Box>
);
}; };
export default memo(AddTemplate); export default memo(AddTemplate);
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ 90965ac8
...@@ -17,239 +17,264 @@ import Add from "@mui/icons-material/Add"; ...@@ -17,239 +17,264 @@ import Add from "@mui/icons-material/Add";
import Button from "@/components/mui/Button"; import Button from "@/components/mui/Button";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import TemplateBox from "./components/templateBox" import TemplateBox from "./components/templateBox";
import SimpleDialog from "./components/simpleDialog" import SimpleDialog from "./components/simpleDialog";
import AddTemplate from "./components/addTemplate" import AddTemplate from "./components/addTemplate";
import noData from '../../../../assets/project/noTemplate.svg' import noData from "../../../../assets/project/noTemplate.svg";
import { import {
getWorkbenchTemplate, getWorkbenchTemplate,
deleteWorkbenchTemplate, deleteWorkbenchTemplate,
getAddWorkbenchTemplate, getAddWorkbenchTemplate,
addWorkbenchTemplate addWorkbenchTemplate,
} from "@/api/workbench_api"; } from "@/api/workbench_api";
import usePass from "@/hooks/usePass"; import usePass from "@/hooks/usePass";
import ReactFlowEdit from '@/views/WorkFlowEdit' import ReactFlowEdit from "@/views/WorkFlowEdit";
import { useStores } from "@/store"; import { useStores } from "@/store";
import styles from "./index.module.css"; import styles from "./index.module.css";
const ProjectMembers = observer(() => { const ProjectMembers = observer(() => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const projectIdData = toJS(currentProjectStore.currentProjectInfo.id); const projectIdData = toJS(currentProjectStore.currentProjectInfo.id);
const isPass = usePass(); const isPass = usePass();
/** 搜索模板名称 */ /** 搜索模板名称 */
const [templateName, setTemplateName] = useState(""); const [templateName, setTemplateName] = useState("");
/** 模板列表 */ /** 模板列表 */
const [templateList, setTemplateList] = useState([]); const [templateList, setTemplateList] = useState([]);
/** 选中的模板id */ /** 选中的模板id */
const [templateId, setTemplateId] = useState(''); const [templateId, setTemplateId] = useState("");
/** 简单弹窗（删除模板） */ /** 简单弹窗（删除模板） */
const [openDialog, setOpenDialog] = useState(false); const [openDialog, setOpenDialog] = useState(false);
/** 增加模板 */ /** 增加模板 */
const [openAddTemplate, setOpenAddTemplate] = useState(false); const [openAddTemplate, setOpenAddTemplate] = useState(false);
/** 可增加模板列表 */ /** 可增加模板列表 */
const [addTemplateList, setAddTemplateList] = useState([]); const [addTemplateList, setAddTemplateList] = useState([]);
/** 已选择增加的模板列表 */ /** 已选择增加的模板列表 */
const [selectTemplateData, setSelectTemplateData] = useState<string[]>([]); const [selectTemplateData, setSelectTemplateData] = useState<string[]>([]);
// 获取模板列表 // 获取模板列表
const { run: getTemplateInfo } = useMyRequest(getWorkbenchTemplate, { const { run: getTemplateInfo } = useMyRequest(getWorkbenchTemplate, {
onSuccess: (result: any) => { onSuccess: (result: any) => {
setTemplateList(result.data); setTemplateList(result.data);
}, },
});
// 删除模板
const { run: delTemplate } = useMyRequest(deleteWorkbenchTemplate, {
onSuccess: (result: any) => {
setOpenDialog(false);
getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
title: templateName,
});
},
});
// 添加工作流模板-获取模板列表
const { run: getAddTemplateList } = useMyRequest(getAddWorkbenchTemplate, {
onSuccess: (result: any) => {
setAddTemplateList(result.data);
setOpenAddTemplate(true);
},
});
// 项目管理员-添加工作流模板-提交
const { run: addTemplate } = useMyRequest(addWorkbenchTemplate, {
onSuccess: (result: any) => {
setOpenAddTemplate(false);
getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
});
setSelectTemplateData([]);
},
});
useEffect(() => {
getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
}); });
}, [currentProjectStore.currentProjectInfo.id, getTemplateInfo]);
// 删除模板 useEffect(() => {
const { run: delTemplate } = useMyRequest(deleteWorkbenchTemplate, { console.log("projectIdData: ", projectIdData);
onSuccess: (result: any) => { }, [projectIdData]);
setOpenDialog(false);
getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
title: templateName
});
},
});
// 添加工作流模板-获取模板列表 /** 删除模板 */
const { run: getAddTemplateList } = useMyRequest(getAddWorkbenchTemplate, { const deleteTemplate = () => {
onSuccess: (result: any) => { delTemplate({
setAddTemplateList(result.data) projectId: currentProjectStore.currentProjectInfo.id as string,
setOpenAddTemplate(true); workflowSpecId: templateId,
},
}); });
};
// 项目管理员-添加工作流模板-提交
const { run: addTemplate } = useMyRequest(addWorkbenchTemplate, { /** 打开弹窗 */
onSuccess: (result: any) => { const startDialog = (id: string) => {
setOpenAddTemplate(false) setTemplateId(id);
getTemplateInfo({ setOpenDialog(true);
projectId: currentProjectStore.currentProjectInfo.id as string, };
});
setSelectTemplateData([]) /** 关闭弹窗 */
}, const closeDialog = () => {
setOpenDialog(false);
};
/** 增加模板 */
const addTemplateBlock = () => {
getAddTemplateList({
projectId: currentProjectStore.currentProjectInfo.id as string,
productId: "cadd",
}); });
};
useEffect(() => {
getTemplateInfo({ /** 关闭增加模板 */
projectId: currentProjectStore.currentProjectInfo.id as string, const closeAddTemplateBlock = () => {
}); setOpenAddTemplate(false);
}, [currentProjectStore.currentProjectInfo.id, getTemplateInfo]); setSelectTemplateData([]);
};
useEffect(() => { /** 增加模板操作 */
console.log('projectIdData: ', projectIdData); const addTemplateCallback = () => {
}, [projectIdData]) addTemplate({
projectId: currentProjectStore.currentProjectInfo.id as string,
/** 删除模板 */ workflowSpecIds: selectTemplateData,
const deleteTemplate = () => { });
delTemplate({ };
projectId: currentProjectStore.currentProjectInfo.id as string,
workflowSpecId: templateId, /** 搜索模板 */
}) const searchTemplateNameCallback = (data: any) => {
}; getAddTemplateList({
projectId: currentProjectStore.currentProjectInfo.id as string,
/** 打开弹窗 */ productId: "cadd",
const startDialog = (id: string) => { title: data,
setTemplateId(id) });
setOpenDialog(true); };
};
const templateSelectCallback = (data: string) => {
/** 关闭弹窗 */ let list: string[] = [...selectTemplateData];
const closeDialog = () => { if (selectTemplateData.filter((e) => e === data).length > 0) {
setOpenDialog(false); list = list.filter((e) => e !== data);
}; setSelectTemplateData(list);
} else {
/** 增加模板 */ list.push(data);
const addTemplateBlock = () => { setSelectTemplateData(list);
getAddTemplateList({
projectId: currentProjectStore.currentProjectInfo.id as string,
productId: 'cadd',
})
};
/** 关闭增加模板 */
const closeAddTemplateBlock = () => {
setOpenAddTemplate(false);
setSelectTemplateData([])
};
/** 增加模板操作 */
const addTemplateCallback = () => {
addTemplate({
projectId: currentProjectStore.currentProjectInfo.id as string,
workflowSpecIds: selectTemplateData
})
}
/** 搜索模板 */
const searchTemplateNameCallback = (data: any) => {
getAddTemplateList({
projectId: currentProjectStore.currentProjectInfo.id as string,
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)
} else {
list.push(data)
setSelectTemplateData(list)
}
}
const searchChange = (data: any) => {
setTemplateName(data.length > 30 ? data.slice(0, 30) : data);
} }
};
useEffect(() => {
setTimeout(() => { const searchChange = (data: any) => {
getTemplateInfo({ setTemplateName(data.length > 30 ? data.slice(0, 30) : data);
projectId: currentProjectStore.currentProjectInfo.id as string, };
title: templateName
}); useEffect(() => {
}, 300) setTimeout(() => {
}, [templateName]); getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
return ( title: templateName,
<Box className={styles.headerBox}> });
}, 300);
<Box className={styles.tabBox} > }, [templateName]);
<OutlinedInput
onChange={(e: any) => { return (
searchChange(e.target.value) <Box className={styles.headerBox}>
}} <Box className={styles.tabBox}>
value={templateName} <OutlinedInput
placeholder="输入关键词搜索" onChange={(e: any) => {
size="small" searchChange(e.target.value);
sx={{ width: 340, height: 32 }} }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />} value={templateName}
/> placeholder="输入关键词搜索"
size="small"
{ sx={{ width: 340, height: 32 }}
templateList.length > 0 && isPass("PROJECT_WORKBENCH_FLOES_ADD", 'MANAGER') && endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
<Button text={'添加工作流模版'} img={<Add />} click={addTemplateBlock} size={'small'} /> />
}
{templateList.length > 0 &&
</Box> isPass("PROJECT_WORKBENCH_FLOES_ADD", "MANAGER") && (
<Button
{ text={"添加工作流模版"}
templateList.length === 0 && templateName.length > 0 && img={<Add />}
<Box sx={{ click={addTemplateBlock}
display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)', size={"small"}
justifyContent: 'center'
}}>
<img alt="" src={noData} />
<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} />
})
}
</Box>
}
{
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" }}>添加工作流模版</Typography>
</Box>
}
<AddTemplate
openAddTemplate={openAddTemplate}
closeAddTemplateBlock={closeAddTemplateBlock}
addTemplateList={addTemplateList}
templateSelectCallback={templateSelectCallback}
selectTemplateData={selectTemplateData}
addTemplateCallback={addTemplateCallback}
searchTemplateNameCallback={searchTemplateNameCallback}
/> />
)}
{/* <ReactFlowEdit/> */} </Box>
<SimpleDialog {templateList.length === 0 && templateName.length > 0 && (
text={'确认移除该模板吗？'} <Box
title={'删除模板'} sx={{
openDialog={openDialog} display: "flex",
closeDialog={closeDialog} alignItems: "center",
onConfirm={deleteTemplate} flexDirection: "column",
/> minHeight: "calc(100vh - 376px)",
justifyContent: "center",
}}
>
<img alt="" src={noData} />
<Typography
sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
>
暂未开启模版
</Typography>
</Box> </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} key={key} />
);
})}
</Box>
)}
{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",
}}
>
添加工作流模版
</Typography>
</Box>
)}
<AddTemplate
openAddTemplate={openAddTemplate}
closeAddTemplateBlock={closeAddTemplateBlock}
addTemplateList={addTemplateList}
templateSelectCallback={templateSelectCallback}
selectTemplateData={selectTemplateData}
addTemplateCallback={addTemplateCallback}
searchTemplateNameCallback={searchTemplateNameCallback}
/>
{/* <ReactFlowEdit/> */}
<SimpleDialog
text={"确认移除该模板吗？"}
title={"删除模板"}
openDialog={openDialog}
closeDialog={closeDialog}
onConfirm={deleteTemplate}
/>
</Box>
);
}); });
export default memo(ProjectMembers); export default memo(ProjectMembers);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment