Skip to content

B
bkunyun
Commit 87a6abe5 authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 提交任务样式修改

parent 920fe725
Hide whitespace changes
Inline Side-by-side
Showing with 212 additions and 177 deletions
src/components/mui/MyRadio.tsx
View file @ 87a6abe5
...@@ -11,65 +11,72 @@ import Radio from "@mui/material/Radio"; ...@@ -11,65 +11,72 @@ import Radio from "@mui/material/Radio";
import RadioGroup, { RadioGroupProps } from "@mui/material/RadioGroup"; import RadioGroup, { RadioGroupProps } from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel"; import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl"; import FormControl from "@mui/material/FormControl";
import FormHelperText from '@mui/material/FormHelperText'; import FormHelperText from "@mui/material/FormHelperText";
interface IMyRadioProps extends RadioGroupProps { interface IMyRadioProps extends RadioGroupProps {
value: any; value: any;
options: Array<ICheckBoxOption>; options: Array<ICheckBoxOption>;
onChange: any; onChange: any;
variant?: "standard" | "outlined" | "filled"; variant?: "standard" | "outlined" | "filled";
error?: boolean; error?: boolean;
helperText?: string; helperText?: string;
}; }
type ICheckBoxOption = { type ICheckBoxOption = {
value: any; value: any;
label?: string; label?: string;
disabled?: boolean; disabled?: boolean;
}; };
// 如果后端给的options不是 value-label的字段可以用下面的方法转换 // 如果后端给的options不是 value-label的字段可以用下面的方法转换
export const optionsTransform = ( export const optionsTransform = (
arr: Array<any>, arr: Array<any>,
labelKey: string = "label", labelKey: string = "label",
valueKey: string = "value", valueKey: string = "value",
disabledKey: string = "disabled" disabledKey: string = "disabled"
): Array<ICheckBoxOption> => { ): Array<ICheckBoxOption> => {
return arr.map((item: any) => { return arr.map((item: any) => {
return { return {
value: item[valueKey], value: item[valueKey],
label: item[labelKey], label: item[labelKey],
disabled: item[disabledKey] || false, disabled: item[disabledKey] || false,
}; };
}); });
}; };
export default function MyRadio(props: IMyRadioProps) { export default function MyRadio(props: IMyRadioProps) {
const { value, options, onChange , error = false, helperText, variant} = props; const {
value,
options,
onChange,
error = false,
helperText,
variant,
} = props;
return ( return (
<FormControl fullWidth variant={variant} error={error}> <FormControl fullWidth variant={variant} error={error}>
<RadioGroup <RadioGroup
{...props} {...props}
row row
aria-labelledby="demo-row-radio-buttons-group-label" aria-labelledby="demo-row-radio-buttons-group-label"
name="row-radio-buttons-group" name="row-radio-buttons-group"
value={value} value={value}
onChange={onChange} onChange={onChange}
> >
{options.map((option) => { {options.map((option) => {
return ( return (
<FormControlLabel <FormControlLabel
key={option.value} key={option.value}
value={option.value} value={option.value}
control={<Radio />} control={<Radio sx={{ color: "rgba(209, 214, 222, 1)" }} />}
label={option.label} label={option.label}
disabled={option.disabled} disabled={option.disabled}
/> />
); );
})} })}
</RadioGroup> </RadioGroup>
{helperText && error && <FormHelperText>{helperText}</FormHelperText>} {helperText && error && <FormHelperText>{helperText}</FormHelperText>}
</FormControl> </FormControl>
); );
} }
src/views/Project/ProjectSubmitWork/ConfigForm/index.module.css
View file @ 87a6abe5
.formBox { .formBox {
position: relative; position: relative;
} }
.templateDescBox { .templateDescBox {
margin-bottom: 40px; margin-bottom: 40px;
} }
.templateDescTitle { .templateDescTitle {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
font-weight: 600; font-weight: 600;
margin-bottom: 12px; margin-bottom: 12px;
} }
.templateDesc { .templateDesc {
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
color: #565c66; color: #565c66;
} }
.formItemBox {
background: #ffffff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
border-radius: 4px;
border: 1px solid #ebedf0;
margin-bottom: 24px;
}
/* .taskBox {
margin-bottom: 24px;
} */
.backgroundTitle { .backgroundTitle {
background-color: rgba(245, 246, 247, 1); background-color: rgba(245, 246, 247, 1);
height: 48px; height: 48px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
padding: 12px 16px; padding: 12px 24px;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
} }
.backgroundTitleTextIcon { .backgroundTitleTextIcon {
visibility: hidden; position: absolute;
top: 16px;
right: 24px;
visibility: hidden;
} }
.backgroundTitleTextIconShow { .backgroundTitleTextIconShow {
visibility: visible; visibility: visible;
} }
.backgroundTitleText { .backgroundTitleText {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
line-height: 24px; line-height: 24px;
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
margin-left: 12px;
} }
.taskDescIcon { .taskDescIcon {
margin-left: 8px; margin-left: 8px;
} }
.flowDescIcon { .flowDescIcon {
margin-left: 8px; margin-left: 8px;
} }
.formItems { .formItems {
padding: 20px 44px 40px 44px; padding: 16px 24px 4px;
} }
.formItem { .formItem {
margin-bottom: 20px; margin-bottom: 20px;
} }
.fileSelectImg { .fileSelectImg {
cursor: pointer; cursor: pointer;
} }
.formItemLable { .formItemLable {
margin-bottom: 12px; margin-bottom: 12px;
font-size: 14px; font-size: 14px;
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
line-height: 22px; line-height: 22px;
font-weight: 600; font-weight: 600;
} }
.required::after { .required::after {
content: "*"; content: "*";
color: red; color: red;
margin-left: 3px; margin-left: 3px;
} }
.taskConfigBox { .taskConfigBox {
padding: 24px 44px 40px 44px; padding: 16px 24px 4px;
} }
.flowTitle { .flowTitle {
line-height: 16px; line-height: 16px;
margin: 3px 0 27px; margin: 3px 0 27px;
color: rgba(30, 38, 51, 1); color: rgba(19, 112, 255, 1);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
border-left: 3px solid rgba(19, 112, 255, 1); border-left: 3px solid rgba(19, 112, 255, 1);
padding-left: 3px; padding-left: 3px;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 8px;
} }
.parameter { .parameter {
margin-bottom: 20px; margin-bottom: 20px;
position: relative; position: relative;
} }
.parameterTitle { .parameterTitle {
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
line-height: 22px; line-height: 22px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.parameterContent { .parameterContent {
position: relative; position: relative;
} }
.parameterDesc { .parameterDesc {
position: absolute; position: absolute;
top: 12px; top: 12px;
right: -22px; right: -22px;
} }
.parameterDataType { .parameterDataType {
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
margin-left: 16px; margin-left: 16px;
} }
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ 87a6abe5
...@@ -396,84 +396,83 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -396,84 +396,83 @@ const ConfigForm = (props: ConfigFormProps) => {
{templateConfigInfo?.description || ""} {templateConfigInfo?.description || ""}
</div> </div>
</div> </div>
<div <div className={styles.formItemBox}>
className={classnames({ <div
[styles.backgroundTitle]: true, className={classnames({
[styles.backgroundTitlePass]: true, [styles.backgroundTitle]: true,
})} })}
> >
<img src="" alt="" /> <span className={styles.backgroundTitleText}>基础信息</span>
<span className={styles.backgroundTitleText}>基础信息</span> <img
</div>
<div className={styles.formItems}>
<div className={styles.formItem}>
<div
className={classnames({ className={classnames({
[styles.formItemLable]: true, [styles.backgroundTitleTextIcon]: true,
[styles.required]: true, [styles.backgroundTitleTextIconShow]: !nameHelp.error,
})} })}
> src={jobSueIcon}
任务名称 alt=""
</div> />
<div className={styles.formItem}>
<MyInput
value={name}
onChange={handleNameChange}
placeholder="请输入任务名称"
error={nameHelp.error}
helperText={nameHelp.helperText}
></MyInput>
</div>
</div> </div>
<div className={styles.formItem}> <div className={styles.formItems}>
<div <div className={styles.formItem}>
className={classnames({ <div
[styles.formItemLable]: true, className={classnames({
[styles.required]: true, [styles.formItemLable]: true,
})} [styles.required]: true,
> })}
输出路径 >
任务名称
</div>
<div className={styles.formItem}>
<MyInput
value={name}
onChange={handleNameChange}
placeholder="请输入任务名称"
error={nameHelp.error}
helperText={nameHelp.helperText}
></MyInput>
</div>
</div> </div>
<div className={styles.formItem}> <div className={styles.formItem}>
<MyInput <div
value={outputPath || ""} className={classnames({
onClick={() => { [styles.formItemLable]: true,
setSelectedBatchNodeId(""); [styles.required]: true,
setFileSelectType("path"); })}
handleOpenFileSelect(); >
}} 输出路径
InputProps={{ </div>
endAdornment: ( <div className={styles.formItem}>
<img <MyInput
src={fileSelectIcon} value={outputPath || ""}
alt="选择输出路径" onClick={() => {
className={styles.fileSelectImg} setSelectedBatchNodeId("");
/> setFileSelectType("path");
), handleOpenFileSelect();
}} }}
error={outputPathHelp.error} InputProps={{
helperText={outputPathHelp.helperText} endAdornment: (
></MyInput> <img
src={fileSelectIcon}
alt="选择输出路径"
className={styles.fileSelectImg}
/>
),
}}
error={outputPathHelp.error}
helperText={outputPathHelp.helperText}
></MyInput>
</div>
</div> </div>
</div> </div>
</div> </div>
{renderTasks.map((task, taskIndex) => { {renderTasks.map((task, taskIndex) => {
return ( return (
<div className={styles.taskBox} key={task.id + taskIndex}> <div className={styles.formItemBox} key={task.id + taskIndex}>
<div <div
className={classnames({ className={classnames({
[styles.backgroundTitle]: true, [styles.backgroundTitle]: true,
[styles.backgroundTitlePass]: true,
})} })}
> >
<img
className={classnames({
[styles.backgroundTitleTextIcon]: true,
[styles.backgroundTitleTextIconShow]: task.isCheck,
})}
src={jobSueIcon}
alt=""
/>
<span <span
id={`point${task.id}`} id={`point${task.id}`}
className={styles.backgroundTitleText} className={styles.backgroundTitleText}
...@@ -485,10 +484,25 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -485,10 +484,25 @@ const ConfigForm = (props: ConfigFormProps) => {
<img className={styles.taskDescIcon} src={tipsIcon} alt="" /> <img className={styles.taskDescIcon} src={tipsIcon} alt="" />
</MyTooltip> </MyTooltip>
)} )}
<img
className={classnames({
[styles.backgroundTitleTextIcon]: true,
[styles.backgroundTitleTextIconShow]: task.isCheck,
})}
src={jobSueIcon}
alt=""
/>
</div> </div>
<div className={styles.taskConfigBox}> <div className={styles.taskConfigBox}>
{randerParameters(task.parameters, task.id, task.id)} {randerParameters(task.parameters, task.id, task.id)}
{task.flows.map((flow) => { {task.flows.map((flow) => {
if (
flow.parameters.filter(
(parameter) => parameter.hidden === false
).length === 0
) {
return null;
}
return ( return (
<div className={styles.flowConfigBox} key={flow.id}> <div className={styles.flowConfigBox} key={flow.id}>
<div className={styles.flowTitle}> <div className={styles.flowTitle}>
......
src/views/Project/ProjectSubmitWork/index.module.css
View file @ 87a6abe5
...@@ -30,13 +30,14 @@ ...@@ -30,13 +30,14 @@
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
font-weight: 600; font-weight: 700;
padding-right: 20px; padding-right: 20px;
border-right: 1px solid rgba(235, 237, 240, 1); border-right: 1px solid rgba(209, 214, 222, 1);
} }
.swHeaderLable { .swHeaderLable {
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
font-size: 12px; font-size: 12px;
line-height: 22px;
} }
.swHeaderValue { .swHeaderValue {
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
......
src/views/Project/ProjectSubmitWork/index.tsx
View file @ 87a6abe5
...@@ -240,8 +240,8 @@ const ProjectSubmitWork = observer(() => { ...@@ -240,8 +240,8 @@ const ProjectSubmitWork = observer(() => {
<ArrowBackIosNewIcon <ArrowBackIosNewIcon
sx={{ sx={{
color: "rgba(194, 198, 204, 1)", color: "rgba(194, 198, 204, 1)",
width: "12px", width: "14px",
height: "12px", height: "14px",
}} }}
/> />
</IconButton> </IconButton>
......
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