解决了一些问题

src/models/Staff.ts

@@ -8,7 +8,7 @@ export interface Token {
 }
 
 export interface Staff {
-    managingDepartment: Department;
+    managingDepartment: Department|null;
     staffDepartments: Department[];
     staffName: string;
 }

src/models/store.ts

@@ -28,8 +28,7 @@ const staffSlice = createSlice({
     name: 'staff',
     initialState: {
         staffName: "",
-        managingDepartment: { departmentId: 0,
+        managingDepartment: null as Department|null,
-            departmentName: ''},
         staffDepartments: [{ departmentId: 0,
             departmentName: ''}]
     },

src/pages/HomeView.tsx

@@ -18,8 +18,8 @@ function HeaderBar(props: any) {
         token: {colorBgContainer, colorPrimary},
     } = theme.useToken();
 
-    const token:Token = useAppSelector(getToken);
+    const token: Token = useAppSelector(getToken);
-    const staff:Staff = useAppSelector(getStaff);
+    const staff: Staff = useAppSelector(getStaff);
     const dispatch = useAppDispatch()
     const navigate = useNavigate()
 
@@ -104,13 +104,14 @@ function HeaderBar(props: any) {
     )
 }
 
-function MyMenu(props: any) {
+function MainMenu(props: any) {
     console.log(props)
     if (props.defaultSelectedKeys[0] === '')
         return null
     else
         return (
             <Menu
+                style={{height: '100%'}}
                 mode="inline"
                 defaultSelectedKeys={props.defaultSelectedKeys}
                 items={props.items}
@@ -160,7 +161,7 @@ function HomeView() {
             method: 'get'
         }).then(response => {
             console.log(response.data)
-            const staff:Staff = response.data
+            const staff: Staff = response.data
             dispatch(setStaff(staff))
 
             if (location.pathname === '/')
@@ -194,7 +195,7 @@ function HomeView() {
         <Layout style={{height: '100%'}}>
             <Sider
                 width={208}
-                style={{background: colorBgContainer}}
+                style={{background: colorBgContainer, boxShadow: '9px 0px 28px 0px rgba(0, 0, 0, 0.05)'}}
                 breakpoint="lg"
                 collapsedWidth="0"
                 onBreakpoint={(broken) => {
@@ -204,12 +205,14 @@ function HomeView() {
                     console.log(collapsed, type);
                 }}
             >
-                <div style={{
+                <div
-                    height: '32px',
+                    style={{
-                    margin: '17px 0 17px 0',
+                        height: '66px',
+                        padding: '17px 0 17px 0',
                         display: 'flex',
                         justifyContent: 'center',
-                    alignItems: 'center'
+                        alignItems: 'center',
+                        borderInlineEnd: '1px solid rgba(5, 5, 5, 0.06)'
                     }}>
                     <Icon component={Logo}/>
                     <span style={{
@@ -219,14 +222,14 @@ function HomeView() {
                         marginLeft: '4px'
                     }}>智能财务报销系统</span>
                 </div>
-                <MyMenu items={menuItems} defaultSelectedKeys={defaultSelectedKeys}/>
+                <MainMenu style={{height: '100%'}} items={menuItems} defaultSelectedKeys={defaultSelectedKeys}/>
             </Sider>
             <Layout>
                 <HeaderBar/>
-                <Content style={{margin: '0'}}>
+                <Content style={{margin: '0', overflowY: "auto"}}>
-                    <Outlet />
+                    <Outlet/>
                 </Content>
-                <Footer style={{textAlign: 'center'}}></Footer>
+                {/*<Footer style={{textAlign: 'center'}}></Footer>*/}
             </Layout>
         </Layout>
     )

src/pages/Invoice/mine/InvoiceListView.tsx

@@ -13,11 +13,11 @@ import {
     TimePicker,
     Select,
     Checkbox,
-    Pagination
+    Pagination, theme
 } from "antd";
 import type {MenuProps, PaginationProps} from 'antd';
 import {DownOutlined, UploadOutlined} from '@ant-design/icons';
-import React, {ReactElement, JSXElementConstructor, ReactFragment, ReactPortal, useState} from "react";
+import React, {ReactElement, JSXElementConstructor, ReactFragment, ReactPortal, useState, useEffect} from "react";
 import {InvoiceCommit, InvoiceSearchOption} from "../../../models/Staff"
 import {Space, Typography} from 'antd';
 import {SizeType} from "antd/es/config-provider/SizeContext";
@@ -25,11 +25,12 @@ import axios from "axios";
 import axiosInstance, {baseUrl} from "../../../utils/axiosInstance";
 import {Simulate} from "react-dom/test-utils";
 import change = Simulate.change;
-import {useNavigate} from "react-router-dom";
+import {useNavigate, useSearchParams} from "react-router-dom";
 import {useAppDispatch} from "../../../models/hooks";
 import InvoiceUploadView from "./InvoiceUploadView";
 import {Invoice, invoiceTypeNameMap} from "../../../models/Invoice";
 
+
 const {Meta} = Card;
 const {Search} = Input;
 const {Option} = Select
@@ -52,46 +53,21 @@ const rangeConfig = {
     rules: [{type: 'array' as const, required: false, message: 'Please select time!'}],
 };
 
-class InvoiceSearch extends React.Component<any, any> {
+function InvoiceSearch(props: { handleSearchData: any; }) {
-    constructor(props: { handleSearchData: any; }) {
+    const {
-        super(props);
+        token: {colorBgContainer, colorPrimary},
-        this.state = {
+    } = theme.useToken();
-            activatedOption: "发票代码",
-            searchContent: '请在此输入',
-            complexEnabled: false,
-            invoiceSearchOption: new InvoiceSearchOption(),
-            isUploadModalOpen: false
-        }
-    }
 
-    onSearch = (value: string) => {
+    const [activatedOption, setActivatedOption] = useState('发票代码')
-        if (!this.state.complexEnabled)
+    const [complexEnabled, setComplexEnabled] = useState(false)
-            this.state.invoiceSearchOption.clear()
+    const [invoiceSearchOption, setInvoiceSearchOption] = useState(new InvoiceSearchOption())
-        console.log(this.state.invoiceSearchOption)
-        if (this.state.activatedOption === "发票代码") {
-            this.state.invoiceSearchOption.invoiceCode = value;
-            this.state.invoiceSearchOption.invoiceNo = null;
-        } else {
-            this.state.invoiceSearchOption.invoiceNo = value;
-            this.state.invoiceSearchOption.invoiceCode = null;
-        }
-
-        const {handleSearchData} = this.props
-        handleSearchData(this.state.invoiceSearchOption)
-
-    }
-    showUploadModal = () => {
-        this.setState({ isUploadModalOpen: true})
-    }
-    render() {
 
     const items: MenuProps['items'] = [
         {
             key: '1',
             label: (<a className="simpleSearchOption" onClick={() => {
-                    this.state.invoiceSearchOption.clear();
+                invoiceSearchOption.clear();
-                    this.setState({activatedOption: "发票代码"}
+                setActivatedOption("发票代码")
-                    )
             }}>
                 发票代码
             </a>)
@@ -99,39 +75,57 @@ class InvoiceSearch extends React.Component<any, any> {
         {
             key: '2',
             label: (<a className="simpleSearchOption" onClick={() => {
-                    this.state.invoiceSearchOption.clear();
+                invoiceSearchOption.clear();
-                    this.setState({activatedOption: "发票编号"}
+                setActivatedOption("发票编号")
-                    )
+
             }}>
                 发票编号
             </a>)
         }
     ];
     const onValuesChange = (changedValues: any, allValues: any) => {
-            this.state.invoiceSearchOption.clear()
+        invoiceSearchOption.clear()
 
         console.log(allValues)
         if (allValues['upload-time-picker'] != null && allValues['upload-time-picker'] !== undefined) {
-                this.state.invoiceSearchOption.invoiceUploadTimeStart = allValues['upload-time-picker'][0].format('YYYY-MM-DDtHH:mm:ss')
+            invoiceSearchOption.invoiceUploadTimeStart = allValues['upload-time-picker'][0].format('YYYY-MM-DDtHH:mm:ss')
-                this.state.invoiceSearchOption.invoiceUploadTimeEnd = allValues['upload-time-picker'][1].format('YYYY-MM-DDtHH:mm:ss')
+            invoiceSearchOption.invoiceUploadTimeEnd = allValues['upload-time-picker'][1].format('YYYY-MM-DDtHH:mm:ss')
         }
         if (allValues['invoice-time-picker'] !== null && allValues['invoice-time-picker'] !== undefined) {
-                this.state.invoiceSearchOption.invoiceDateStart = allValues['invoice-time-picker'][0].format('YYYY-MM-DD')
+            invoiceSearchOption.invoiceDateStart = allValues['invoice-time-picker'][0].format('YYYY-MM-DD')
-                this.state.invoiceSearchOption.invoiceDateEnd = allValues['invoice-time-picker'][1].format('YYYY-MM-DD')
+            invoiceSearchOption.invoiceDateEnd = allValues['invoice-time-picker'][1].format('YYYY-MM-DD')
         }
         if (allValues['invoice-state'] !== "全部") {
-                this.state.invoiceSearchOption.invoiceState = allValues['invoice-state']
+            invoiceSearchOption.invoiceState = allValues['invoice-state']
         }
         if (allValues['invoice-kind'] !== "全部") {
-                this.state.invoiceSearchOption.invoiceKind = allValues['invoice-kind']
+           invoiceSearchOption.invoiceKind = allValues['invoice-kind']
         }
         if (allValues['invoice-uploader'] !== null && allValues['invoice-uploader'] !== undefined && allValues['invoice-uploader'].trim() !== "") {
-                this.state.invoiceSearchOption.invoiceUploader = allValues['invoice-uploader'].trim()
+            invoiceSearchOption.invoiceUploader = allValues['invoice-uploader'].trim()
         }
     }
+
+    const onSearch = (value: string) => {
+        if (!complexEnabled)
+            invoiceSearchOption.clear()
+        console.log(invoiceSearchOption)
+        if (activatedOption === "发票代码") {
+            invoiceSearchOption.invoiceCode = value;
+            invoiceSearchOption.invoiceNo = null;
+        } else {
+            invoiceSearchOption.invoiceNo = value;
+            invoiceSearchOption.invoiceCode = null;
+        }
+
+        const {handleSearchData} = props
+        handleSearchData(invoiceSearchOption)
+
+    }
+
     return (
         <div className="headBar">
-                <div className="simpleSearchBar" style={{display: "flex", justifyContent: "space-evenly"}}>
+            <div className="simpleSearchBar" style={{height: '72px', padding: '30px',display: "flex",alignItems: 'center', justifyContent: "space-between",backgroundColor: colorBgContainer}}>
                 <Search className="simpleSearch"
                         addonBefore={<Dropdown
                             menu={{
@@ -142,24 +136,23 @@ class InvoiceSearch extends React.Component<any, any> {
                         >
                             <Typography.Link>
                                 <Space>
-                                        {this.state.activatedOption}
+                                    {activatedOption}
                                     <DownOutlined/>
                                 </Space>
                             </Typography.Link>
                         </Dropdown>}
-                            placeholder={this.state.searchContent}
+                        placeholder={'请在此输入'}
                         allowClear
-                            onSearch={(value) => this.onSearch(value)}
+                        onSearch={(value) => onSearch(value)}
                         style={{width: 304}}
                         enterButton
                 />
                 <Checkbox onChange={(e) => {
-                        this.setState({complexEnabled: e.target.checked})
+                    setComplexEnabled(e.target.checked)
-
                 }}>高级搜索</Checkbox>
                 <InvoiceUploadView/>
             </div>
-                {this.state.complexEnabled&&
+            {complexEnabled &&
                 <div className="complexSearchBar" style={{display: "flex"}}>
                     <Form name="complexOption" {...formItemLayout} onValuesChange={onValuesChange}>
                         <Row>
@@ -207,15 +200,13 @@ class InvoiceSearch extends React.Component<any, any> {
                 </div>}
         </div>
     )
-
-    }
 }
 
 class InvoiceItem extends React.Component<any, any> {
     constructor(props: { invoice: Invoice }) {
         super(props);
         this.state = {
-            invoiceThumbnailUri: baseUrl+props.invoice.invoiceThumbnailUri,
+            invoiceThumbnailUri: baseUrl + props.invoice.invoiceThumbnailUri,
             invoiceKind: props.invoice.invoiceKind,
             invoiceAmount: props.invoice.invoiceAmount,
             invoiceDate: props.invoice.invoiceDate,
@@ -249,89 +240,76 @@ class InvoiceItem extends React.Component<any, any> {
 }
 
 
-class InvoiceListView extends React.Component<any, any> {
+function InvoiceListView(props: {}) {
-    constructor(props: {}) {
+    const [totalNum, setTotalNum] = useState(0)
-        super(props);
+    const [invoices, setInvoices] = useState([])
-        this.state = {
+    const [search, setSearch] = useSearchParams()
-            isNoOrCode: '1',
-            invoices: [],
-            invoiceNo: null,
-            invoiceCode: null,
-            invoiceSearchOption: new InvoiceSearchOption(),
-            pageNum: 1,
-            pageSize: 20,
-            totalNum: 2,
-            PaginationKey: -2
-        }
-    }
 
-    componentDidMount(){
+    const [invoiceSearchOption, setInvoiceSearchOption] = useState(new InvoiceSearchOption())
-        this.searchInvoiceContent()
-    }
 
-    onChange = (pageCurrentNum: Number, pageCurrentSize: Number) => {
+    const navigate = useNavigate()
-        console.log(pageCurrentNum, pageCurrentSize)
-        this.setState({pageNum: pageCurrentNum, pageSize: pageCurrentSize})
-        console.log(this.state.pageNum, this.state.pageSize)
-        this.searchInvoiceContent()
-    }
 
-    handleInvoiceSearchInfo= (invoiceSearch: InvoiceSearchOption) => {
+    const handleInvoiceSearchInfo = (invoiceSearch: InvoiceSearchOption) => {
-        this.setState({invoiceSearchOption: invoiceSearch})
+        setInvoiceSearchOption(invoiceSearch)
-        console.log(this.state.invoiceSearchOption)
+        searchInvoiceContent()
-        this.searchInvoiceContent()
     }
-
+    const searchInvoiceContent = () => {
-    searchInvoiceContent = () => {
+        let params: any = invoiceSearchOption
-        let params = this.state.invoiceSearchOption
         Object.keys(params).forEach(key => {
             if (params[key] != null && params[key] !== undefined && params[key] === "") {
                 params[key] = null
             }
         })
-        params['pageNum'] = this.state.pageNum-1
+        if (search.get('currentPage'))
-        params['pageSize'] = this.state.pageSize
+            params.pageNum = Number(search.get('currentPage')) - 1
+        else
+            params.pageNum = 0
+        if (search.get('pageSize'))
+            params.pageSize = Number(search.get('pageSize'))
+        else
+            params.pageSize = 10
         axiosInstance({
             url: 'common/invoice',
             method: 'get',
             params: params
         }).then(response => {
             console.log(response.data)
-            this.handleInvoicesTotalNum(response.data.total)
+            setTotalNum(response.data.total)
-            this.handleInvoicesContent(response.data.records)
+            setInvoices(response.data.records)
         }).catch(function (error) {
             console.log(error)
         })
     }
-
+    const onChange = (pageCurrentNum: Number, pageCurrentSize: Number) => {
-    handleInvoicesTotalNum(value: Number) {
+        console.log(pageCurrentNum, pageCurrentSize)
-        this.setState({totalNum: value, PaginationKey: -value})
+        navigate('/invoice/mine?currentPage=' + pageCurrentNum + '&pageSize=' + pageCurrentSize)
     }
 
-    handleInvoicesContent = (value: Array<Invoice>) => {
+    useEffect(() => {
-        console.log(value)
+        console.log(search.get('currentPage'))
-        this.setState({invoices: value})
+        console.log(search.get('pageSize'))
-    }
+        searchInvoiceContent()
+    }, [search]);
 
-
-    render() {
     return (
         <div style={{}}>
-                <InvoiceSearch handleSearchData={this.handleInvoiceSearchInfo}/>
+            <InvoiceSearch handleSearchData={handleInvoiceSearchInfo}/>
-                <div style={{display: "flex", flexWrap: "wrap"}}>
+            <div style={{padding:26,display:"flex", flexDirection: "column", alignItems: "flex-end"}}>
-                    {this.state.invoices.map((item: Invoice, index:number) =>
+                <div style={{display: "flex", flexWrap: "wrap", justifyContent:'center', width: '100%'}}>
+                    {invoices.map((item: Invoice, index: number) =>
                         <InvoiceItem invoice={item} key={index}/>
                     )}
-
                 </div>
-                <Pagination style={{
+                <Pagination showSizeChanger
-                    position: "fixed",
+                            showQuickJumper
-                    bottom: 20,
+                            showTotal={(total) => `共 ${total} 项`}
-                }} key={this.state.PaginationKey} showQuickJumper defaultCurrent={1} total={this.state.totalNum} onChange={this.onChange}/>
+                            current={Number(search.get('currentPage')?search.get('currentPage'):1)}
+                            pageSize={Number(search.get('pageSize')?search.get('pageSize'):10)}
+                            total={totalNum} onChange={onChange}/>
+            </div>
+
         </div>
 
     )
-    }
 }
-
 export default InvoiceListView

src/pages/Invoice/mine/InvoiceUploadView.tsx

@@ -99,22 +99,24 @@ function UpLoadModal(props: any) {
 }
 
 function FormModal(props: any) {
-    const [open, setOpen] = useState(false)
+    //const [open, setOpen] = useState(false)
     const [loading, setLoading] = useState(false)
     const [invoice, setInvoice] = useState({})
     const [formItems, setFormItems] = useState(undefined)
     const [form] = Form.useForm();
     useEffect(() => {
-        setOpen(props.open)
+        //setOpen(props.open)
         console.log(props.invoiceIdentifyResponse)
         let i = {...props.invoiceIdentifyResponse}
         setInvoice(i)
         refreshFormItems(props.invoiceIdentifyResponse?.invoiceKind)
+        //TODO: 重置表单
         form.setFieldsValue(i)
 
     }, [props]);
     const handleCancel = () => {
-        setOpen(false);
+        props.onClose()
+        //setOpen(false);
     };
     const submit = () => {
         setLoading(true)
@@ -134,7 +136,8 @@ function FormModal(props: any) {
         }).then(response => {
             console.log(response.data)
             setLoading(false)
-            setOpen(false)
+            props.onClose()
+            //setOpen(false)
         }).catch(function (error) {
             console.log(error)
             setLoading(false)
@@ -202,7 +205,7 @@ function FormModal(props: any) {
 
     return (
         <Modal
-            open={open}
+            open={props.open}
             title="提交发票"
             onOk={submit}
             onCancel={handleCancel}
@@ -266,17 +269,20 @@ class InvoiceUploadView extends React.Component<any, any> {
         this.setState({uploadModalOpen: false, formModalOpen: true, invoiceIdentifyResponse: response})
     }
 
+    handleClose = () => {
+        this.setState({formModalOpen:false})
+    }
+
     render() {
 
         // @ts-ignore
         return (
             <>
-                <Button onClick={this.showUploadView} className="uploadButton" type="primary" icon={<UploadOutlined/>}
+                <Button onClick={this.showUploadView} className="uploadButton" type="primary" icon={<UploadOutlined/>}>
-                        size="large">
                     上传
                 </Button>
                 <UpLoadModal open={this.state.uploadModalOpen} nextStep={this.handleNextStep}/>
-                <FormModal open={this.state.formModalOpen}
+                <FormModal open={this.state.formModalOpen} onClose={this.handleClose}
                            invoiceIdentifyResponse={this.state.invoiceIdentifyResponse}/>
             </>);