增加了发票列表界面(/mine)
parent
e1858e29b2
commit
5c55686420
|
@ -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
|
Loading…
Reference in New Issue