增加了发票列表界面(/mine)

src/pages/Invoice/mine/InvoiceListView.tsx

@@ -1,43 +1,75 @@
 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<Invoice>
 
-function InvoiceListView() {
-    class InvoiceSimpleSearch extends React.Component<any, any> {
-        constructor(props:{}) {
+class InvoiceSearch extends React.Component<any, any> {
+    constructor(props: { handleSearchData: any; }) {
         super(props);
         this.state = {
             activatedOption:"发票代码",
-                searchContent:'请在此输入'
+            searchContent:'请在此输入',
+            invoiceSearchOption:new InvoiceSearchOption()
         }
     }
+    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:(<a className="simpleSearchOption" onClick={()=>this.setState({activatedOption:"发票代码"})}>
+                label:(<a className="simpleSearchOption" onClick={()=>{
+                    this.state.invoiceSearchOption.clear();
+                    this.setState({activatedOption:"发票代码"}
+                    )}}>
                     发票代码
                 </a>)
             },
             {
                 key:'2',
-                    label:(<a className="simpleSearchOption" onClick={()=>this.setState({activatedOption:"发票编号"})}>
+                label:(<a className="simpleSearchOption" onClick={()=>{
+                    this.state.invoiceSearchOption.clear();
+                    this.setState({activatedOption:"发票编号"}
+                    )}}>
                     发票编号
                 </a>)
             }
         ];
         return (
-            <div className="simpleSearchBar">
+            <div className="simpleSearchBar" style={{display:"flex",justifyContent: "space-evenly"}}>
                 <Search className="simpleSearch"
                         addonBefore={<Dropdown
                             menu={{
@@ -55,7 +87,7 @@ function InvoiceListView() {
                         </Dropdown>}
                         placeholder={this.state.searchContent}
                         allowClear
-                    onSearch={onSearch}
+                        onSearch={(value)=>this.onSearch(value)}
                         style={{ width: 304 }}
                         enterButton
                 />
@@ -66,17 +98,7 @@ function InvoiceListView() {
         )
     }
 }
-    class InvoiceViewBar extends React.Component{
-        constructor(props:{}) {
-            super(props);
-        }
 
-        render(){
-            return(
-                <InvoiceSimpleSearch/>
-            )
-        }
-    }
 class InvoiceItem extends React.Component<any, any> {
     constructor(props: { invoice: Invoice }) {
         super(props);
@@ -88,7 +110,6 @@ function InvoiceListView() {
         }
     }
 
-
     render() {
         return (
             <Card
@@ -113,90 +134,35 @@ function InvoiceListView() {
         )
     }
 }
+class InvoiceListView extends React.Component<any, any>{
+    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<Invoice>)=>{
+        console.log(value)
+        this.setState({invoices:value})
+    }
 
-    const invoices: Array<Invoice> = [
-        {
-            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<Invoice>){
+    render() {
         return (
-            <div>
-            <InvoiceViewBar/>
-            <div style={{display:"flex",flexWrap:"wrap"}}>
-                {invoices.map((item)=>
+            <div style={{}}>
+                // TODO:复杂搜索
+                <InvoiceSearch handleSearchData={this.handleInvoicesContent}/>
+                <div style={{display:"flex",flexWrap:"wrap",backgroundColor:"lightgrey"}}>
+                    {this.state.invoices.map((item:Invoice)=>
                         <InvoiceItem invoice={item}/>
                     )}
 
@@ -204,9 +170,6 @@ function InvoiceListView() {
             </div>
         )
     }
-    return (
-        InvoiceList(invoices)
-    )
 }
 
 export default InvoiceListView