Skip to content

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

UI: 样式优化 select组件替换

parent 5cf52638
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 241 deletions
src/components/mui/MyButton.tsx
View file @ f74a51ad
......@@ -82,12 +82,12 @@ const theme = createTheme({
},
},
outlinedSecondary: {
border: "1px solid #FF4E4E",
border: "1px solid rgba(221, 225, 230, 1)",
boxShadow: "none !important",
color: "#FF4E4E",
color: "rgba(30, 38, 51, 1)",
"&:hover": {
backgroundColor: "#FFEDED ",
border: "1px solid #FF4E4E",
// backgroundColor: "#FFEDED ",
// border: "1px solid rgba(30, 38, 51, 1)",
},
},
textSecondary: {
......
src/components/mui/MyDialog.tsx
View file @ f74a51ad
......@@ -89,6 +89,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
onClick={onClose}
variant="outlined"
size="small"
color="secondary"
/>
) : null}
{showConfirm ? (
......
src/views/Project/ProjectData/AddFolder/index.tsx
View file @ f74a51ad
import React, { useState, useEffect } from "react";
import { useState, useEffect } from "react";
import { TextField } from "@mui/material";
import MyDialog from "@/components/mui/MyDialog";
import { checkIsNumberLetterChinese } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar";
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ f74a51ad
......@@ -310,7 +310,15 @@ const ConfigForm = (props: ConfigFormProps) => {
onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
handleParameterChange(
{
target: {
value: e,
},
},
taskId,
parameter.name || ""
)
}
error={parameter.error || false}
helpertext={parameter.helperText}
......@@ -324,7 +332,15 @@ const ConfigForm = (props: ConfigFormProps) => {
onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
handleParameterChange(
{
target: {
value: e,
},
},
taskId,
parameter.name || ""
)
}
multiple={true}
error={parameter.error || false}
......
src/views/Project/ProjectSubmitWork/components/MySelect.tsx deleted 100644 → 0
View file @ 5cf52638
import * as React from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";
import Select, { SelectProps } from "@mui/material/Select";
export interface IOption {
label: string;
value: string;
disabled?: boolean;
}
export const optionsTransform = (
arr: Array<any>,
labelKey: string = "label",
valueKey: string = "value",
disabledKey: string = "disabled"
): Array<IOption> => {
return arr.map((item: any) => {
return {
label: item[labelKey],
value: item[valueKey],
disabled: item[disabledKey],
};
});
};
interface IProps
extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
value?: any;
options: IOption[];
onChange?: any;
/** 类型变种 */
variant?: "standard" | "outlined" | "filled";
/** title */
title?: string;
/** 是否显示title */
isTitle?: boolean;
size?: "small" | "medium";
multiple?: boolean; // 多选
error?: boolean;
helpertext?: string;
fullWidth?: boolean;
}
export default function MySelect(props: IProps) {
const {
value,
options,
onChange,
title,
isTitle = false,
variant,
size = "small",
multiple = false,
error = false,
helpertext,
fullWidth = true,
} = props;
return (
<FormControl fullWidth={fullWidth} variant={variant} error={error}>
{isTitle ? (
<InputLabel id="demo-simple-select-label">
{title || "请选择"}
</InputLabel>
) : null}
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label={title || ""}
size={size}
{...props}
value={value}
onChange={onChange}
multiple={multiple}
>
{options.length
? options?.map((item: IOption) => {
return (
<MenuItem
key={item.value}
value={item.value}
disabled={item?.disabled}
>
{item.label}
</MenuItem>
);
})
: null}
</Select>
{helpertext && error && <FormHelperText>{helpertext}</FormHelperText>}
</FormControl>
);
}
src/views/Project/components/ProjectListPopper/index.module.css
View file @ f74a51ad
.projectBox {
width: 260px;
height: calc(100vh - 57px);
background-color: #fff;
border-right: 1px solid #ebedf0;
display: flex;
flex-direction: column;
width: 260px;
height: calc(100vh - 57px);
background-color: #fff;
border-right: 1px solid #ebedf0;
display: flex;
flex-direction: column;
}
.searchBox {
box-sizing: border-box;
height: 56px;
padding: 17px;
display: flex;
flex-direction: row;
justify-content: space-between;
box-sizing: border-box;
height: 56px;
padding: 17px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.searchButton {
width: 22px;
height: 22px;
width: 22px;
height: 22px;
}
.searchIcon {
color: #999999;
color: #999999;
}
.searchInput {
margin: 0 6px;
flex: 1;
color: #1e2633;
/* #C2C6CC */
font-size: 14px;
line-height: 22px;
border-right: 1px solid #ebedf0;
margin: 0 6px;
flex: 1;
color: #1e2633;
/* #C2C6CC */
font-size: 14px;
line-height: 22px;
border-right: 1px solid #ebedf0;
}
.add {
padding: 0 15px;
width: 22px;
height: 22px;
padding: 0 15px;
width: 22px;
height: 22px;
}
.addIcon {
color: #1e2633;
color: #1e2633;
}
.projectlist {
flex: 1;
overflow-y: scroll;
flex: 1;
overflow-y: scroll;
border-top: 1px solid #f0f2f5;
}
.projectli {
cursor: pointer;
cursor: pointer;
}
.projectli:hover {
background-color: #f2f7ff;
background-color: rgba(240, 242, 245, 1);
}
.projectliActive {
background-color: rgba(237, 244, 255, 1);
}
.projectliBorderBox {
box-sizing: border-box;
height: 86px;
margin: 0 0 0 24px;
padding: 20px 24px 20px 0;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
border-top: 1px solid #f0f2f5;
box-sizing: border-box;
height: 86px;
margin: 0 0 0 24px;
padding: 20px 24px 20px 0;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
border-bottom: 1px solid #f0f2f5;
}
.projectliLogo {
width: 24px;
margin-right: 12px;
width: 24px;
margin-right: 12px;
}
.projectName {
color: #1e2633;
line-height: 22px;
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
width: 166px;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
color: #1e2633;
line-height: 22px;
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
width: 166px;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
}
.projectOwnerTime {
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
}
.projectOwner {
color: #565c66;
line-height: 20px;
font-size: 14px;
margin-right: 32px;
max-width: 60px;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
color: #565c66;
line-height: 20px;
font-size: 14px;
margin-right: 32px;
max-width: 60px;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
}
.projectTime {
color: #8a9099;
line-height: 20px;
font-size: 14px;
color: #8a9099;
line-height: 20px;
font-size: 14px;
}
src/views/Project/components/ProjectListPopper/index.tsx
View file @ f74a51ad
......@@ -3,6 +3,7 @@ import style from "./index.module.css";
import { InputBase, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import AddIcon from "@mui/icons-material/Add";
import classNames from "classnames";
import { useStores } from "@/store/index";
import moment from "moment";
import React, { useMemo, useState } from "react";
......@@ -10,77 +11,86 @@ import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
const ProjectListPopper = observer((props: any) => {
const { handleChangeCurrentProject, handleClickOpen } = props;
const { currentProjectStore } = useStores();
const [name, setName] = useState("");
const nameChange = (e: any) => {
setName(e.target.value);
};
const { handleChangeCurrentProject, handleClickOpen } = props;
const { currentProjectStore } = useStores();
const projectList = toJS(currentProjectStore.projectList);
const currentProjectName = toJS(currentProjectStore.currentProjectInfo.name);
// 通过名称本地搜索
const [name, setName] = useState("");
const nameChange = (e: any) => {
setName(e.target.value);
};
const list = useMemo(() => {
return toJS(currentProjectStore.projectList).filter((item: any) => {
return item.name?.indexOf(name) !== -1;
});
}, [currentProjectStore.projectList, name]);
const list = useMemo(() => {
return projectList.filter((item: any) => {
return item.name?.indexOf(name) !== -1;
});
}, [projectList, name]);
const handleProjectBox = (e: React.SyntheticEvent) => {
e.nativeEvent.stopImmediatePropagation();
};
const handleProjectBox = (e: React.SyntheticEvent) => {
e.nativeEvent.stopImmediatePropagation();
};
return (
<div className={style.projectBox} onClick={handleProjectBox}>
<div className={style.searchBox}>
<IconButton
type="submit"
className={style.searchButton}
aria-label="search"
>
<SearchIcon className={style.searchIcon} />
</IconButton>
<InputBase
className={style.searchInput}
placeholder="请输入项目名称"
inputProps={{ "aria-label": "请输入项目名称" }}
value={name}
onChange={nameChange}
/>
<IconButton
onClick={handleClickOpen}
type="submit"
className={style.add}
aria-label="search"
>
<AddIcon className={style.addIcon} />
</IconButton>
</div>
<div className={style.projectlist}>
{list.map((item: any) => {
return (
<div
className={style.projectli}
key={item.id}
onClick={() => handleChangeCurrentProject(item)}
>
<div className={style.projectliBorderBox}>
<img src={smallLogo} alt="" className={style.projectliLogo} />
<div className={style.projectliInfo}>
<div className={style.projectName}>{item.name}</div>
<div className={style.projectOwnerTime}>
<span className={style.projectOwner} title={item.owner}>
{item.owner}
</span>
<span className={style.projectTime}>
{moment(item.createdAt).format("YYYY-MM-DD")}
</span>
</div>
</div>
</div>
</div>
);
})}
</div>
</div>
);
return (
<div className={style.projectBox} onClick={handleProjectBox}>
<div className={style.searchBox}>
<IconButton
type="submit"
className={style.searchButton}
aria-label="search"
>
<SearchIcon
className={style.searchIcon}
style={{ color: "rgba(153, 153, 153, 1)" }}
/>
</IconButton>
<InputBase
className={style.searchInput}
placeholder="请输入项目名称"
inputProps={{ "aria-label": "请输入项目名称" }}
value={name}
onChange={nameChange}
/>
<IconButton
onClick={handleClickOpen}
type="submit"
className={style.add}
aria-label="search"
>
<AddIcon className={style.addIcon} />
</IconButton>
</div>
<div className={style.projectlist}>
{list.map((item: any) => {
return (
<div
className={classNames({
[style.projectli]: true,
[style.projectliActive]: item.name === currentProjectName,
})}
key={item.id}
onClick={() => handleChangeCurrentProject(item)}
>
<div className={style.projectliBorderBox}>
<img src={smallLogo} alt="" className={style.projectliLogo} />
<div className={style.projectliInfo}>
<div className={style.projectName}>{item.name}</div>
<div className={style.projectOwnerTime}>
<span className={style.projectOwner} title={item.owner}>
{item.owner}
</span>
<span className={style.projectTime}>
{moment(item.createdAt).format("YYYY-MM-DD")}
</span>
</div>
</div>
</div>
</div>
);
})}
</div>
</div>
);
});
export default ProjectListPopper;
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ f74a51ad
......@@ -9,9 +9,6 @@ import {
import noTemplate from "@/assets/project/noTemplate.svg";
import MyInput from "@/components/mui/MyInput";
import MyCheckBox from "@/components/mui/MyCheckBox";
// import MySelect, {
// optionsTransform,
// } from "../../../Project/ProjectSubmitWork/components/MySelect";
import MySelect from "@/components/mui/MySelect";
import FileSelect, {
FileSelectType,
......@@ -491,7 +488,14 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<MySelect
value={parameter.defaultValue}
onChange={(e: any) =>
handleParameterChange(e, parameter.name || "")
handleParameterChange(
{
target: {
value: e,
},
},
parameter.name || ""
)
}
error={parameter.error || false}
helpertext={parameter.helperText}
......@@ -503,7 +507,14 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<MySelect
value={parameter.defaultValue}
onChange={(e: any) =>
handleParameterChange(e, parameter.name || "")
handleParameterChange(
{
target: {
value: e,
},
},
parameter.name || ""
)
}
multiple={true}
error={parameter.error || false}
......
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