Skip to content

B
bkunyun
Commit d0c51ac4 authored by 吴永生#A02208's avatar 吴永生#A02208
Browse files
Options

fix: Myselect组件样式修改

parent a04fa626
Hide whitespace changes
Inline Side-by-side
Showing with 208 additions and 154 deletions
src/components/mui/MyButton.tsx
View file @ d0c51ac4
......@@ -97,6 +97,14 @@ const theme = createTheme({
elevation: {},
},
},
MuiMenuItem: {
styleOverrides: {
root: {
"&:hover": { backgroundColor: "#ECF4FF " },
},
},
},
},
});
......
src/components/mui/MyInput.tsx
View file @ d0c51ac4
......@@ -2,66 +2,73 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-05 14:00:37
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 11:45:10
* @LastEditTime: 2022-07-20 20:33:09
* @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?: any;
inputSx?: any;
onChange?: any;
onFocus?: any;
label?: string;
value?: string;
variant?: "standard" | "filled" | "outlined";
id?: string;
size?: "small" | "medium";
placeholder?: string;
fullWidth?: boolean; // 宽度是否和容器一致
InputProps?: any; // input加前后icon可以用这个
error?: boolean;
helperText?: string;
}
const MyInput = (props: MyInputProps) => {
const {
inputSx = {},
value,
onChange,
onFocus,
label,
id,
variant,
size = "small",
placeholder = "请输入",
fullWidth = true,
InputProps,
error = false,
helperText,
disabled,
label,
...other
} = props;
const theme = createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
height: "36px",
// width: "40px",
// boxSizing: "border-box",
// padding: "0",
},
},
},
MuiOutlinedInput: {
styleOverrides: {
root: {
height: "36px",
lineHeight: "36px",
},
input: {
padding: "6.5px 14px",
verticalAlign: "middle",
},
notchedOutline: {
height: "36px",
},
},
},
},
});
return (
<TextField
{...props}
error={error}
helperText={helperText}
sx={{ ...inputSx }}
id={id}
label={label}
variant={variant}
onChange={onChange}
onFocus={onFocus}
size={size}
placeholder={placeholder}
fullWidth={fullWidth}
InputProps={{
...InputProps,
}}
disabled={disabled}
value={value}
/>
<ThemeProvider theme={theme}>
<TextField
error={error}
size={size}
placeholder={placeholder}
fullWidth={fullWidth}
label={label}
{...other}
/>
</ThemeProvider>
);
};
......
src/components/mui/MySelect.tsx
View file @ d0c51ac4
......@@ -2,90 +2,135 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2021-12-04 15:46:25
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-11 18:22:50
* @LastEditTime: 2022-07-21 15:54:59
* @FilePath: /lionet-slb-pc/src/components/SearchView/components/Collapse.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select, { SelectProps } from "@mui/material/Select";
import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
import { createTheme, ThemeProvider } from "@mui/material";
export interface IOption {
label: string;
value: string;
disabled?: boolean;
label: string;
value: string;
disabled?: boolean;
}
export const optionsTransform = (
arr: Array<any>,
labelKey: string = "label",
valueKey: string = "value",
disabledKey: string = "disabled"
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],
};
});
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?: IOption;
options: IOption[];
onChange?: (val: IOption) => void;
/** 类型变种 */
variant?: "standard" | "outlined" | "filled";
/** title */
title?: string;
/** 是否显示title */
isTitle?: boolean;
extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
value?: string;
options: IOption[];
onChange?: (val: string) => void;
/** 类型变种 */
variant?: "standard" | "outlined" | "filled";
/** title */
title?: string;
/** 是否显示title */
isTitle?: boolean;
}
export default function MySelect(props: IProps) {
const { value, options, onChange, title, isTitle = false, variant } = props;
const {
value,
options,
title,
isTitle = false,
variant = "outlined",
multiple = false,
onChange,
...other
} = props;
const handleChange = (event: any) => {
const newValue = options?.filter((item) => {
return item.value === event.target.value;
});
if (onChange) {
onChange(newValue[0] || { label: "", value: "" });
}
};
const theme = createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
height: "36px",
},
},
},
return (
<Box sx={{ minWidth: 120 }}>
<FormControl fullWidth variant={variant}>
{isTitle ? (
<InputLabel id="demo-simple-select-label">
{title || "请选择"}
</InputLabel>
) : null}
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label={title || "请选择"}
size="small"
{...props}
value={value?.value}
onChange={handleChange}
>
{options.length
? options?.map((item: IOption) => {
return (
<MenuItem value={item.value} disabled={item?.disabled}>
{item.label}
</MenuItem>
);
})
: null}
</Select>
</FormControl>
</Box>
);
MuiOutlinedInput: {
styleOverrides: {
root: {
":hover": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#1370ff",
},
},
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
top: "-9px",
},
},
},
MuiSelect: {
styleOverrides: {
select: {
padding: "6.5px 14px",
fontSize: "14px",
},
},
},
},
});
const handleChange = (e: SelectChangeEvent<unknown>) => {
onChange && onChange(e.target.value as string);
};
return (
<ThemeProvider theme={theme}>
<FormControl fullWidth variant={variant}>
{isTitle ? (
<InputLabel id="demo-simple-select-label">
{title || "请选择"}
</InputLabel>
) : null}
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label={title || ""}
size="small"
multiple={multiple}
{...other}
value={value || ""}
onChange={handleChange}
>
{options.length
? options?.map((item: IOption) => {
return (
<MenuItem value={item.value} disabled={item?.disabled}>
{item.label}
</MenuItem>
);
})
: null}
</Select>
</FormControl>
</ThemeProvider>
);
}
src/views/ConsoleLayout/components/TransferList/index.tsx
View file @ d0c51ac4
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-10 18:05:21
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-16 21:15:59
* @LastEditTime: 2022-07-21 11:28:21
* @FilePath: /bkunyun/src/views/ConsoleLayout/components/TransferList/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -17,42 +17,39 @@ import { observer } from "mobx-react-lite";
import { toJS } from "mobx";
const TranSferList = observer(() => {
const uploadInfoStore = toJS(useGlobalStore("fileListStore"));
const uploadInfoStore = toJS(useGlobalStore("fileListStore"));
return (
<Box style={{ width: 520, padding: 20 }}>
<MyTitle title="传输列表" />
<Box
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Box style={{ color: "#8A9099" }}>请勿在上传过程中刷新页面！</Box>
<MySelect
variant="standard"
value={{
label: "默认线路",
value: "default",
}}
onChange={() => console.log(11)}
options={[
{
label: "默认线路",
value: "default",
},
]}
size="small"
/>
</Box>
<Box style={{ height: 400, overflowY: "auto" }}>
{uploadInfoStore?.fileList.map((item) => {
return <FileItem fileItemInfo={item} key={item.id} />;
})}
</Box>
</Box>
);
return (
<Box style={{ width: 520, padding: 20 }}>
<MyTitle title="传输列表" />
<Box
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Box style={{ color: "#8A9099" }}>请勿在上传过程中刷新页面！</Box>
<MySelect
variant="standard"
value={"default"}
onChange={() => console.log(11)}
options={[
{
label: "默认线路",
value: "default",
},
]}
size="small"
/>
</Box>
<Box style={{ height: 400, overflowY: "auto" }}>
{uploadInfoStore?.fileList.map((item) => {
return <FileItem fileItemInfo={item} key={item.id} />;
})}
</Box>
</Box>
);
});
export default memo(TranSferList);
src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx
View file @ d0c51ac4
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-15 19:04:11
* @LastEditTime: 2022-07-21 11:25:07
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -39,9 +39,9 @@ const AddMember = observer((props: IProps) => {
const Message = useMessage();
const changePermission = useCallback(
(val: IOption, index: number) => {
(val: string, index: number) => {
const tableDataIndex = tableData[index] as any;
const newVal = { ...tableDataIndex, projectRole: val.value };
const newVal = { ...tableDataIndex, projectRole: val };
const newTableData = _.cloneDeep(tableData);
newTableData.splice(index, 1, newVal);
setTableData(newTableData);
......@@ -64,11 +64,7 @@ const AddMember = observer((props: IProps) => {
return (
<MySelect
input={<OutlinedInput />}
value={
defaultValue?.length
? defaultValue[0]
: { value: "VIEWER", label: "查看者" }
}
value={defaultValue?.length ? defaultValue[0]?.value : "VIEWER"}
onChange={(val) => changePermission(val, index)}
options={selectOptions}
size="small"
......
src/views/Project/ProjectSetting/ProjectMembers/components/ChangePermission.tsx
View file @ d0c51ac4
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-11 15:25:23
* @LastEditTime: 2022-07-21 11:34:55
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -32,7 +32,7 @@ const ChangePermission = observer((props: IProps) => {
const http = useHttp();
const [selectOptions, setSelectOptions] = useState<IOption[]>([]);
const [selectValue, setSelectValue] = useState<IOption | undefined>();
const [selectValue, setSelectValue] = useState<string | undefined>();
useEffect(() => {
if (permissionDialog?.isShow) {
......@@ -62,7 +62,7 @@ const ChangePermission = observer((props: IProps) => {
.put<IResponse<any>>(
`/cpp/project/updateuserrole?id=${projectInfo?.id || ""}&username=${
permissionDialog.username
}&role=${selectValue?.value}`
}&role=${selectValue}`
)
.then((res) => {
const { errorCode } = res;
......@@ -79,9 +79,9 @@ const ChangePermission = observer((props: IProps) => {
(every) => every.value === permissionDialog?.projectRole
);
if (defaultValue?.length) {
setSelectValue(defaultValue[0]);
setSelectValue(defaultValue[0]?.value);
} else {
setSelectValue({ value: "VIEWER", label: "查看者" });
setSelectValue("VIEWER");
}
}, [permissionDialog, selectOptions]);
return (
......@@ -95,6 +95,7 @@ const ChangePermission = observer((props: IProps) => {
<div style={{ marginTop: 12 }}>
<MySelect
title="项目权限"
isTitle={true}
value={selectValue}
onChange={changePermission}
options={selectOptions}
......
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