From 47ef702eab61dabada459b5721ae4f9c863adef8 Mon Sep 17 00:00:00 2001 From: wuyize Date: Wed, 4 Jan 2023 20:24:18 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E4=B8=8A=E4=BC=A0=E5=8F=91?= =?UTF-8?q?=E7=A5=A8=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Invoice/mine/InvoiceUploadView.tsx | 128 +++++++++++-------- src/pages/stat/StatView.tsx | 60 +++++---- 2 files changed, 110 insertions(+), 78 deletions(-) diff --git a/src/pages/Invoice/mine/InvoiceUploadView.tsx b/src/pages/Invoice/mine/InvoiceUploadView.tsx index f7f777f..c338d17 100644 --- a/src/pages/Invoice/mine/InvoiceUploadView.tsx +++ b/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 { - render() { - return ( -

- -

-

点击或将文件拖拽到这里上传

-

- 支持扩展名: .png, .jpg, .jpeg -

- - ) - } -} - +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 ( ]} > - +
+ { + tempFile = file + console.log(file) + return false + }} + onRemove={(file) => { + tempFile = null + return true + }}> +

+ +

+

点击或将文件拖拽到这里上传

+

+ 支持扩展名: .png, .jpg, .jpeg +

+ +
+ ) } @@ -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 - else if(item === 'invoiceAmount') - return `￥ ${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 ( - - {inputComponent(item)} - - ) + return ( + + {inputComponent(item)} + + ) }) let extraItems = invoiceTypeExtraItemsMap.get(invoiceKind)?.map((item, index) => { return ( {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 { } 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 { - - { this.props.needRefresh()}} open={this.state.formModalOpen} onClose={this.handleClose} + + { + this.props.needRefresh() + }} open={this.state.formModalOpen} onClose={this.handleClose} invoiceIdentifyResponse={this.state.invoiceIdentifyResponse}/> ); diff --git a/src/pages/stat/StatView.tsx b/src/pages/stat/StatView.tsx index 387530e..fa97a4e 100644 --- a/src/pages/stat/StatView.tsx +++ b/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 ([]) useEffect(() => { - 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) + getStatData(dayjs()) }, []); + 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 ( -
+
月度统计 - console.log(value)}/> +
{loading ? -
: +
+ +
:
- +