增加了发票列表界面中的高级搜索功能

main
yang.yongquan 2022-12-27 14:06:04 +08:00
parent 62155de02d
commit 45818588e9
1 changed files with 70 additions and 36 deletions

View File

@ -1,4 +1,4 @@
import {Card, Dropdown, List,Menu,Input,Button,Radio,Divider} from "antd"; import {Card, Dropdown, List, Menu, Input, Button, Radio, Divider, DatePicker, Form, TimePicker, Select} from "antd";
import type {MenuProps} from 'antd'; import type {MenuProps} from 'antd';
import {Icon} from '@ant-design/compatible' import {Icon} from '@ant-design/compatible'
import {DownOutlined, UploadOutlined} from '@ant-design/icons'; import {DownOutlined, UploadOutlined} from '@ant-design/icons';
@ -8,9 +8,32 @@ 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";
import axiosInstance, {baseUrl} from "../../../utils/axiosInstance"; import axiosInstance, {baseUrl} from "../../../utils/axiosInstance";
import {Simulate} from "react-dom/test-utils";
import change = Simulate.change;
import {useNavigate} from "react-router-dom";
import {useAppDispatch} from "../../../models/hooks";
const {Meta} = Card; const {Meta} = Card;
const {Search} = Input; const {Search} = Input;
const {Option} = Select
let invoices: Array<Invoice> let invoices: Array<Invoice>
const {RangePicker} = DatePicker;
const formItemLayout = {
labelCol: {
xs: {span: 24},
sm: {span: 8},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
};
const config = {
rules: [{type: 'object' as const, required: false, message: 'Please select time!'}],
};
const rangeConfig = {
rules: [{type: 'array' as const, required: false, message: 'Please select time!'}],
};
class InvoiceSearch extends React.Component<any, any> { class InvoiceSearch extends React.Component<any, any> {
constructor(props: { handleSearchData: any; }) { constructor(props: { handleSearchData: any; }) {
@ -18,11 +41,16 @@ class InvoiceSearch extends React.Component<any, any> {
this.state = { this.state = {
activatedOption: "发票代码", activatedOption: "发票代码",
searchContent: '请在此输入', searchContent: '请在此输入',
complexEnabled:true,
invoiceSearchOption: new InvoiceSearchOption() invoiceSearchOption: new InvoiceSearchOption()
} }
this.onSearch('') this.onSearch('')
} }
onSearch = (value: string) => { onSearch = (value: string) => {
if(!this.state.complexEnabled)
this.state.invoiceSearchOption.clear()
console.log(this.state.invoiceSearchOption.toString())
if (this.state.activatedOption === "发票代码") { if (this.state.activatedOption === "发票代码") {
this.state.invoiceSearchOption.invoiceCode = value; this.state.invoiceSearchOption.invoiceCode = value;
} else { } else {
@ -47,6 +75,7 @@ class InvoiceSearch extends React.Component<any, any> {
//console.log(value) //console.log(value)
//this.props.handleSearchData(value) //this.props.handleSearchData(value)
} }
render() { render() {
const items: MenuProps['items'] = [ const items: MenuProps['items'] = [
@ -55,7 +84,8 @@ class InvoiceSearch extends React.Component<any, any> {
label: (<a className="simpleSearchOption" onClick={() => { label: (<a className="simpleSearchOption" onClick={() => {
this.state.invoiceSearchOption.clear(); this.state.invoiceSearchOption.clear();
this.setState({activatedOption: "发票代码"} this.setState({activatedOption: "发票代码"}
)}}> )
}}>
</a>) </a>)
}, },
@ -64,7 +94,8 @@ class InvoiceSearch extends React.Component<any, any> {
label: (<a className="simpleSearchOption" onClick={() => { label: (<a className="simpleSearchOption" onClick={() => {
this.state.invoiceSearchOption.clear(); this.state.invoiceSearchOption.clear();
this.setState({activatedOption: "发票编号"} this.setState({activatedOption: "发票编号"}
)}}> )
}}>
</a>) </a>)
} }
@ -135,6 +166,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);
@ -147,11 +179,13 @@ class InvoiceListView extends React.Component<any, any>{
pageSize: 20 pageSize: 20
} }
} }
handleInvoice(value: string) { handleInvoice(value: string) {
if (this.state.isNoOrCode == '1') if (this.state.isNoOrCode == '1')
this.setState({invoiceNo: value, invoiceCode: null}); this.setState({invoiceNo: value, invoiceCode: null});
else this.setState({invoiceNo: null, invoiceCode: value}) else this.setState({invoiceNo: null, invoiceCode: value})
} }
handleInvoicesContent = (value: Array<Invoice>) => { handleInvoicesContent = (value: Array<Invoice>) => {
console.log(value) console.log(value)
this.setState({invoices: value}) this.setState({invoices: value})