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

import {Button, Flex, Space, Table, TableProps, Tooltip} from "antd";
import useMessage from "antd/es/message/useMessage";
import {useEffect, useRef, 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 {
    selectedOrderIds?: string[];
    handleOk: (selectedOrders: DataType[]) => void;
    handleCancel: () => void;
}

export default function InvoiceInfoList(props: ListProps) {
    const [messageApi, messageContext] = useMessage();
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [dataArray, setDataArray] = useState<DataType[]>([]);
    const selectedOrders = useRef<DataType[] | null>(null);
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    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>
            }
        },
    ]

    const getData = () => {
        get<IListPage<DataType>>({
            messageApi,
            url: '/api/order/listpage/complete/no-invoiced/self',
            config: {
                params: {
                    page: page,
                    rows: 20
                }
            },
            onSuccess({data}) {
                setPage(data.page);
                setTotal(data.total);
                setDataArray(data.rows);
            }
        })
    }

    useEffect(() => {
        getData();
        if(props.selectedOrderIds && props.selectedOrderIds.length > 0) {
            setSelectedRowKeys(props.selectedOrderIds)
        }
    }, [page]);

    return (
        <>
            <div className="invoice-list-container">
                <div className="mod-list">
                    <Table rowSelection={
                        {
                            selectedRowKeys,
                            onChange: (selectedRowKeys, selectedRows) => {
                                setSelectedRowKeys(selectedRowKeys);
                                selectedOrders.current = selectedRows;
                            },
                        }
                    } columns={columns} dataSource={dataArray} pagination={
                        {
                            pageSize: 20,
                            total: total,
                            onChange: (currentPage) => {
                                setPage(currentPage);
                            }
                        }
                    } scroll={{y: 500}} bordered key="dataTable" rowKey="orderId"/>
                </div>
                <Flex justify="center">
                    <Space size={5}>
                        <Button type="primary"
                                style={{backgroundColor: 'var(--color-primary)'}}
                                onClick={() => {
                                    if (!selectedOrders.current) {
                                        messageApi.error('请选择开票订单');
                                        return;
                                    }
                                    props.handleOk(selectedOrders.current);
                                }}
                        >确定</Button>
                        <Button type="default" onClick={() => {
                            props.handleCancel();
                        }}>关闭</Button>
                    </Space>
                </Flex>
            </div>
            {messageContext}
        </>
    );
}