From 45818588e9e528f7a166d6b4c3828a0b4eff1180 Mon Sep 17 00:00:00 2001 From: "yang.yongquan" <3395816735@qq.com> Date: Tue, 27 Dec 2022 14:06:04 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=86=E5=8F=91?= =?UTF-8?q?=E7=A5=A8=E5=88=97=E8=A1=A8=E7=95=8C=E9=9D=A2=E4=B8=AD=E7=9A=84?= =?UTF-8?q?=E9=AB=98=E7=BA=A7=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Invoice/mine/InvoiceListView.tsx | 106 ++++++++++++++------- 1 file changed, 70 insertions(+), 36 deletions(-) diff --git a/src/pages/Invoice/mine/InvoiceListView.tsx b/src/pages/Invoice/mine/InvoiceListView.tsx index 85e13f1..24e921b 100644 --- a/src/pages/Invoice/mine/InvoiceListView.tsx +++ b/src/pages/Invoice/mine/InvoiceListView.tsx @@ -1,29 +1,57 @@ -import {Card, Dropdown, List,Menu,Input,Button,Radio,Divider} from "antd"; -import type { MenuProps } from 'antd'; -import { Icon } from '@ant-design/compatible' -import { DownOutlined,UploadOutlined } from '@ant-design/icons'; -import React, {ReactElement, JSXElementConstructor, ReactFragment, ReactPortal,useState } from "react"; -import {Invoice,InvoiceSearchOption} from "../../../models/Staff" -import { Space, Typography } from 'antd'; +import {Card, Dropdown, List, Menu, Input, Button, Radio, Divider, DatePicker, Form, TimePicker, Select} from "antd"; +import type {MenuProps} from 'antd'; +import {Icon} from '@ant-design/compatible' +import {DownOutlined, UploadOutlined} from '@ant-design/icons'; +import React, {ReactElement, JSXElementConstructor, ReactFragment, ReactPortal, useState} from "react"; +import {Invoice, InvoiceSearchOption} from "../../../models/Staff" +import {Space, Typography} from 'antd'; import {SizeType} from "antd/es/config-provider/SizeContext"; import axios from "axios"; 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 { Search } = Input; -let invoices:Array +const {Search} = Input; +const {Option} = Select +let invoices: Array +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 { constructor(props: { handleSearchData: any; }) { super(props); this.state = { - activatedOption:"发票代码", - searchContent:'请在此输入', - invoiceSearchOption:new InvoiceSearchOption() + activatedOption: "发票代码", + searchContent: '请在此输入', + complexEnabled:true, + invoiceSearchOption: new InvoiceSearchOption() } this.onSearch('') } - onSearch=(value: string)=>{ - if(this.state.activatedOption === "发票代码") { + + onSearch = (value: string) => { + if(!this.state.complexEnabled) + this.state.invoiceSearchOption.clear() + console.log(this.state.invoiceSearchOption.toString()) + if (this.state.activatedOption === "发票代码") { this.state.invoiceSearchOption.invoiceCode = value; } else { this.state.invoiceSearchOption.invoiceNo = value; @@ -32,8 +60,8 @@ class InvoiceSearch extends React.Component { const {handleSearchData} = this.props //const dispatch = useAppDispatch(); //const navigate = useNavigate(); - 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(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) @@ -47,24 +75,27 @@ class InvoiceSearch extends React.Component { //console.log(value) //this.props.handleSearchData(value) } - render(){ + + render() { const items: MenuProps['items'] = [ { - key:'1', - label:({ + key: '1', + label: ( { this.state.invoiceSearchOption.clear(); - this.setState({activatedOption:"发票代码"} - )}}> + this.setState({activatedOption: "发票代码"} + ) + }}> 发票代码 ) }, { - key:'2', - label:({ + key: '2', + label: ( { this.state.invoiceSearchOption.clear(); - this.setState({activatedOption:"发票编号"} - )}}> + this.setState({activatedOption: "发票编号"} + ) + }}> 发票编号 ) } @@ -119,7 +150,7 @@ class InvoiceItem extends React.Component { width: 250, height: 300, background: "dimgrey", - margin:30 + margin: 30 }} cover={thumbnail {
  • {this.state.invoiceNo}
  • {this.state.invoiceKind}
    • -
  • ¥{(this.state.invoiceAmountWithoutTax/100.0).toFixed(2)}
    • +
  • ¥{(this.state.invoiceAmountWithoutTax / 100.0).toFixed(2)}
  • {this.state.invoiceDate}
    • ) } } -class InvoiceListView extends React.Component{ + +class InvoiceListView extends React.Component { constructor(props: {}) { super(props); - this.state={ + this.state = { isNoOrCode: '1', invoices: [], invoiceNo: null, @@ -147,14 +179,16 @@ class InvoiceListView extends React.Component{ pageSize: 20 } } + handleInvoice(value: string) { - if(this.state.isNoOrCode == '1') - this.setState( {invoiceNo:value, invoiceCode: null}); - else this.setState({invoiceNo:null, invoiceCode: value}) + if (this.state.isNoOrCode == '1') + this.setState({invoiceNo: value, invoiceCode: null}); + else this.setState({invoiceNo: null, invoiceCode: value}) } - handleInvoicesContent=(value:Array)=>{ + + handleInvoicesContent = (value: Array) => { console.log(value) - this.setState({invoices:value}) + this.setState({invoices: value}) } render() { @@ -162,8 +196,8 @@ class InvoiceListView extends React.Component{
    // TODO:复杂搜索 -
    - {this.state.invoices.map((item:Invoice)=> +
    + {this.state.invoices.map((item: Invoice) => )} From 7c21780a925903dd5e343f11dea5b8c35e259cb9 Mon Sep 17 00:00:00 2001 From: "yang.yongquan" <3395816735@qq.com> Date: Tue, 27 Dec 2022 14:11:33 +0800 Subject: [PATCH 2/2] =?UTF-8?q?Karlis=20=E8=BF=9B=E8=A1=8C=E7=9A=84?= =?UTF-8?q?=E5=8F=98=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/models/Staff.ts | 28 +++--- src/pages/Invoice/mine/InvoiceListView.tsx | 112 ++++++++++++++++----- 2 files changed, 101 insertions(+), 39 deletions(-) diff --git a/src/models/Staff.ts b/src/models/Staff.ts index af7dbf5..7c276a6 100644 --- a/src/models/Staff.ts +++ b/src/models/Staff.ts @@ -34,12 +34,12 @@ type Nullable = T | undefined | null; export class InvoiceSearchOption{ invoiceNo: Nullable invoiceCode: Nullable - invoiceUploadTimeStart: Nullable - invoiceUploadTimeEnd:Nullable + invoiceUploadTimeStart: Nullable + invoiceUploadTimeEnd:Nullable invoiceState:Nullable invoiceKind:Nullable - invoiceDateStart:Nullable - invoiceDateEnd:Nullable + invoiceDateStart:Nullable + invoiceDateEnd:Nullable invoiceNote:Nullable invoiceUploader:Nullable pageNum:number @@ -75,16 +75,16 @@ export class InvoiceSearchOption{ toString(){ let res="pageNum="+this.pageNum+"&pageSize="+this.pageSize - res+=(this.invoiceNo===null||this.invoiceNo===""?"":("&invoiceNo="+this.invoiceNo)); - res+=(this.invoiceCode===null||this.invoiceCode===""?"":("&invoiceCode="+this.invoiceCode)); - res+=(this.invoiceUploadTimeStart===null?"":("&invoiceUploadTimeStart="+this.invoiceUploadTimeStart?.toDateString())); - res+=(this.invoiceUploadTimeEnd===null?"":("&invoiceUploadTimeEnd="+this.invoiceUploadTimeEnd?.toDateString())); - res+=(this.invoiceState===null?"":("&invoiceState="+this.invoiceState)); - res+=(this.invoiceKind===null?"":("&invoiceKind="+this.invoiceKind)); - res+=(this.invoiceDateStart===null?"":("&invoiceDateStart="+this.invoiceDateStart?.toDateString())); - res+=(this.invoiceDateEnd===null?"":("&invoiceDateEnd="+this.invoiceDateEnd?.toDateString())); - res+=(this.invoiceNote===null?"":("&invoiceNote="+this.invoiceNote)); - res+=(this.invoiceUploader===null?"":("&invoiceUploader="+this.invoiceUploader)); + 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; } } \ No newline at end of file diff --git a/src/pages/Invoice/mine/InvoiceListView.tsx b/src/pages/Invoice/mine/InvoiceListView.tsx index 24e921b..b9fbd06 100644 --- a/src/pages/Invoice/mine/InvoiceListView.tsx +++ b/src/pages/Invoice/mine/InvoiceListView.tsx @@ -53,8 +53,10 @@ class InvoiceSearch extends React.Component { console.log(this.state.invoiceSearchOption.toString()) if (this.state.activatedOption === "发票代码") { this.state.invoiceSearchOption.invoiceCode = value; + this.state.invoiceSearchOption.invoiceNo = null; } else { this.state.invoiceSearchOption.invoiceNo = value; + this.state.invoiceSearchOption.invoiceCode = null; } const {handleSearchData} = this.props @@ -65,7 +67,7 @@ class InvoiceSearch extends React.Component { console.log(response.data) //console.log(this.state) handleSearchData(response.data.records) - //dispatch(this.props.handleSearchData(response.data.records)) + //dispatch(handleSearchData(response.data.records)) //models.commit('setStaff', response.data.data) //navigate('/') }).catch(function (error) { @@ -100,32 +102,92 @@ class InvoiceSearch extends React.Component { ) } ]; + const onValuesChange = (changedValues: any, allValues: any) => { + this.state.invoiceSearchOption.clear() + if (allValues['upload-time-picker'] !== null) { + 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) { + 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') + } + if (allValues['invoice-state'] !== "全部") { + this.state.invoiceSearchOption.invoiceState = allValues['invoice-state'] + } + if (allValues['invoice-kind'] !== "全部") { + this.state.invoiceSearchOption.invoiceKind = allValues['invoice-kind'] + } + if (allValues['invoice-uploader'] !== null) { + this.state.invoiceSearchOption.invoiceUploader = allValues['invoice-uploader'].trim() + } + } return ( -
    - +
    + + + + {this.state.activatedOption} + + + + } + placeholder={this.state.searchContent} + allowClear + onSearch={(value) => this.onSearch(value)} + style={{width: 304}} + enterButton + /> + +
    + + +
    ) }