Skip to content

B
bkunyun
Commit 37d579c4 authored by chenshouchao's avatar chenshouchao
Browse files
Options

faet: 完成parameter.hidden动态响应

parent bc5b7a9d
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 33 deletions
src/views/WorkFlowEdit/components/ParameterSetting/index.module.css
View file @ 37d579c4
......@@ -93,15 +93,15 @@
.parameterBox:last-child {
margin-bottom: 0;
}
.parameterTop {
.inOutParameterTop {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.parameterleft {
.inOutParameterleft {
}
.parameterName {
.inOutParameterName {
color: rgba(30, 38, 51, 1);
font-size: 14px;
line-height: 22px;
......@@ -112,7 +112,7 @@
color: rgba(255, 78, 78, 1);
margin-left: 4px;
}
.parameterdataType {
.inOutParameterdataType {
color: rgba(138, 144, 153, 1);
font-size: 12px;
line-height: 20px;
......@@ -135,4 +135,56 @@
}
.paramsGroup{
padding-bottom: 24px;
}
\ No newline at end of file
}
.parameter{
padding: 16px 0 24px;
border-bottom: 1px solid #F0F2F5;
}
.parameter:last-child{
border-bottom: none;
}
.parameterTop{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.parameterLeft{
}
.parameterName{
font-size: 14px;
color: #1E2633;
line-height: 22px;
font-weight: 600;
}
.parameterClassTypeName{
font-size: 14px;
color: #8A9099;
line-height: 22px;
}
/* <div
className={styles.parameter}
key={parameter.id || "" + parameterIndex}
>
<div className={styles.parameterTop}>
<div className={styles.parameterLeft}>
<div
className={classNames({
[styles.parameterTitle]: true,
[styles.required]: parameter.required,
})}
>
{parameter.name}
</div>
<div className={styles.parameterClassTypeName}>
{parameter.classTypeName}
</div>
</div>
<MySwitch value={parameter.hidden}></MySwitch>
</div>
<div className={styles.parameterContent}>
{renderInput(parameter)}
</div>
</div> */
\ No newline at end of file
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ 37d579c4
......@@ -12,19 +12,21 @@ import MyCheckBox from "@/components/mui/MyCheckBox";
import MySelect, {
optionsTransform,
} from "../../../Project/ProjectSubmitWork/components/MySelect";
import _ from "lodash";
import MyRadio from "@/components/mui/MyRadio";
import questionMark from "@/assets/project/questionMark.svg";
import fileSelectIcon from "@/assets/project/fileSelect.svg";
import MySwitch from "@/components/mui/MySwitch";
import Tabs from "@/components/mui/Tabs";
import classNames from "classnames";
import { Hidden } from "@mui/material";
type IParameterSettingProps = {
templateConfigInfo: ITask[];
taskId: string;
};
const templateConfigInfo = [
const templateConfigInfoMock = [
{
id: "id",
title: "title",
......@@ -49,7 +51,7 @@ const templateConfigInfo = [
classType: "STRING",
classTypeName: "String",
value: "",
description: "",
description: "123",
language: "",
languageVersion: "",
tags: [],
......@@ -91,6 +93,32 @@ const templateConfigInfo = [
choices: [],
parameterGroup: "out",
},
{
hidden: true,
id: "999",
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: "",
......@@ -179,6 +207,8 @@ const taskId = "id";
const ParameterSetting = (props: IParameterSettingProps) => {
// const { templateConfigInfo, taskId } = props;
const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>(templateConfigInfoMock as ITask[])
const [descHeight, setDescHeight] = useState(0);
const [isShowAllDese, setIsShowAllDese] = useState(false);
......@@ -211,8 +241,25 @@ const ParameterSetting = (props: IParameterSettingProps) => {
}
}, [templateConfigInfo, taskId]);
// 设置parameter.hidden字段
const handleHiddenChange = useCallback((e: any, parameterId: string) => {
const result: ITask[] = _.cloneDeep(templateConfigInfo);
const taskIndex = result.findIndex((item) => {
return item.id === taskId
})
if (taskIndex !== -1) {
result[taskIndex].parameters.forEach((parameter) => {
if (parameter.id === parameterId) {
parameter.hidden = e.target.checked
}
})
}
setTemplateConfigInfo(result)
}, [templateConfigInfo, setTemplateConfigInfo])
const renderInput = useCallback((parameter: IParameter) => {
return (
<Tooltip title={parameter.description} placement="top">
<div>
{parameter.domType.toLowerCase() === "file" && (
<MyInput
......@@ -338,12 +385,13 @@ const ParameterSetting = (props: IParameterSettingProps) => {
helperText={parameter.helperText}
></MyCheckBox>
)}
{parameter.description && (
{/* {parameter.description && (
<Tooltip title={parameter.description} placement="top">
<img className={styles.parameterDesc} src={questionMark} alt="" />
</Tooltip>
)}
)} */}
</div>
</Tooltip>
);
},[]);
......@@ -412,16 +460,21 @@ const ParameterSetting = (props: IParameterSettingProps) => {
className={styles.parameter}
key={parameter.id || "" + parameterIndex}
>
<div
className={classNames({
[styles.parameterTitle]: true,
[styles.required]: parameter.required,
})}
>
{parameter.name}
<span className={styles.parameterDataType}>
{parameter.classTypeName}
</span>
<div className={styles.parameterTop}>
<div className={styles.parameterLeft}>
<div
className={classNames({
[styles.parameterName]: true,
[styles.required]: parameter.required,
})}
>
{parameter.name}
</div>
<div className={styles.parameterClassTypeName}>
{parameter.classTypeName}
</div>
</div>
<MySwitch value={parameter.hidden} onChange={(e: any) => handleHiddenChange(e, parameter.id || '')}></MySwitch>
</div>
<div className={styles.parameterContent}>
{renderInput(parameter)}
......@@ -539,22 +592,22 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<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={styles.inOutParameterBox} key={index}>
<div className={styles.inOutParameterTop}>
<div className={styles.inOutParameterleft}>
<div
className={classNames({
[styles.parameterName]: true,
[styles.inOutParameterName]: true,
[styles.required]: parameter.required,
})}
>
{parameter.name}
</div>
<div className={styles.parameterdataType}>
<div className={styles.inOutParameterdataType}>
{parameter.classTypeName}
</div>
</div>
<div className={styles.parameterRight}>
<div className={styles.inOutParameterRight}>
<MySwitch value={parameter.hidden}></MySwitch>
</div>
</div>
......@@ -571,23 +624,23 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<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={styles.inOutParameterBox} key={index}>
<div className={styles.inOutParameterTop}>
<div className={styles.inOutParameterleft}>
<div
className={classNames({
[styles.parameterName]: true,
[styles.inOutParameterName]: true,
[styles.required]: parameter.required,
})}
>
{parameter.name}
</div>
<div className={styles.parameterdataType}>
<div className={styles.inOutParameterdataType}>
{parameter.classTypeName}
</div>
</div>
<div className={styles.parameterRight}>
{parameter.hidden}
<div className={styles.inOutParameterRight}>
</div>
</div>
{renderInput(parameter)}
......
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