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
Show whitespace changes
Inline Side-by-side
Showing with 98 additions and 233 deletions
src/components/mui/MyButton.tsx
View file @ dcce10a3
......@@ -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 @ dcce10a3
......@@ -89,6 +89,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
onClick={onClose}
variant="outlined"
size="small"
color="secondary"
/>
) : null}
{showConfirm ? (
......
src/components/mui/MyInput.tsx
View file @ dcce10a3
......@@ -37,27 +37,36 @@ const MyInput = (props: MyInputProps) => {
fontSize: "14px",
"&.MuiInputBase-sizeSmall": {
height: "32px",
"& .MuiOutlinedInput-notchedOutline": {
height: "34px",
},
},
multiline: {
height: "auto",
textarea: {
padding: 0,
},
},
input: {},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
top: label ? "-5px" : "-10px",
top: "-9px",
},
shrink: {
top: 0,
},
sizeSmall: {
top: "-5px",
},
},
},
MuiOutlinedInput: {
styleOverrides: {
root: {
height: "36px",
lineHeight: "36px",
paddingRight: "12px",
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "1px",
},
":hover": {
"& .MuiOutlinedInput-notchedOutline": error
? {}
......@@ -70,9 +79,6 @@ const MyInput = (props: MyInputProps) => {
padding: "6.5px 12px",
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 { checkIsNumberLetterChinese } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar";
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ dcce10a3
......@@ -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 @ 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 {
height: 300px;
padding: 8px 0;
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 { TextField, MenuItem } from "@mui/material";
import { MenuItem } from "@mui/material";
import MyInput from "@/components/mui/MyInput";
import MyDialog from "@/components/mui/MyDialog";
import React, { useState, useEffect } from "react";
import useMyRequest from "@/hooks/useMyRequest";
......@@ -165,7 +166,7 @@ const AddProject = (props: IAddProjectProps) => {
title="新建项目"
>
<div className={style.formBox} onClick={handleFromBox}>
<TextField
<MyInput
required
error={nameCheck.error}
id="name"
......@@ -174,9 +175,9 @@ const AddProject = (props: IAddProjectProps) => {
value={name}
onChange={handleNameChange}
helperText={nameCheck.help}
size="small"
sx={{ marginBottom: "20px" }}
/>
<TextField
<MyInput
id="zoneId"
select
required
......@@ -185,7 +186,7 @@ const AddProject = (props: IAddProjectProps) => {
onChange={handleZoneIdChange}
variant="outlined"
onClick={handleFromBox}
size="small"
sx={{ marginBottom: "20px" }}
>
{zoneIdOptions &&
zoneIdOptions.map((option) => (
......@@ -193,8 +194,9 @@ const AddProject = (props: IAddProjectProps) => {
{option.name}
</MenuItem>
))}
</TextField>
<TextField
</MyInput>
<div style={{ position: "relative" }}>
<MyInput
value={desc}
error={descCheck.error}
id="desc"
......@@ -204,8 +206,18 @@ const AddProject = (props: IAddProjectProps) => {
placeholder="请输入项目描述"
onChange={handleDescChange}
helperText={descCheck.help}
size="small"
/>
<span
style={{
position: "absolute",
bottom: "7px",
right: "12px",
color: "rgba(194, 198, 204, 1)",
}}
>
{desc.length}/100
</span>
</div>
</div>
</MyDialog>
);
......
src/views/Project/components/ProjectListPopper/index.module.css
View file @ dcce10a3
......@@ -41,12 +41,16 @@
.projectlist {
flex: 1;
overflow-y: scroll;
border-top: 1px solid #f0f2f5;
}
.projectli {
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;
......@@ -57,7 +61,7 @@
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
border-top: 1px solid #f0f2f5;
border-bottom: 1px solid #f0f2f5;
}
.projectliLogo {
width: 24px;
......
src/views/Project/components/ProjectListPopper/index.tsx
View file @ dcce10a3
......@@ -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";
......@@ -12,16 +13,19 @@ import { observer } from "mobx-react-lite";
const ProjectListPopper = observer((props: any) => {
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 projectList.filter((item: any) => {
return item.name?.indexOf(name) !== -1;
});
}, [currentProjectStore.projectList, name]);
}, [projectList, name]);
const handleProjectBox = (e: React.SyntheticEvent) => {
e.nativeEvent.stopImmediatePropagation();
......@@ -35,7 +39,10 @@ const ProjectListPopper = observer((props: any) => {
className={style.searchButton}
aria-label="search"
>
<SearchIcon className={style.searchIcon} />
<SearchIcon
className={style.searchIcon}
style={{ color: "rgba(153, 153, 153, 1)" }}
/>
</IconButton>
<InputBase
className={style.searchInput}
......@@ -57,7 +64,10 @@ const ProjectListPopper = observer((props: any) => {
{list.map((item: any) => {
return (
<div
className={style.projectli}
className={classNames({
[style.projectli]: true,
[style.projectliActive]: item.name === currentProjectName,
})}
key={item.id}
onClick={() => handleChangeCurrentProject(item)}
>
......
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ dcce10a3
......@@ -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}
......
src/views/mui_demo/input.tsx
View file @ dcce10a3
import { memo } from "react";
import { InputAdornment } from "@mui/material";
// import InputComponent from "@/components/mui/MyInput";
import InputComponent from "@/components/mui/MyInputCopy";
import InputComponent from "@/components/mui/MyInput";
const ProjectMembers = () => {
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