增加了发票界面的分页功能

src/pages/Invoice/mine/InvoiceListView.tsx

@@ -12,12 +12,13 @@ import {
     Form,
     TimePicker,
     Select,
-    Checkbox
+    Checkbox,
+    Pagination
 } from "antd";
-import type {MenuProps} 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 {Invoice, InvoiceSearchOption} from "../../../models/Staff"
+import {Invoice, InvoiceCommit, InvoiceSearchOption} from "../../../models/Staff"
 import {Space, Typography} from 'antd';
 import {SizeType} from "antd/es/config-provider/SizeContext";
 import axios from "axios";
@@ -57,10 +58,7 @@ class InvoiceSearch extends React.Component<any, any> {
             searchContent: '请在此输入',
             complexEnabled: false,
             invoiceSearchOption: new InvoiceSearchOption(),
-            pageSize: 20,
-            pageNum: 0
         }
-        this.onSearch('')
     }
 
     onSearch = (value: string) => {
@@ -74,26 +72,20 @@ class InvoiceSearch extends React.Component<any, any> {
             this.state.invoiceSearchOption.invoiceNo = value;
             this.state.invoiceSearchOption.invoiceCode = null;
         }
-
-        const {handleSearchData} = this.props
         //const dispatch = useAppDispatch();
         //const navigate = useNavigate();
-        let params = this.state.invoiceSearchOption
-        Object.keys(params).forEach(key => {
-            if (params[key] != null && params[key] !== undefined && params[key] === "") {
-                params[key] = null
-            }
-        })
-        axiosInstance({
-            url: 'common/invoice/list',
-            method: 'get',
-            params: params
-        }).then(response => {
-            console.log(response.data)
-            handleSearchData(response.data.records)
-        }).catch(function (error) {
-            console.log(error)
-        })
+        const {handleSearchData} = this.props
+        handleSearchData(this.state.invoiceSearchOption)
+        // axiosInstance({
+        //     url: 'common/invoice/list',
+        //     method: 'get',
+        //     params: params
+        // }).then(response => {
+        //     console.log(response.data)
+        //     handleSearchData(response.data.records)
+        // }).catch(function (error) {
+        //     console.log(error)
+        // })
     }
 
     render() {
@@ -262,6 +254,7 @@ class InvoiceItem extends React.Component<any, any> {
     }
 }
 
+
 class InvoiceListView extends React.Component<any, any> {
     constructor(props: {}) {
         super(props);
@@ -270,15 +263,52 @@ class InvoiceListView extends React.Component<any, any> {
             invoices: [],
             invoiceNo: null,
             invoiceCode: null,
-            pageNum: 0,
-            pageSize: 20
+            invoiceSearchOption: new InvoiceSearchOption(),
+            pageNum: 1,
+            pageSize: 20,
+            totalNum: 2,
+            PaginationKey: -23
         }
+        this.searchInvoiceContent()
     }
 
-    handleInvoice(value: string) {
-        if (this.state.isNoOrCode == '1')
-            this.setState({invoiceNo: value, invoiceCode: null});
-        else this.setState({invoiceNo: null, invoiceCode: value})
+    onChange = (pageCurrentNum: Number, pageCurrentSize: Number) => {
+        console.log(pageCurrentNum, pageCurrentSize)
+        this.setState({pageNum: pageCurrentNum, pageSize: pageCurrentSize})
+        console.log(this.state.pageNum, this.state.pageSize)
+        this.searchInvoiceContent()
+    }
+
+    handleInvoiceSearchInfo= (invoiceSearch: InvoiceSearchOption) => {
+        this.setState({invoiceSearchOption: invoiceSearch})
+        console.log(this.state.invoiceSearchOption)
+        this.searchInvoiceContent()
+    }
+
+    searchInvoiceContent = () => {
+        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
+        params['pageSize'] = this.state.pageSize
+        axiosInstance({
+            url: 'common/invoice/list',
+            method: 'get',
+            params: params
+        }).then(response => {
+            console.log(response.data)
+            this.handleInvoicesTotalNum(response.data.total)
+            this.handleInvoicesContent(response.data.records)
+        }).catch(function (error) {
+            console.log(error)
+        })
+    }
+
+    handleInvoicesTotalNum(value: Number) {
+        this.setState({totalNum: Number, PaginationKey: -Number})
     }
 
     handleInvoicesContent = (value: Array<Invoice>) => {
@@ -286,17 +316,27 @@ class InvoiceListView extends React.Component<any, any> {
         this.setState({invoices: value})
     }
 
+
     render() {
         return (
             <div style={{}}>
-                <InvoiceSearch handleSearchData={this.handleInvoicesContent}/>
+                <InvoiceSearch handleSearchData={this.handleInvoiceSearchInfo}/>
                 <div style={{display: "flex", flexWrap: "wrap", backgroundColor: "lightgrey"}}>
                     {this.state.invoices.map((item: Invoice) =>
                         <InvoiceItem invoice={item}/>
                     )}
 
                 </div>
+                <Pagination style={{
+                    position: "fixed",
+                    bottom: 20,
+                }} showQuickJumper defaultCurrent={1} total={this.state.totalNum} onChange={this.onChange} />
+                <Pagination style={{
+                    position: "fixed",
+                    bottom: 20,
+                }} key={this.state.PaginationKey} showQuickJumper defaultCurrent={1} total={this.state.totalNum} onChange={this.onChange}/>
             </div>
+
         )
     }
 }