diff --git a/src/pages/reimbursement/mine/ReimbursementDetail.tsx b/src/pages/reimbursement/mine/ReimbursementDetail.tsx
index 9c6989f..d2133e9 100644
--- a/src/pages/reimbursement/mine/ReimbursementDetail.tsx
+++ b/src/pages/reimbursement/mine/ReimbursementDetail.tsx
@@ -16,7 +16,7 @@ import TextArea from "antd/es/input/TextArea";
 import {ApprovalProcess, Invoice, ReimbursementDetailModal} from "../../../models/ReimbursementDetailModal";
 import dayjs, {Dayjs} from "dayjs";
 import {ExclamationCircleOutlined} from "@ant-design/icons";
-import displayInvoicesList from "./component/tempComponent";
+import DisplayInvoicesList from "./component/ReimbursementDetailFiles";
 import {
     CheckCircleOutlined,
     ClockCircleOutlined,
@@ -91,8 +91,9 @@ function displayRawInfo(reimbursement: ReimbursementDetailModal | undefined | nu
                     {reimbursement.reimbursementNote}
                 </Descriptions.Item>
                 <Descriptions.Item span={2} label="附件列表">
-                    {displayInvoicesList(reimbursement.reimbursementDepartureInvoice,
-                        reimbursement.reimbursementDestinationInvoice, reimbursement.invoices)}
+                    <DisplayInvoicesList departureInvoice={reimbursement.reimbursementDepartureInvoice}
+                                            destinationInvoice={reimbursement.reimbursementDestinationInvoice}
+                                            otherInvoices={reimbursement.invoices}/>
                 </Descriptions.Item>
             </Descriptions>
         </>)
diff --git a/src/pages/reimbursement/mine/component/tempComponent.tsx b/src/pages/reimbursement/mine/component/ReimbursementDetailFiles.tsx
similarity index 56%
rename from src/pages/reimbursement/mine/component/tempComponent.tsx
rename to src/pages/reimbursement/mine/component/ReimbursementDetailFiles.tsx
index 303e39a..ee08c99 100644
--- a/src/pages/reimbursement/mine/component/tempComponent.tsx
+++ b/src/pages/reimbursement/mine/component/ReimbursementDetailFiles.tsx
@@ -6,6 +6,7 @@ import {Tree} from 'antd';
 import type {DataNode, DirectoryTreeProps} from 'antd/es/tree';
 import {SwapRightOutlined, SwapLeftOutlined} from '@ant-design/icons'
 import InvoiceDetailModal from "../../../Invoice/InvoiceDetailModal";
+import axiosInstance from "../../../../utils/axiosInstance";
 
 const {DirectoryTree} = Tree;
 
@@ -29,35 +30,60 @@ function toInvoiceDetail(invoice: Invoice) {
         invoiceCode: invoice.invoiceCode ? invoice.invoiceCode : "Undefined",
         invoiceDate: invoice.invoiceDate,
         invoiceDeparture: invoice.invoiceDeparture ? invoice.invoiceDeparture : "",
-        invoiceDestination: invoice.invoiceDestination ? invoice.invoiceDestination: "",
+        invoiceDestination: invoice.invoiceDestination ? invoice.invoiceDestination : "",
         invoiceFileUri: invoice.invoiceFileUri ? invoice.invoiceFileUri : "",
-        invoiceThumbnailUri: invoice.invoiceThumbnailUri ? invoice.invoiceThumbnailUri: "",
+        invoiceThumbnailUri: invoice.invoiceThumbnailUri ? invoice.invoiceThumbnailUri : "",
         invoiceId: invoice.invoiceId,
         invoiceKind: invoice.invoiceKind ? invoice.invoiceKind : 0
     };
     return resInvoiceDetail;
 
 }
-function displayInvoicesList(departureInvoice: Invoice, destinationInvoice: Invoice | null, otherInvoices: Invoice[]) {
+
+function DisplayInvoicesList(props:{departureInvoice: Invoice, destinationInvoice: Invoice | null, otherInvoices: Invoice[]}) {
+    let departureInvoice = props.departureInvoice;
+    let destinationInvoice = props.destinationInvoice;
+    let otherInvoices = props.otherInvoices;
+
+    const [invoiceDetail, setInvoiceDetail] = useState(departureInvoice)
+    const [detailModalOpen, setDetailModalOpen] = useState(false)
     function getTreeData() {
         let treeData: DataNode[] = [];
-        let mainData: DataNode = {
+        let mainData = {
             title: '往返票据',
             key: '0-0',
             children: [
-                {title: '出发票据', key: '0-0-0', isLeaf: true, icon: <SwapRightOutlined/>},
+                {
+                    title: '出发票据',
+                    key: departureInvoice.invoiceId.toString(),
+                    isLeaf: true,
+                    icon: <SwapRightOutlined/>
+                },
             ]
         };
         if (destinationInvoice != null) {
-            mainData.children?.push({title: '返程票据', key: '0-0-1', isLeaf: true, icon: <SwapLeftOutlined/>});
+            mainData.children.push({
+                title: '返程票据',
+                key: destinationInvoice.invoiceId.toString(),
+                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});
+        let cnt = 0
+        for (let i = 0; i < otherInvoices.length; i++) {
+            if (otherInvoices[i].invoiceId != departureInvoice.invoiceId && otherInvoices[i].invoiceId != destinationInvoice?.invoiceId) {
+                othersData.children?.push({
+                    title: `附加票据-${cnt + 1}`,
+                    key: otherInvoices[i].invoiceId.toString(),
+                    isLeaf: true
+                });
+                cnt++;
+            }
         }
         treeData.push(mainData)
         treeData.push(othersData)
@@ -65,24 +91,27 @@ function displayInvoicesList(departureInvoice: Invoice, destinationInvoice: Invo
     }
 
     const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
-        if(keys[0] == '0-0-0') {
-
+        if (keys[0] == '0-0' || keys[0] == '0-1') {
+            return;
         }
-        if(keys[0] == '0-0-1') {
-
-        }
-        let keyList = keys[0].toString().split('-')
-        let index = parseInt(keyList[keyList.length-1])
-
+        let invoiceId = Number(keys[0]);
+        axiosInstance.get("common/invoice/" + invoiceId).then((res) => {
+            setInvoiceDetail(res.data);
+            setDetailModalOpen(true);
+        })
     };
 
     return (<>
         <DirectoryTree
             defaultExpandAll
+            selectedKeys={[]}
             onSelect={onSelect}
             treeData={getTreeData()}
         />
+        <InvoiceDetailModal invoiceDetail={invoiceDetail} open={detailModalOpen} onClose={() => {
+            setDetailModalOpen(false)
+        }}/>
     </>)
 }
 
-export default displayInvoicesList
\ No newline at end of file
+export default DisplayInvoicesList
\ No newline at end of file