增加了发票列表界面(/mine)
parent
e1858e29b2
commit
5c55686420
|
|
@ -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
|
||||
/>
|
||||
|
|
@ -65,19 +97,9 @@ function InvoiceListView() {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
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 }) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
|
@ -88,7 +110,6 @@ function InvoiceListView() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Card
|
||||
|
|
@ -112,91 +133,36 @@ function InvoiceListView() {
|
|||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
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
|
||||
Loading…
Reference in New Issue