Skip to content

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

Merge branch 'feat-20220718' into 'release' 

Feat 20220718

See merge request !32
parents 2ba9e40b f74a51ad
Hide whitespace changes
Inline Side-by-side
Showing with 237 additions and 372 deletions
src/components/mui/MyButton.tsx
View file @ dcce10a3
...@@ -82,12 +82,12 @@ const theme = createTheme({ ...@@ -82,12 +82,12 @@ const theme = createTheme({
}, },
}, },
outlinedSecondary: { outlinedSecondary: {
border: "1px solid #FF4E4E", border: "1px solid rgba(221, 225, 230, 1)",
boxShadow: "none !important", boxShadow: "none !important",
color: "#FF4E4E", color: "rgba(30, 38, 51, 1)",
"&:hover": { "&:hover": {
backgroundColor: "#FFEDED ", // backgroundColor: "#FFEDED ",
border: "1px solid #FF4E4E", // border: "1px solid rgba(30, 38, 51, 1)",
}, },
}, },
textSecondary: { textSecondary: {
......
src/components/mui/MyDialog.tsx
View file @ dcce10a3
...@@ -89,6 +89,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => { ...@@ -89,6 +89,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
onClick={onClose} onClick={onClose}
variant="outlined" variant="outlined"
size="small" size="small"
color="secondary"
/> />
) : null} ) : null}
{showConfirm ? ( {showConfirm ? (
......
src/components/mui/MyInput.tsx
View file @ dcce10a3
...@@ -37,27 +37,36 @@ const MyInput = (props: MyInputProps) => { ...@@ -37,27 +37,36 @@ const MyInput = (props: MyInputProps) => {
fontSize: "14px", fontSize: "14px",
"&.MuiInputBase-sizeSmall": { "&.MuiInputBase-sizeSmall": {
height: "32px", height: "32px",
"& .MuiOutlinedInput-notchedOutline": {
height: "34px",
},
}, },
}, },
multiline: {
height: "auto",
textarea: {
padding: 0,
},
},
input: {},
}, },
}, },
MuiInputLabel: { MuiInputLabel: {
styleOverrides: { styleOverrides: {
root: { root: {
top: label ? "-5px" : "-10px", top: "-9px",
},
shrink: {
top: 0,
},
sizeSmall: {
top: "-5px",
}, },
}, },
}, },
MuiOutlinedInput: { MuiOutlinedInput: {
styleOverrides: { styleOverrides: {
root: { root: {
height: "36px", "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
lineHeight: "36px", borderWidth: "1px",
paddingRight: "12px", },
":hover": { ":hover": {
"& .MuiOutlinedInput-notchedOutline": error "& .MuiOutlinedInput-notchedOutline": error
? {} ? {}
...@@ -70,9 +79,6 @@ const MyInput = (props: MyInputProps) => { ...@@ -70,9 +79,6 @@ const MyInput = (props: MyInputProps) => {
padding: "6.5px 12px", padding: "6.5px 12px",
verticalAlign: "middle", verticalAlign: "middle",
}, },
notchedOutline: {
height: "36px",
},
}, },
}, },
}, },
......
src/components/mui/MyInputCopy.tsx deleted 100644 → 0
View file @ 2ba9e40b
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-05 14:00:37
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-21 17:33:59
* @FilePath: /bkunyun/src/components/mui/MyInput.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import TextField, { TextFieldProps } from "@mui/material/TextField";
import { ThemeProvider, createTheme } from "@mui/material/styles";
interface MyInputProps extends Omit<TextFieldProps, "value"> {
value?: string;
variant?: "standard" | "filled" | "outlined";
size?: "small" | "medium";
placeholder?: string;
fullWidth?: boolean; // 宽度是否和容器一致
error?: boolean;
}
const MyInput = (props: MyInputProps) => {
const {
size = "medium",
placeholder = "请输入",
fullWidth = true,
error = false,
label,
...other
} = props;
const theme = createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
height: "36px",
fontSize: "14px",
"&.MuiInputBase-sizeSmall": {
height: "32px",
},
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
top: "-9px",
},
shrink: {
top: 0,
},
sizeSmall: {
top: "-5px",
},
},
},
MuiOutlinedInput: {
styleOverrides: {
root: {
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "1px",
},
":hover": {
"& .MuiOutlinedInput-notchedOutline": error
? {}
: {
borderColor: "#1370ff",
},
},
},
input: {
padding: "6.5px 12px",
verticalAlign: "middle",
},
},
},
},
});
return (
<ThemeProvider theme={theme}>
<TextField
error={error}
size={size}
placeholder={placeholder}
fullWidth={fullWidth}
label={label}
{...other}
/>
</ThemeProvider>
);
};
export default MyInput;
src/views/Project/ProjectData/AddFolder/index.tsx
View file @ dcce10a3
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { TextField } from "@mui/material";
import MyDialog from "@/components/mui/MyDialog"; import MyDialog from "@/components/mui/MyDialog";
import { checkIsNumberLetterChinese } from "@/utils/util"; import { checkIsNumberLetterChinese } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ dcce10a3
...@@ -310,7 +310,15 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -310,7 +310,15 @@ const ConfigForm = (props: ConfigFormProps) => {
onBlur={() => setSelectedBatchNodeId("")} onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value} value={parameter.value}
onChange={(e: any) => onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "") handleParameterChange(
{
target: {
value: e,
},
},
taskId,
parameter.name || ""
)
} }
error={parameter.error || false} error={parameter.error || false}
helpertext={parameter.helperText} helpertext={parameter.helperText}
...@@ -324,7 +332,15 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -324,7 +332,15 @@ const ConfigForm = (props: ConfigFormProps) => {
onBlur={() => setSelectedBatchNodeId("")} onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value} value={parameter.value}
onChange={(e: any) => onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "") handleParameterChange(
{
target: {
value: e,
},
},
taskId,
parameter.name || ""
)
} }
multiple={true} multiple={true}
error={parameter.error || false} error={parameter.error || false}
......
src/views/Project/ProjectSubmitWork/components/MySelect.tsx deleted 100644 → 0
View file @ 2ba9e40b
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/AddProject/index.module.css
View file @ dcce10a3
.formBox { .formBox {
height: 300px; padding: 8px 0;
width: 388px; width: 388px;
display: flex;
flex-direction: column;
padding: 10px 0;
justify-content: space-around;
} }
src/views/Project/components/AddProject/index.tsx
View file @ dcce10a3
import style from "./index.module.css"; import style from "./index.module.css";
import { TextField, MenuItem } from "@mui/material"; import { MenuItem } from "@mui/material";
import MyInput from "@/components/mui/MyInput";
import MyDialog from "@/components/mui/MyDialog"; import MyDialog from "@/components/mui/MyDialog";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
...@@ -165,7 +166,7 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -165,7 +166,7 @@ const AddProject = (props: IAddProjectProps) => {
title="新建项目" title="新建项目"
> >
<div className={style.formBox} onClick={handleFromBox}> <div className={style.formBox} onClick={handleFromBox}>
<TextField <MyInput
required required
error={nameCheck.error} error={nameCheck.error}
id="name" id="name"
...@@ -174,9 +175,9 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -174,9 +175,9 @@ const AddProject = (props: IAddProjectProps) => {
value={name} value={name}
onChange={handleNameChange} onChange={handleNameChange}
helperText={nameCheck.help} helperText={nameCheck.help}
size="small" sx={{ marginBottom: "20px" }}
/> />
<TextField <MyInput
id="zoneId" id="zoneId"
select select
required required
...@@ -185,7 +186,7 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -185,7 +186,7 @@ const AddProject = (props: IAddProjectProps) => {
onChange={handleZoneIdChange} onChange={handleZoneIdChange}
variant="outlined" variant="outlined"
onClick={handleFromBox} onClick={handleFromBox}
size="small" sx={{ marginBottom: "20px" }}
> >
{zoneIdOptions && {zoneIdOptions &&
zoneIdOptions.map((option) => ( zoneIdOptions.map((option) => (
...@@ -193,19 +194,30 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -193,19 +194,30 @@ const AddProject = (props: IAddProjectProps) => {
{option.name} {option.name}
</MenuItem> </MenuItem>
))} ))}
</TextField> </MyInput>
<TextField <div style={{ position: "relative" }}>
value={desc} <MyInput
error={descCheck.error} value={desc}
id="desc" error={descCheck.error}
label="项目描述" id="desc"
multiline label="项目描述"
rows={4} multiline
placeholder="请输入项目描述" rows={4}
onChange={handleDescChange} placeholder="请输入项目描述"
helperText={descCheck.help} onChange={handleDescChange}
size="small" helperText={descCheck.help}
/> />
<span
style={{
position: "absolute",
bottom: "7px",
right: "12px",
color: "rgba(194, 198, 204, 1)",
}}
>
{desc.length}/100
</span>
</div>
</div> </div>
</MyDialog> </MyDialog>
); );
......
src/views/Project/components/ProjectListPopper/index.module.css
View file @ dcce10a3
.projectBox { .projectBox {
width: 260px; width: 260px;
height: calc(100vh - 57px); height: calc(100vh - 57px);
background-color: #fff; background-color: #fff;
border-right: 1px solid #ebedf0; border-right: 1px solid #ebedf0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.searchBox { .searchBox {
box-sizing: border-box; box-sizing: border-box;
height: 56px; height: 56px;
padding: 17px; padding: 17px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.searchButton { .searchButton {
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
.searchIcon { .searchIcon {
color: #999999; color: #999999;
} }
.searchInput { .searchInput {
margin: 0 6px; margin: 0 6px;
flex: 1; flex: 1;
color: #1e2633; color: #1e2633;
/* #C2C6CC */ /* #C2C6CC */
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
border-right: 1px solid #ebedf0; border-right: 1px solid #ebedf0;
} }
.add { .add {
padding: 0 15px; padding: 0 15px;
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
.addIcon { .addIcon {
color: #1e2633; color: #1e2633;
} }
.projectlist { .projectlist {
flex: 1; flex: 1;
overflow-y: scroll; overflow-y: scroll;
border-top: 1px solid #f0f2f5;
} }
.projectli { .projectli {
cursor: pointer; cursor: pointer;
} }
.projectli:hover { .projectli:hover {
background-color: #f2f7ff; background-color: rgba(240, 242, 245, 1);
}
.projectliActive {
background-color: rgba(237, 244, 255, 1);
} }
.projectliBorderBox { .projectliBorderBox {
box-sizing: border-box; box-sizing: border-box;
height: 86px; height: 86px;
margin: 0 0 0 24px; margin: 0 0 0 24px;
padding: 20px 24px 20px 0; padding: 20px 24px 20px 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
border-top: 1px solid #f0f2f5; border-bottom: 1px solid #f0f2f5;
} }
.projectliLogo { .projectliLogo {
width: 24px; width: 24px;
margin-right: 12px; margin-right: 12px;
} }
.projectName { .projectName {
color: #1e2633; color: #1e2633;
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
margin-bottom: 4px; margin-bottom: 4px;
width: 166px; width: 166px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
display: block; display: block;
overflow: hidden; overflow: hidden;
} }
.projectOwnerTime { .projectOwnerTime {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.projectOwner { .projectOwner {
color: #565c66; color: #565c66;
line-height: 20px; line-height: 20px;
font-size: 14px; font-size: 14px;
margin-right: 32px; margin-right: 32px;
max-width: 60px; max-width: 60px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
display: block; display: block;
overflow: hidden; overflow: hidden;
} }
.projectTime { .projectTime {
color: #8a9099; color: #8a9099;
line-height: 20px; line-height: 20px;
font-size: 14px; font-size: 14px;
} }
src/views/Project/components/ProjectListPopper/index.tsx
View file @ dcce10a3
...@@ -3,6 +3,7 @@ import style from "./index.module.css"; ...@@ -3,6 +3,7 @@ import style from "./index.module.css";
import { InputBase, IconButton } from "@mui/material"; import { InputBase, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import AddIcon from "@mui/icons-material/Add"; import AddIcon from "@mui/icons-material/Add";
import classNames from "classnames";
import { useStores } from "@/store/index"; import { useStores } from "@/store/index";
import moment from "moment"; import moment from "moment";
import React, { useMemo, useState } from "react"; import React, { useMemo, useState } from "react";
...@@ -10,77 +11,86 @@ import { toJS } from "mobx"; ...@@ -10,77 +11,86 @@ import { toJS } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
const ProjectListPopper = observer((props: any) => { const ProjectListPopper = observer((props: any) => {
const { handleChangeCurrentProject, handleClickOpen } = props; const { handleChangeCurrentProject, handleClickOpen } = props;
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const [name, setName] = useState(""); const projectList = toJS(currentProjectStore.projectList);
const nameChange = (e: any) => { const currentProjectName = toJS(currentProjectStore.currentProjectInfo.name);
setName(e.target.value); // 通过名称本地搜索
}; const [name, setName] = useState("");
const nameChange = (e: any) => {
setName(e.target.value);
};
const list = useMemo(() => { const list = useMemo(() => {
return toJS(currentProjectStore.projectList).filter((item: any) => { return projectList.filter((item: any) => {
return item.name?.indexOf(name) !== -1; return item.name?.indexOf(name) !== -1;
}); });
}, [currentProjectStore.projectList, name]); }, [projectList, name]);
const handleProjectBox = (e: React.SyntheticEvent) => { const handleProjectBox = (e: React.SyntheticEvent) => {
e.nativeEvent.stopImmediatePropagation(); e.nativeEvent.stopImmediatePropagation();
}; };
return ( return (
<div className={style.projectBox} onClick={handleProjectBox}> <div className={style.projectBox} onClick={handleProjectBox}>
<div className={style.searchBox}> <div className={style.searchBox}>
<IconButton <IconButton
type="submit" type="submit"
className={style.searchButton} className={style.searchButton}
aria-label="search" aria-label="search"
> >
<SearchIcon className={style.searchIcon} /> <SearchIcon
</IconButton> className={style.searchIcon}
<InputBase style={{ color: "rgba(153, 153, 153, 1)" }}
className={style.searchInput} />
placeholder="请输入项目名称" </IconButton>
inputProps={{ "aria-label": "请输入项目名称" }} <InputBase
value={name} className={style.searchInput}
onChange={nameChange} placeholder="请输入项目名称"
/> inputProps={{ "aria-label": "请输入项目名称" }}
<IconButton value={name}
onClick={handleClickOpen} onChange={nameChange}
type="submit" />
className={style.add} <IconButton
aria-label="search" onClick={handleClickOpen}
> type="submit"
<AddIcon className={style.addIcon} /> className={style.add}
</IconButton> aria-label="search"
</div> >
<div className={style.projectlist}> <AddIcon className={style.addIcon} />
{list.map((item: any) => { </IconButton>
return ( </div>
<div <div className={style.projectlist}>
className={style.projectli} {list.map((item: any) => {
key={item.id} return (
onClick={() => handleChangeCurrentProject(item)} <div
> className={classNames({
<div className={style.projectliBorderBox}> [style.projectli]: true,
<img src={smallLogo} alt="" className={style.projectliLogo} /> [style.projectliActive]: item.name === currentProjectName,
<div className={style.projectliInfo}> })}
<div className={style.projectName}>{item.name}</div> key={item.id}
<div className={style.projectOwnerTime}> onClick={() => handleChangeCurrentProject(item)}
<span className={style.projectOwner} title={item.owner}> >
{item.owner} <div className={style.projectliBorderBox}>
</span> <img src={smallLogo} alt="" className={style.projectliLogo} />
<span className={style.projectTime}> <div className={style.projectliInfo}>
{moment(item.createdAt).format("YYYY-MM-DD")} <div className={style.projectName}>{item.name}</div>
</span> <div className={style.projectOwnerTime}>
</div> <span className={style.projectOwner} title={item.owner}>
</div> {item.owner}
</div> </span>
</div> <span className={style.projectTime}>
); {moment(item.createdAt).format("YYYY-MM-DD")}
})} </span>
</div> </div>
</div> </div>
); </div>
</div>
);
})}
</div>
</div>
);
}); });
export default ProjectListPopper; export default ProjectListPopper;
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ dcce10a3
...@@ -9,9 +9,6 @@ import { ...@@ -9,9 +9,6 @@ import {
import noTemplate from "@/assets/project/noTemplate.svg"; import noTemplate from "@/assets/project/noTemplate.svg";
import MyInput from "@/components/mui/MyInput"; import MyInput from "@/components/mui/MyInput";
import MyCheckBox from "@/components/mui/MyCheckBox"; import MyCheckBox from "@/components/mui/MyCheckBox";
// import MySelect, {
// optionsTransform,
// } from "../../../Project/ProjectSubmitWork/components/MySelect";
import MySelect from "@/components/mui/MySelect"; import MySelect from "@/components/mui/MySelect";
import FileSelect, { import FileSelect, {
FileSelectType, FileSelectType,
...@@ -491,7 +488,14 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -491,7 +488,14 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<MySelect <MySelect
value={parameter.defaultValue} value={parameter.defaultValue}
onChange={(e: any) => onChange={(e: any) =>
handleParameterChange(e, parameter.name || "") handleParameterChange(
{
target: {
value: e,
},
},
parameter.name || ""
)
} }
error={parameter.error || false} error={parameter.error || false}
helpertext={parameter.helperText} helpertext={parameter.helperText}
...@@ -503,7 +507,14 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -503,7 +507,14 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<MySelect <MySelect
value={parameter.defaultValue} value={parameter.defaultValue}
onChange={(e: any) => onChange={(e: any) =>
handleParameterChange(e, parameter.name || "") handleParameterChange(
{
target: {
value: e,
},
},
parameter.name || ""
)
} }
multiple={true} multiple={true}
error={parameter.error || false} error={parameter.error || false}
......
src/views/mui_demo/input.tsx
View file @ dcce10a3
import { memo } from "react"; import { memo } from "react";
import { InputAdornment } from "@mui/material"; import { InputAdornment } from "@mui/material";
// import InputComponent from "@/components/mui/MyInput"; import InputComponent from "@/components/mui/MyInput";
import InputComponent from "@/components/mui/MyInputCopy";
const ProjectMembers = () => { const ProjectMembers = () => {
return ( return (
......
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