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

main
yang.yongquan 2022-12-27 22:02:51 +08:00
parent a8c6fff843
commit 173c67e166
1 changed files with 71 additions and 31 deletions

View File

@ -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>
)
}
}