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

main
yang.yongquan 2022-12-26 20:09:35 +08:00
parent e1858e29b2
commit 5c55686420
1 changed files with 143 additions and 180 deletions

View File

@ -1,43 +1,75 @@
import {Card, Dropdown, List,Menu,Input,Button,Radio,Divider} from "antd"; import {Card, Dropdown, List,Menu,Input,Button,Radio,Divider} from "antd";
import type { MenuProps } 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 { DownOutlined,UploadOutlined } from '@ant-design/icons';
import React, {ReactElement, JSXElementConstructor, ReactFragment, ReactPortal,useState } from "react"; 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 { Space, Typography } from 'antd';
import {SizeType} from "antd/es/config-provider/SizeContext"; import {SizeType} from "antd/es/config-provider/SizeContext";
import axios from "axios";
import {baseUrl} from "../../../utils/axiosInstance";
const {Meta} = Card; const {Meta} = Card;
const { Search } = Input; const { Search } = Input;
const onSearch = (value: string) => { let invoices:Array<Invoice>
console.log(value)
};
function InvoiceListView() { class InvoiceSearch extends React.Component<any, any> {
class InvoiceSimpleSearch extends React.Component<any, any> { constructor(props: { handleSearchData: any; }) {
constructor(props:{}) {
super(props); super(props);
this.state = { this.state = {
activatedOption:"发票代码", 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(){ render(){
const items: MenuProps['items'] = [ const items: MenuProps['items'] = [
{ {
key:'1', key:'1',
label:(<a className="simpleSearchOption" onClick={()=>this.setState({activatedOption:"发票代码"})}> label:(<a className="simpleSearchOption" onClick={()=>{
this.state.invoiceSearchOption.clear();
this.setState({activatedOption:"发票代码"}
)}}>
</a>) </a>)
}, },
{ {
key:'2', key:'2',
label:(<a className="simpleSearchOption" onClick={()=>this.setState({activatedOption:"发票编号"})}> label:(<a className="simpleSearchOption" onClick={()=>{
this.state.invoiceSearchOption.clear();
this.setState({activatedOption:"发票编号"}
)}}>
</a>) </a>)
} }
]; ];
return ( return (
<div className="simpleSearchBar"> <div className="simpleSearchBar" style={{display:"flex",justifyContent: "space-evenly"}}>
<Search className="simpleSearch" <Search className="simpleSearch"
addonBefore={<Dropdown addonBefore={<Dropdown
menu={{ menu={{
@ -55,7 +87,7 @@ function InvoiceListView() {
</Dropdown>} </Dropdown>}
placeholder={this.state.searchContent} placeholder={this.state.searchContent}
allowClear allowClear
onSearch={onSearch} onSearch={(value)=>this.onSearch(value)}
style={{ width: 304 }} style={{ width: 304 }}
enterButton 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> { class InvoiceItem extends React.Component<any, any> {
constructor(props: { invoice: Invoice }) { constructor(props: { invoice: Invoice }) {
super(props); super(props);
@ -88,7 +110,6 @@ function InvoiceListView() {
} }
} }
render() { render() {
return ( return (
<Card <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> = [ render() {
{
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>){
return ( return (
<div> <div style={{}}>
<InvoiceViewBar/> // TODO:复杂搜索
<div style={{display:"flex",flexWrap:"wrap"}}> <InvoiceSearch handleSearchData={this.handleInvoicesContent}/>
{invoices.map((item)=> <div style={{display:"flex",flexWrap:"wrap",backgroundColor:"lightgrey"}}>
{this.state.invoices.map((item:Invoice)=>
<InvoiceItem invoice={item}/> <InvoiceItem invoice={item}/>
)} )}
@ -204,9 +170,6 @@ function InvoiceListView() {
</div> </div>
) )
} }
return (
InvoiceList(invoices)
)
} }
export default InvoiceListView export default InvoiceListView