完成上传发票对话框
parent
bfccd7dfc1
commit
bb62d65e8e
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}/>
|
||||
</>);
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue