system-copyright-react/src/components/myOrder/MyOrder.tsx

import { Table, TableProps, Tooltip, Spin } from "antd";
import { useEffect, useState } from "react";
import useMessage from "antd/es/message/useMessage";
import { get } from "../../util/AjaxUtils";
import './myorder.css'
type IListPage<T> = {
    page: number;
    total: number;
    rows: T[]
}
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;
}
export default function MyOrder() {
    const [messageApi, messageContext] = useMessage();
    const [isLoading, setIsLoading] = useState(false)
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [dataArray, setDataArray] = useState<DataType[]>([]);
    const getData = () => {
        get<IListPage<DataType>>({
            messageApi,
            url: '/api/order/listpage/complete/no-invoiced/self',
            config: {
                params: {
                    page: page,
                    rows: 20
                }
            },
            onBefore() {
                setIsLoading(true);
            },
            onSuccess({ data }) {
                // console.log(data);

                setPage(data.page);
                setTotal(data.total);
                setDataArray(data.rows);
            },
            onFinally() {
                setIsLoading(false);
            }
        })
    }
    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(() => {
    //     getData();
    // }, []);
    useEffect(() => {
        getData();
    }, [page]);
    return (
        <div>
            {messageContext}
            <Spin tip="加载中..." spinning={isLoading}>
                <Table columns={columns} dataSource={dataArray}
                    pagination={
                        {
                            pageSize: 20,
                            total: total,
                            onChange: (currentPage) => {
                                setPage(currentPage);
                            },
                            showSizeChanger:false
                        }
                    }
                    scroll={{ y: 500 }} bordered key="dataTable" rowKey="orderId" />;
            </Spin>
        </div>
    )
}