Skip to content

B
bkunyun
Commit 4af3d4d3 authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 完成参数设置文件夹选择功能

parent 79073268
Show whitespace changes
Inline Side-by-side
Showing with 296 additions and 266 deletions
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ 4af3d4d3
......@@ -13,6 +13,7 @@ import MySelect, {
optionsTransform,
} from "../../../Project/ProjectSubmitWork/components/MySelect";
import _ from "lodash";
import FileSelect from "@/components/FileSelect";
import MyRadio from "@/components/mui/MyRadio";
import questionMark from "@/assets/project/questionMark.svg";
import fileSelectIcon from "@/assets/project/fileSelect.svg";
......@@ -24,228 +25,230 @@ import { getCustomTemplateParameterCheckResult } from "../../util";
type IParameterSettingProps = {
templateConfigInfo: ITask[];
taskId: string;
setTemplateConfigInfo: any;
};
const templateConfigInfoMock = [
{
id: "id",
title: "title",
description:
"阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段",
version: "version",
position: {
x: 10,
y: 100,
},
tags: ["string[]"],
type: "BATCH",
parentNode: "string",
parameters: [
{
hidden: true,
id: "1",
name: "smi_in",
required: true,
defaultValue: "",
domType: "input",
classType: "STRING",
classTypeName: "String",
value: "",
description: "123",
language: "",
languageVersion: "",
tags: [],
source: "string",
productId: "",
tasks: [],
validators: [
{
message: "请选择smi文件作为输入",
regex: "^.[s][m][i]$",
},
],
choices: [],
parameterGroup: "in",
},
{
hidden: true,
id: "2",
name: "out",
required: true,
defaultValue: "",
domType: "select",
classType: "STRING",
classTypeName: "String",
value: "",
description: "",
language: "",
languageVersion: "",
tags: [],
source: "string",
productId: "",
tasks: [],
validators: [
{
message: "请选择smi文件作为输入",
regex: "^.[s][m][i]$",
},
],
choices: [],
parameterGroup: "out",
},
{
hidden: true,
id: "3",
name: "basis999",
required: true,
defaultValue: "",
domType: "select",
classType: "STRING",
classTypeName: "String",
value: "",
description: "789",
language: "",
languageVersion: "",
tags: [],
source: "string",
productId: "",
tasks: [],
validators: [
{
message: "请选择smi文件作为输入",
regex: "^.[s][m][i]$",
},
],
choices: [],
parameterGroup: "basis",
},
{
hidden: true,
id: "4",
name: "basis",
required: true,
defaultValue: "",
domType: "select",
classType: "STRING",
classTypeName: "String",
value: "",
description: "",
language: "",
languageVersion: "",
tags: [],
source: "string",
productId: "",
tasks: [],
validators: [
{
message: "请选择smi文件作为输入",
regex: "^.[s][m][i]$",
},
],
choices: [],
parameterGroup: "basis",
},
{
hidden: true,
id: "5",
name: "senior",
required: true,
defaultValue: "",
domType: "checkbox",
classType: "STRING",
classTypeName: "String",
value: "",
description: "",
language: "",
languageVersion: "",
tags: [],
source: "string",
productId: "",
tasks: [],
validators: [
{
message: "请选择smi文件作为输入",
regex: "^.[s][m][i]$",
},
],
choices: [
{
label: "123",
value: "123",
},
{
label: "456",
value: "456",
},
{
label: "789",
value: "789",
},
],
parameterGroup: "senior",
},
{
hidden: true,
id: "6",
name: "hardware",
required: true,
defaultValue: "",
domType: "radio",
classType: "STRING",
classTypeName: "String",
value: "",
description: "",
language: "",
languageVersion: "",
tags: [],
source: "string",
productId: "",
tasks: [],
validators: [
{
message: "请选择smi文件作为输入",
regex: "^.[s][m][i]$",
},
],
choices: [
{
label: "123",
value: "123",
},
{
label: "456",
value: "456",
},
{
label: "789",
value: "789",
},
],
parameterGroup: "hardware",
},
],
edges: [],
isCheck: false,
executionStatus: "Pending",
},
];
const taskId = "id";
// const templateConfigInfoMock = [
// {
// id: "id",
// title: "title",
// description:
// "阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段",
// version: "version",
// position: {
// x: 10,
// y: 100,
// },
// tags: ["string[]"],
// type: "BATCH",
// parentNode: "string",
// parameters: [
// {
// hidden: true,
// id: "1",
// name: "smi_in",
// required: true,
// defaultValue: "",
// domType: "input",
// classType: "STRING",
// classTypeName: "String",
// value: "",
// description: "123",
// language: "",
// languageVersion: "",
// tags: [],
// source: "string",
// productId: "",
// tasks: [],
// validators: [
// {
// message: "请选择smi文件作为输入",
// regex: "^.[s][m][i]$",
// },
// ],
// choices: [],
// parameterGroup: "in",
// },
// {
// hidden: true,
// id: "2",
// name: "out",
// required: true,
// defaultValue: "",
// domType: "select",
// classType: "STRING",
// classTypeName: "String",
// value: "",
// description: "",
// language: "",
// languageVersion: "",
// tags: [],
// source: "string",
// productId: "",
// tasks: [],
// validators: [
// {
// message: "请选择smi文件作为输入",
// regex: "^.[s][m][i]$",
// },
// ],
// choices: [],
// parameterGroup: "out",
// },
// {
// hidden: true,
// id: "3",
// name: "basis999",
// required: true,
// defaultValue: "",
// domType: "select",
// classType: "STRING",
// classTypeName: "String",
// value: "",
// description: "789",
// language: "",
// languageVersion: "",
// tags: [],
// source: "string",
// productId: "",
// tasks: [],
// validators: [
// {
// message: "请选择smi文件作为输入",
// regex: "^.[s][m][i]$",
// },
// ],
// choices: [],
// parameterGroup: "basis",
// },
// {
// hidden: true,
// id: "4",
// name: "basis",
// required: true,
// defaultValue: "",
// domType: "select",
// classType: "STRING",
// classTypeName: "String",
// value: "",
// description: "",
// language: "",
// languageVersion: "",
// tags: [],
// source: "string",
// productId: "",
// tasks: [],
// validators: [
// {
// message: "请选择smi文件作为输入",
// regex: "^.[s][m][i]$",
// },
// ],
// choices: [],
// parameterGroup: "basis",
// },
// {
// hidden: true,
// id: "5",
// name: "senior",
// required: true,
// defaultValue: "",
// domType: "checkbox",
// classType: "STRING",
// classTypeName: "String",
// value: "",
// description: "",
// language: "",
// languageVersion: "",
// tags: [],
// source: "string",
// productId: "",
// tasks: [],
// validators: [
// {
// message: "请选择smi文件作为输入",
// regex: "^.[s][m][i]$",
// },
// ],
// choices: [
// {
// label: "123",
// value: "123",
// },
// {
// label: "456",
// value: "456",
// },
// {
// label: "789",
// value: "789",
// },
// ],
// parameterGroup: "senior",
// },
// {
// hidden: true,
// id: "6",
// name: "hardware",
// required: true,
// defaultValue: "",
// domType: "radio",
// classType: "STRING",
// classTypeName: "String",
// value: "",
// description: "",
// language: "",
// languageVersion: "",
// tags: [],
// source: "string",
// productId: "",
// tasks: [],
// validators: [
// {
// message: "请选择smi文件作为输入",
// regex: "^.[s][m][i]$",
// },
// ],
// choices: [
// {
// label: "123",
// value: "123",
// },
// {
// label: "456",
// value: "456",
// },
// {
// label: "789",
// value: "789",
// },
// ],
// parameterGroup: "hardware",
// },
// ],
// edges: [],
// isCheck: false,
// executionStatus: "Pending",
// },
// ];
// const taskId = "id";
const ParameterSetting = (props: IParameterSettingProps) => {
// const { templateConfigInfo, taskId } = props;
const { templateConfigInfo, setTemplateConfigInfo, taskId } = props;
const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>(
templateConfigInfoMock as ITask[]
);
// const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>(
// templateConfigInfoMock as ITask[]
// );
const [descHeight, setDescHeight] = useState(0);
const [isShowAllDese, setIsShowAllDese] = useState(false);
const [fileSelectOpen, setFileSelectOpen] = useState(false); // 选择输出路径的弹窗显示控制
const [fileSelectObject, setFileSelectObject] = useState({
taskId: "",
parameterName: "",
});
// const [fileSelectObject, setFileSelectObject] = useState({
// taskId: "",
// parameterName: "",
// });
const [parameterName, setParameterName] = useState("");
const div = document.getElementById("descHeight");
useEffect(() => {
......@@ -254,6 +257,10 @@ const ParameterSetting = (props: IParameterSettingProps) => {
}
}, [div]);
const handleFileSelectOnClose = () => {
setFileSelectOpen(false);
};
const taskInfo: ITask | null = useMemo(() => {
if (!taskId) {
return null;
......@@ -271,7 +278,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
// 设置parameter.hidden字段
const handleHiddenChange = useCallback(
(e: any, parameterId: string) => {
(e: any, parameterName: string) => {
const result: ITask[] = _.cloneDeep(templateConfigInfo);
const taskIndex = result.findIndex((item) => {
return item.id === taskId;
......@@ -279,8 +286,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
if (taskIndex !== -1) {
let isCheck = true;
result[taskIndex].parameters.forEach((parameter) => {
if (parameter.id === parameterId) {
console.log(e.target.checked);
if (parameter.name === parameterName) {
parameter.hidden = !e.target.checked;
const checkResult =
getCustomTemplateParameterCheckResult(parameter);
......@@ -295,11 +301,11 @@ const ParameterSetting = (props: IParameterSettingProps) => {
}
setTemplateConfigInfo(result);
},
[templateConfigInfo, setTemplateConfigInfo]
[templateConfigInfo, setTemplateConfigInfo, taskId]
);
const handleParameterChange = useCallback(
(e: any, parameterId: string) => {
(e: any, parameterName: string) => {
const result: ITask[] = _.cloneDeep(templateConfigInfo);
const taskIndex = result.findIndex((item) => {
return item.id === taskId;
......@@ -307,7 +313,8 @@ const ParameterSetting = (props: IParameterSettingProps) => {
if (taskIndex !== -1) {
let isCheck = true;
result[taskIndex].parameters.forEach((parameter) => {
if (parameter.id === parameterId) {
console.log(parameter);
if (parameter.name === parameterName) {
parameter.defaultValue = e.target.value;
const checkResult =
getCustomTemplateParameterCheckResult(parameter);
......@@ -322,9 +329,21 @@ const ParameterSetting = (props: IParameterSettingProps) => {
}
setTemplateConfigInfo(result);
},
[templateConfigInfo, setTemplateConfigInfo]
[templateConfigInfo, setTemplateConfigInfo, taskId]
);
const onFileSelectConfirm = (path: string) => {
setFileSelectOpen(false);
handleParameterChange(
{
target: {
value: `ProjectData${path === "/" ? "" : path}`,
},
},
parameterName
);
};
const renderInput = useCallback(
(parameter: IParameter) => {
return (
......@@ -336,9 +355,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
InputProps={{
endAdornment: (
<img
onClick={() =>
handleOpenFileSelect(taskId, parameter.name)
}
onClick={() => handleOpenFileSelect(parameter.name)}
src={fileSelectIcon}
alt=""
className={styles.fileSelectImg}
......@@ -357,9 +374,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
InputProps={{
endAdornment: (
<img
onClick={() =>
handleOpenFileSelect(taskId, parameter.name)
}
onClick={() => handleOpenFileSelect(parameter.name)}
src={fileSelectIcon}
alt=""
className={styles.fileSelectImg}
......@@ -378,9 +393,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
InputProps={{
endAdornment: (
<img
onClick={() =>
handleOpenFileSelect(taskId, parameter.name)
}
onClick={() => handleOpenFileSelect(parameter.name)}
src={fileSelectIcon}
alt=""
className={styles.fileSelectImg}
......@@ -397,7 +410,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<MyInput
value={parameter.defaultValue || ""}
onChange={(e: any) =>
handleParameterChange(e, parameter.id || "")
handleParameterChange(e, parameter.name || "")
}
placeholder="请输入"
error={parameter.error || false}
......@@ -409,7 +422,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<MySelect
value={parameter.defaultValue}
onChange={(e: any) =>
handleParameterChange(e, parameter.id || "")
handleParameterChange(e, parameter.name || "")
}
error={parameter.error || false}
helpertext={parameter.helperText}
......@@ -421,7 +434,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<MySelect
value={parameter.defaultValue}
onChange={(e: any) =>
handleParameterChange(e, parameter.id || "")
handleParameterChange(e, parameter.name || "")
}
multiple={true}
error={parameter.error || false}
......@@ -434,7 +447,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<MyRadio
value={parameter.defaultValue}
onChange={(e: any) =>
handleParameterChange(e, parameter.id || "")
handleParameterChange(e, parameter.name || "")
}
options={optionsTransform(parameter.choices, "label")}
error={parameter.error || false}
......@@ -451,7 +464,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
value: e,
},
},
parameter.id || ""
parameter.name || ""
)
}
options={optionsTransform(parameter.choices, "label")}
......@@ -459,11 +472,6 @@ const ParameterSetting = (props: IParameterSettingProps) => {
helperText={parameter.helperText}
></MyCheckBox>
)}
{/* {parameter.description && (
<Tooltip title={parameter.description} placement="top">
<img className={styles.parameterDesc} src={questionMark} alt="" />
</Tooltip>
)} */}
</div>
</Tooltip>
);
......@@ -534,7 +542,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
return (
<div
className={styles.parameter}
key={`${parameter.id}${parameterIndex}`}
key={`${parameter.name}${parameterIndex}`}
>
<div className={styles.parameterTop}>
<div className={styles.parameterLeft}>
......@@ -553,7 +561,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<MySwitch
value={!parameter.hidden}
onChange={(e: any) =>
handleHiddenChange(e, parameter.id || "")
handleHiddenChange(e, parameter.name || "")
}
></MySwitch>
</div>
......@@ -569,14 +577,8 @@ const ParameterSetting = (props: IParameterSettingProps) => {
[renderInput, handleHiddenChange]
);
const handleOpenFileSelect = (
taskId: string = "",
parameterName: string = ""
) => {
setFileSelectObject({
taskId,
parameterName,
});
const handleOpenFileSelect = (parameterName: string = "") => {
setParameterName(parameterName);
setFileSelectOpen(true);
};
......@@ -666,7 +668,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
return (
<div
className={styles.inOutParameterBox}
key={`${parameter.id}${index}`}
key={`${parameter.name}${index}`}
>
<div className={styles.inOutParameterTop}>
<div className={styles.inOutParameterleft}>
......@@ -686,7 +688,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<MySwitch
value={!parameter.hidden}
onChange={(e: any) =>
handleHiddenChange(e, parameter.id || "")
handleHiddenChange(e, parameter.name || "")
}
></MySwitch>
</div>
......@@ -706,7 +708,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
return (
<div
className={styles.inOutParameterBox}
key={`${parameter.id}${index}`}
key={`${parameter.name}${index}`}
>
<div className={styles.inOutParameterTop}>
<div className={styles.inOutParameterleft}>
......@@ -760,6 +762,13 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<span className={styles.noDataText}>选中任意算子进行参数设置</span>
</div>
)}
{fileSelectOpen && (
<FileSelect
onClose={handleFileSelectOnClose}
open={fileSelectOpen}
onConfirm={onFileSelectConfirm}
/>
)}
</div>
);
};
......
src/views/WorkFlowEdit/index.tsx
View file @ 4af3d4d3
......@@ -16,7 +16,10 @@ import ButtonComponent from "@/components/mui/Button";
import OperatorList from "./components/OperatorList";
import Flow from "../Project/components/Flow";
import ParameterSetting from "./components/ParameterSetting";
import { useMessage } from "@/components/MySnackbar";
import { ITask } from "../Project/ProjectSubmitWork/interface";
import _ from "lodash";
import { getCustomTemplateParameterCheckResult } from "./util";
import styles from "./index.module.css";
......@@ -37,6 +40,7 @@ interface IProps {
const WorkFlowEdit = (props: IProps) => {
const { onBack } = props;
const Message = useMessage();
const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]);
const [leftContentType, setLeftContentType] = useState("list");
......@@ -57,8 +61,34 @@ const WorkFlowEdit = (props: IProps) => {
const handleConfirm = () => {
if (popperTitle === "返回后，当前页面已填写内容将不保存，确认返回吗？") {
onBack && onBack();
} else {
}
};
const handlePreserve = () => {
console.log("提交");
console.log(templateConfigInfo);
// 校验
if (templateConfigInfo.length === 0) {
Message.error("工作流不能为空！");
return;
}
let templateConfigInfoClone: ITask[] = _.cloneDeep(templateConfigInfo);
let check = true;
templateConfigInfoClone.forEach((task) => {
task.parameters.forEach((parameter) => {
const checkResult = getCustomTemplateParameterCheckResult(parameter);
parameter.error = checkResult.error;
parameter.helperText = checkResult.helperText;
if (checkResult.error) {
check = false;
}
});
});
setTemplateConfigInfo(templateConfigInfoClone);
if (!check) {
Message.error("工作流校验未通过，请检查！");
} else {
console.log("弹表单窗");
}
};
......@@ -74,10 +104,6 @@ const WorkFlowEdit = (props: IProps) => {
<div className={styles.swBox}>
<div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
{/* <MyPopconfirm
title="返回后，当前页面已填写内容将不保存，确认返回吗？"
onConfirm={onBack}
> */}
<IconButton
color="primary"
aria-label="upload picture"
......@@ -98,20 +124,12 @@ const WorkFlowEdit = (props: IProps) => {
}}
/>
</IconButton>
{/* </MyPopconfirm> */}
</div>
<div className={styles.swHeaderRight}>
{/* <MyPopconfirm
title="提交前请先确认参数填写无误，确认提交吗？"
onConfirm={() => console.log(2)}
> */}
<ButtonComponent
text="保存"
click={(e: any) =>
handleShowPopper(e, "提交前请先确认参数填写无误，确认提交吗？")
}
click={() => handlePreserve}
></ButtonComponent>
{/* </MyPopconfirm> */}
</div>
</div>
<div className={styles.swContent}>
......@@ -140,7 +158,8 @@ const WorkFlowEdit = (props: IProps) => {
{leftContentType !== "list" && (
<ParameterSetting
templateConfigInfo={templateConfigInfo}
taskId={""}
setTemplateConfigInfo={setTemplateConfigInfo}
taskId={selectTaskId || ""}
/>
)}
</div>
......
src/views/WorkFlowEdit/util.ts
View file @ 4af3d4d3
......@@ -28,6 +28,7 @@ export const getCustomTemplateParameterCheckResult = (
helperText,
};
}
if (Array.isArray(parameter.validators)) {
if (parameter.validators.length > 0) {
parameter.validators.forEach((validator) => {
const reg = new RegExp(validator.regex);
......@@ -37,6 +38,7 @@ export const getCustomTemplateParameterCheckResult = (
}
});
}
}
return {
error,
helperText,
......
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