system-copyright-react/src/components/invoice/InvoiceList.tsx

import {Button, Dropdown, MenuProps, Modal, Table, TableProps, Tag} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import {useEffect, useState} from "react";
import {get} from "../../util/AjaxUtils.ts";
import {IListPage} from "../../interfaces/listpage/IListPage.ts";
import useMessage from "antd/es/message/useMessage";
import InvoiceSave from "./InvoiceSave.tsx";

enum InvoiceStatusEnum {
    PENDING = 'PENDING',
    COMPLETE = 'COMPLETE',
    FAILED = 'FAILED',
    CANCEL = 'CANCEL',
}

type DataType = {
    examineOpinion: string;
    examineUserId: string;
    examineUserUsername: string;
    gmtCreate: string;
    gmtExamine: string;
    invoiceAccount: string;
    invoiceAddress: string;
    invoiceAmount: number;
    invoiceBank: string;
    invoiceFileList: string[];
    invoiceFiles: string;
    invoiceId: string;
    invoiceNo: string;
    invoiceNote: string;
    invoicePhone: string;
    invoiceStatus: InvoiceStatusEnum;
    invoiceTitle: string;
    orderIds: string[];
}

export default function InvoiceList() {
    const [messageApi, messageContext] = useMessage();
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [dataArray, setDataArray] = useState<DataType[]>([]);

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '名称',
            dataIndex: 'invoiceTitle',
            align: 'center',
            width: 180
        },
        {
            title: '纳税人识别号',
            dataIndex: 'invoiceNo',
            align: 'center',
            width: 180
        },
        {
            title: '地址',
            dataIndex: 'invoiceAddress',
            align: 'center',
            width: 180
        },
        {
            title: '电话',
            dataIndex: 'invoicePhone',
            align: 'center',
            width: 180
        },
        {
            title: '开户行',
            dataIndex: 'invoiceBank',
            align: 'center',
            width: 180
        },
        {
            title: '开户行账号',
            dataIndex: 'invoiceAccount',
            align: 'center',
            width: 180
        },
        {
            title: '金额',
            dataIndex: 'invoiceAmount',
            align: 'center',
            width: 160,
            render: (value) => {
                return (value / 100).toFixed(2)
            }
        },
        {
            title: '备注',
            dataIndex: 'invoiceNote',
            align: 'center',
            width: 180
        },
        {
            title: '创建时间',
            dataIndex: 'gmtCreate',
            align: 'center',
            width: 180
        },
        {
            title: '状态',
            dataIndex: 'invoiceStatus',
            align: 'center',
            width: 100,
            fixed: 'right',
            render: (value) => {
                if(value === InvoiceStatusEnum.PENDING) {
                    return <Tag color="magenta">待审核</Tag>
                }
                if(value === InvoiceStatusEnum.COMPLETE) {
                    return <Tag color="green">已开票</Tag>
                }
                if(value === InvoiceStatusEnum.FAILED) {
                    return <Tag color="red">失败</Tag>
                }
                if(value === InvoiceStatusEnum.CANCEL) {
                    return <Tag color="cyan">已取消</Tag>
                }
            }
        },
        {
            title: '操作',
            dataIndex: 'operate',
            align: 'center',
            width: 120,
            fixed: 'right',
            render: (value, record) => {
                if(record.invoiceStatus == InvoiceStatusEnum.COMPLETE) {
                    const items: MenuProps['items'] = [];
                    record.invoiceFileList.forEach((item, index) => {
                        items.push({
                            key: index,
                            label: (
                                <a href={item} download target="_blank">下载发票{index + 1}</a>
                            )
                        });
                    })
                    return (
                        <Dropdown menu={{ items }} placement="bottom" arrow>
                            <Button type="link">下载发票</Button>
                        </Dropdown>
                    )
                }
            }
        },
    ]

    useEffect(() => {
        get<IListPage<DataType>>({
            messageApi,
            url: '/api/invoice/listpage/self',
            config: {
                params: {
                    page: page,
                    rows: 20
                }
            },
            onSuccess({data}) {
                setPage(data.page);
                setTotal(data.total);
                setDataArray(data.rows);
            }
        })
    }, [page]);

    return (
        <>
            <div className="invoice-list-container">
                <div className="mod-list">
                    <div className="table-btn-group" style={{marginBottom: '15px'}}>
                        <Button value="small" onClick={() => {

                        }}><PlusOutlined/> 新增</Button>
                    </div>
                    <Table columns={columns} dataSource={dataArray} pagination={
                        {
                            pageSize: 20,
                            onChange: (currentPage) => {
                                setPage(currentPage);
                            }
                        }
                    } scroll={{y: 500}} bordered key="dataTable" rowKey="invoiceId"/>
                </div>
            </div>
            <Modal open={true}
                   title="申请开票"
                   footer={false}
            >
                <InvoiceSave />
            </Modal>
            {messageContext}
        </>
    )
}