完成上传发票对话框

main
wuyize 2022-12-31 17:07:27 +08:00
parent bfccd7dfc1
commit bb62d65e8e
3 changed files with 234 additions and 207 deletions

View File

@ -18,20 +18,48 @@ export interface Department {
}
export interface Invoice {
invoiceFileUri: string;
invoiceThumbnailUri: string;
invoiceNo: string;
invoiceAmount: number;
invoiceCode: string;
invoiceDate: string;
invoiceUploader: string;
invoiceUploadTime: string;
invoiceState: number;
invoiceApprovalOpinion: string;
invoiceDeparture?: string;
invoiceDestination?: string;
invoiceFileUri: string;
invoiceId: number;
invoiceKind: number;
invoiceName?: string;
invoiceNo: string;
invoiceNote: string;
invoiceKind: string;
invoiceAmountWithoutTax: number;
reimbursementId: number;
/**
* -1: 0: 1: 2:
*/
invoiceState: number;
invoiceThumbnailUri: string;
invoiceUploader: Staff;
invoiceUploadTime: string;
modified: boolean;
reimbursement: Reimbursement;
}
export interface InvoiceIdentifyResponse {
invoiceAmount: number;
invoiceCheckCode?: string;
invoiceCode: string;
invoiceDate: string;
invoiceDeparture?: string;
invoiceDestination?: string;
invoiceExtraInfo: InvoiceExtraInfo[];
invoiceFileName: string;
invoiceKind: number;
invoiceName?: string;
invoiceNo: string;
invoiceNote?: string;
invoiceRegionCode?: string;
invoiceSellerTaxCode?: string;
}
export interface InvoiceExtraInfo {
name: string;
value: string;
}
type Nullable<T> = T | undefined | null;

View File

@ -27,6 +27,7 @@ import {Simulate} from "react-dom/test-utils";
import change = Simulate.change;
import {useNavigate} from "react-router-dom";
import {useAppDispatch} from "../../../models/hooks";
import InvoiceUploadView from "./InvoiceUploadView";
const {Meta} = Card;
const {Search} = Input;
@ -58,6 +59,7 @@ class InvoiceSearch extends React.Component<any, any> {
searchContent: '请在此输入',
complexEnabled: false,
invoiceSearchOption: new InvoiceSearchOption(),
isUploadModalOpen: false
}
}
@ -72,22 +74,14 @@ class InvoiceSearch extends React.Component<any, any> {
this.state.invoiceSearchOption.invoiceNo = value;
this.state.invoiceSearchOption.invoiceCode = null;
}
//const dispatch = useAppDispatch();
//const navigate = useNavigate();
const {handleSearchData} = this.props
handleSearchData(this.state.invoiceSearchOption)
// axiosInstance({
// url: 'common/invoice/list',
// method: 'get',
// params: params
// }).then(response => {
// console.log(response.data)
// handleSearchData(response.data.records)
// }).catch(function (error) {
// console.log(error)
// })
}
}
showUploadModal = () => {
this.setState({ isUploadModalOpen: true})
}
render() {
const items: MenuProps['items'] = [
@ -162,9 +156,7 @@ class InvoiceSearch extends React.Component<any, any> {
this.setState({complexEnabled: e.target.checked})
}}></Checkbox>
<Button className="uploadButton" type="primary" icon={<UploadOutlined/>} size="large">
</Button>
<InvoiceUploadView/>
</div>
{this.state.complexEnabled&&
<div className="complexSearchBar" style={{display: "flex"}}>
@ -224,7 +216,7 @@ class InvoiceItem extends React.Component<any, any> {
this.state = {
invoiceThumbnailUri: baseUrl+props.invoice.invoiceThumbnailUri,
invoiceKind: props.invoice.invoiceKind,
invoiceAmountWithoutTax: props.invoice.invoiceAmountWithoutTax,
invoiceAmount: props.invoice.invoiceAmount,
invoiceDate: props.invoice.invoiceDate,
invoiceNo: props.invoice.invoiceNo,
}
@ -238,7 +230,6 @@ class InvoiceItem extends React.Component<any, any> {
style={{
width: 250,
height: 300,
background: "dimgrey",
margin: 30
}}
cover={<img alt="thumbnail"
@ -246,9 +237,9 @@ class InvoiceItem extends React.Component<any, any> {
width="220" height="180"/>}
>
<div style={{marginTop: -20}}>
<li style={{fontWeight: "bold", fontSize: 20}}>{this.state.invoiceNo}</li>
<li style={{fontWeight: "bold", fontSize: 20}}>¥{(this.state.invoiceAmount / 100.0).toFixed(2)}</li>
<li>{this.state.invoiceKind}</li>
<li>¥{(this.state.invoiceAmountWithoutTax / 100.0).toFixed(2)}</li>
<li>{this.state.invoiceNo}</li>
<li>{this.state.invoiceDate}</li>
</div>
</Card>
@ -297,7 +288,7 @@ class InvoiceListView extends React.Component<any, any> {
params['pageNum'] = this.state.pageNum-1
params['pageSize'] = this.state.pageSize
axiosInstance({
url: 'common/invoice/list',
url: 'common/invoice',
method: 'get',
params: params
}).then(response => {
@ -323,9 +314,9 @@ class InvoiceListView extends React.Component<any, any> {
return (
<div style={{}}>
<InvoiceSearch handleSearchData={this.handleInvoiceSearchInfo}/>
<div style={{display: "flex", flexWrap: "wrap", backgroundColor: "lightgrey"}}>
{this.state.invoices.map((item: Invoice) =>
<InvoiceItem invoice={item}/>
<div style={{display: "flex", flexWrap: "wrap"}}>
{this.state.invoices.map((item: Invoice, index:number) =>
<InvoiceItem invoice={item} key={index}/>
)}
</div>

View File

@ -1,23 +1,24 @@
import React, {useState} from 'react';
import React, {useEffect, useRef, useState} from 'react';
import {Button, Modal, UploadProps, message, Upload, UploadFile, Form, Input, DatePicker} from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import {InboxOutlined, UploadOutlined} from '@ant-design/icons';
import axiosInstance from "../../../utils/axiosInstance";
import {InvoiceCommit} from "../../../models/Staff";
import {InvoiceCommit, InvoiceIdentifyResponse} from "../../../models/Staff";
import dayjs from 'dayjs';
import TextArea from "antd/es/input/TextArea";
import {constants} from "http2";
import type { FormInstance } from 'antd/es/form';
import type {FormInstance} from 'antd/es/form';
import {useAppDispatch} from "../../../models/hooks";
const { Dragger } = Upload;
let tempFile :File
const {Dragger} = Upload;
let tempFile: File
const props: UploadProps = {
name: 'file',
multiple: false,
maxCount: 1,
accept: "image/png, image/jpeg, image/jpg",
beforeUpload: (file,fileList)=>{
tempFile=file
beforeUpload: (file, fileList) => {
tempFile = file
console.log(file)
return false
},
@ -37,7 +38,7 @@ const props: UploadProps = {
},
};
class FileUploadView extends React.Component<any, any>{
class FileUploadView extends React.Component<any, any> {
render() {
return (<Dragger {...props}>
<p className="ant-upload-drag-icon">
@ -53,95 +54,68 @@ class FileUploadView extends React.Component<any, any>{
}
class InvoiceUploadView extends React.Component<any, any>{
formRef = React.createRef<FormInstance>();
constructor(props: {}) {
super(props);
this.state = {
loading: false,
open: false,
uploadOpen: false,
uploadStep: 0,
invoiceCommit: new InvoiceCommit(),
}
this.state.invoiceCommit.invoiceNo="init"
}
setUploadOpen(value: Boolean) {
this.setState({uploadOpen: value})
}
setOpen(value: Boolean) {
this.setState({open : value})
}
setLoading(value: Boolean) {
this.setState({loading : value})
}
setUploadStep(value: number) {
this.setState({uploadStep : value})
}
showUploadView = () => {
this.setOpen(true);
};
handleOk = () => {
this.setLoading(true);
//this.setLoading(false);
this.setOpen(false);
let data= new FormData();
data.append('invoiceFile',tempFile)
function UpLoadModal(props: any) {
const [open, setOpen] = useState(false)
const [loading, setLoading] = useState(false)
useEffect(() => {
setOpen(props.open)
}, [props]);
const handleOk = () => {
setLoading(true);
let data = new FormData();
data.append('invoiceFile', tempFile)
axiosInstance({
url: 'common/invoice/identify',
method: 'POST',
data: data
}).then(response => {
setLoading(false);
console.log(response.data)
let result = new InvoiceCommit()
result.invoiceNo = response.data.invoiceNo
result.invoiceDate = dayjs(response.data.invoiceDate)
result.invoiceAmountWithoutTax = response.data.invoiceAmountWithoutTax
result.invoiceAmount = response.data.invoiceAmount
result.invoiceCode = response.data.invoiceCode
result.invoiceCheckCode = response.data.invoiceCheckCode
result.invoiceKind = response.data.invoiceKind
result.invoiceFileName = response.data.invoiceFileName
result.invoiceExtraInfo = ""
Object.keys(response.data.invoiceExtraInfo).forEach( key => {
result.invoiceExtraInfo+=(key+": "+response.data.invoiceExtraInfo[key]+"\n")
});
// for(let i=0;i<response.data.invoiceExtraInfo.length;i++){
// result.invoiceExtraInfo+=(response.data.invoiceExtraInfo[i].name+": "+response.data.invoiceExtraInfo[i].value+"\n")
// }
this.setState({invoiceCommit:result})
this.formRef.current!.setFieldsValue(result);
setOpen(false);
props.nextStep(response.data)
}).catch(function (error) {
setLoading(false);
console.log(error)
})
this.setState({uploadStep:1})
this.setUploadOpen(true)
this.setLoading(false);
// let fakeData=new InvoiceCommit()
// fakeData.invoiceNo="No"
// fakeData.invoiceCode="Code"
// fakeData.invoiceDate=new Date()
// setInvoiceCommit(fakeData)
};
handleCancel = () => {
this.setOpen(false);
const handleCancel = () => {
setOpen(false);
};
handleUploadCanCel = () => {
this.setUploadOpen(false);
}
submit=()=>{
let result=this.formRef.current!.getFieldsValue()
result.invoiceDate=result.invoiceDate.format("YYYY-MM-DD")
result.invoiceExtraInfo=new Map(result.invoiceExtraInfo.split("\n").map((entry: string) => entry.split(": ")))
return (
<Modal
open={open}
title="Title"
onOk={handleOk}
onCancel={handleCancel}
footer={[
<Button key="cancel" onClick={handleCancel}>
</Button>,
<Button key="next" type="primary" loading={loading} onClick={handleOk}>
</Button>
]}
>
<FileUploadView/>
</Modal>
)
}
function FormModal(props: any) {
const [open, setOpen] = useState(false)
const [form] = Form.useForm();
useEffect(() => {
setOpen(props.open)
}, [props]);
const handleCancel = () => {
setOpen(false);
};
const submit = () => {
let result = form!.getFieldsValue()
result.invoiceDate = result.invoiceDate.format("YYYY-MM-DD")
result.invoiceExtraInfo = new Map(result.invoiceExtraInfo.split("\n").map((entry: string) => entry.split(": ")))
console.log(result.invoiceExtraInfo.split("\n").map((entry: string) => entry.split(": ")))
// let extraInfo=[]
// let line = result.invoiceExtraInfo.split('\n')
@ -165,75 +139,48 @@ class InvoiceUploadView extends React.Component<any, any>{
})
}
render() {
console.log(this.state.invoiceCommit)
console.log(this.state.uploadStep)
// @ts-ignore
// @ts-ignore
return (
<>
<Button type="primary" onClick={this.showUploadView}>
Open Modal with customized footer
</Button>
<Modal
open={this.state.open}
title="Title"
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={[
<Button key="cancel" onClick={this.handleCancel}>
</Button>,
<Button key="next" type="primary" loading={this.state.loading} onClick={this.handleOk}>
</Button>
]}
>
<FileUploadView/>
</Modal>
<Modal
open={this.state.uploadOpen}
open={open}
title="Title"
onOk={this.submit}
onCancel={this.handleCancel}
onOk={submit}
onCancel={handleCancel}
footer={[
<Button key="cancel" onClick={this.handleCancel}>
<Button key="cancel" onClick={handleCancel}>
</Button>,
<Button key="next" type="primary" loading={false} onClick={this.submit}
<Button key="next" type="primary" loading={false} onClick={submit}
>
</Button>
]}
>
<Form ref={this.formRef} initialValues={{invoiceNo:this.state.invoiceCommit.invoiceNo}}>
<Form form={form}>
<Form.Item
name={`invoiceNo`}
label={`发票编码`}
>
<Input />
<Input/>
</Form.Item>
<Form.Item
name={`invoiceCode`}
label={`发票代码`}
>
<Input />
<Input/>
</Form.Item>
<Form.Item
name={`invoiceKind`}
label={`发票类型`}
>
<Input />
<Input/>
</Form.Item>
<Form.Item
name={`invoiceAmount`}
label={`计税总额`}
>
<Input />
<Input/>
</Form.Item>
<Form.Item
name={`invoiceAmountWithoutTax`}
@ -261,6 +208,67 @@ class InvoiceUploadView extends React.Component<any, any>{
</Form.Item>
</Form>
</Modal>
)
}
class InvoiceUploadView extends React.Component<any, any> {
formRef = React.createRef<FormInstance>();
constructor(props: {}) {
super(props);
this.state = {
loading: false,
open: false,
uploadOpen: false,
uploadStep: 0,
invoiceCommit: new InvoiceCommit(),
}
this.state.invoiceCommit.invoiceNo = "init"
}
setUploadOpen(value: Boolean) {
this.setState({uploadOpen: value})
}
setOpen(value: Boolean) {
this.setState({open: value})
}
setLoading(value: Boolean) {
this.setState({loading: value})
}
setUploadStep(value: number) {
this.setState({uploadStep: value})
}
showUploadView = () => {
this.setOpen(true);
};
handleUploadCanCel = () => {
this.setUploadOpen(false);
}
handleNextStep = (response: InvoiceIdentifyResponse) => {
this.setState({open: false, uploadOpen: true})
}
render() {
console.log(this.state.invoiceCommit)
console.log(this.state.uploadStep)
// @ts-ignore
return (
<>
<Button onClick={this.showUploadView} className="uploadButton" type="primary" icon={<UploadOutlined/>}
size="large">
</Button>
<UpLoadModal open={this.state.open} nextStep={this.handleNextStep}/>
<FormModal open={this.state.uploadOpen}/>
</>);
}