添加了一个树形列表组件

main
yang.yongquan 2023-01-03 20:16:32 +08:00
parent 5a90b4d1a1
commit 2f23041aac
2 changed files with 82 additions and 4 deletions

View File

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

View File

@ -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