From bb62d65e8eeb107b35ee307b2c0f5c946d126e70 Mon Sep 17 00:00:00 2001 From: wuyize Date: Sat, 31 Dec 2022 17:07:27 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=B8=8A=E4=BC=A0=E5=8F=91?= =?UTF-8?q?=E7=A5=A8=E5=AF=B9=E8=AF=9D=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/models/Staff.ts | 48 ++- src/pages/Invoice/mine/InvoiceListView.tsx | 39 +- src/pages/Invoice/mine/InvoiceUploadView.tsx | 354 ++++++++++--------- 3 files changed, 234 insertions(+), 207 deletions(-) diff --git a/src/models/Staff.ts b/src/models/Staff.ts index 5216978..b4a4e06 100644 --- a/src/models/Staff.ts +++ b/src/models/Staff.ts @@ -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 | undefined | null; diff --git a/src/pages/Invoice/mine/InvoiceListView.tsx b/src/pages/Invoice/mine/InvoiceListView.tsx index ccbcb66..9519895 100644 --- a/src/pages/Invoice/mine/InvoiceListView.tsx +++ b/src/pages/Invoice/mine/InvoiceListView.tsx @@ -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 { searchContent: '请在此输入', complexEnabled: false, invoiceSearchOption: new InvoiceSearchOption(), + isUploadModalOpen: false } } @@ -72,22 +74,14 @@ class InvoiceSearch extends React.Component { 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 { this.setState({complexEnabled: e.target.checked}) }}>高级搜索 - + {this.state.complexEnabled&&
@@ -224,7 +216,7 @@ class InvoiceItem extends React.Component { 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 { style={{ width: 250, height: 300, - background: "dimgrey", margin: 30 }} cover={thumbnail { width="220" height="180"/>} >
-
  • {this.state.invoiceNo}
    • +
  • ¥{(this.state.invoiceAmount / 100.0).toFixed(2)}
  • {this.state.invoiceKind}
    • -
  • ¥{(this.state.invoiceAmountWithoutTax / 100.0).toFixed(2)}
    • +
  • {this.state.invoiceNo}
  • {this.state.invoiceDate}
    • @@ -297,7 +288,7 @@ class InvoiceListView extends React.Component { 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 { return (
    -
    - {this.state.invoices.map((item: Invoice) => - +
    + {this.state.invoices.map((item: Invoice, index:number) => + )}
    diff --git a/src/pages/Invoice/mine/InvoiceUploadView.tsx b/src/pages/Invoice/mine/InvoiceUploadView.tsx index 7ee2fe3..35fde01 100644 --- a/src/pages/Invoice/mine/InvoiceUploadView.tsx +++ b/src/pages/Invoice/mine/InvoiceUploadView.tsx @@ -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{ +class FileUploadView extends React.Component { render() { return (

    @@ -53,95 +54,68 @@ class FileUploadView extends React.Component{ } -class InvoiceUploadView extends React.Component{ - formRef = React.createRef(); - 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 { - 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 ( + + 取消 + , + + ]} + > + + + ) +} + +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,102 +139,136 @@ class InvoiceUploadView extends React.Component{ }) } + return ( + + 取消 + , + + ]} + > +

    + + + + + + + + + + + + + + + + + + + + + + + +