BigC
/
FinancialReimbursementSystem_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

完成首页导航

main
wuyize 2022-12-26 17:44:46 +08:00
parent 2b001a957e
commit b650eb0f5e
10 changed files with 135 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -3,7 +3,6 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@ant-design/compatible": "^5.1.1",
"@reduxjs/toolkit": "^1.9.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",

34
src/assets/icons.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
export const Logo=()=>(
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="32px" height="32px"
viewBox="0 0 512 512" style={{}} xmlSpace="preserve">
<path style={{fill: '#3C94D9'}} d="M351.9,53.2H101.8c-21.4,0-38.7,17.3-38.7,38.7v341.8c0,13.2,10.7,23.9,23.9,23.9c5,0,10-1.6,14.1-4.6
l42.3-30.7l37.8,27.4c1.6,1.2,3.9,1.2,5.5,0l37.8-27.4l38,27.6c1.6,1.2,3.7,1.2,5.3,0.1c-20-23.2-32.1-53.4-32.1-86.3
c0-73.1,59.3-132.4,132.4-132.4c7.7,0,15.2,0.7,22.5,1.9V91.9C390.6,70.6,373.3,53.2,351.9,53.2L351.9,53.2z M207.6,311.3h-62.1
c-12,0-21.8-9.7-21.8-21.8s9.7-21.8,21.8-21.8c0,0,0,0,0,0h62.1c12,0,21.8,9.7,21.8,21.8S219.6,311.3,207.6,311.3
C207.6,311.3,207.6,311.3,207.6,311.3z M283.2,229.8H145.5c-12,0-21.8-9.7-21.8-21.8c0-12,9.7-21.8,21.8-21.8c0,0,0,0,0,0h137.7
c12,0,21.8,9.7,21.8,21.8C305,220,295.2,229.8,283.2,229.8C283.2,229.8,283.2,229.8,283.2,229.8z M308.3,151.5H145.5
c-12,0-21.8-9.7-21.8-21.8c0-12,9.7-21.8,21.8-21.8c0,0,0,0,0,0h162.8c12,0,21.8,9.7,21.8,21.8C330.1,141.7,320.4,151.5,308.3,151.5
C308.3,151.5,308.3,151.5,308.3,151.5z"/>
<path style={{fill: '#2880D1'}} d="M368.1,269.2c-52.2,0-94.6,42.3-94.6,94.6s42.3,94.6,94.6,94.6s94.6-42.3,94.6-94.6S420.4,269.2,368.1,269.2z
M411.9,382.4c8.6,0,15.6,7,15.6,15.6s-7,15.6-15.6,15.6H384v13c0,8.6-7,15.6-15.6,15.6s-15.6-7-15.6-15.6v-13h-27.9
c-8.6,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6h27.9v-8.8h-27.9c-8.6,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6h7.8l-14.5-15.7
c-5.8-6.3-5.5-16.1,0.8-22c6.3-5.8,16.1-5.5,22,0.8l27.2,29.4l26.5-31.9c5.5-6.6,15.3-7.5,21.9-2c0,0,0,0,0,0
c6.6,5.5,7.5,15.3,2,21.9c0,0,0,0,0,0l-16.2,19.4h9.4c8.6,0,15.6,7,15.6,15.6s-7,15.6-15.6,15.6H384v8.8L411.9,382.4L411.9,382.4z"
/>
<path style={{fill: '#3C94D9'}} d="M273.5,363.8c0,26.1,10.6,49.7,27.6,66.8c7.1-5.5,13.9-11.3,20.5-17.4c-8.4-1.8-13.8-10.1-12-18.5
c1.5-7.2,7.9-12.3,15.2-12.3h26l1.9-2.3v-6.5H325c-8.6,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6h7.8l-14.5-15.7
c-5.8-6.3-5.5-16.1,0.8-22c6.3-5.8,16.1-5.5,22,0.8l27.2,29.4l26.5-31.9c1.9-2.3,4.2-3.8,6.8-4.7c2.7-6.6,5.2-13.3,7.5-20
c-12.8-6.1-26.8-9.3-41-9.3C315.9,269.2,273.5,311.6,273.5,363.8L273.5,363.8z"/>
<path style={{fill: '#579FDA'}} d="M283.2,229.8H145.5c-12,0-21.8-9.7-21.8-21.8c0-12,9.7-21.8,21.8-21.8c0,0,0,0,0,0h137.7
c10.2,0,18.8,7.1,21.1,16.6c9.7-19.8,17.5-40.7,23-62.5c-3.8,6.9-11.1,11.2-19,11.2H145.5c-12,0-21.8-9.7-21.8-21.8
c0-12,9.7-21.8,21.8-21.8c0,0,0,0,0,0h162.8c11.7,0,21.2,9.2,21.7,20.8c4.8-22.1,7.3-45,7.3-68.6c0-2.3-0.1-4.7-0.1-7H101.8
c-21.4,0-38.7,17.3-38.7,38.7v288.3c96.1-14.8,178.3-71.9,227-151.6C287.9,229.4,285.6,229.8,283.2,229.8L283.2,229.8z M207.6,311.3
h-62.1c-12,0-21.8-9.7-21.8-21.8s9.7-21.8,21.8-21.8c0,0,0,0,0,0h62.1c12,0,21.8,9.7,21.8,21.8S219.6,311.3,207.6,311.3
C207.6,311.3,207.6,311.3,207.6,311.3z"/>
<path style={{fill: '#76B1E4'}} d="M123.8,206.6c0.8-11.3,10.2-20.3,21.7-20.3h3.2c11.9-10.8,23.1-22.4,33.3-34.8h-36.5c-12,0-21.8-9.7-21.8-21.8
c0-12,9.7-21.8,21.8-21.8c0,0,0,0,0,0h66.8c10-17.3,18.5-35.6,25.2-54.7H101.8c-21.4,0-38.7,17.3-38.7,38.7v149.8
C84.7,232.2,105,220.4,123.8,206.6L123.8,206.6z"/>
</svg>
)

11
src/index.tsx
View File

@ -8,6 +8,7 @@ import {store, persistor} from './models/store';
import {RouterProvider} from "react-router-dom";
import router from "./router/router";
import {PersistGate} from 'redux-persist/integration/react'
import {ConfigProvider} from "antd";
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
@ -16,7 +17,17 @@ root.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<ConfigProvider theme={{
token: {
colorPrimary: "#1890ff",
colorSuccess: "#52c41a",
colorWarning: "#faad14",
colorInfo: "#1890ff",
wireframe: false
}
}}>
<RouterProvider router={router}/>
</ConfigProvider>
</PersistGate>
</Provider>
</React.StrictMode>

69
src/pages/HomeView.tsx
View File

@ -1,13 +1,46 @@
import React, {FC, useEffect} from 'react';
import { Button } from 'antd';
import {UploadOutlined, UserOutlined, VideoCameraOutlined} from '@ant-design/icons';
import {Layout, Menu, theme, Typography } from 'antd';
import {useAppSelector} from "../models/hooks";
import {getToken, store} from "../models/store";
import {useNavigate} from "react-router-dom";
import {Link, Outlet, useNavigate} from "react-router-dom";
import Icon from '@ant-design/icons';
import {Logo} from "../assets/icons";
const { Title } = Typography;
const {Header, Content, Footer, Sider} = Layout;
function HomeView() {
const token = useAppSelector(getToken);
const navigate = useNavigate();
console.log(store.getState())
let items = [{
key: "/invoice/mine",
//icon: React.createElement(UserOutlined),
label: <Link to="/invoice/mine">我的发票</Link>
}, {
key: "/reimbursement/mine",
//icon: React.createElement(UserOutlined),
label: <Link to="/reimbursement/mine">我的报销</Link>,
},{
key: "/invoice/management",
//icon: React.createElement(UserOutlined),
label: <Link to="/reimbursement/mine">发票管理</Link>,
},{
key: "/reimbursement/management",
//icon: React.createElement(UserOutlined),
label: <Link to="/reimbursement/mine">报销审批</Link>,
},{
key: "/stat",
//icon: React.createElement(UserOutlined),
label: <Link to="/reimbursement/mine">财务统计</Link>,
}]
const {
token: { colorBgContainer, colorPrimary },
} = theme.useToken();
useEffect(() => {
if (token.accessToken === '') {
console.log("redirect")
@ -15,9 +48,37 @@ function HomeView() {
}
}, []);
return (
<div className="HomeView">
<p>{token.accessToken}</p>
<Layout style={{height: '100%'}}>
<Sider
width={208}
style={{ background: colorBgContainer }}
breakpoint="lg"
collapsedWidth="0"
onBreakpoint={(broken) => {
console.log(broken);
}}
onCollapse={(collapsed, type) => {
console.log(collapsed, type);
}}
>
<div style={{height: '32px',margin: '17px 0 17px 0', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
<Icon component={Logo}/>
<span style={{color: colorPrimary, fontSize: '16px', fontWeight: 'bold', marginLeft: '4px'}}>智能财务报销系统</span>
</div>
<Menu
mode="inline"
defaultSelectedKeys={['/invoice/mine']}
items={items}
/>
</Sider>
<Layout>
<Header style={{height: '48px', padding: 0, background: colorBgContainer }}/>
<Content style={{margin: '24px 16px 0'}}>
<Outlet />
</Content>
<Footer style={{textAlign: 'center'}}></Footer>
</Layout>
</Layout>
)
}

0
src/pages/Invoice/InvoiceListView.css → src/pages/Invoice/mine/InvoiceListView.css
View File

4
src/pages/Invoice/InvoiceListView.tsx → src/pages/Invoice/mine/InvoiceListView.tsx
View File

@ -1,9 +1,9 @@
import {Card, Dropdown, List,Menu,Input,Button,Radio,Divider} from "antd";
import type { MenuProps } from 'antd';
import { Icon } from '@ant-design/compatible'
//import { Icon } from '@ant-design/compatible'
import { DownOutlined,UploadOutlined } from '@ant-design/icons';
import React, {ReactElement, JSXElementConstructor, ReactFragment, ReactPortal,useState } from "react";
import {Invoice} from "../../models/Staff"
import {Invoice} from "../../../models/Staff"
import { Space, Typography } from 'antd';
import {SizeType} from "antd/es/config-provider/SizeContext";
const {Meta} = Card;

0
src/pages/Login/LoginView.css → src/pages/login/LoginView.css
View File

0
src/pages/Login/LoginView.tsx → src/pages/login/LoginView.tsx
View File

6
src/pages/reimbursement/mine/MyReimbursement.tsx Normal file
View File

@ -0,0 +1,6 @@
function MyReimbursement() {
return(
<div>我的报销</div>
)
}
export default MyReimbursement

17
src/router/router.tsx
View File

@ -1,7 +1,8 @@
import {createBrowserRouter, redirect} from "react-router-dom";
import LoginView from "../pages/Login/LoginView";
import LoginView from "../pages/login/LoginView";
import HomeView from "../pages/HomeView";
import InvoiceListView from "../pages/Invoice/InvoiceListView";
import InvoiceListView from "../pages/Invoice/mine/InvoiceListView";
import MyReimbursement from "../pages/reimbursement/mine/MyReimbursement";
const router = createBrowserRouter([
{
@ -11,11 +12,17 @@ const router = createBrowserRouter([
{
path: "/",
element: <HomeView/>,
children: [
{
path: "invoice/mine",
element: <InvoiceListView />,
},
{
path: "/list",
element: <InvoiceListView/>,
}
path: "reimbursement/mine",
element: <MyReimbursement />,
},
],
},
]);
export default router