diff --git a/src/pages/Invoice/mine/InvoiceListView.tsx b/src/pages/Invoice/mine/InvoiceListView.tsx index 1b115c6..d56758e 100644 --- a/src/pages/Invoice/mine/InvoiceListView.tsx +++ b/src/pages/Invoice/mine/InvoiceListView.tsx @@ -1,212 +1,175 @@ import {Card, Dropdown, List,Menu,Input,Button,Radio,Divider} 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 React, {ReactElement, JSXElementConstructor, ReactFragment, ReactPortal,useState } from "react"; -import {Invoice} from "../../../models/Staff" +import {Invoice,InvoiceSearchOption} from "../../../models/Staff" import { Space, Typography } from 'antd'; import {SizeType} from "antd/es/config-provider/SizeContext"; +import axios from "axios"; +import {baseUrl} from "../../../utils/axiosInstance"; const {Meta} = Card; const { Search } = Input; -const onSearch = (value: string) => { - console.log(value) -}; +let invoices:Array -function InvoiceListView() { - class InvoiceSimpleSearch extends React.Component { - constructor(props:{}) { - super(props); - this.state = { - activatedOption:"发票代码", - searchContent:'请在此输入' - } +class InvoiceSearch extends React.Component { + constructor(props: { handleSearchData: any; }) { + super(props); + this.state = { + activatedOption:"发票代码", + searchContent:'请在此输入', + invoiceSearchOption:new InvoiceSearchOption() } - render(){ - const items: MenuProps['items'] = [ - { - key:'1', - label:(this.setState({activatedOption:"发票代码"})}> - 发票代码 - ) - }, - { - key:'2', - label:(this.setState({activatedOption:"发票编号"})}> - 发票编号 - ) - } - ]; + } + onSearch=(value: string)=>{ + if(this.state.activatedOption === "发票代码") { + this.state.invoiceSearchOption.invoiceCode = value; + } else { + this.state.invoiceSearchOption.invoiceNo = value; + } + + const {handleSearchData} = this.props + //const dispatch = useAppDispatch(); + //const navigate = useNavigate(); + console.log(baseUrl + 'invoice/list?'+this.state.invoiceSearchOption.toString()) + axios.get(baseUrl + 'invoice/list?'+this.state.invoiceSearchOption.toString()).then(function (this:any,response) { + console.log(response.data) + //console.log(this.state) + handleSearchData(response.data.records) + //dispatch(this.props.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(){ + + const items: MenuProps['items'] = [ + { + key:'1', + label:({ + this.state.invoiceSearchOption.clear(); + this.setState({activatedOption:"发票代码"} + )}}> + 发票代码 + ) + }, + { + key:'2', + label:({ + this.state.invoiceSearchOption.clear(); + this.setState({activatedOption:"发票编号"} + )}}> + 发票编号 + ) + } + ]; return ( -
+
- - - {this.state.activatedOption} - - - - } - placeholder={this.state.searchContent} - allowClear - onSearch={onSearch} - style={{ width: 304 }} - enterButton + menu={{ + items, + selectable: true, + defaultSelectedKeys: ['1'], + }} + > + + + {this.state.activatedOption} + + + + } + placeholder={this.state.searchContent} + allowClear + onSearch={(value)=>this.onSearch(value)} + style={{ width: 304 }} + enterButton />
) - } } - class InvoiceViewBar extends React.Component{ - constructor(props:{}) { - super(props); - } +} - render(){ - return( - - ) - } - } - class InvoiceItem extends React.Component { - constructor(props: { invoice: Invoice }) { - super(props); - this.state = { - invoiceKind: props.invoice.invoiceKind, - invoiceAmount: props.invoice.invoiceAmount, - invoiceDate: props.invoice.invoiceDate, - invoiceNo: props.invoice.invoiceNo, - } - } - - - render() { - return ( - } - > -
-
  • {this.state.invoiceNo}
    • -
  • {this.state.invoiceKind}
    • -
  • ¥{this.state.invoiceAmount}
    • -
  • {this.state.invoiceDate}
    • -
    -     - ) +class InvoiceItem extends React.Component { + constructor(props: { invoice: Invoice }) { + super(props); + this.state = { + invoiceKind: props.invoice.invoiceKind, + invoiceAmount: props.invoice.invoiceAmount, + invoiceDate: props.invoice.invoiceDate, + invoiceNo: props.invoice.invoiceNo, } } - const invoices: Array = [ - { - invoiceNo: "123", - invoiceCode: "123456", - invoiceDate: "2022-12-26", - invoiceUploader: "yyq", - invoiceUploadTime: "2022-12-26 23:02:31", - invoiceState: -1, - invoiceApprovalOpinion: "sjfdfsd", - invoiceNote: "", - invoiceKind: "商务", - invoiceAmount: 12345, - reimbursementId: 124972, - modified: false - - }, - { - invoiceNo: "124", - invoiceCode: "123456", - invoiceDate: "2022-12-26", - invoiceUploader: "yyq", - invoiceUploadTime: "2022-12-26 23:02:31", - invoiceState: -1, - invoiceApprovalOpinion: "sjfdfsd", - invoiceNote: "", - invoiceKind: "商务", - invoiceAmount: 12345, - reimbursementId: 124972, - modified: false - - }, - { - invoiceNo: "125", - invoiceCode: "123456", - invoiceDate: "2022-12-26", - invoiceUploader: "yyq", - invoiceUploadTime: "2022-12-26 23:02:31", - invoiceState: -1, - invoiceApprovalOpinion: "sjfdfsd", - invoiceNote: "", - invoiceKind: "商务", - invoiceAmount: 12345, - reimbursementId: 124972, - modified: false - - }, - { - invoiceNo: "126", - invoiceCode: "123456", - invoiceDate: "2022-12-26", - invoiceUploader: "yyq", - invoiceUploadTime: "2022-12-26 23:02:31", - invoiceState: -1, - invoiceApprovalOpinion: "sjfdfsd", - invoiceNote: "", - invoiceKind: "商务", - invoiceAmount: 12345, - reimbursementId: 124972, - modified: false - - }, - { - invoiceNo: "127", - invoiceCode: "123456", - invoiceDate: "2022-12-26", - invoiceUploader: "yyq", - invoiceUploadTime: "2022-12-26 23:02:31", - invoiceState: -1, - invoiceApprovalOpinion: "sjfdfsd", - invoiceNote: "", - invoiceKind: "商务", - invoiceAmount: 12345, - reimbursementId: 124972, - modified: false - - }, - ]; - function InvoiceList(invoices: Array){ + render() { return ( -
    - -
    - {invoices.map((item)=> - - )} + } + > +
    +
  • {this.state.invoiceNo}
    • +
  • {this.state.invoiceKind}
    • +
  • ¥{this.state.invoiceAmount}
    • +
  • {this.state.invoiceDate}
    • +
    +     + ) + } +} +class InvoiceListView extends React.Component{ + constructor(props: {}) { + super(props); + this.state={ + isNoOrCode: '1', + invoices: [], + invoiceNo: null, + invoiceCode: null, + pageNum: 0, + pageSize: 20 + } + } + handleInvoice(value: string) { + if(this.state.isNoOrCode == '1') + this.setState( {invoiceNo:value, invoiceCode: null}); + else this.setState({invoiceNo:null, invoiceCode: value}) + } + handleInvoicesContent=(value:Array)=>{ + console.log(value) + this.setState({invoices:value}) + } -
    + render() { + return ( +
    + // TODO:复杂搜索 + +
    + {this.state.invoices.map((item:Invoice)=> + + )} + +
    ) } - return ( - InvoiceList(invoices) - ) } export default InvoiceListView \ No newline at end of file