添加了一个树形列表组件

src/models/Invoice.ts

@@ -89,7 +89,7 @@ export interface InvoiceDetail {
     invoiceUploader: Staff;
     invoiceUploadTime: string|Dayjs;
     modified: boolean;
-    reimbursement: Reimbursement;
+    reimbursement?: Reimbursement;
 }
 
 export interface InvoiceIdentifyResponse {

src/pages/reimbursement/mine/component/tempComponent.tsx

@@ -1,9 +1,87 @@
 import {Invoice} from "../../../../models/ReimbursementDetailModal";
-import React from "react";
+import {InvoiceDetail} from "../../../../models/Invoice";
+import {Staff} from "../../../../models/Staff";
+import React, {useState} from "react";
+import {Tree} from 'antd';
+import type {DataNode, DirectoryTreeProps} from 'antd/es/tree';
+import {SwapRightOutlined, SwapLeftOutlined} from '@ant-design/icons'
+import InvoiceDetailModal from "../../../Invoice/InvoiceDetailModal";
 
+const {DirectoryTree} = Tree;
 
-function displayInvoicesList(departureInvoice: Invoice, destinationInvoice: Invoice | null, otherInvoices: Invoice[]) {
+function toInvoiceDetail(invoice: Invoice) {
+    let uploader = invoice.invoiceUploader;
+    let initStaff: Staff = {
+        managingDepartment: null,
+        staffBase: "",
+        staffDepartments: [],
+        staffId: "0000",
+        staffName: ""
+    }
+    let resInvoiceDetail: InvoiceDetail = {
+        invoiceAmount: invoice.invoiceAmount ? invoice.invoiceAmount : 0,
+        invoiceNote: invoice.invoiceNote ? invoice.invoiceNote : "",
+        invoiceState: invoice.invoiceState ? invoice.invoiceState : 0,
+        invoiceUploadTime: invoice.invoiceUploadTime ? invoice.invoiceUploadTime : "",
+        invoiceUploader: initStaff,
+        modified: invoice.modified ? invoice.modified : false,
+        invoiceNo: invoice.invoiceNo ? invoice.invoiceNo : "Undefined",
+        invoiceCode: invoice.invoiceCode ? invoice.invoiceCode : "Undefined",
+        invoiceDate: invoice.invoiceDate,
+        invoiceDeparture: invoice.invoiceDeparture ? invoice.invoiceDeparture : "",
+        invoiceDestination: invoice.invoiceDestination ? invoice.invoiceDestination: "",
+        invoiceFileUri: invoice.invoiceFileUri ? invoice.invoiceFileUri : "",
+        invoiceThumbnailUri: invoice.invoiceThumbnailUri ? invoice.invoiceThumbnailUri: "",
+        invoiceId: invoice.invoiceId,
+        invoiceKind: invoice.invoiceKind ? invoice.invoiceKind : 0
+    };
+    return resInvoiceDetail;
 
-    return (<></>)
 }
+function displayInvoicesList(departureInvoice: Invoice, destinationInvoice: Invoice | null, otherInvoices: Invoice[]) {
+    function getTreeData() {
+        let treeData: DataNode[] = [];
+        let mainData: DataNode = {
+            title: '往返票据',
+            key: '0-0',
+            children: [
+                {title: '出发票据', key: '0-0-0', isLeaf: true, icon: <SwapRightOutlined/>},
+            ]
+        };
+        if (destinationInvoice != null) {
+            mainData.children?.push({title: '返程票据', key: '0-0-1', isLeaf: true, icon: <SwapLeftOutlined/>});
+        }
+        let othersData: DataNode = {
+            title: '其他票据',
+            key: '0-1',
+            children: []
+        };
+        for(let i=0; i<otherInvoices.length; i++) {
+            othersData.children?.push({title: `附加票据-${i}`, key: `0-1-${i}`, isLeaf: true});
+        }
+        treeData.push(othersData)
+        return treeData;
+    }
+
+    const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
+        if(keys[0] == '0-0-0') {
+
+        }
+        if(keys[0] == '0-0-1') {
+
+        }
+        let keyList = keys[0].toString().split('-')
+        let index = parseInt(keyList[keyList.length-1])
+
+    };
+
+    return (<>
+        <DirectoryTree
+            defaultExpandAll
+            onSelect={onSelect}
+            treeData={getTreeData()}
+        />
+    </>)
+}
+
 export default displayInvoicesList