Skip to content

B
bkunyun
Commit 6ca2cca5 authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 参数设置渲染完成70%

parent 11a35e35
Hide whitespace changes
Inline Side-by-side
Showing with 397 additions and 23 deletions
src/views/Project/ProjectSubmitWork/interface.ts
View file @ 6ca2cca5
......@@ -70,7 +70,6 @@ export type IDomType =
| "dataset"
| "file"
| "input"
| "file"
| "select"
| "multipleselect"
| "radio"
......
src/views/WorkFlowEdit/components/ParameterSetting/index.module.css
View file @ 6ca2cca5
......@@ -61,6 +61,63 @@
);
cursor: pointer;
}
.inOutBox {
margin-bottom: 20px;
}
.paramsTitle {
color: rgba(30, 38, 51, 1);
font-size: 14px;
line-height: 22px;
font-weight: 600;
margin-bottom: 12px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.paramsTitleDesc {
margin-left: 8px;
}
.paramsList {
background-color: rgba(247, 248, 250, 1);
border-radius: 4px;
padding: 16px 20px;
}
.parameterBox {
margin-bottom: 12px;
}
.parameterBox:last-child {
margin-bottom: 0;
}
.parameterTop {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.parameterleft {
}
.parameterName {
color: rgba(30, 38, 51, 1);
font-size: 14px;
line-height: 22px;
font-weight: 600;
}
.required::after {
content: "*";
color: rgba(255, 78, 78, 1);
margin-left: 4px;
}
.parameterdataType {
color: rgba(138, 144, 153, 1);
font-size: 12px;
line-height: 20px;
}
.noData {
height: calc(100vh - 140px);
display: flex;
......
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ 6ca2cca5
import styles from "./index.module.css";
import {
ITask,
// IParameter,
IParameter,
} from "../../../Project/ProjectSubmitWork/interface";
import noTemplate from "@/assets/project/noTemplate.svg";
import { useEffect, useMemo, useState } from "react";
import MyInput from "@/components/mui/MyInput";
import Tooltip from "@mui/material/Tooltip";
import MyCheckBox from "@/components/mui/MyCheckBox";
// import MySelect, { optionsTransform } from "../components/MySelect";
import MySelect, {
optionsTransform,
} from "../../../Project/ProjectSubmitWork/components/MySelect";
import MyRadio from "@/components/mui/MyRadio";
import questionMark from "@/assets/project/questionMark.svg";
import fileSelectIcon from "@/assets/project/fileSelect.svg";
import classNames from "classnames";
type IParameterSettingProps = {
......@@ -12,12 +22,93 @@ type IParameterSettingProps = {
taskId: string;
};
const templateConfigInfo = [
{
id: "id",
title: "title",
description:
"阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段",
version: "version",
position: {
x: 10,
y: 100,
},
tags: ["string[]"],
type: "BATCH",
parentNode: "string",
parameters: [
{
hidden: true,
id: "",
name: "smi_in",
required: true,
defaultValue: null,
domType: "select",
classType: "STRING",
classTypeName: "String",
value: "",
description: "",
language: "",
languageVersion: "",
tags: [],
source: "string",
productId: "",
tasks: [],
validators: [
{
message: "请选择smi文件作为输入",
regex: "^.[s][m][i]$",
},
],
choices: [],
parameterGroup: "in",
},
{
hidden: true,
id: "",
name: "smi_in",
required: true,
defaultValue: null,
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",
},
],
edges: [],
isCheck: false,
executionStatus: "Pending",
},
];
const taskId = "id";
const ParameterSetting = (props: IParameterSettingProps) => {
const { templateConfigInfo, taskId } = props;
// const { templateConfigInfo, taskId } = props;
const [descHeight, setDescHeight] = useState(0);
const [isShowAllDese, setIsShowAllDese] = useState(false);
const [fileSelectOpen, setFileSelectOpen] = useState(false); // 选择输出路径的弹窗显示控制
const [fileSelectObject, setFileSelectObject] = useState({
taskId: "",
parameterName: "",
});
const div = document.getElementById("descHeight");
useEffect(() => {
if (div) {
......@@ -33,7 +124,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
(task) => task.id === taskId
);
if (randerTaskArr.length > 0) {
return randerTaskArr[0];
return randerTaskArr[0] as ITask;
} else {
return null;
}
......@@ -41,26 +132,27 @@ const ParameterSetting = (props: IParameterSettingProps) => {
}, [templateConfigInfo, taskId]);
// 输入参数
// const inParameters: Array<IParameter> = useMemo(() => {
// if (!taskInfo) {
// return [];
// } else {
// return taskInfo.parameters.filter(
// (parameter) => parameter.parameterGroup === "in"
// );
// }
// }, [taskInfo]);
const inParameters: Array<IParameter> = useMemo(() => {
if (!taskInfo) {
return [];
} else {
return taskInfo.parameters.filter(
(parameter) => parameter.parameterGroup === "in"
);
}
}, [taskInfo]);
console.log(inParameters);
// // 输出参数
// const outParameters: Array<IParameter> = useMemo(() => {
// if (!taskInfo) {
// return [];
// } else {
// return taskInfo.parameters.filter(
// (parameter) => parameter.parameterGroup === "out"
// );
// }
// }, [taskInfo]);
// 输出参数
const outParameters: Array<IParameter> = useMemo(() => {
if (!taskInfo) {
return [];
} else {
return taskInfo.parameters.filter(
(parameter) => parameter.parameterGroup === "out"
);
}
}, [taskInfo]);
// // 基础参数
// const basisParameters: Array<IParameter> = useMemo(() => {
......@@ -95,6 +187,156 @@ const ParameterSetting = (props: IParameterSettingProps) => {
// }
// }, [taskInfo]);
const handleOpenFileSelect = (
taskId: string = "",
parameterName: string = ""
) => {
setFileSelectObject({
taskId,
parameterName,
});
setFileSelectOpen(true);
};
const handleParameterChange = (
e: any,
taskId: string,
parameterName: string
) => {
console.log(e.target.value, taskId, parameterName);
// setParameter(e.target.value, taskId, parameterName);
};
const renderInput = (parameter: IParameter) => {
return (
<div>
{parameter.domType.toLowerCase() === "file" && (
<MyInput
value={parameter.value || ""}
InputProps={{
endAdornment: (
<img
onClick={() => handleOpenFileSelect(taskId, parameter.name)}
src={fileSelectIcon}
alt=""
className={styles.fileSelectImg}
/>
),
}}
placeholder="请选择"
error={parameter.error || false}
helperText={parameter.helperText}
></MyInput>
)}
{parameter.domType.toLowerCase() === "path" && (
<MyInput
value={parameter.value || ""}
InputProps={{
endAdornment: (
<img
onClick={() => handleOpenFileSelect(taskId, parameter.name)}
src={fileSelectIcon}
alt=""
className={styles.fileSelectImg}
/>
),
}}
placeholder="请选择"
error={parameter.error || false}
helperText={parameter.helperText}
></MyInput>
)}
{parameter.domType.toLowerCase() === "dataset" && (
<MyInput
value={parameter.value || ""}
InputProps={{
endAdornment: (
<img
onClick={() => handleOpenFileSelect(taskId, parameter.name)}
src={fileSelectIcon}
alt=""
className={styles.fileSelectImg}
/>
),
}}
placeholder="请选择"
error={parameter.error || false}
helperText={parameter.helperText}
></MyInput>
)}
{parameter.domType.toLowerCase() === "input" && (
<MyInput
value={parameter.value || ""}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
placeholder="请输入"
error={parameter.error || false}
helperText={parameter.helperText}
></MyInput>
)}
{parameter.domType.toLowerCase() === "select" && (
<MySelect
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
error={parameter.error || false}
helpertext={parameter.helperText}
options={optionsTransform(parameter?.choices || [], "label")}
></MySelect>
)}
{parameter.domType.toLowerCase() === "multipleselect" && (
<MySelect
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
multiple={true}
error={parameter.error || false}
helpertext={parameter.helperText}
options={optionsTransform(parameter.choices, "label")}
></MySelect>
)}
{parameter.domType.toLowerCase() === "radio" && (
<MyRadio
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
options={optionsTransform(parameter.choices, "label")}
error={parameter.error || false}
helperText={parameter.helperText}
></MyRadio>
)}
{parameter.domType.toLowerCase() === "checkbox" && (
<MyCheckBox
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(
{
target: {
value: e,
},
},
taskId,
parameter.name || ""
)
}
options={optionsTransform(parameter.choices, "label")}
error={parameter.error || false}
helperText={parameter.helperText}
></MyCheckBox>
)}
{parameter.description && (
<Tooltip title={parameter.description} placement="top">
<img className={styles.parameterDesc} src={questionMark} alt="" />
</Tooltip>
)}
</div>
);
};
return (
<div className={styles.parameterSetting}>
{taskInfo && (
......@@ -124,6 +366,82 @@ const ParameterSetting = (props: IParameterSettingProps) => {
</div>
</div>
)}
{inParameters.length > 0 && (
<div className={styles.inOutBox}>
<div className={styles.paramsTitle}>
输入
<Tooltip
title="当某个输入项为启用状态时，代表该输入将由模板使用者在使用的时候填写赋值；当为关闭状态时，代表该输入不需要使用者来填写赋值，而是将其它流程的结果传入。"
placement="top"
>
<img
className={styles.paramsTitleDesc}
src={questionMark}
alt=""
/>
</Tooltip>
</div>
<div className={styles.paramsList}>
{inParameters.map((parameter, index) => {
return (
<div className={styles.parameterBox} key={index}>
<div className={styles.parameterTop}>
<div className={styles.parameterleft}>
<div
className={classNames({
[styles.parameterName]: true,
[styles.required]: parameter.required,
})}
>
{parameter.name}
</div>
<div className={styles.parameterdataType}>
{parameter.classTypeName}
</div>
</div>
<div className={styles.parameterRight}>
{parameter.hidden}
</div>
</div>
{renderInput(parameter)}
</div>
);
})}
</div>
</div>
)}
{outParameters.length > 0 && (
<div className={styles.inOutBox}>
<div className={styles.paramsTitle}>输出</div>
<div className={styles.paramsList}>
{inParameters.map((parameter, index) => {
return (
<div className={styles.parameterBox} key={index}>
<div className={styles.parameterTop}>
<div className={styles.parameterleft}>
<div
className={classNames({
[styles.parameterName]: true,
[styles.required]: parameter.required,
})}
>
{parameter.name}
</div>
<div className={styles.parameterdataType}>
{parameter.classTypeName}
</div>
</div>
<div className={styles.parameterRight}>
{parameter.hidden}
</div>
</div>
{renderInput(parameter)}
</div>
);
})}
</div>
</div>
)}
{!taskInfo && (
<div className={styles.noData}>
<img src={noTemplate} alt="" className={styles.noDataImg} />
......
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