system-copyright-react/src/components/invoice/order/InvoiceOrderSelectedList.tsx

import {Table, TableProps, Tooltip} from "antd";
import useMessage from "antd/es/message/useMessage";
import {useEffect, useState} from "react";
import {get} from "../../../util/AjaxUtils.ts";
import {IListPage} from "../../../interfaces/listpage/IListPage.ts";

type DetailDataType = {
    productType: string;
    quantity: number;
    unitPrice: number;
    notes: string;
    productDescription: string;
}

type DataType = {
    orderId: string;
    orderNo: string;
    totalAmount: number;
    detail: DetailDataType;
    orderStatus: string;
    gmtCreate: string;
}

interface ListProps {
    invoiceId: string;
}

export default function InvoiceInfoSelectedList(props: ListProps) {
    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: 'orderNo',
            align: 'center',
            width: 250,
            fixed: 'left'
        },
        {
            title: '总金额',
            dataIndex: 'totalAmount',
            align: 'center',
            width: 100,
            fixed: 'left',
            render: (value) => {
                return (value / 100).toFixed(2)
            }
        },
        {
            title: '订单状态',
            dataIndex: 'orderStatus',
            align: 'center',
            width: 100,
            render: (value) => {
                if(value === 'COMPLETE') {
                    return '完成';
                }
                if(value === 'CHARGEBACK') {
                    return '已退款';
                }
            }
        },
        {
            title: '创建时间',
            dataIndex: 'gmtCreate',
            align: 'center',
            width: 180
        },
        {
            title: '产品类型',
            dataIndex: 'detail.productType',
            align: 'center',
            width: 100,
            render: (_value, record) => {
                if(record.detail.productType === 'PROJ') {
                    return '项目创建'
                }
                if(record.detail.productType === 'AGENT') {
                    return '项目代理'
                }
                return record.detail.productType
            }
        },
        {
            title: '数量',
            dataIndex: 'detail.quantity',
            align: 'center',
            width: 100,
            render: (_value, record) => {
                return record.detail.quantity
            }
        },
        {
            title: '单价',
            dataIndex: 'detail.unitPrice',
            align: 'center',
            width: 100,
            render: (_value, record) => {
                return (record.detail.unitPrice / 100).toFixed(2)
            }
        },
        {
            title: '订单备注',
            dataIndex: 'detail.notes',
            align: 'center',
            width: 120,
            render: (_value, record) => {
                return record.detail.notes
            }
        },
        {
            title: '描述',
            dataIndex: 'detail.productDescription',
            align: 'center',
            width: 200,
            ellipsis: {
                showTitle: false,
            },
            render: (_value, record) => {
                return <Tooltip placement="top" title={record.detail.productDescription}>{record.detail.productDescription}</Tooltip>
            }
        },
    ]

    useEffect(() => {
        get<IListPage<DataType>>({
            messageApi,
            url: `/api/order/listpage/complete/self?invoiceId=${props.invoiceId}`,
            config: {
                params: {
                    page: page,
                    rows: 20
                }
            },
            onSuccess({data}) {
                setPage(data.page);
                setTotal(data.total);
                setDataArray(data.rows);
            }
        })
    }, [page]);

    return (
        <>
            {messageContext}
            <div className="invoice-list-container">
                <div className="mod-list">
                    <Table columns={columns} dataSource={dataArray} pagination={
                        {
                            pageSize: 20,
                            total: total,
                            onChange: (currentPage) => {
                                setPage(currentPage);
                            }
                        }
                    } scroll={{y: 500}} bordered key="dataTable" rowKey="orderId"/>
                </div>
            </div>
        </>
    );
}