ball_admin/src/components/layout/layout.tsx

151 lines
3.6 KiB
TypeScript

import { Content, Header } from "antd/es/layout/layout";
import "./layout.less";
import { Menu } from "antd";
import { Footer } from "antd/lib/layout/layout";
import { Outlet, useLocation, useNavigate } from "react-router";
import { HomeTwoTone } from "@ant-design/icons";
import { inject, observer } from "mobx-react";
import { Store } from "antd/es/form/interface";
import { useEffect } from "react";
const LayOut = (props: Store) => {
const { usrStore } = props;
const nav = useNavigate();
const location = useLocation();
useEffect(() => {
console.log("layout ",usrStore.isNeedLogin);
if (usrStore.isNeedLogin) {
nav("/login");
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [usrStore.isNeedLogin]);
const items = [
{
key: "/admin/user",
label: `用户管理`,
children: [
{
key: "/admin/dep",
label: `部门管理`,
},
{
key: "/admin/user",
label: `用户管理`,
},
{
key: "/admin/teamMgmt",
label: `队伍属性管理`,
},
{
key: "/admin/persMgmt",
label: `个人身份管理`,
},
{
key: "/admin/community",
label: `社区管理`,
},
{
key: "/admin/grid",
label: `网格管理`,
},
{
key: "/admin/patrolBrigade",
label: `巡防大队`,
},
],
},
{
key: "/admin/archives/box",
label: `档案管理`,
},
{
key: "/admin/material",
label: `物资管理`,
children: [
{
key: "/admin/whse/whseMgmt",
label: `仓库管理`,
},
{
key: "/admin/materialMgmt",
label: `物资管理`,
},
],
},
{
key: "/admin/leaveApproval",
label: `请假审批`,
},
{
key: "/admin/political",
label: `政治法规`,
children: [
{
key: "/admin/politicalStudy",
label: `政治学习`,
},
{
key: `/admin/polRegulations`,
label: `政治法规管理`,
},
],
},
{
key: "/admin/task",
label: `任务管理`,
children: [
{ label: "处突任务", key: "/admin/emergency" },
{ label: "巡逻任务", key: "/admin/patrol" },
{ label: "训练任务", key: "/admin/training" },
],
},
{
key: "/admin/sys",
label: `系统管理`,
children: [
{ label: "系统设置", key: "/admin/sys/setting" },
{ label: "光荣牌审核", key: "/admin/sys/gp" },
],
},
];
return (
<div className="layout">
<Header
style={{
position: "sticky",
top: 0,
zIndex: 9,
width: "100%",
display: "flex",
alignItems: "center",
padding: "0 10px",
boxSizing: "border-box",
}}
>
<HomeTwoTone
onClick={() => nav("/")}
style={{ fontSize: "36px", marginRight: "10px" }}
/>
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={[location.pathname]}
items={items}
onClick={(e) => {
nav(e.key);
}}
style={{ flex: 1, minWidth: 0 }}
/>
</Header>
<Content style={{ padding: "0 20px" }}>
<Outlet />
</Content>
<Footer style={{ textAlign: "center" }}>
©{new Date().getFullYear()} Created
</Footer>
</div>
);
};
export default inject("usrStore")(observer(LayOut));