Skip to content

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

feat: 完成暂无项目页

parent 73623a77
Show whitespace changes
Inline Side-by-side
Showing with 309 additions and 350 deletions
package-lock.json
View file @ 2f3ce5f4
...@@ -2041,96 +2041,6 @@ ...@@ -2041,96 +2041,6 @@
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz",
"integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==" "integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg=="
}, },
"@material-ui/core": {
"version": "4.12.4",
"resolved": "https://registry.npmmirror.com/@material-ui/core/-/core-4.12.4.tgz",
"integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/styles": "^4.11.5",
"@material-ui/system": "^4.12.2",
"@material-ui/types": "5.1.0",
"@material-ui/utils": "^4.11.3",
"@types/react-transition-group": "^4.2.0",
"clsx": "^1.0.4",
"hoist-non-react-statics": "^3.3.2",
"popper.js": "1.16.1-lts",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0",
"react-transition-group": "^4.4.0"
}
},
"@material-ui/icons": {
"version": "4.11.3",
"resolved": "https://registry.npmmirror.com/@material-ui/icons/-/icons-4.11.3.tgz",
"integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==",
"requires": {
"@babel/runtime": "^7.4.4"
}
},
"@material-ui/styles": {
"version": "4.11.5",
"resolved": "https://registry.npmmirror.com/@material-ui/styles/-/styles-4.11.5.tgz",
"integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
"requires": {
"@babel/runtime": "^7.4.4",
"@emotion/hash": "^0.8.0",
"@material-ui/types": "5.1.0",
"@material-ui/utils": "^4.11.3",
"clsx": "^1.0.4",
"csstype": "^2.5.2",
"hoist-non-react-statics": "^3.3.2",
"jss": "^10.5.1",
"jss-plugin-camel-case": "^10.5.1",
"jss-plugin-default-unit": "^10.5.1",
"jss-plugin-global": "^10.5.1",
"jss-plugin-nested": "^10.5.1",
"jss-plugin-props-sort": "^10.5.1",
"jss-plugin-rule-value-function": "^10.5.1",
"jss-plugin-vendor-prefixer": "^10.5.1",
"prop-types": "^15.7.2"
},
"dependencies": {
"csstype": {
"version": "2.6.20",
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz",
"integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
}
}
},
"@material-ui/system": {
"version": "4.12.2",
"resolved": "https://registry.npmmirror.com/@material-ui/system/-/system-4.12.2.tgz",
"integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/utils": "^4.11.3",
"csstype": "^2.5.2",
"prop-types": "^15.7.2"
},
"dependencies": {
"csstype": {
"version": "2.6.20",
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz",
"integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
}
}
},
"@material-ui/types": {
"version": "5.1.0",
"resolved": "https://registry.npmmirror.com/@material-ui/types/-/types-5.1.0.tgz",
"integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
},
"@material-ui/utils": {
"version": "4.11.3",
"resolved": "https://registry.npmmirror.com/@material-ui/utils/-/utils-4.11.3.tgz",
"integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
"requires": {
"@babel/runtime": "^7.4.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
}
},
"@mui/base": { "@mui/base": {
"version": "5.0.0-alpha.79", "version": "5.0.0-alpha.79",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.79.tgz", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.79.tgz",
...@@ -9181,11 +9091,6 @@ ...@@ -9181,11 +9091,6 @@
} }
} }
}, },
"popper.js": {
"version": "1.16.1-lts",
"resolved": "https://registry.npmmirror.com/popper.js/-/popper.js-1.16.1-lts.tgz",
"integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
},
"postcss": { "postcss": {
"version": "8.4.13", "version": "8.4.13",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.13.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.13.tgz",
......
package.json
View file @ 2f3ce5f4
...@@ -7,8 +7,6 @@ ...@@ -7,8 +7,6 @@
"@babel/core": "^7.16.0", "@babel/core": "^7.16.0",
"@emotion/react": "^11.9.0", "@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1", "@emotion/styled": "^11.8.1",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.6.2", "@mui/icons-material": "^5.6.2",
"@mui/material": "^5.6.4", "@mui/material": "^5.6.4",
"@mui/styles": "^5.8.0", "@mui/styles": "^5.8.0",
......
src/api/api_manager.ts
View file @ 2f3ce5f4
...@@ -2,7 +2,7 @@ import { BACKEND_API_URI_PREFIX } from "./api_prefix"; ...@@ -2,7 +2,7 @@ import { BACKEND_API_URI_PREFIX } from "./api_prefix";
const RESTAPI = { const RESTAPI = {
API_USER_FETCH: `${BACKEND_API_URI_PREFIX}/accounts/current`, //获取账户信息 API_USER_FETCH: `${BACKEND_API_URI_PREFIX}/accounts/current`, //获取账户信息
API_PRIVILEGE_LIST: `${BACKEND_API_URI_PREFIX}/routes/privilege/list`, //获取产品列表 // API_PRIVILEGE_LIST: `${BACKEND_API_URI_PREFIX}/routes/privilege/list`, //
API_PROJECT_LIST: `${BACKEND_API_URI_PREFIX}/cpp/project/list`, //获取产品下的项目列表 API_PROJECT_LIST: `${BACKEND_API_URI_PREFIX}/cpp/project/list`, //获取产品下的项目列表
// routes/privilege/list // routes/privilege/list
}; };
......
src/api/demo_api.ts
View file @ 2f3ce5f4
import request from "@/utils/axios/service"; import request from "@/utils/axios/service";
import Api from "./api_manager" import Api from "./api_manager";
function current() { function current() {
return request({ return request({
...@@ -15,11 +15,16 @@ function menu() { ...@@ -15,11 +15,16 @@ function menu() {
}); });
} }
function product() { type projectListParams = {
product: string;
name?: string;
};
function product(params: projectListParams) {
return request({ return request({
url: Api.API_PROJECT_LIST + "?name=", url: Api.API_PROJECT_LIST,
method: "get", method: "get",
params,
}); });
} }
......
src/api/project_api.ts
View file @ 2f3ce5f4
import request from "@/utils/axios/service"; import request from "@/utils/axios/service";
import Api from "./api_manager" import Api from "./api_manager";
function current() { function current() {
return request({ return request({
...@@ -15,13 +15,18 @@ function menu() { ...@@ -15,13 +15,18 @@ function menu() {
}); });
} }
type projectListParams = {
product: string;
name?: string;
};
// 查询当前用户可以看到的项目列表 // 查询当前用户可以看到的项目列表
function product() { const product = (params: projectListParams) => {
return request({ return request({
url: Api.API_PROJECT_LIST + "?name=", url: Api.API_PROJECT_LIST,
method: "get", method: "get",
params,
}); });
} };
export { current, menu, product }; export { current, menu, product };
src/components/MyDialog/MyDialog.tsx 0 → 100644
View file @ 2f3ce5f4
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
} from "@mui/material";
import { useState } from "react";
import React, { useImperativeHandle } from "react";
// import LoadingButton from '@mui/lab/LoadingButton';
const MyDialog = (props: any) => {
const [open, setOpen] = useState(false);
const { title, handleSubmit } = props;
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
useImperativeHandle(props.onRef, () => {
return {
handleClickOpen: handleClickOpen,
handleClose: handleClose,
};
});
return (
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="form-dialog-title"
>
{title && <DialogTitle id="form-dialog-title">{title}</DialogTitle>}
<DialogContent>{props.children}</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
取消
</Button>
<Button onClick={handleSubmit} color="primary">
确认
</Button>
</DialogActions>
</Dialog>
);
};
export default MyDialog;
src/components/MyDialog/index.ts 0 → 100644
View file @ 2f3ce5f4
import MyDialog from "./MyDialog";
export default MyDialog;
src/components/MyRouter/useMyRouter.ts
View file @ 2f3ce5f4
import { useStores } from "@/store/index"; import { useStores } from "@/store/index";
import { elements } from "@/router"; import { elements } from "@/router";
import { current, menu, product } from "@/api/demo_api"; import { current, menu } from "@/api/demo_api";
import { product } from "@/api/project_api";
import localStorageKey from "@/utils/localStorageKey"; import localStorageKey from "@/utils/localStorageKey";
import NotFound from "@/views/404"; import NotFound from "@/views/404";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import { useEffect } from "react"; import { useEffect } from "react";
const useMyRouter = () => { const useMyRouter = () => {
const { permissionStore, menuStore } = useStores(); const { permissionStore, menuStore, currentProjectStore } = useStores();
const userInfo = useMyRequest(current); const userInfo = useMyRequest(current);
const menuInfo = useMyRequest(menu); const menuInfo = useMyRequest(menu);
const productInfo = useMyRequest(product); const productInfo = useMyRequest(product);
useEffect(() => { useEffect(() => {
userInfo.run(); userInfo.run();
menuInfo.run(); menuInfo.run();
productInfo.run() productInfo.run({
product: "CADD",
});
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
useEffect(() => { useEffect(() => {
if (userInfo.res && menuInfo.res) { if (userInfo.res && menuInfo.res) {
localStorage.setItem(localStorageKey.USER_INFO, JSON.stringify(userInfo.res)); localStorage.setItem(
localStorageKey.USER_INFO,
JSON.stringify(userInfo.res)
);
permissionStore.restAddRoutes(); permissionStore.restAddRoutes();
for (let item of menuInfo.res.data) { for (let item of menuInfo.res.data) {
...@@ -39,11 +42,17 @@ const useMyRouter = () => { ...@@ -39,11 +42,17 @@ const useMyRouter = () => {
permissionStore.initAllRoutes(); permissionStore.initAllRoutes();
} }
if (productInfo.res) { if (productInfo.res) {
console.log(productInfo, '1111111111111') console.log(productInfo, "1111111111111");
let list = productInfo.data?.data;
if (list.length === 0) {
currentProjectStore.setProjectList([]);
currentProjectStore.changeProject({});
} else {
currentProjectStore.setProjectList(list);
currentProjectStore.changeProject(list[0]);
}
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [userInfo.data, menuInfo.data, productInfo.data]); }, [userInfo.data, menuInfo.data, productInfo.data]);
......
src/components/NoProject/NoProject.module.css 0 → 100644
View file @ 2f3ce5f4
.noProject {
width: 100%;
height: calc(100vh - 57px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.noDataImg {
width: 220px;
margin-bottom: 4px;
}
.text1 {
line-height: 24px;
font-size: 16px;
color: #1e2633;
margin-bottom: 4px;
}
.text2 {
line-height: 22px;
font-size: 14px;
color: #8a9099;
margin-bottom: 24px;
}
.button {
background-color: #1370ff;
color: #fff;
}
src/components/NoProject/NoProject.tsx 0 → 100644
View file @ 2f3ce5f4
import style from "./NoProject.module.css";
import noData from "@/assets/project/noData.svg";
import { Button } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import MyDialog from "../MyDialog";
import React from "react";
const NoProject = () => {
let DialogRef: any = React.createRef();
const handleClickOpen = () => {
DialogRef.current.handleClickOpen();
};
const handleSubmit = () => {
console.log("handleSubmitfff");
};
return (
<div className={style.noProject}>
<img src={noData} alt="" className={style.noDataImg} />
<div className={style.text1}>当前产品暂无项目</div>
<div className={style.text2}>请先创建项目</div>
<Button
variant="contained"
size="large"
className={style.button}
startIcon={<AddIcon />}
onClick={handleClickOpen}
style={{ backgroundColor: "#1370ff", color: "#fff" }}
>
创建项目
</Button>
<MyDialog handleSubmit={handleSubmit} onRef={DialogRef} title="新建项目">
<div>123</div>
</MyDialog>
</div>
);
};
export default NoProject;
src/components/NoProject/index.ts 0 → 100644
View file @ 2f3ce5f4
import NoProject from "./NoProject";
export default NoProject;
src/store/modules/currentProject.ts
View file @ 2f3ce5f4
import { makeAutoObservable } from "mobx"; import { makeAutoObservable } from "mobx";
// import { routes, navigate, operation, route } from "@/router";
type projectInfo = { type projectInfo = {
id?: string id?: string;
name?: string name?: string;
desc?: string desc?: string;
} };
type productInfo = {
id?: string;
name?: string;
};
class currentProject { class currentProject {
constructor() { constructor() {
makeAutoObservable(this); makeAutoObservable(this);
} }
projectInfo: projectInfo = {} // 选中的项目
changeProject = (project:projectInfo) => { currentProjectInfo: projectInfo = {};
this.projectInfo = project // 选中的产品下的项目列表
} projectList: Array<projectInfo> = [];
// 选中的产品
currentProductInfo: productInfo = {};
setProjectList = (list: Array<projectInfo>) => {
this.projectList = list;
};
changeProject = (project: projectInfo) => {
this.currentProjectInfo = project;
};
} }
const currentProjectStore = new currentProject(); const currentProjectStore = new currentProject();
......
src/views/ConsoleLayout/index.tsx
View file @ 2f3ce5f4
import { Box, Menu, MenuItem, IconButton } from "@mui/material"; import { Box, Menu, MenuItem } from "@mui/material";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom"; import { Outlet, useLocation, useNavigate } from "react-router-dom";
import style from "./index.module.css"; import style from "./index.module.css";
import globalText from "@/utils/globalText_CN"; import globalText from "@/utils/globalText_CN";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import useIndex from "./useIndex"; import useIndex from "./useIndex";
import { useStores } from "@/store/index"; import { useStores } from "@/store/index";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import Button from "@/components/mui/Button"; import Button from "@/components/mui/Button";
import logo from '@/assets/img/logo.svg' import logo from "@/assets/img/logo.svg";
import Avatar from '@mui/material/Avatar'; import Avatar from "@mui/material/Avatar";
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import cx from "classnames" import cx from "classnames";
const ConsoleLayout = observer(() => { const ConsoleLayout = observer(() => {
const { const {
...@@ -37,13 +35,22 @@ const ConsoleLayout = observer(() => { ...@@ -37,13 +35,22 @@ const ConsoleLayout = observer(() => {
<Box> <Box>
<Box className={style.topApp}> <Box className={style.topApp}>
<Box className={style.topLeftBox}> <Box className={style.topLeftBox}>
<img src={logo} alt="" className={style.logo} /> <img src={logo} alt="" className={style.logo} />
<Button text={globalText.console} variant={"text"} click={() => navigate("/home")} /> <Button
text={globalText.console}
<Box sx={{ display: 'flex', alignItems: 'center' }}> variant={"text"}
<Button text={globalText.product} variant={"text"} click={handleProductClick} dropValue={productOpen} drop={true} /> click={() => navigate("/home")}
/>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Button
text={globalText.product}
variant={"text"}
click={handleProductClick}
dropValue={productOpen}
drop={true}
/>
{/* <ArrowDropDownIcon classes={{ {/* <ArrowDropDownIcon classes={{
root: cx({ root: cx({
...@@ -58,7 +65,7 @@ const ConsoleLayout = observer(() => { ...@@ -58,7 +65,7 @@ const ConsoleLayout = observer(() => {
open={productOpen} open={productOpen}
onClose={handleClose} onClose={handleClose}
classes={{ classes={{
paper: style.menuPaper paper: style.menuPaper,
}} }}
MenuListProps={{ MenuListProps={{
"aria-labelledby": "product-button", "aria-labelledby": "product-button",
...@@ -68,11 +75,9 @@ const ConsoleLayout = observer(() => { ...@@ -68,11 +75,9 @@ const ConsoleLayout = observer(() => {
return ( return (
<MenuItem <MenuItem
key={item.path} key={item.path}
classes={{ classes={{
root: style.menuItemRoot root: style.menuItemRoot,
}} }}
onClick={() => { onClick={() => {
navigate(item.path); navigate(item.path);
handleClose(); handleClose();
...@@ -84,27 +89,34 @@ const ConsoleLayout = observer(() => { ...@@ -84,27 +89,34 @@ const ConsoleLayout = observer(() => {
})} })}
</Menu> </Menu>
</Box> </Box>
</Box> </Box>
<Box className={style.topRightBox}> <Box className={style.topRightBox}>
<Box
<Box sx={{ display: 'flex', alignItems: 'center' }} onClick={handleUtilityClick}> sx={{ display: "flex", alignItems: "center" }}
onClick={handleUtilityClick}
>
<Avatar <Avatar
sx={{ bgcolor: "#1370FF", width: 28, height: 28, fontSize: "14px", cursor: 'pointer' }} sx={{
>H</Avatar> bgcolor: "#1370FF",
<ArrowDropDownIcon classes={{ width: 28,
height: 28,
fontSize: "14px",
cursor: "pointer",
}}
>
H
</Avatar>
<ArrowDropDownIcon
classes={{
root: cx({ root: cx({
[style.ArrowDropDownIconRoot]: true, [style.ArrowDropDownIconRoot]: true,
[style.ArrowDropDownIconRootOpen]: Boolean(utilityOpen) [style.ArrowDropDownIconRootOpen]: Boolean(utilityOpen),
}) }),
}} /> }}
/>
</Box> </Box>
<Menu <Menu
id="utility-menu" id="utility-menu"
anchorEl={utilityAnchorEl} anchorEl={utilityAnchorEl}
......
src/views/Project/ProjectSetting/index.tsx
View file @ 2f3ce5f4
...@@ -4,12 +4,15 @@ import { operation, route } from "@/router"; ...@@ -4,12 +4,15 @@ import { operation, route } from "@/router";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import { Box } from "@mui/system"; import { Box } from "@mui/system";
import { useEffect } from "react"; import { useEffect } from "react";
import { useStores } from "@/store/index";
import NoProject from "@/components/NoProject";
const ProjectSetting = ({ const ProjectSetting = ({
childrenRoutes, childrenRoutes,
}: { }: {
childrenRoutes?: Array<route | operation>; childrenRoutes?: Array<route | operation>;
}) => { }) => {
const { currentProjectStore } = useStores();
const message = useMessage(); const message = useMessage();
const isPass = usePass(); const isPass = usePass();
...@@ -19,7 +22,7 @@ const ProjectSetting = ({ ...@@ -19,7 +22,7 @@ const ProjectSetting = ({
console.log(isPass("test"), "33333"); console.log(isPass("test"), "33333");
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
if (currentProjectStore.currentProjectInfo.name) {
return ( return (
<Box> <Box>
<Box>ProjectSetting123</Box> <Box>ProjectSetting123</Box>
...@@ -28,6 +31,9 @@ const ProjectSetting = ({ ...@@ -28,6 +31,9 @@ const ProjectSetting = ({
<Button onClick={() => message.success("测试测试")}>message测试</Button> <Button onClick={() => message.success("测试测试")}>message测试</Button>
</Box> </Box>
); );
} else {
return <NoProject />;
}
}; };
export default ProjectSetting; export default ProjectSetting;
src/views/Project/components/CurrentProject/index.tsx
View file @ 2f3ce5f4
// import { useEffect } from "react";
import logo from "@/assets/project/projectIcon.svg"; import logo from "@/assets/project/projectIcon.svg";
// import smallLogo from "@/assets/project/projectIconSmall.svg";
import style from "./index.module.css"; import style from "./index.module.css";
import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos"; import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import Popper from "@material-ui/core/Popper"; import { Popper, Fade } from "@mui/material";
// import Paper from "@material-ui/core/Paper"; import { useStores } from "@/store/index";
import Fade from "@material-ui/core/Fade";
// import InputBase from "@material-ui/core/InputBase";
// import useMyRequest from "@/hooks/useMyRequest";
// import { product } from "@/api/project_api";
// import moment from "moment";
import ProjectListPopper from "../ProjectListPopper"; import ProjectListPopper from "../ProjectListPopper";
import { useState } from "react"; import { useState } from "react";
const CurrentProject = () => { const CurrentProject = () => {
const currentProjectInfo = { const { currentProjectStore } = useStores();
id: "123",
name: "项目名称",
desc: "项目描述",
};
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState(null); const [anchorEl, setAnchorEl] = useState(null);
const handleShowProjectList = (e: any) => { const handleShowProjectList = (e: any) => {
setOpen(!open); setOpen(!open);
setAnchorEl(anchorEl ? null : e.currentTarget); setAnchorEl(anchorEl ? null : e.currentTarget);
}; };
// const open = Boolean(anchorEl);
const id = open ? "spring-popper" : undefined; const id = open ? "spring-popper" : undefined;
// const [projectList, setProjectList] = useState<any>([]);
// const { data, error, loading, run } = useMyRequest(product, {
// manual: true,
// onSuccess: (result, params) => {
// console.log(result);
// setProjectList(result.data);
// },
// });
// useEffect(() => {
// run();
// }, []);
return ( return (
<div> <div>
...@@ -49,8 +25,12 @@ const CurrentProject = () => { ...@@ -49,8 +25,12 @@ const CurrentProject = () => {
> >
<img src={logo} alt="" className={style.logo} /> <img src={logo} alt="" className={style.logo} />
<div className={style.info}> <div className={style.info}>
<div className={style.name}>{currentProjectInfo.name}</div> <div className={style.name}>
<div className={style.desc}>{currentProjectInfo.desc}</div> {currentProjectStore.currentProductInfo.name || "CADD"}
</div>
<div className={style.desc}>
{currentProjectStore.currentProjectInfo.name || "暂无项目"}
</div>
</div> </div>
<ArrowForwardIosIcon <ArrowForwardIosIcon
className={style.showProjectList} className={style.showProjectList}
...@@ -66,42 +46,9 @@ const CurrentProject = () => { ...@@ -66,42 +46,9 @@ const CurrentProject = () => {
> >
{({ TransitionProps }) => ( {({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}> <Fade {...TransitionProps} timeout={350}>
{/* <Paper> */} <div>
<ProjectListPopper /> <ProjectListPopper />
{/* <div className={style.projectBox}>
<div className={style.searchBox} onClick={() => run()}>
<InputBase
// className={classes.input}
placeholder="请输入项目名称"
inputProps={{ "aria-label": "search google maps" }}
/>
</div>
<div className={style.projectlist}>
{projectList.map((item: any) => {
return (
<div className={style.projectli}>
<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}>
{item.owner}
</span>
<span className={style.projectTime}>
{moment(item.createdAt).format("YYYY-MM-DD")}
</span>
</div>
</div>
</div>
);
})}
</div> </div>
</div> */}
{/* </Paper> */}
</Fade> </Fade>
)} )}
</Popper> </Popper>
......
src/views/Project/components/ProjectList/index.tsx deleted 100644 → 0
View file @ 73623a77
// import { useEffect } from "react";
import logo from "@/assets/project/projectIcon.svg";
import smallLogo from "@/assets/project/projectIconSmall.svg";
import style from "./index.module.css";
import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
import Popper from "@material-ui/core/Popper";
import Fade from "@material-ui/core/Fade";
import InputBase from "@material-ui/core/InputBase";
import { useEffect, useState } from "react";
import useMyRequest from "@/hooks/useMyRequest";
import { product } from "@/api/project_api";
import moment from "moment";
const ProjectList = () => {
const currentProjectInfo = {
id: "123",
name: "项目名称",
desc: "项目描述",
};
const [open, setOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState(null);
const [name, setName] = useState("");
const handleShowProjectList = (e: any) => {
setOpen(!open);
setAnchorEl(anchorEl ? null : e.currentTarget);
};
// const open = Boolean(anchorEl);
const id = open ? "spring-popper" : undefined;
const [projectList, setProjectList] = useState<any>([]);
const { data, error, loading, run } = useMyRequest(product, {
manual: true,
onSuccess: (result, params) => {
console.log(result);
setProjectList(result.data);
// setState('');
// message.success(`The username was changed to "${params[0]}" !`);
},
});
useEffect(() => {
run();
}, []);
return (
<div>
<div
className={style.currentProject}
aria-describedby="projectList"
onClick={handleShowProjectList}
>
<img src={logo} alt="" className={style.logo} />
<div className={style.info}>
<div className={style.name}>{currentProjectInfo.name}</div>
<div className={style.desc}>{currentProjectInfo.desc}</div>
</div>
<ArrowForwardIosIcon
className={style.showProjectList}
style={{ fontSize: 12 }}
/>
</div>
<Popper
id={id}
open={open}
anchorEl={anchorEl}
placement="right-start"
transition
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
{/* <Paper> */}
<div className={style.projectBox}>
<div className={style.searchBox} onClick={() => run()}>
<InputBase
// className={classes.input}
placeholder="请输入项目名称"
inputProps={{ "aria-label": "search google maps" }}
/>
</div>
<div className={style.projectlist}>
{projectList.map((item: any) => {
return (
<div className={style.projectli}>
<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}>
{item.owner}
</span>
<span className={style.projectTime}>
{moment(item.createdAt).format("YYYY-MM-DD")}
</span>
</div>
</div>
</div>
);
})}
</div>
</div>
{/* </Paper> */}
</Fade>
)}
</Popper>
</div>
);
};
export default ProjectList;
src/views/Project/components/ProjectListPopper/index.module.css
View file @ 2f3ce5f4
...@@ -7,7 +7,36 @@ ...@@ -7,7 +7,36 @@
flex-direction: column; flex-direction: column;
} }
.searchBox { .searchBox {
box-sizing: border-box;
height: 56px; height: 56px;
padding: 17px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.searchButton {
width: 22px;
height: 22px;
}
.searchIcon {
color: #999999;
}
.searchInput {
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;
}
.addIcon {
color: #1e2633;
} }
.projectlist { .projectlist {
flex: 1; flex: 1;
......
src/views/Project/components/ProjectListPopper/index.tsx
View file @ 2f3ce5f4
// import { useEffect } from "react"; // import { useEffect } from "react";
import smallLogo from "@/assets/project/projectIconSmall.svg"; import smallLogo from "@/assets/project/projectIconSmall.svg";
import style from "./index.module.css"; import style from "./index.module.css";
import InputBase from "@material-ui/core/InputBase"; import { InputBase, IconButton } from "@mui/material";
import { useEffect, useState } from "react"; import SearchIcon from "@mui/icons-material/Search";
import useMyRequest from "@/hooks/useMyRequest"; import AddIcon from "@mui/icons-material/Add";
import { product } from "@/api/project_api"; import { useState } from "react";
import { useStores } from "@/store/index";
// import { product } from "@/api/project_api";
import moment from "moment"; import moment from "moment";
import Loading from "@/views/Loading";
const ProjectListPopper = () => { const ProjectListPopper = () => {
const { currentProjectStore } = useStores();
console.log("currentProjectStore", currentProjectStore);
console.log("currentProjectInfo", currentProjectStore.currentProjectInfo);
console.log("projectList", currentProjectStore.projectList);
const [projectList, setProjectList] = useState<any>([]); const [projectList, setProjectList] = useState<any>([]);
const { data, error, loading, run } = useMyRequest(product, { // const { data, error, loading, run } = useMyRequest(product, {
manual: true, // manual: true,
onSuccess: (result, params) => { // onSuccess: (result, params) => {
console.log(result); // console.log(result);
setProjectList(result.data); // setProjectList(result.data);
}, // },
}); // });
useEffect(() => { // useEffect(() => {
run(); // run();
}, []); // }, []);
const run = () => {
console.log("run");
};
return ( return (
<div className={style.projectBox}> <div className={style.projectBox}>
{/* 123 */}
<div className={style.searchBox} onClick={() => run()}> <div className={style.searchBox} onClick={() => run()}>
<IconButton
type="submit"
className={style.searchButton}
aria-label="search"
>
<SearchIcon className={style.searchIcon} />
</IconButton>
<InputBase <InputBase
// className={classes.input} className={style.searchInput}
placeholder="请输入项目名称" placeholder="请输入项目名称"
inputProps={{ "aria-label": "search google maps" }} inputProps={{ "aria-label": "请输入项目名称" }}
/> />
<IconButton type="submit" className={style.add} aria-label="search">
<AddIcon className={style.addIcon} />
</IconButton>
</div> </div>
<div className={style.projectlist}> <div className={style.projectlist}>
{projectList.map((item: any) => { {projectList.map((item: any) => {
......
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