Merge remote-tracking branch 'origin/main'

main
白封羽 2023-01-05 12:02:06 +08:00
commit 4d5d5be95f
2 changed files with 110 additions and 78 deletions

View File

@ -1,5 +1,17 @@
import React, {useEffect, useRef, useState} from 'react'; 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 {InboxOutlined, UploadOutlined} from '@ant-design/icons';
import axiosInstance from "../../../utils/axiosInstance"; import axiosInstance from "../../../utils/axiosInstance";
import dayjs, {Dayjs} from 'dayjs'; import dayjs, {Dayjs} from 'dayjs';
@ -16,41 +28,14 @@ import {
const {Dragger} = Upload; 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) { function UpLoadModal(props: any) {
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [uploaderKey, setUploaderKey] = useState(0)
const handleOk = () => { const handleOk = () => {
if (tempFile === null)
return
setLoading(true); setLoading(true);
let data = new FormData(); let data = new FormData();
data.append('invoiceFile', tempFile) data.append('invoiceFile', tempFile)
@ -73,6 +58,11 @@ function UpLoadModal(props: any) {
props.onClose() props.onClose()
}; };
useEffect(() => {
setUploaderKey(uploaderKey+1)
tempFile = null
}, [props.open]);
return ( return (
<Modal <Modal
open={props.open} open={props.open}
@ -88,7 +78,30 @@ function UpLoadModal(props: any) {
</Button> </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> </Modal>
) )
} }
@ -116,13 +129,13 @@ function FormModal(props: any) {
const submit = () => { const submit = () => {
setLoading(true) setLoading(true)
console.log(form.getFieldsValue()) console.log(form.getFieldsValue())
let result:InvoiceIdentifyResponse = {...invoice , ...form.getFieldsValue()} as InvoiceIdentifyResponse let result: InvoiceIdentifyResponse = {...invoice, ...form.getFieldsValue()} as InvoiceIdentifyResponse
console.log(result) console.log(result)
if (typeof result.invoiceDate !== "string") { if (typeof result.invoiceDate !== "string") {
result.invoiceDate = result.invoiceDate.format("YYYY-MM-DD") result.invoiceDate = result.invoiceDate.format("YYYY-MM-DD")
} }
result.invoiceAmount*=100 result.invoiceAmount *= 100
console.log(result) console.log(result)
axiosInstance({ axiosInstance({
url: 'common/invoice/submit', url: 'common/invoice/submit',
@ -144,9 +157,9 @@ function FormModal(props: any) {
const inputComponent = (item: string) => { const inputComponent = (item: string) => {
if (item === 'invoiceDate') if (item === 'invoiceDate')
return <DatePicker/> 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, ',')} formatter={(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
/> />
else else
@ -163,23 +176,23 @@ function FormModal(props: any) {
}) })
return options return options
} }
const refreshFormItems = (invoiceKind:number) =>{ const refreshFormItems = (invoiceKind: number) => {
let items = invoiceTypeItemsMap.get(invoiceKind)?.map((item, index) => { 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) => { let extraItems = invoiceTypeExtraItemsMap.get(invoiceKind)?.map((item, index) => {
return ( return (
<Form.Item <Form.Item
key={index} key={index}
name={['invoiceExtraInfo',item]} name={['invoiceExtraInfo', item]}
label={item} label={item}
> >
{inputComponent(item)} {inputComponent(item)}
@ -191,11 +204,11 @@ function FormModal(props: any) {
setFormItems(<> setFormItems(<>
{items} {items}
{extraItems} {extraItems}
</> </>
) )
} }
const onTypeChange = (value:number) => { const onTypeChange = (value: number) => {
refreshFormItems(value) refreshFormItems(value)
} }
@ -266,11 +279,11 @@ class InvoiceUploadView extends React.Component<any, any> {
} }
handleUploadModalClose = () => { handleUploadModalClose = () => {
this.setState({uploadModalOpen:false}) this.setState({uploadModalOpen: false})
} }
handleClose = () => { handleClose = () => {
this.setState({formModalOpen:false}) this.setState({formModalOpen: false})
} }
render() { render() {
@ -281,8 +294,11 @@ class InvoiceUploadView extends React.Component<any, any> {
<Button onClick={this.showUploadView} className="uploadButton" type="primary" icon={<UploadOutlined/>}> <Button onClick={this.showUploadView} className="uploadButton" type="primary" icon={<UploadOutlined/>}>
</Button> </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}/> invoiceIdentifyResponse={this.state.invoiceIdentifyResponse}/>
</>); </>);

View File

@ -1,10 +1,11 @@
import type {DatePickerProps, TimePickerProps} from 'antd'; 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 {ArrowDownOutlined, ArrowUpOutlined, createFromIconfontCN} from '@ant-design/icons'
import {useEffect, useRef, useState} from "react"; import {useEffect, useRef, useState} from "react";
import ReactECharts from 'echarts-for-react'; import ReactECharts from 'echarts-for-react';
import * as Echarts from 'echarts' import * as Echarts from 'echarts'
import china from '../../assets/mapjson/china.json' import china from '../../assets/mapjson/china.json'
import dayjs, {Dayjs} from "dayjs";
// @ts-ignore // @ts-ignore
Echarts.registerMap('china', china); Echarts.registerMap('china', china);
@ -16,7 +17,7 @@ const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_3830502_eyfw75skyu.js', 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={{ return <ReactECharts option={{
color: [ color: [
'#6395f9', '#6395f9',
@ -88,26 +89,38 @@ function StatView() {
const [destinationValues, setDestinationValues] = useState<any>([]) const [destinationValues, setDestinationValues] = useState<any>([])
useEffect(() => { 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 ( return (
<div> <div style={{
display: "flex",
flexDirection: "column",
height: '100%'
}}>
<div style={{ <div style={{
height: 72, height: 72,
padding: '30px', padding: '30px',
@ -121,11 +134,13 @@ function StatView() {
<Option value="month"></Option> <Option value="month"></Option>
<Option value="year"></Option> <Option value="year"></Option>
</Select> </Select>
<DatePicker picker={type} onChange={(value) => console.log(value)}/> <DatePicker allowClear={false} picker={type} onChange={getStatData} defaultValue={dayjs()}/>
</Space> </Space>
</div> </div>
{loading ? {loading ?
<div></div> : <div style={{flex: 1,display: "flex", alignItems: "center", justifyContent: "center"}}>
<Spin size="large"/>
</div> :
<div> <div>
<div style={{ <div style={{
width: '100%', width: '100%',
@ -351,7 +366,8 @@ function StatView() {
<HorizontalBarChart title={'出发地'} values={departureValues} labels={departureNames}/> <HorizontalBarChart title={'出发地'} values={departureValues} labels={departureNames}/>
</Card> </Card>
<Card style={{flex: 1, flexBasis: 300, margin: 10, minWidth: 0, minHeight: 0}}> <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> </Card>
</div> </div>
</div> </div>