解决上传发票的问题

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
-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>
-        )
-    }
-}
-
+let tempFile: File | null = null
 
 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>
     )
 }
@@ -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}/>
-                <FormModal needRefresh={()=>{ this.props.needRefresh()}}  open={this.state.formModalOpen} onClose={this.handleClose}
+                <UpLoadModal open={this.state.uploadModalOpen} nextStep={this.handleNextStep}
+                             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);
 
@@ -88,6 +89,13 @@ function StatView() {
     const [destinationValues, setDestinationValues] = useState<any>([])
 
     useEffect(() => {
+        getStatData(dayjs())
+    }, []);
+
+    const getStatData = (time: Dayjs | null) => {
+        console.log(time)
+        setLoading(true)
+        setTimeout(() => {
             setAmounts([120, 43])
             setInvoiceKinds([{value: 1048, name: '增值税发票'},
                 {value: 735, name: '火车票'},
@@ -104,10 +112,15 @@ function StatView() {
             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>