增加了发票界面的分页功能
parent
a8c6fff843
commit
173c67e166
|
@ -12,12 +12,13 @@ import {
|
||||||
Form,
|
Form,
|
||||||
TimePicker,
|
TimePicker,
|
||||||
Select,
|
Select,
|
||||||
Checkbox
|
Checkbox,
|
||||||
|
Pagination
|
||||||
} from "antd";
|
} from "antd";
|
||||||
import type {MenuProps} from 'antd';
|
import type {MenuProps, PaginationProps} from 'antd';
|
||||||
import {DownOutlined, UploadOutlined} from '@ant-design/icons';
|
import {DownOutlined, UploadOutlined} from '@ant-design/icons';
|
||||||
import React, {ReactElement, JSXElementConstructor, ReactFragment, ReactPortal, useState} from "react";
|
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 {Space, Typography} from 'antd';
|
||||||
import {SizeType} from "antd/es/config-provider/SizeContext";
|
import {SizeType} from "antd/es/config-provider/SizeContext";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
@ -57,10 +58,7 @@ class InvoiceSearch extends React.Component<any, any> {
|
||||||
searchContent: '请在此输入',
|
searchContent: '请在此输入',
|
||||||
complexEnabled: false,
|
complexEnabled: false,
|
||||||
invoiceSearchOption: new InvoiceSearchOption(),
|
invoiceSearchOption: new InvoiceSearchOption(),
|
||||||
pageSize: 20,
|
|
||||||
pageNum: 0
|
|
||||||
}
|
}
|
||||||
this.onSearch('')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onSearch = (value: string) => {
|
onSearch = (value: string) => {
|
||||||
|
@ -74,26 +72,20 @@ class InvoiceSearch extends React.Component<any, any> {
|
||||||
this.state.invoiceSearchOption.invoiceNo = value;
|
this.state.invoiceSearchOption.invoiceNo = value;
|
||||||
this.state.invoiceSearchOption.invoiceCode = null;
|
this.state.invoiceSearchOption.invoiceCode = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const {handleSearchData} = this.props
|
|
||||||
//const dispatch = useAppDispatch();
|
//const dispatch = useAppDispatch();
|
||||||
//const navigate = useNavigate();
|
//const navigate = useNavigate();
|
||||||
let params = this.state.invoiceSearchOption
|
const {handleSearchData} = this.props
|
||||||
Object.keys(params).forEach(key => {
|
handleSearchData(this.state.invoiceSearchOption)
|
||||||
if (params[key] != null && params[key] !== undefined && params[key] === "") {
|
// axiosInstance({
|
||||||
params[key] = null
|
// url: 'common/invoice/list',
|
||||||
}
|
// method: 'get',
|
||||||
})
|
// params: params
|
||||||
axiosInstance({
|
// }).then(response => {
|
||||||
url: 'common/invoice/list',
|
// console.log(response.data)
|
||||||
method: 'get',
|
// handleSearchData(response.data.records)
|
||||||
params: params
|
// }).catch(function (error) {
|
||||||
}).then(response => {
|
// console.log(error)
|
||||||
console.log(response.data)
|
// })
|
||||||
handleSearchData(response.data.records)
|
|
||||||
}).catch(function (error) {
|
|
||||||
console.log(error)
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -262,6 +254,7 @@ class InvoiceItem extends React.Component<any, any> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
class InvoiceListView extends React.Component<any, any> {
|
class InvoiceListView extends React.Component<any, any> {
|
||||||
constructor(props: {}) {
|
constructor(props: {}) {
|
||||||
super(props);
|
super(props);
|
||||||
|
@ -270,15 +263,52 @@ class InvoiceListView extends React.Component<any, any> {
|
||||||
invoices: [],
|
invoices: [],
|
||||||
invoiceNo: null,
|
invoiceNo: null,
|
||||||
invoiceCode: null,
|
invoiceCode: null,
|
||||||
pageNum: 0,
|
invoiceSearchOption: new InvoiceSearchOption(),
|
||||||
pageSize: 20
|
pageNum: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
totalNum: 2,
|
||||||
|
PaginationKey: -23
|
||||||
}
|
}
|
||||||
|
this.searchInvoiceContent()
|
||||||
}
|
}
|
||||||
|
|
||||||
handleInvoice(value: string) {
|
onChange = (pageCurrentNum: Number, pageCurrentSize: Number) => {
|
||||||
if (this.state.isNoOrCode == '1')
|
console.log(pageCurrentNum, pageCurrentSize)
|
||||||
this.setState({invoiceNo: value, invoiceCode: null});
|
this.setState({pageNum: pageCurrentNum, pageSize: pageCurrentSize})
|
||||||
else this.setState({invoiceNo: null, invoiceCode: value})
|
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>) => {
|
handleInvoicesContent = (value: Array<Invoice>) => {
|
||||||
|
@ -286,17 +316,27 @@ class InvoiceListView extends React.Component<any, any> {
|
||||||
this.setState({invoices: value})
|
this.setState({invoices: value})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div style={{}}>
|
<div style={{}}>
|
||||||
<InvoiceSearch handleSearchData={this.handleInvoicesContent}/>
|
<InvoiceSearch handleSearchData={this.handleInvoiceSearchInfo}/>
|
||||||
<div style={{display: "flex", flexWrap: "wrap", backgroundColor: "lightgrey"}}>
|
<div style={{display: "flex", flexWrap: "wrap", backgroundColor: "lightgrey"}}>
|
||||||
{this.state.invoices.map((item: Invoice) =>
|
{this.state.invoices.map((item: Invoice) =>
|
||||||
<InvoiceItem invoice={item}/>
|
<InvoiceItem invoice={item}/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue