解决上传发票的问题

src/pages/Invoice/mine/InvoiceUploadView.tsx

@@ -1,5 +1,17 @@
 import React, {useEffect, useRef, useState} from 'react';
-import {Button, Modal, UploadProps, message, Upload, UploadFile, Form, Input, DatePicker, Select, InputNumber} from 'antd';
+import {
+    Button,
+    Modal,
+    UploadProps,
+    message,
+    Upload,
+    UploadFile,
+    Form,
+    Input,
+    DatePicker,
+    Select,
+    InputNumber
+} from 'antd';
 import {InboxOutlined, UploadOutlined} from '@ant-design/icons';
 import axiosInstance from "../../../utils/axiosInstance";
 import dayjs, {Dayjs} from 'dayjs';
@@ -16,41 +28,14 @@ import {
 
 const {Dragger} = Upload;
 
-let tempFile: File
+let tempFile: File | null = null
-const props: UploadProps = {
-    name: 'file',
-    multiple: false,
-    maxCount: 1,
-    accept: ".png, .jpg, .jpeg",
-    beforeUpload: (file, fileList) => {
-        tempFile = file
-        console.log(file)
-        return false
-    },
-    onDrop(e) {
-        console.log('Dropped files', e.dataTransfer.files);
-    },
-};
-
-class FileUploadView extends React.Component<any, any> {
-    render() {
-        return (<Dragger {...props}>
-                <p className="ant-upload-drag-icon">
-                    <InboxOutlined/>
-                </p>
-                <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
-                <p className="ant-upload-hint">
-                    支持扩展名: .png, .jpg, .jpeg
-                </p>
-            </Dragger>
-        )
-    }
-}
-
 
 function UpLoadModal(props: any) {
     const [loading, setLoading] = useState(false)
+    const [uploaderKey, setUploaderKey] = useState(0)
     const handleOk = () => {
+        if (tempFile === null)
+            return
         setLoading(true);
         let data = new FormData();
         data.append('invoiceFile', tempFile)
@@ -73,6 +58,11 @@ function UpLoadModal(props: any) {
         props.onClose()
     };
 
+    useEffect(() => {
+        setUploaderKey(uploaderKey+1)
+        tempFile = null
+    }, [props.open]);
+
     return (
         <Modal
             open={props.open}
@@ -88,7 +78,30 @@ function UpLoadModal(props: any) {
                 </Button>
             ]}
         >
-            <FileUploadView/>
+            <div key={uploaderKey}>
+                <Dragger
+                    multiple={false}
+                    maxCount={1}
+                    accept={".png, .jpg, .jpeg"}
+                    beforeUpload={(file, fileList) => {
+                        tempFile = file
+                        console.log(file)
+                        return false
+                    }}
+                    onRemove={(file) => {
+                        tempFile = null
+                        return true
+                    }}>
+                    <p className="ant-upload-drag-icon">
+                        <InboxOutlined/>
+                    </p>
+                    <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
+                    <p className="ant-upload-hint">
+                        支持扩展名: .png, .jpg, .jpeg
+                    </p>
+                </Dragger>
+            </div>
+
         </Modal>
     )
 }
@@ -116,13 +129,13 @@ function FormModal(props: any) {
     const submit = () => {
         setLoading(true)
         console.log(form.getFieldsValue())
-        let result:InvoiceIdentifyResponse = {...invoice , ...form.getFieldsValue()} as InvoiceIdentifyResponse
+        let result: InvoiceIdentifyResponse = {...invoice, ...form.getFieldsValue()} as InvoiceIdentifyResponse
         console.log(result)
         if (typeof result.invoiceDate !== "string") {
             result.invoiceDate = result.invoiceDate.format("YYYY-MM-DD")
         }
 
-        result.invoiceAmount*=100
+        result.invoiceAmount *= 100
         console.log(result)
         axiosInstance({
             url: 'common/invoice/submit',
@@ -144,9 +157,9 @@ function FormModal(props: any) {
     const inputComponent = (item: string) => {
         if (item === 'invoiceDate')
             return <DatePicker/>
-        else if(item === 'invoiceAmount')
+        else if (item === 'invoiceAmount')
-            return  <InputNumber
+            return <InputNumber
-                style={{ width: '100%' }}
+                style={{width: '100%'}}
                 formatter={(value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
             />
         else
@@ -163,23 +176,23 @@ function FormModal(props: any) {
         })
         return options
     }
-    const refreshFormItems = (invoiceKind:number) =>{
+    const refreshFormItems = (invoiceKind: number) => {
         let items = invoiceTypeItemsMap.get(invoiceKind)?.map((item, index) => {
-                return (
+            return (
-                    <Form.Item
+                <Form.Item
-                        key={index}
+                    key={index}
-                        name={item}
+                    name={item}
-                        label={invoiceItemsMap.get(item)}
+                    label={invoiceItemsMap.get(item)}
-                    >
+                >
-                        {inputComponent(item)}
+                    {inputComponent(item)}
-                    </Form.Item>
+                </Form.Item>
-                )
+            )
         })
         let extraItems = invoiceTypeExtraItemsMap.get(invoiceKind)?.map((item, index) => {
             return (
                 <Form.Item
                     key={index}
-                    name={['invoiceExtraInfo',item]}
+                    name={['invoiceExtraInfo', item]}
                     label={item}
                 >
                     {inputComponent(item)}
@@ -191,11 +204,11 @@ function FormModal(props: any) {
         setFormItems(<>
                 {items}
                 {extraItems}
-        </>
+            </>
-           )
+        )
     }
 
-    const onTypeChange = (value:number) => {
+    const onTypeChange = (value: number) => {
         refreshFormItems(value)
     }
 
@@ -266,11 +279,11 @@ class InvoiceUploadView extends React.Component<any, any> {
     }
 
     handleUploadModalClose = () => {
-        this.setState({uploadModalOpen:false})
+        this.setState({uploadModalOpen: false})
     }
 
     handleClose = () => {
-        this.setState({formModalOpen:false})
+        this.setState({formModalOpen: false})
     }
 
     render() {
@@ -281,8 +294,11 @@ class InvoiceUploadView extends React.Component<any, any> {
                 <Button onClick={this.showUploadView} className="uploadButton" type="primary" icon={<UploadOutlined/>}>
                     上传
                 </Button>
-                <UpLoadModal open={this.state.uploadModalOpen} nextStep={this.handleNextStep} onClose={this.handleUploadModalClose}/>
+                <UpLoadModal open={this.state.uploadModalOpen} nextStep={this.handleNextStep}
-                <FormModal needRefresh={()=>{ this.props.needRefresh()}}  open={this.state.formModalOpen} onClose={this.handleClose}
+                             onClose={this.handleUploadModalClose}/>
+                <FormModal needRefresh={() => {
+                    this.props.needRefresh()
+                }} open={this.state.formModalOpen} onClose={this.handleClose}
                            invoiceIdentifyResponse={this.state.invoiceIdentifyResponse}/>
             </>);
 

src/pages/stat/StatView.tsx

@@ -1,10 +1,11 @@
 import type {DatePickerProps, TimePickerProps} from 'antd';
-import {theme, DatePicker, Select, Space, Card, Statistic} from 'antd';
+import {theme, DatePicker, Select, Space, Card, Statistic, Spin} from 'antd';
 import {ArrowDownOutlined, ArrowUpOutlined, createFromIconfontCN} from '@ant-design/icons'
 import {useEffect, useRef, useState} from "react";
 import ReactECharts from 'echarts-for-react';
 import * as Echarts from 'echarts'
 import china from '../../assets/mapjson/china.json'
+import dayjs, {Dayjs} from "dayjs";
 // @ts-ignore
 Echarts.registerMap('china', china);
 
@@ -16,7 +17,7 @@ const IconFont = createFromIconfontCN({
     scriptUrl: '//at.alicdn.com/t/c/font_3830502_eyfw75skyu.js',
 });
 
-function HorizontalBarChart(props:{title:string, values: number[], labels: string[]}) {
+function HorizontalBarChart(props: { title: string, values: number[], labels: string[] }) {
     return <ReactECharts option={{
         color: [
             '#6395f9',
@@ -88,26 +89,38 @@ function StatView() {
     const [destinationValues, setDestinationValues] = useState<any>([])
 
     useEffect(() => {
-        setAmounts([120, 43])
+        getStatData(dayjs())
-        setInvoiceKinds([{value: 1048, name: '增值税发票'},
-            {value: 735, name: '火车票'},
-            {value: 580, name: '机票行程单'},
-            {value: 484, name: '通用机打发票'},
-            {value: 300, name: '过路过桥费发票'}])
-        setDepartmentPieData([{value: 1048, name: '钝角部'},
-            {value: 735, name: '投影立体角部'},
-            {value: 580, name: '财务部'},
-            {value: 484, name: '采购部'},
-            {value: 300, name: '销售部'}])
-        setDepartureNames(['北京', '上海', '广州', '深圳', '成都'])
-        setDepartureValues([100,80,70,60,50])
-        setDestinationNames(['北京', '上海', '广州', '深圳', '成都'])
-        setDestinationValues([100,80,70,60,50])
-        setLoading(false)
     }, []);
 
+    const getStatData = (time: Dayjs | null) => {
+        console.log(time)
+        setLoading(true)
+        setTimeout(() => {
+            setAmounts([120, 43])
+            setInvoiceKinds([{value: 1048, name: '增值税发票'},
+                {value: 735, name: '火车票'},
+                {value: 580, name: '机票行程单'},
+                {value: 484, name: '通用机打发票'},
+                {value: 300, name: '过路过桥费发票'}])
+            setDepartmentPieData([{value: 1048, name: '钝角部'},
+                {value: 735, name: '投影立体角部'},
+                {value: 580, name: '财务部'},
+                {value: 484, name: '采购部'},
+                {value: 300, name: '销售部'}])
+            setDepartureNames(['北京', '上海', '广州', '深圳', '成都'])
+            setDepartureValues([100, 80, 70, 60, 50])
+            setDestinationNames(['北京', '上海', '广州', '深圳', '成都'])
+            setDestinationValues([100, 80, 70, 60, 50])
+            setLoading(false)
+        }, 1000);
+    }
+
     return (
-        <div>
+        <div style={{
+            display: "flex",
+            flexDirection: "column",
+            height: '100%'
+        }}>
             <div style={{
                 height: 72,
                 padding: '30px',
@@ -121,11 +134,13 @@ function StatView() {
                         <Option value="month">月度统计</Option>
                         <Option value="year">年度统计</Option>
                     </Select>
-                    <DatePicker picker={type} onChange={(value) => console.log(value)}/>
+                    <DatePicker allowClear={false} picker={type} onChange={getStatData} defaultValue={dayjs()}/>
                 </Space>
             </div>
             {loading ?
-                <div></div> :
+                <div style={{flex: 1,display: "flex",  alignItems: "center", justifyContent: "center"}}>
+                    <Spin size="large"/>
+                </div> :
                 <div>
                     <div style={{
                         width: '100%',
@@ -351,7 +366,8 @@ function StatView() {
                                 <HorizontalBarChart title={'出发地'} values={departureValues} labels={departureNames}/>
                             </Card>
                             <Card style={{flex: 1, flexBasis: 300, margin: 10, minWidth: 0, minHeight: 0}}>
-                                <HorizontalBarChart title={'目的地'} values={destinationValues} labels={destinationNames}/>
+                                <HorizontalBarChart title={'目的地'} values={destinationValues}
+                                                    labels={destinationNames}/>
                             </Card>
                         </div>
                     </div>