Skip to content

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

feat: 文件传输布局开发

parent 437293d4
Hide whitespace changes
Inline Side-by-side
Showing with 90 additions and 138 deletions
src/components/mui/Select.tsx deleted 100644 → 0
View file @ 437293d4
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2021-12-04 15:46:25
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-07 21:13:38
* @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";
export interface IOption {
label: string;
value: string;
disabled?: boolean;
}
interface IProps
extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
value?: IOption;
options: IOption[];
onChange?: (val: IOption) => void;
title?: string;
}
export default function BasicSelect(props: IProps) {
const { value, options, onChange, title, input } = props;
const handleChange = (event: any) => {
const newValue = options?.filter((item) => {
return item.value === event.target.value;
});
if (onChange) {
onChange(newValue[0] || { label: "", value: "" });
}
};
return (
<Box sx={{ minWidth: 120 }}>
<FormControl fullWidth>
{input ? null : (
<InputLabel id="demo-simple-select-label">
{title || "请选择"}
</InputLabel>
)}
<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>
);
}
src/views/ConsoleLayout/index.module.css
View file @ d047d28e
.topApp {
height: 56px;
background-color: white;
border-bottom: #E6E8EB 1px solid;
border-bottom: #e6e8eb 1px solid;
display: flex;
align-items: center;
justify-content: space-between;
......@@ -18,23 +18,29 @@
}
.topRightBox {
padding-right: 30px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.topRightItem {
margin-right: 20px;
}
.ArrowDropDownIconRoot {
color: #8A9099;
color: #8a9099;
transition: all 0.2s !important;
transform: rotate(0)
transform: rotate(0);
}
.ArrowDropDownIconRootOpen {
color: #8A9099;
transform: rotate(180deg)
color: #8a9099;
transform: rotate(180deg);
}
.menuPaper {
border: 1px solid #F0F2F5;
background: #FFFFFF;
border: 1px solid #f0f2f5;
background: #ffffff;
border-radius: 4px;
box-shadow: 4px 4px 20px 0px rgba(0, 24, 57, 0.06) !important;
}
......@@ -42,4 +48,4 @@
.menuItemRoot {
width: 143px;
font-size: 14px !important;
}
\ No newline at end of file
}
src/views/ConsoleLayout/index.tsx
View file @ d047d28e
import { Box, Menu, MenuItem } from "@mui/material";
import React, { useEffect } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import style from "./index.module.css";
import cx from "classnames";
import { observer } from "mobx-react-lite";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import Add from "@mui/icons-material/Add";
import Avatar from "@mui/material/Avatar";
import { Box, Menu, MenuItem } from "@mui/material";
import globalText from "@/utils/globalText_CN";
import useIndex from "./useIndex";
import { useStores } from "@/store/index";
import { observer } from "mobx-react-lite";
import Button from "@/components/mui/Button";
import logo from "@/assets/img/logo.svg";
import Avatar from "@mui/material/Avatar";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import cx from "classnames";
import MyPopover from "@/components/mui/MyPopover";
import TranSferList from "./components/TransferList";
import style from "./index.module.css";
const ConsoleLayout = observer(() => {
const {
......@@ -92,54 +97,67 @@ const ConsoleLayout = observer(() => {
</Box>
<Box className={style.topRightBox}>
<Box
sx={{ display: "flex", alignItems: "center" }}
onClick={handleUtilityClick}
<MyPopover
content={<TranSferList />}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<Avatar
sx={{
bgcolor: "#1370FF",
width: 28,
height: 28,
fontSize: "14px",
cursor: "pointer",
}}
<Box className={style.topRightItem}>
<Add />
</Box>
</MyPopover>
<Box className={style.topRightItem}>
<Box
sx={{ display: "flex", alignItems: "center" }}
onClick={handleUtilityClick}
>
H
</Avatar>
<ArrowDropDownIcon
classes={{
root: cx({
[style.ArrowDropDownIconRoot]: true,
[style.ArrowDropDownIconRootOpen]: Boolean(utilityOpen),
}),
<Avatar
sx={{
bgcolor: "#1370FF",
width: 28,
height: 28,
fontSize: "14px",
cursor: "pointer",
}}
>
H
</Avatar>
<ArrowDropDownIcon
classes={{
root: cx({
[style.ArrowDropDownIconRoot]: true,
[style.ArrowDropDownIconRootOpen]: Boolean(utilityOpen),
}),
}}
/>
</Box>
<Menu
id="utility-menu"
anchorEl={utilityAnchorEl}
open={utilityOpen}
onClose={handleClose}
MenuListProps={{
"aria-labelledby": "utility-button",
}}
/>
>
{menuStore.utilityList.map((item) => {
return (
<MenuItem
key={item.path}
onClick={() => {
navigate(item.path);
handleClose();
}}
>
{item.name}
</MenuItem>
);
})}
</Menu>
</Box>
<Menu
id="utility-menu"
anchorEl={utilityAnchorEl}
open={utilityOpen}
onClose={handleClose}
MenuListProps={{
"aria-labelledby": "utility-button",
}}
>
{menuStore.utilityList.map((item) => {
return (
<MenuItem
key={item.path}
onClick={() => {
navigate(item.path);
handleClose();
}}
>
{item.name}
</MenuItem>
);
})}
</Menu>
</Box>
</Box>
<Box>
......
src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx
View file @ d047d28e
......@@ -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-07 21:50:55
* @LastEditTime: 2022-06-11 15:24:15
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -18,7 +18,7 @@ import SearchIcon from "@mui/icons-material/Search";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import { useMessage } from "@/components/MySnackbar";
import Select, { IOption } from "@/components/mui/Select";
import MySelect, { IOption } from "@/components/mui/MySelect";
interface IProps {
setAddMemberDialog: (val: boolean) => void;
addMemberDialog: boolean;
......@@ -68,7 +68,7 @@ const AddMember = observer((props: IProps) => {
(every) => every.value === item
);
return (
<Select
<MySelect
input={<OutlinedInput />}
value={
defaultValue?.length
......
src/views/Project/ProjectSetting/ProjectMembers/components/ChangePermission.tsx
View file @ d047d28e
......@@ -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-07 21:45:49
* @LastEditTime: 2022-06-11 15:25:23
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -11,7 +11,7 @@ import { memo, useEffect, useMemo, useState } from "react";
import { observer } from "mobx-react-lite";
import { toJS } from "mobx";
import Select, { IOption } from "@/components/mui/Select";
import MySelect, { IOption } from "@/components/mui/MySelect";
import Dialog from "@/components/mui/Dialog";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store/index";
......@@ -93,7 +93,7 @@ const ChangePermission = observer((props: IProps) => {
title="更改权限"
>
<div style={{ marginTop: 12 }}>
<Select
<MySelect
title="项目权限"
value={selectValue}
onChange={changePermission}
......
src/views/Project/ProjectSetting/ProjectMembers/index.tsx
View file @ d047d28e
......@@ -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-07 21:39:30
* @LastEditTime: 2022-06-10 18:08:00
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -16,7 +16,6 @@ import SearchIcon from "@mui/icons-material/Search";
import Add from "@mui/icons-material/Add";
import Table from "@/components/Material.Ui/Table";
import { IResponse, useHttp } from "@/api/http";
import Input from "@/components/Material.Ui/Input";
import RemoveItem from "./components/RemoveItem";
import ChangePermission from "./components/ChangePermission";
import AddMember from "./components/AddMember";
......
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