BigC
/
FinancialReimbursementSystem_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

main
白封羽 2022-12-27 15:37:41 +08:00
parent 7f31fb0fa0
commit 0b96a9cf34
2 changed files with 100 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/models/Staff.ts
View File

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

150
src/pages/Invoice/mine/InvoiceListView.tsx
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 type {MenuProps} 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";
@ -19,12 +34,12 @@ let invoices: Array<Invoice>
const {RangePicker} = DatePicker; const {RangePicker} = DatePicker;
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: {span: 24}, xs: {span: 10},
sm: {span: 8}, sm: {span: 10},
}, },
wrapperCol: { wrapperCol: {
xs: {span: 24}, xs: {span: 14},
sm: {span: 16}, sm: {span: 14},
}, },
}; };
const config = { const config = {
@ -40,16 +55,18 @@ class InvoiceSearch extends React.Component<any, any> {
this.state = { this.state = {
activatedOption: "发票代码", activatedOption: "发票代码",
searchContent: '请在此输入', searchContent: '请在此输入',
complexEnabled:true, complexEnabled: false,
invoiceSearchOption: new InvoiceSearchOption() invoiceSearchOption: new InvoiceSearchOption(),
pageSize: 20,
pageNum: 0
} }
this.onSearch('') this.onSearch('')
} }
onSearch = (value: string) => { onSearch = (value: string) => {
if(!this.state.complexEnabled) if (!this.state.complexEnabled)
this.state.invoiceSearchOption.clear() this.state.invoiceSearchOption.clear()
console.log(this.state.invoiceSearchOption.toString()) console.log(this.state.invoiceSearchOption)
if (this.state.activatedOption === "发票代码") { if (this.state.activatedOption === "发票代码") {
this.state.invoiceSearchOption.invoiceCode = value; this.state.invoiceSearchOption.invoiceCode = value;
this.state.invoiceSearchOption.invoiceNo = null; this.state.invoiceSearchOption.invoiceNo = null;
@ -62,8 +79,11 @@ class InvoiceSearch extends React.Component<any, any> {
//const dispatch = useAppDispatch(); //const dispatch = useAppDispatch();
//const navigate = useNavigate(); //const navigate = useNavigate();
let params = this.state.invoiceSearchOption let params = this.state.invoiceSearchOption
if(params.invoiceNo==="") params.invoiceNo=null Object.keys(params).forEach(key => {
if(params.invoiceCode==="") params.invoiceCode=null if (params[key] != null && params[key] !== undefined && params[key] === "") {
params[key] = null
}
})
axiosInstance({ axiosInstance({
url: 'common/invoice/list', url: 'common/invoice/list',
method: 'get', method: 'get',
@ -74,20 +94,6 @@ class InvoiceSearch extends React.Component<any, any> {
}).catch(function (error) { }).catch(function (error) {
console.log(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() { render() {
@ -116,11 +122,13 @@ class InvoiceSearch extends React.Component<any, any> {
]; ];
const onValuesChange = (changedValues: any, allValues: any) => { const onValuesChange = (changedValues: any, allValues: any) => {
this.state.invoiceSearchOption.clear() 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.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') 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.invoiceDateStart = allValues['invoice-time-picker'][0].format('YYYY-MM-DD')
this.state.invoiceSearchOption.invoiceDateEnd = allValues['invoice-time-picker'][1].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'] !== "全部") { if (allValues['invoice-kind'] !== "全部") {
this.state.invoiceSearchOption.invoiceKind = 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() this.state.invoiceSearchOption.invoiceUploader = allValues['invoice-uploader'].trim()
} }
} }
@ -158,50 +166,63 @@ class InvoiceSearch extends React.Component<any, any> {
style={{width: 304}} style={{width: 304}}
enterButton enterButton
/> />
<Checkbox onChange={(e) => {
this.setState({complexEnabled: e.target.checked})
}}>高级搜索</Checkbox>
<Button className="uploadButton" type="primary" icon={<UploadOutlined/>} size="large"> <Button className="uploadButton" type="primary" icon={<UploadOutlined/>} size="large">
上传 上传
</Button> </Button>
</div> </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.Item name="invoice-time-picker" label="发票开票日期" {...rangeConfig}>
<Form name="time_related_controls" {...formItemLayout} onValuesChange={onValuesChange}> <RangePicker/>
<Form.Item name="upload-time-picker" label="发票上传时间" {...rangeConfig}> </Form.Item>
<RangePicker/> </Row>
</Form.Item> <Row style={{display: "flex", flexWrap: "wrap"}}>
<Form.Item name="invoice-time-picker" label="发票开票日期" {...rangeConfig}> <Form.Item
<RangePicker/> name={`invoice-state`}
</Form.Item> label={`发票状态`}
<Form.Item style={{minWidth: 150}}
name={`invoice-state`} ><Select defaultValue="全部">
label={`发票状态`} <Option value="全部">全部</Option>
><Select defaultValue="全部"> <Option value="0">未使用</Option>
<Option value="全部">全部</Option> <Option value="1">报销中</Option>
<Option value="0">未使用</Option> <Option value="2">已报销</Option>
<Option value="1">报销中</Option> </Select>
<Option value="2">已报销</Option> </Form.Item>
</Select> <Form.Item
</Form.Item> name={`invoice-kind`}
<Form.Item label={`发票类型`}
name={`invoice-kind`} style={{minWidth: 300}}
label={`发票类型`} ><Select defaultValue="全部">
><Select defaultValue="全部"> <Option value="全部">全部</Option>
<Option value="全部">全部</Option> <Option value="增值税普通发票">增值税普通发票</Option>
<Option value="增值税普通发票">增值税普通发票</Option> <Option value="增值税专用发票">增值税专用发票</Option>
<Option value="增值税专用发票">增值税专用发票</Option> <Option value="增值税电子普通发票">增值税电子普通发票</Option>
<Option value="定额发票">定额发票</Option> <Option value="增值税电子专用发票">增值税电子专用发票</Option>
</Select> <Option value="定额发票">定额发票</Option>
</Form.Item> </Select>
<Form.Item </Form.Item>
name={`invoice-uploader`} <Form.Item
label={`上传者`} name={`invoice-uploader`}
> label={`上传者`}
<Input placeholder="任意上传者"/> >
</Form.Item> <Input placeholder="任意上传者"/>
</Form.Item>
</Row>
</Form> </Form>
</div> </div>}
</div> </div>
) )
} }
} }
@ -268,7 +289,6 @@ class InvoiceListView extends React.Component<any, any> {
render() { render() {
return ( return (
<div style={{}}> <div style={{}}>
// TODO:复杂搜索
<InvoiceSearch handleSearchData={this.handleInvoicesContent}/> <InvoiceSearch handleSearchData={this.handleInvoicesContent}/>
<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) =>