实现发票extrainfo的显示和修改

src/models/Invoice.ts

@@ -1,6 +1,7 @@
 import {Staff} from "./Staff";
 import {Reimbursement} from "./Reimbursement";
-import  {Dayjs} from "dayjs"
+import {Dayjs} from "dayjs"
+
 export interface Invoice {
     invoiceAmount: number;
     invoiceCode: string;
@@ -28,7 +29,7 @@ export interface InvoiceIdentifyResponse {
     invoiceAmount: number;
     invoiceCheckCode?: string;
     invoiceCode: string;
-    invoiceDate: string|Dayjs;
+    invoiceDate: string | Dayjs;
     invoiceDeparture?: string;
     invoiceDestination?: string;
     invoiceExtraInfo: InvoiceExtraInfo[];
@@ -46,7 +47,7 @@ export interface InvoiceExtraInfo {
     value: string;
 }
 
-export const invoiceTypeNameMap = new Map ([
+export const invoiceTypeNameMap = new Map([
     [0, '出租车发票'],
     [1, '定额发票'],
     [2, '火车票'],
@@ -77,10 +78,14 @@ export const invoiceItemsMap = new Map([
     ['invoiceName', '发票名称'],
 ])
 
-export const invoiceTypeItemsMap = new Map ([
+export const invoiceTypeItemsMap = new Map([
-
+    [3, ['invoiceName', 'invoiceNo', 'invoiceCode', 'invoiceAmount', 'invoiceDate', 'invoiceCheckCode']],
     [13, ['invoiceName', 'invoiceNo', 'invoiceCode', 'invoiceAmount', 'invoiceDate', 'invoiceDeparture', 'invoiceDestination']],
 ])
+export const invoiceTypeExtraItemsMap = new Map([
+    [3, ['合计金额','合计税额', '购买方名称', '销售方名称', '收款人']],
+    [13, ['时间']],
+])
 
 
 /*
@@ -103,4 +108,53 @@ export const invoiceTypeItemsMap = new Map ([
     "invoiceDeparture": "苏家屯",
     "invoiceDestination": "灯塔",
     "invoiceName": "辽宁省高速公路通行费专用发票"
-}*/
+}
+*/
+
+
+// {
+//     "invoiceFileName": "4e39de8ff42cd6a75df83d554f60853c.jpg",
+//     "invoiceNo": "50070865",
+//     "invoiceCode": "032002200111",
+//     "invoiceAmount": 118.37,
+//     "invoiceDate": "2022-10-27T16:00:00.000Z",
+//     "invoiceKind": 3,
+//     "invoiceCheckCode": "04755931365083087405",
+//     "invoiceRegionCode": "",
+//     "invoiceSellerTaxCode": "",
+//     "invoiceExtraInfo": {
+//     "税额": "-2.37",
+//         "复核": "李思",
+//         "省": "江苏省",
+//         "是否有公司印章": "1",
+//         "单价": "123.01",
+//         "备注": "订单号:255796687815",
+//         "机器编号": "499098825881",
+//         "单位": "个",
+//         "数量": "1",
+//         "销售方地址、电话": "昆山市干灯镇瞿家路555号8号房0512-39915704",
+//         "合计金额": "¥104.75",
+//         "发票类型": "增值税电子普通发票",
+//         "销售方名称": "昆山京东尚信贸易有限公司",
+//         "开票人": "汤丹丹",
+//         "购买方名称": "个人",
+//         "合计税额": "¥13.62",
+//         "货物或应税劳务、服务名称": "*蓄电池*绿联苹果充电宝快充20000毫安时大容量便携移动电源支持PD20W华为22.5W超级快充通用iPh",
+//         "密码区3": "1-1<9987*</7-104+1+*/81*5-4*",
+//         "密码区4": "2/+6>29-24019>2619+56>4+515+",
+//         "销售方开户行及账号": "中国建设银行昆山干灯支行32201986438051511848",
+//         "密码区1": "031<9987*</7-104+1520*>+>*2<",
+//         "规格型号": "20542",
+//         "税率": "13%",
+//         "密码区2": "686>3</014**/287273/34>/895+",
+//         "价税合计(大写)": "壹佰壹拾捌元叁角柒分",
+//         "销售方识别号": "913205830880018839",
+//         "发票消费类型": "服务",
+//         "收款人": "王陆",
+//         "金额": "-18.26"
+// },
+//     "invoiceNote": null,
+//     "invoiceDeparture": null,
+//     "invoiceDestination": null,
+//     "invoiceName": "江苏增值税电子普通发票"
+// }

src/pages/Invoice/mine/InvoiceUploadView.tsx

@@ -10,7 +10,7 @@ import type {FormInstance} from 'antd/es/form';
 import {useAppDispatch} from "../../../models/hooks";
 import {
     InvoiceIdentifyResponse,
-    invoiceItemsMap,
+    invoiceItemsMap, invoiceTypeExtraItemsMap,
     invoiceTypeItemsMap,
     invoiceTypeNameMap,
 } from "../../../models/Invoice";
@@ -22,7 +22,7 @@ const props: UploadProps = {
     name: 'file',
     multiple: false,
     maxCount: 1,
-    accept: "image/png, image/jpeg, image/jpg",
+    accept: ".png, .jpg, .jpeg",
     beforeUpload: (file, fileList) => {
         tempFile = file
         console.log(file)
@@ -102,13 +102,16 @@ function FormModal(props: any) {
     const [open, setOpen] = useState(false)
     const [loading, setLoading] = useState(false)
     const [invoice, setInvoice] = useState({})
+    const [formItems, setFormItems] = useState(undefined)
     const [form] = Form.useForm();
     useEffect(() => {
         setOpen(props.open)
         console.log(props.invoiceIdentifyResponse)
         let i = {...props.invoiceIdentifyResponse}
         setInvoice(i)
+        refreshFormItems(props.invoiceIdentifyResponse?.invoiceKind)
         form.setFieldsValue(i)
+
     }, [props]);
     const handleCancel = () => {
         setOpen(false);
@@ -150,17 +153,6 @@ function FormModal(props: any) {
         else
             return <Input/>
     }
-    let formItems = invoiceTypeItemsMap.get(props.invoiceIdentifyResponse?.invoiceKind)?.map((item, index) => {
-        return (
-            <Form.Item
-                key={index}
-                name={item}
-                label={invoiceItemsMap.get(item)}
-            >
-                {inputComponent(item)}
-            </Form.Item>
-        )
-    })
 
     const getInvoiceKindOptions = () => {
         let options: { value: number; label: string; }[] = []
@@ -172,6 +164,41 @@ function FormModal(props: any) {
         })
         return options
     }
+    const refreshFormItems = (invoiceKind:number) =>{
+        let items = invoiceTypeItemsMap.get(invoiceKind)?.map((item, index) => {
+                return (
+                    <Form.Item
+                        key={index}
+                        name={item}
+                        label={invoiceItemsMap.get(item)}
+                    >
+                        {inputComponent(item)}
+                    </Form.Item>
+                )
+        })
+        let extraItems = invoiceTypeExtraItemsMap.get(invoiceKind)?.map((item, index) => {
+            return (
+                <Form.Item
+                    key={index}
+                    name={['invoiceExtraInfo',item]}
+                    label={item}
+                >
+                    {inputComponent(item)}
+                </Form.Item>
+            )
+        })
+
+        // @ts-ignore
+        setFormItems(<>
+                {items}
+                {extraItems}
+        </>
+           )
+    }
+
+    const onTypeChange = (value:number) => {
+        refreshFormItems(value)
+    }
 
     return (
         <Modal
@@ -197,6 +224,7 @@ function FormModal(props: any) {
                 >
                     <Select
                         options={getInvoiceKindOptions()}
+                        onChange={onTypeChange}
                     />
                 </Form.Item>
                 {formItems}