Skip to content

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

feat: 完成暂无项目页

parent 73623a77
Hide whitespace changes
Inline Side-by-side
Showing with 322 additions and 363 deletions
package-lock.json
View file @ 2f3ce5f4
......@@ -2041,96 +2041,6 @@
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz",
"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": {
"version": "5.0.0-alpha.79",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.79.tgz",
......@@ -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": {
"version": "8.4.13",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.13.tgz",
......
package.json
View file @ 2f3ce5f4
......@@ -7,8 +7,6 @@
"@babel/core": "^7.16.0",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.6.2",
"@mui/material": "^5.6.4",
"@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";
const RESTAPI = {
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`, //获取产品下的项目列表
// routes/privilege/list
};
......
src/api/demo_api.ts
View file @ 2f3ce5f4
import request from "@/utils/axios/service";
import Api from "./api_manager"
import Api from "./api_manager";
function current() {
return request({
......@@ -15,11 +15,16 @@ function menu() {
});
}
function product() {
type projectListParams = {
product: string;
name?: string;
};
function product(params: projectListParams) {
return request({
url: Api.API_PROJECT_LIST + "?name=",
url: Api.API_PROJECT_LIST,
method: "get",
params,
});
}
......
src/api/project_api.ts
View file @ 2f3ce5f4
import request from "@/utils/axios/service";
import Api from "./api_manager"
import Api from "./api_manager";
function current() {
return request({
......@@ -15,13 +15,18 @@ function menu() {
});
}
type projectListParams = {
product: string;
name?: string;
};
// 查询当前用户可以看到的项目列表
function product() {
const product = (params: projectListParams) => {
return request({
url: Api.API_PROJECT_LIST + "?name=",
url: Api.API_PROJECT_LIST,
method: "get",
params,
});
}
};
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 { 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 NotFound from "@/views/404";
import useMyRequest from "@/hooks/useMyRequest";
import { useEffect } from "react";
const useMyRouter = () => {
const { permissionStore, menuStore } = useStores();
const { permissionStore, menuStore, currentProjectStore } = useStores();
const userInfo = useMyRequest(current);
const menuInfo = useMyRequest(menu);
const productInfo = useMyRequest(product);
useEffect(() => {
userInfo.run();
menuInfo.run();
productInfo.run()
productInfo.run({
product: "CADD",
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
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();
for (let item of menuInfo.res.data) {
......@@ -39,12 +42,18 @@ const useMyRouter = () => {
permissionStore.initAllRoutes();
}
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
}, [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 { routes, navigate, operation, route } from "@/router";
type projectInfo = {
id?: string
name?: string
desc?: string
}
type projectInfo = {
id?: string;
name?: string;
desc?: string;
};
type productInfo = {
id?: string;
name?: string;
};
class currentProject {
constructor() {
makeAutoObservable(this);
}
projectInfo: projectInfo = {}
changeProject = (project:projectInfo) => {
this.projectInfo = project
}
// 选中的项目
currentProjectInfo: projectInfo = {};
// 选中的产品下的项目列表
projectList: Array<projectInfo> = [];
// 选中的产品
currentProductInfo: productInfo = {};
setProjectList = (list: Array<projectInfo>) => {
this.projectList = list;
};
changeProject = (project: projectInfo) => {
this.currentProjectInfo = project;
};
}
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 { Outlet, useLocation, useNavigate } from "react-router-dom";
import style from "./index.module.css";
import globalText from "@/utils/globalText_CN";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
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 logo from "@/assets/img/logo.svg";
import Avatar from "@mui/material/Avatar";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import cx from "classnames";
const ConsoleLayout = observer(() => {
const {
......@@ -37,13 +35,22 @@ const ConsoleLayout = observer(() => {
<Box>
<Box className={style.topApp}>
<Box className={style.topLeftBox}>
<img src={logo} alt="" className={style.logo} />
<Button text={globalText.console} variant={"text"} click={() => navigate("/home")} />
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Button text={globalText.product} variant={"text"} click={handleProductClick} dropValue={productOpen} drop={true} />
<Button
text={globalText.console}
variant={"text"}
click={() => navigate("/home")}
/>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Button
text={globalText.product}
variant={"text"}
click={handleProductClick}
dropValue={productOpen}
drop={true}
/>
{/* <ArrowDropDownIcon classes={{
root: cx({
......@@ -58,7 +65,7 @@ const ConsoleLayout = observer(() => {
open={productOpen}
onClose={handleClose}
classes={{
paper: style.menuPaper
paper: style.menuPaper,
}}
MenuListProps={{
"aria-labelledby": "product-button",
......@@ -68,11 +75,9 @@ const ConsoleLayout = observer(() => {
return (
<MenuItem
key={item.path}
classes={{
root: style.menuItemRoot
root: style.menuItemRoot,
}}
onClick={() => {
navigate(item.path);
handleClose();
......@@ -84,27 +89,34 @@ const ConsoleLayout = observer(() => {
})}
</Menu>
</Box>
</Box>
<Box className={style.topRightBox}>
<Box sx={{ display: 'flex', alignItems: 'center' }} onClick={handleUtilityClick}>
<Box
sx={{ display: "flex", alignItems: "center" }}
onClick={handleUtilityClick}
>
<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)
})
}} />
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}
......
src/views/Project/ProjectSetting/index.tsx
View file @ 2f3ce5f4
......@@ -4,12 +4,15 @@ import { operation, route } from "@/router";
import { Button } from "@mui/material";
import { Box } from "@mui/system";
import { useEffect } from "react";
import { useStores } from "@/store/index";
import NoProject from "@/components/NoProject";
const ProjectSetting = ({
childrenRoutes,
}: {
childrenRoutes?: Array<route | operation>;
}) => {
const { currentProjectStore } = useStores();
const message = useMessage();
const isPass = usePass();
......@@ -19,15 +22,18 @@ const ProjectSetting = ({
console.log(isPass("test"), "33333");
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<Box>
<Box>ProjectSetting123</Box>
<Box>{JSON.stringify(childrenRoutes)}</Box>
<Box>{JSON.stringify(process.env.NODE_ENV)}</Box>
<Button onClick={() => message.success("测试测试")}>message测试</Button>
</Box>
);
if (currentProjectStore.currentProjectInfo.name) {
return (
<Box>
<Box>ProjectSetting123</Box>
<Box>{JSON.stringify(childrenRoutes)}</Box>
<Box>{JSON.stringify(process.env.NODE_ENV)}</Box>
<Button onClick={() => message.success("测试测试")}>message测试</Button>
</Box>
);
} else {
return <NoProject />;
}
};
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 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 Paper from "@material-ui/core/Paper";
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 ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import { Popper, Fade } from "@mui/material";
import { useStores } from "@/store/index";
import ProjectListPopper from "../ProjectListPopper";
import { useState } from "react";
const CurrentProject = () => {
const currentProjectInfo = {
id: "123",
name: "项目名称",
desc: "项目描述",
};
const { currentProjectStore } = useStores();
const [open, setOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState(null);
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);
// },
// });
// useEffect(() => {
// run();
// }, []);
return (
<div>
......@@ -49,8 +25,12 @@ const CurrentProject = () => {
>
<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 className={style.name}>
{currentProjectStore.currentProductInfo.name || "CADD"}
</div>
<div className={style.desc}>
{currentProjectStore.currentProjectInfo.name || "暂无项目"}
</div>
</div>
<ArrowForwardIosIcon
className={style.showProjectList}
......@@ -66,42 +46,9 @@ const CurrentProject = () => {
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
{/* <Paper> */}
<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> */}
{/* </Paper> */}
<div>
<ProjectListPopper />
</div>
</Fade>
)}
</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 @@
flex-direction: column;
}
.searchBox {
box-sizing: border-box;
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 {
flex: 1;
......
src/views/Project/components/ProjectListPopper/index.tsx
View file @ 2f3ce5f4
// import { useEffect } from "react";
import smallLogo from "@/assets/project/projectIconSmall.svg";
import style from "./index.module.css";
import InputBase from "@material-ui/core/InputBase";
import { useEffect, useState } from "react";
import useMyRequest from "@/hooks/useMyRequest";
import { product } from "@/api/project_api";
import { InputBase, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import AddIcon from "@mui/icons-material/Add";
import { useState } from "react";
import { useStores } from "@/store/index";
// import { product } from "@/api/project_api";
import moment from "moment";
import Loading from "@/views/Loading";
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 { data, error, loading, run } = useMyRequest(product, {
manual: true,
onSuccess: (result, params) => {
console.log(result);
setProjectList(result.data);
},
});
useEffect(() => {
run();
}, []);
// const { data, error, loading, run } = useMyRequest(product, {
// manual: true,
// onSuccess: (result, params) => {
// console.log(result);
// setProjectList(result.data);
// },
// });
// useEffect(() => {
// run();
// }, []);
const run = () => {
console.log("run");
};
return (
<div className={style.projectBox}>
{/* 123 */}
<div className={style.searchBox} onClick={() => run()}>
<IconButton
type="submit"
className={style.searchButton}
aria-label="search"
>
<SearchIcon className={style.searchIcon} />
</IconButton>
<InputBase
// className={classes.input}
className={style.searchInput}
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 className={style.projectlist}>
{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