增加了发票界面的分页功能
parent
a8c6fff843
commit
173c67e166
|
@ -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>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue