From 6ba1e4fe6ef58e63ac0757e0146b16f997380ac8 Mon Sep 17 00:00:00 2001
From: "yang.yongquan" <3395816735@qq.com>
Date: Tue, 27 Dec 2022 19:01:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=86=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E4=B8=AD=E8=AF=86=E5=88=AB=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Invoice/mine/InvoiceUploadView.tsx | 222 +++++++++++++++++++
 1 file changed, 222 insertions(+)
 create mode 100644 src/pages/Invoice/mine/InvoiceUploadView.tsx

diff --git a/src/pages/Invoice/mine/InvoiceUploadView.tsx b/src/pages/Invoice/mine/InvoiceUploadView.tsx
new file mode 100644
index 0000000..ca33cf4
--- /dev/null
+++ b/src/pages/Invoice/mine/InvoiceUploadView.tsx
@@ -0,0 +1,222 @@
+import React, {useState} from 'react';
+import {Button, Modal, UploadProps, message, Upload, UploadFile, Form, Input,DatePicker} from 'antd';
+import { InboxOutlined } from '@ant-design/icons';
+import axiosInstance from "../../../utils/axiosInstance";
+import {InvoiceCommit} from "../../../models/Staff";
+import dayjs from 'dayjs';
+import TextArea from "antd/es/input/TextArea";
+import {constants} from "http2";
+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
+        console.log(file)
+        return false
+    },
+    onChange(info) {
+        // const { status } = info.file;
+        // if (status !== 'uploading') {
+        //     console.log('here---------'+info.file, info.fileList);
+        // }
+        // if (status === 'done') {
+        //     message.success(`${info.file.name} file uploaded successfully.`);
+        // } else if (status === 'error') {
+        //     message.error(`${info.file.name} file upload failed.`);
+        // }
+    },
+    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>
+        )
+    }
+}
+
+
+class InvoiceUploadView extends React.Component<any, any>{
+    constructor(props: {}) {
+        super(props);
+        this.state = {
+            loading: false,
+            open: false,
+            uploadOpen: false,
+            uploadStep: 0,
+            invoiceCommit: new InvoiceCommit(),
+        }
+    }
+    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)
+        axiosInstance({
+            url: '/invoice/identify',//123131',//FIXME
+            method: 'POST',
+            data: data
+        }).then(response => {
+            console.log(response.data)
+            let result = new InvoiceCommit()
+            result.invoiceNo = response.data.invoiceNo
+            result.invoiceDate = response.data.invoiceDate
+            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 = response.data.invoiceExtraInfo
+            this.setState({invoiceCommit:result})
+        }).catch(function (error) {
+            console.log(error)
+        })
+        this.setState({uploadStep:1})
+        this.setUploadOpen(true)
+        this.setLoading(false);
+        // let fakeData=new InvoiceCommit()
+        // fakeData.invoiceNo="No"
+        // fakeData.invoiceCode="Code"
+        // fakeData.invoiceDate=new Date()
+        // setInvoiceCommit(fakeData)
+
+
+    };
+
+    handleCancel = () => {
+        this.setOpen(false);
+    };
+    submit=()=>{
+
+    }
+    render() {
+        console.log(this.state.invoiceCommit)
+        console.log(this.state.uploadStep)
+
+
+            return (
+                <>
+                    <Button type="primary" onClick={this.showUploadView}>
+                        Open Modal with customized footer
+                    </Button>
+                    <Modal
+                        open={this.state.open}
+                        title="Title"
+                        onOk={this.handleOk}
+                        onCancel={this.handleCancel}
+                        footer={[
+                            <Button key="cancel" onClick={this.handleCancel}>
+                                取消
+                            </Button>,
+                            <Button key="next" type="primary" loading={this.state.loading} onClick={this.handleOk}>
+                                下一步
+                            </Button>
+                        ]}
+                    >
+                        <FileUploadView/>
+                    </Modal>
+                <Modal
+                    open={this.state.uploadOpen}
+                    title="Title"
+                    onOk={this.submit}
+                    onCancel={this.handleCancel}
+                    footer={[
+                        <Button key="cancel" onClick={this.handleCancel}>
+                            取消
+                        </Button>,
+                        <Button key="next" type="primary" loading={this.state.loading} onClick={this.submit}
+                        >
+                            下一步
+                        </Button>
+                    ]}
+                >
+                    <Form>
+                        <Form.Item
+                            name={`invoice-no`}
+                            label={`发票编码`}
+                        >
+                            <Input defaultValue={this.state.invoiceCommit.invoiceNo}/>
+                        </Form.Item>
+                        <Form.Item
+                            name={`invoice-Code`}
+                            label={`发票代码`}
+                        >
+                            <Input defaultValue={this.state.invoiceCommit.invoiceCode}/>
+                        </Form.Item>
+                        <Form.Item
+                            name={`invoice-Kind`}
+                            label={`发票类型`}
+                        >
+                            <Input defaultValue={this.state.invoiceCommit.invoiceKind}/>
+                        </Form.Item>
+                        <Form.Item
+                            name={`invoice-amount`}
+                            label={`计税总额`}
+                        >
+                            <Input defaultValue={this.state.invoiceCommit.invoiceAmount}/>
+                        </Form.Item>
+                        <Form.Item
+                            name={`invoice-amount-without-tax`}
+                            label={`非税金额`}
+                        >
+                            <Input defaultValue={this.state.invoiceCommit.invoiceAmountWithoutTax}/>
+                        </Form.Item>
+                        <Form.Item
+                            name={`invoice-date`}
+                            label={`开票日期`}
+                        >
+                            <DatePicker defaultValue={dayjs(this.state.invoiceCommit.invoiceDate)}/>
+                        </Form.Item>
+                        <Form.Item
+                            name={`invoice-check-code`}
+                            label={`核验码`}
+                        >
+                            <Input defaultValue={this.state.invoiceCommit.invoiceCheckCode}/>
+                        </Form.Item>
+                        <Form.Item
+                            name={`invoice-extra-info`}
+                            label={`其他信息`}
+                        >
+                            <TextArea defaultValue={this.state.invoiceCommit.invoiceExtraInfo}/>
+                        </Form.Item>
+                    </Form>
+                </Modal>
+            </>);
+
+    }
+
+};
+
+export default InvoiceUploadView;
\ No newline at end of file