修正了高级搜索，需要美工
白封羽
parent
7f31fb0fa0
commit
0b96a9cf34
|
|
@ -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;
|
||||
// }
|
||||
}
|
||||
|
|
@ -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,16 +55,18 @@ 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('')
|
||||
}
|
||||
|
||||
onSearch = (value: string) => {
|
||||
if(!this.state.complexEnabled)
|
||||
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,50 +166,63 @@ 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>
|
||||
{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>
|
||||
|
||||
<div className="complexSearchBar" hidden={!this.state.complexEnabled} style={{display: "flex"}}>
|
||||
<Form name="time_related_controls" {...formItemLayout} onValuesChange={onValuesChange}>
|
||||
<Form.Item name="upload-time-picker" label="发票上传时间" {...rangeConfig}>
|
||||
<RangePicker/>
|
||||
</Form.Item>
|
||||
<Form.Item name="invoice-time-picker" label="发票开票日期" {...rangeConfig}>
|
||||
<RangePicker/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={`invoice-state`}
|
||||
label={`发票状态`}
|
||||
><Select defaultValue="全部">
|
||||
<Option value="全部">全部</Option>
|
||||
<Option value="0">未使用</Option>
|
||||
<Option value="1">报销中</Option>
|
||||
<Option value="2">已报销</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={`invoice-kind`}
|
||||
label={`发票类型`}
|
||||
><Select defaultValue="全部">
|
||||
<Option value="全部">全部</Option>
|
||||
<Option value="增值税普通发票">增值税普通发票</Option>
|
||||
<Option value="增值税专用发票">增值税专用发票</Option>
|
||||
<Option value="定额发票">定额发票</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={`invoice-uploader`}
|
||||
label={`上传者`}
|
||||
>
|
||||
<Input placeholder="任意上传者"/>
|
||||
</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>
|
||||
<Option value="1">报销中</Option>
|
||||
<Option value="2">已报销</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<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>
|
||||
<Form.Item
|
||||
name={`invoice-uploader`}
|
||||
label={`上传者`}
|
||||
>
|
||||
<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) =>
|
||||
|
|
|
|||
Loading…
Reference in New Issue