Skip to content

B
bkunyun
Commit 8d55fa8d authored by 吴永生#A02208's avatar 吴永生#A02208
Browse files
Options

Merge branch 'feat-20220705-customTemplate' of http://120.77.149.83/root/bkunyun… 

Merge branch 'feat-20220705-customTemplate' of http://120.77.149.83/root/bkunyun into feat-20220705-customTemplate
parents bdfc974c 2489ece8
Hide whitespace changes
Inline Side-by-side
Showing with 282 additions and 260 deletions
src/components/mui/MyInput.tsx
View file @ 8d55fa8d
...@@ -8,59 +8,61 @@ ...@@ -8,59 +8,61 @@
*/ */
import TextField, { TextFieldProps } from "@mui/material/TextField"; import TextField, { TextFieldProps } from "@mui/material/TextField";
interface MyInputProps extends Omit<TextFieldProps, "value"> { interface MyInputProps extends Omit<TextFieldProps, "value"> {
value: any; value: any;
inputSx?: any; inputSx?: any;
onChange?: any; onChange?: any;
onFocus?: any; onFocus?: any;
label?: string; label?: string;
variant?: "standard" | "filled" | "outlined"; variant?: "standard" | "filled" | "outlined";
id?: string; id?: string;
size?: "small" | "medium"; size?: "small" | "medium";
placeholder?: string; placeholder?: string;
fullWidth?: boolean; // 宽度是否和容器一致 fullWidth?: boolean; // 宽度是否和容器一致
InputProps?: any; // input加前后icon可以用这个 InputProps?: any; // input加前后icon可以用这个
error?: boolean; error?: boolean;
helperText?: string; helperText?: string;
}; }
const MyInput = (props: MyInputProps) => { const MyInput = (props: MyInputProps) => {
const { const {
inputSx = {}, inputSx = {},
value, value,
onChange, onChange,
onFocus, onFocus,
label, label,
id, id,
variant, variant,
size = "small", size = "small",
placeholder = "请输入", placeholder = "请输入",
fullWidth = true, fullWidth = true,
InputProps, InputProps,
error = false, error = false,
helperText, helperText,
} = props; disabled,
} = props;
return ( return (
<TextField <TextField
{...props} {...props}
error={error} error={error}
helperText={helperText} helperText={helperText}
sx={{ ...inputSx }} sx={{ ...inputSx }}
id={id} id={id}
label={label} label={label}
variant={variant} variant={variant}
onChange={onChange} onChange={onChange}
onFocus={onFocus} onFocus={onFocus}
size={size} size={size}
placeholder={placeholder} placeholder={placeholder}
fullWidth={fullWidth} fullWidth={fullWidth}
InputProps={{ InputProps={{
...InputProps, ...InputProps,
}} }}
value={value} disabled={disabled}
/> value={value}
); />
);
}; };
export default MyInput; export default MyInput;
src/views/Project/ProjectJobDetail/index.tsx
View file @ 8d55fa8d
...@@ -377,48 +377,52 @@ const ProjectSubmitWork = observer(() => { ...@@ -377,48 +377,52 @@ const ProjectSubmitWork = observer(() => {
{!activePatchId && ( {!activePatchId && (
<div className={styles.taskInfo}> <div className={styles.taskInfo}>
<div className={styles.title}>任务结果</div> <div className={styles.title}>任务结果</div>
{workFlowJobInfo?.outputs && ( {workFlowJobInfo?.outputs &&
<div className={styles.taskResults}> Object.keys(workFlowJobInfo?.outputs).length > 0 && (
{randerOutputs1.map((item, index) => { <div className={styles.taskResults}>
return ( {randerOutputs1.map((item, index) => {
<div key={index} className={styles.outputLi}> return (
{/* <MyPopconfirm <div key={index} className={styles.outputLi}>
{/* <MyPopconfirm
title="即将跳转至项目数据内该任务的结果目录，确认继续吗？" title="即将跳转至项目数据内该任务的结果目录，确认继续吗？"
onConfirm={() => onConfirm={() =>
goToProjectData(getFolderPath(item.path)) goToProjectData(getFolderPath(item.path))
} }
> */} > */}
<div <div
className={styles.outputLiLeft} className={styles.outputLiLeft}
onClick={(e: any) => { onClick={(e: any) => {
handleShowPopper( handleShowPopper(
e, e,
"即将跳转至项目数据内该任务的结果目录，确认继续吗？" "即将跳转至项目数据内该任务的结果目录，确认继续吗？"
); );
setGoToProjectDataPath(getFolderPath(item.path)); setGoToProjectDataPath(
}} getFolderPath(item.path)
> );
<img }}
className={styles.outputLiLeftImg} >
src={ <img
item.type === "file" ? fileIcon : dataSetIcon className={styles.outputLiLeftImg}
} src={
alt="" item.type === "file" ? fileIcon : dataSetIcon
/> }
{item.name} alt=""
/>
{item.name}
</div>
{/* </MyPopconfirm> */}
<span className={styles.outputLiRight}>
{item.size}
</span>
</div> </div>
{/* </MyPopconfirm> */} );
<span className={styles.outputLiRight}> })}
{item.size} </div>
</span> )}
</div> {workFlowJobInfo?.outputs &&
); Object.keys(workFlowJobInfo?.outputs).length === 0 && (
})} <div className={styles.notResults}>暂无结果文件</div>
</div> )}
)}
{!workFlowJobInfo?.outputs && (
<div className={styles.notResults}>暂无结果文件</div>
)}
<div className={styles.title}>任务信息</div> <div className={styles.title}>任务信息</div>
<div className={styles.taskInfoLi}> <div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>任务名称</div> <div className={styles.taskInfoParams}>任务名称</div>
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx
View file @ 8d55fa8d
...@@ -110,11 +110,12 @@ const AddTemplate = observer((props: IAddTemplateProps) => { ...@@ -110,11 +110,12 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
}; };
useEffect(() => { useEffect(() => {
setSelectTemplateData([]);
getAddTemplateList({ getAddTemplateList({
projectId: projectId as string, projectId: projectId as string,
productId: productId as string, productId: productId as string,
}); });
}, [getAddTemplateList, projectId, productId]); }, [templateType, getAddTemplateList, projectId, productId]);
const hiddenBoxArr = useMemo(() => { const hiddenBoxArr = useMemo(() => {
const length = const length =
......
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ 8d55fa8d
...@@ -255,6 +255,38 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -255,6 +255,38 @@ const ParameterSetting = (props: IParameterSettingProps) => {
if (parameter.id === parameterId) { if (parameter.id === parameterId) {
console.log(e.target.checked); console.log(e.target.checked);
parameter.hidden = !e.target.checked; parameter.hidden = !e.target.checked;
const checkResult = getCustomTemplateParameterCheckResult(
parameter,
parameter.defaultValue
);
parameter.error = checkResult.error;
parameter.helperText = checkResult.helperText;
}
});
}
setTemplateConfigInfo(result);
},
[templateConfigInfo, setTemplateConfigInfo]
);
const handleParameterChange = useCallback(
(e: any, parameterId: string) => {
console.log(e.target.value, taskId, parameterId);
const result: ITask[] = _.cloneDeep(templateConfigInfo);
console.log(result);
const taskIndex = result.findIndex((item) => {
return item.id === taskId;
});
if (taskIndex !== -1) {
result[taskIndex].parameters.forEach((parameter) => {
if (parameter.id === parameterId) {
parameter.defaultValue = e.target.value;
const checkResult = getCustomTemplateParameterCheckResult(
parameter,
e.target.value
);
parameter.error = checkResult.error;
parameter.helperText = checkResult.helperText;
} }
}); });
} }
...@@ -263,142 +295,151 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -263,142 +295,151 @@ const ParameterSetting = (props: IParameterSettingProps) => {
[templateConfigInfo, setTemplateConfigInfo] [templateConfigInfo, setTemplateConfigInfo]
); );
const renderInput = useCallback((parameter: IParameter) => { const renderInput = useCallback(
return ( (parameter: IParameter) => {
<Tooltip title={parameter.description} placement="top"> return (
<div> <Tooltip title={parameter.description} placement="top">
{parameter.domType.toLowerCase() === "file" && ( <div>
<MyInput {parameter.domType.toLowerCase() === "file" && (
value={parameter.defaultValue || ""} <MyInput
InputProps={{ value={parameter.defaultValue || ""}
endAdornment: ( InputProps={{
<img endAdornment: (
onClick={() => handleOpenFileSelect(taskId, parameter.name)} <img
src={fileSelectIcon} onClick={() =>
alt="" handleOpenFileSelect(taskId, parameter.name)
className={styles.fileSelectImg} }
/> src={fileSelectIcon}
), alt=""
}} className={styles.fileSelectImg}
placeholder="请选择" />
error={parameter.error || false} ),
helperText={parameter.helperText} }}
disabled={parameter.parameterGroup === "out"} placeholder="请选择"
></MyInput> error={parameter.error || false}
)} helperText={parameter.helperText}
{parameter.domType.toLowerCase() === "path" && ( disabled={parameter.parameterGroup === "out"}
<MyInput ></MyInput>
value={parameter.defaultValue || ""} )}
InputProps={{ {parameter.domType.toLowerCase() === "path" && (
endAdornment: ( <MyInput
<img value={parameter.defaultValue || ""}
onClick={() => handleOpenFileSelect(taskId, parameter.name)} InputProps={{
src={fileSelectIcon} endAdornment: (
alt="" <img
className={styles.fileSelectImg} onClick={() =>
/> handleOpenFileSelect(taskId, parameter.name)
), }
}} src={fileSelectIcon}
placeholder="请选择" alt=""
error={parameter.error || false} className={styles.fileSelectImg}
helperText={parameter.helperText} />
disabled={parameter.parameterGroup === "out"} ),
></MyInput> }}
)} placeholder="请选择"
{parameter.domType.toLowerCase() === "dataset" && ( error={parameter.error || false}
<MyInput helperText={parameter.helperText}
value={parameter.defaultValue || ""} disabled={parameter.parameterGroup === "out"}
InputProps={{ ></MyInput>
endAdornment: ( )}
<img {parameter.domType.toLowerCase() === "dataset" && (
onClick={() => handleOpenFileSelect(taskId, parameter.name)} <MyInput
src={fileSelectIcon} value={parameter.defaultValue || ""}
alt="" InputProps={{
className={styles.fileSelectImg} endAdornment: (
/> <img
), onClick={() =>
}} handleOpenFileSelect(taskId, parameter.name)
placeholder="请选择" }
error={parameter.error || false} src={fileSelectIcon}
helperText={parameter.helperText} alt=""
disabled={parameter.parameterGroup === "out"} className={styles.fileSelectImg}
></MyInput> />
)} ),
{parameter.domType.toLowerCase() === "input" && ( }}
<MyInput placeholder="请选择"
value={parameter.defaultValue || ""} error={parameter.error || false}
onChange={(e: any) => helperText={parameter.helperText}
handleParameterChange(e, parameter.id || "") disabled={parameter.parameterGroup === "out"}
} ></MyInput>
placeholder="请输入" )}
error={parameter.error || false} {parameter.domType.toLowerCase() === "input" && (
helperText={parameter.helperText} <MyInput
disabled={parameter.parameterGroup === "out"} value={parameter.defaultValue || ""}
></MyInput> onChange={(e: any) =>
)} handleParameterChange(e, parameter.id || "")
{parameter.domType.toLowerCase() === "select" && ( }
<MySelect placeholder="请输入"
value={parameter.defaultValue} error={parameter.error || false}
onChange={(e: any) => helperText={parameter.helperText}
handleParameterChange(e, parameter.id || "") disabled={parameter.parameterGroup === "out"}
} ></MyInput>
error={parameter.error || false} )}
helpertext={parameter.helperText} {parameter.domType.toLowerCase() === "select" && (
options={optionsTransform(parameter?.choices || [], "label")} <MySelect
disabled={parameter.parameterGroup === "out"} value={parameter.defaultValue}
></MySelect> onChange={(e: any) =>
)} handleParameterChange(e, parameter.id || "")
{parameter.domType.toLowerCase() === "multipleselect" && ( }
<MySelect error={parameter.error || false}
value={parameter.defaultValue} helpertext={parameter.helperText}
onChange={(e: any) => options={optionsTransform(parameter?.choices || [], "label")}
handleParameterChange(e, parameter.id || "") disabled={parameter.parameterGroup === "out"}
} ></MySelect>
multiple={true} )}
error={parameter.error || false} {parameter.domType.toLowerCase() === "multipleselect" && (
helpertext={parameter.helperText} <MySelect
options={optionsTransform(parameter.choices, "label")} value={parameter.defaultValue}
disabled={parameter.parameterGroup === "out"} onChange={(e: any) =>
></MySelect> handleParameterChange(e, parameter.id || "")
)} }
{parameter.domType.toLowerCase() === "radio" && ( multiple={true}
<MyRadio error={parameter.error || false}
value={parameter.defaultValue} helpertext={parameter.helperText}
onChange={(e: any) => options={optionsTransform(parameter.choices, "label")}
handleParameterChange(e, parameter.id || "") disabled={parameter.parameterGroup === "out"}
} ></MySelect>
options={optionsTransform(parameter.choices, "label")} )}
error={parameter.error || false} {parameter.domType.toLowerCase() === "radio" && (
helperText={parameter.helperText} <MyRadio
></MyRadio> value={parameter.defaultValue}
)} onChange={(e: any) =>
{parameter.domType.toLowerCase() === "checkbox" && ( handleParameterChange(e, parameter.id || "")
<MyCheckBox }
value={parameter.defaultValue} options={optionsTransform(parameter.choices, "label")}
onChange={(e: any) => error={parameter.error || false}
handleParameterChange( helperText={parameter.helperText}
{ ></MyRadio>
target: { )}
value: e, {parameter.domType.toLowerCase() === "checkbox" && (
<MyCheckBox
value={parameter.defaultValue}
onChange={(e: any) =>
handleParameterChange(
{
target: {
value: e,
},
}, },
}, parameter.id || ""
parameter.id || "" )
) }
} options={optionsTransform(parameter.choices, "label")}
options={optionsTransform(parameter.choices, "label")} error={parameter.error || false}
error={parameter.error || false} helperText={parameter.helperText}
helperText={parameter.helperText} ></MyCheckBox>
></MyCheckBox> )}
)} {/* {parameter.description && (
{/* {parameter.description && (
<Tooltip title={parameter.description} placement="top"> <Tooltip title={parameter.description} placement="top">
<img className={styles.parameterDesc} src={questionMark} alt="" /> <img className={styles.parameterDesc} src={questionMark} alt="" />
</Tooltip> </Tooltip>
)} */} )} */}
</div> </div>
</Tooltip> </Tooltip>
); );
}, []); },
[handleParameterChange]
);
// 输入参数 // 输入参数
const inParameters: Array<IParameter> = useMemo(() => { const inParameters: Array<IParameter> = useMemo(() => {
...@@ -463,7 +504,7 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -463,7 +504,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
return ( return (
<div <div
className={styles.parameter} className={styles.parameter}
key={parameter.id || "" + parameterIndex} key={`${parameter.id}${parameterIndex}`}
> >
<div className={styles.parameterTop}> <div className={styles.parameterTop}>
<div className={styles.parameterLeft}> <div className={styles.parameterLeft}>
...@@ -509,44 +550,6 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -509,44 +550,6 @@ const ParameterSetting = (props: IParameterSettingProps) => {
setFileSelectOpen(true); setFileSelectOpen(true);
}; };
const handleParameterChange = useCallback(
(e: any, parameterId: string) => {
console.log(e.target.value, taskId, parameterId);
const result: ITask[] = _.cloneDeep(templateConfigInfo);
console.log(result);
result.forEach((task) => {
if (task.id === taskId) {
let isCheck = true;
task.parameters.forEach((parameter) => {
if (parameter.id === parameterId) {
parameter.defaultValue = e.target.value;
const checkResult = getCustomTemplateParameterCheckResult(
parameter,
e.target.value
);
parameter.error = checkResult.error;
parameter.helperText = checkResult.helperText;
}
if (
getCustomTemplateParameterCheckResult(
parameter,
parameter.defaultValue
).error === true
) {
isCheck = false;
}
});
task.isCheck = isCheck;
} else {
return;
}
});
setTemplateConfigInfo(result);
// setParameter(e.target.value, taskId, parameterName);
},
[templateConfigInfo, setTemplateConfigInfo]
);
// 参数组tabs // 参数组tabs
const paramsTabList = useMemo(() => { const paramsTabList = useMemo(() => {
return [ return [
...@@ -631,7 +634,10 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -631,7 +634,10 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<div className={styles.paramsList}> <div className={styles.paramsList}>
{inParameters.map((parameter, index) => { {inParameters.map((parameter, index) => {
return ( return (
<div className={styles.inOutParameterBox} key={index}> <div
className={styles.inOutParameterBox}
key={`${parameter.id}${index}`}
>
<div className={styles.inOutParameterTop}> <div className={styles.inOutParameterTop}>
<div className={styles.inOutParameterleft}> <div className={styles.inOutParameterleft}>
<div <div
...@@ -666,9 +672,12 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -666,9 +672,12 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<div className={styles.inOutBox}> <div className={styles.inOutBox}>
<div className={styles.paramsTitle}>输出</div> <div className={styles.paramsTitle}>输出</div>
<div className={styles.paramsList}> <div className={styles.paramsList}>
{inParameters.map((parameter, index) => { {outParameters.map((parameter, index) => {
return ( return (
<div className={styles.inOutParameterBox} key={index}> <div
className={styles.inOutParameterBox}
key={`${parameter.id}${index}`}
>
<div className={styles.inOutParameterTop}> <div className={styles.inOutParameterTop}>
<div className={styles.inOutParameterleft}> <div className={styles.inOutParameterleft}>
<div <div
......
src/views/WorkFlowEdit/util.ts
View file @ 8d55fa8d
...@@ -23,6 +23,12 @@ export const getCustomTemplateParameterCheckResult = ( ...@@ -23,6 +23,12 @@ export const getCustomTemplateParameterCheckResult = (
} }
} }
} }
if (error) {
return {
error,
helperText,
};
}
if (parameter.validators.length > 0) { if (parameter.validators.length > 0) {
parameter.validators.forEach((validator) => { parameter.validators.forEach((validator) => {
const reg = new RegExp(validator.regex); const reg = new RegExp(validator.regex);
......
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