修正了高级搜索,需要美工

main
白封羽 2022-12-27 15:37:41 +08:00
parent 7f31fb0fa0
commit 0b96a9cf34
2 changed files with 100 additions and 89 deletions

View File

@ -46,18 +46,9 @@ export class InvoiceSearchOption{
pageNum:number
pageSize:number
constructor(){
this.invoiceNo=null
this.invoiceCode=null
this.invoiceUploadTimeStart=null
this.invoiceUploadTimeEnd=null
this.invoiceState=null
this.invoiceKind=null
this.invoiceDateStart=null
this.invoiceDateEnd=null
this.invoiceNote=null
this.invoiceUploader=null
this.pageNum=0
this.pageSize=20
this.clear()
}
clear(){
this.invoiceNo=null
@ -74,18 +65,18 @@ export class InvoiceSearchOption{
this.pageSize=20
}
toString(){
let res="pageNum="+this.pageNum+"&pageSize="+this.pageSize
res+=(this.invoiceNo===undefined||this.invoiceNo===null||this.invoiceNo===""?"":("&invoiceNo="+this.invoiceNo));
res+=(this.invoiceCode===undefined||this.invoiceCode===null||this.invoiceCode===""?"":("&invoiceCode="+this.invoiceCode));
res+=(this.invoiceUploadTimeStart===undefined||this.invoiceUploadTimeStart===null?"":("&invoiceUploadTimeStart="+this.invoiceUploadTimeStart));
res+=(this.invoiceUploadTimeEnd===undefined||this.invoiceUploadTimeEnd===null?"":("&invoiceUploadTimeEnd="+this.invoiceUploadTimeEnd));
res+=(this.invoiceState===undefined||this.invoiceState===null?"":("&invoiceState="+this.invoiceState));
res+=(this.invoiceKind===undefined||this.invoiceKind===null?"":("&invoiceKind="+this.invoiceKind));
res+=(this.invoiceDateStart===undefined||this.invoiceDateStart===null?"":("&invoiceDateStart="+this.invoiceDateStart));
res+=(this.invoiceDateEnd===undefined||this.invoiceDateEnd===null?"":("&invoiceDateEnd="+this.invoiceDateEnd));
res+=(this.invoiceNote===undefined||this.invoiceNote===null?"":("&invoiceNote="+this.invoiceNote));
res+=(this.invoiceUploader===undefined||this.invoiceUploader===null?"":("&invoiceUploader="+this.invoiceUploader));
return res;
}
// toString(){
// let res="pageNum="+this.pageNum+"&pageSize="+this.pageSize
// res+=(this.invoiceNo===undefined||this.invoiceNo===null||this.invoiceNo===""?"":("&invoiceNo="+this.invoiceNo));
// res+=(this.invoiceCode===undefined||this.invoiceCode===null||this.invoiceCode===""?"":("&invoiceCode="+this.invoiceCode));
// res+=(this.invoiceUploadTimeStart===undefined||this.invoiceUploadTimeStart===null?"":("&invoiceUploadTimeStart="+this.invoiceUploadTimeStart));
// res+=(this.invoiceUploadTimeEnd===undefined||this.invoiceUploadTimeEnd===null?"":("&invoiceUploadTimeEnd="+this.invoiceUploadTimeEnd));
// res+=(this.invoiceState===undefined||this.invoiceState===null?"":("&invoiceState="+this.invoiceState));
// res+=(this.invoiceKind===undefined||this.invoiceKind===null?"":("&invoiceKind="+this.invoiceKind));
// res+=(this.invoiceDateStart===undefined||this.invoiceDateStart===null?"":("&invoiceDateStart="+this.invoiceDateStart));
// res+=(this.invoiceDateEnd===undefined||this.invoiceDateEnd===null?"":("&invoiceDateEnd="+this.invoiceDateEnd));
// res+=(this.invoiceNote===undefined||this.invoiceNote===null?"":("&invoiceNote="+this.invoiceNote));
// res+=(this.invoiceUploader===undefined||this.invoiceUploader===null?"":("&invoiceUploader="+this.invoiceUploader));
// return res;
// }
}

View File

@ -1,4 +1,19 @@
import {Card, Dropdown, List, Menu, Input, Button, Radio, Divider, DatePicker, Form, TimePicker, Select} from "antd";
import {
Card,
Dropdown,
List,
Row,
Input,
Button,
Radio,
Col,
Divider,
DatePicker,
Form,
TimePicker,
Select,
Checkbox
} from "antd";
import type {MenuProps} from 'antd';
import {DownOutlined, UploadOutlined} from '@ant-design/icons';
import React, {ReactElement, JSXElementConstructor, ReactFragment, ReactPortal, useState} from "react";
@ -19,12 +34,12 @@ let invoices: Array<Invoice>
const {RangePicker} = DatePicker;
const formItemLayout = {
labelCol: {
xs: {span: 24},
sm: {span: 8},
xs: {span: 10},
sm: {span: 10},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
xs: {span: 14},
sm: {span: 14},
},
};
const config = {
@ -40,8 +55,10 @@ class InvoiceSearch extends React.Component<any, any> {
this.state = {
activatedOption: "发票代码",
searchContent: '请在此输入',
complexEnabled:true,
invoiceSearchOption: new InvoiceSearchOption()
complexEnabled: false,
invoiceSearchOption: new InvoiceSearchOption(),
pageSize: 20,
pageNum: 0
}
this.onSearch('')
}
@ -49,7 +66,7 @@ class InvoiceSearch extends React.Component<any, any> {
onSearch = (value: string) => {
if (!this.state.complexEnabled)
this.state.invoiceSearchOption.clear()
console.log(this.state.invoiceSearchOption.toString())
console.log(this.state.invoiceSearchOption)
if (this.state.activatedOption === "发票代码") {
this.state.invoiceSearchOption.invoiceCode = value;
this.state.invoiceSearchOption.invoiceNo = null;
@ -62,8 +79,11 @@ class InvoiceSearch extends React.Component<any, any> {
//const dispatch = useAppDispatch();
//const navigate = useNavigate();
let params = this.state.invoiceSearchOption
if(params.invoiceNo==="") params.invoiceNo=null
if(params.invoiceCode==="") params.invoiceCode=null
Object.keys(params).forEach(key => {
if (params[key] != null && params[key] !== undefined && params[key] === "") {
params[key] = null
}
})
axiosInstance({
url: 'common/invoice/list',
method: 'get',
@ -74,20 +94,6 @@ class InvoiceSearch extends React.Component<any, any> {
}).catch(function (error) {
console.log(error)
})
/* console.log(baseUrl + 'common/invoice/list?' + this.state.invoiceSearchOption.toString())
axiosInstance.get(baseUrl + 'common/invoice/list?' + this.state.invoiceSearchOption.toString()).then(function (response) {
console.log(response.data)
//console.log(this.state)
handleSearchData(response.data.records)
//dispatch(handleSearchData(response.data.records))
//models.commit('setStaff', response.data.data)
//navigate('/')
}).catch(function (error) {
console.log(error);
//showAlert.value = true
});*/
//console.log(value)
//this.props.handleSearchData(value)
}
render() {
@ -116,11 +122,13 @@ class InvoiceSearch extends React.Component<any, any> {
];
const onValuesChange = (changedValues: any, allValues: any) => {
this.state.invoiceSearchOption.clear()
if (allValues['upload-time-picker'] !== null) {
console.log(allValues)
if (allValues['upload-time-picker'] != null && allValues['upload-time-picker'] !== undefined) {
this.state.invoiceSearchOption.invoiceUploadTimeStart = allValues['upload-time-picker'][0].format('YYYY-MM-DDtHH:mm:ss')
this.state.invoiceSearchOption.invoiceUploadTimeEnd = allValues['upload-time-picker'][1].format('YYYY-MM-DDtHH:mm:ss')
}
if (allValues['invoice-time-picker'] !== null) {
if (allValues['invoice-time-picker'] !== null && allValues['invoice-time-picker'] !== undefined) {
this.state.invoiceSearchOption.invoiceDateStart = allValues['invoice-time-picker'][0].format('YYYY-MM-DD')
this.state.invoiceSearchOption.invoiceDateEnd = allValues['invoice-time-picker'][1].format('YYYY-MM-DD')
}
@ -130,7 +138,7 @@ class InvoiceSearch extends React.Component<any, any> {
if (allValues['invoice-kind'] !== "全部") {
this.state.invoiceSearchOption.invoiceKind = allValues['invoice-kind']
}
if (allValues['invoice-uploader'] !== null) {
if (allValues['invoice-uploader'] !== null && allValues['invoice-uploader'] !== undefined && allValues['invoice-uploader'].trim() !== "") {
this.state.invoiceSearchOption.invoiceUploader = allValues['invoice-uploader'].trim()
}
}
@ -158,22 +166,31 @@ class InvoiceSearch extends React.Component<any, any> {
style={{width: 304}}
enterButton
/>
<Checkbox onChange={(e) => {
this.setState({complexEnabled: e.target.checked})
}}></Checkbox>
<Button className="uploadButton" type="primary" icon={<UploadOutlined/>} size="large">
</Button>
</div>
<div className="complexSearchBar" hidden={!this.state.complexEnabled} style={{display: "flex"}}>
<Form name="time_related_controls" {...formItemLayout} onValuesChange={onValuesChange}>
{this.state.complexEnabled&&
<div className="complexSearchBar" style={{display: "flex"}}>
<Form name="complexOption" {...formItemLayout} onValuesChange={onValuesChange}>
<Row>
<Form.Item name="upload-time-picker" label="发票上传时间" {...rangeConfig}>
<RangePicker/>
</Form.Item>
<Form.Item name="invoice-time-picker" label="发票开票日期" {...rangeConfig}>
<RangePicker/>
</Form.Item>
</Row>
<Row style={{display: "flex", flexWrap: "wrap"}}>
<Form.Item
name={`invoice-state`}
label={`发票状态`}
style={{minWidth: 150}}
><Select defaultValue="全部">
<Option value="全部"></Option>
<Option value="0">使</Option>
@ -184,10 +201,13 @@ class InvoiceSearch extends React.Component<any, any> {
<Form.Item
name={`invoice-kind`}
label={`发票类型`}
style={{minWidth: 300}}
><Select defaultValue="全部">
<Option value="全部"></Option>
<Option value="增值税普通发票"></Option>
<Option value="增值税专用发票"></Option>
<Option value="增值税电子普通发票"></Option>
<Option value="增值税电子专用发票"></Option>
<Option value="定额发票"></Option>
</Select>
</Form.Item>
@ -197,11 +217,12 @@ class InvoiceSearch extends React.Component<any, any> {
>
<Input placeholder="任意上传者"/>
</Form.Item>
</Row>
</Form>
</div>
</div>}
</div>
)
}
}
@ -268,7 +289,6 @@ class InvoiceListView extends React.Component<any, any> {
render() {
return (
<div style={{}}>
// TODO:复杂搜索
<InvoiceSearch handleSearchData={this.handleInvoicesContent}/>
<div style={{display: "flex", flexWrap: "wrap", backgroundColor: "lightgrey"}}>
{this.state.invoices.map((item: Invoice) =>