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

import { Table, TableProps, Tooltip, Spin, Modal, Input } from "antd";
const { Search } = Input;
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;
}
type DataTypeDetail = {
    productName: string; //商品名称
    productType: string; //商品类型
    quantity: number; //购买数量
    unitPrice: number; //单价
    productDescription: string; //商品描述
    notes: 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 [detailData, setDetailData] = useState<DataTypeDetail[]>([])
    const [orderDetailsModal, setOrderDetailsModal] = useState(false) //详情弹窗
    const [keyWords, setKewWords] = useState('')
    const getData = () => {
        get<IListPage<DataType>>({
            messageApi,
            url: '/api/order/listpage/self',
            config: {
                params: {
                    page: page,
                    rows: 20,
                    keywords: keyWords,
                }
            },
            onBefore() {
                setIsLoading(true);
            },
            onSuccess({ data }) {
                // console.log(data);

                setPage(data.page);
                setTotal(data.total);
                setDataArray(data.rows);
            },
            onFinally() {
                setIsLoading(false);
            }
        })
    }
    const getOrderDetails = (orderId: string) => {
        get({
            messageApi,
            url: `/api/order-detail/list/order-id/${orderId}`,
            config: {

            },
            onBefore() {
                setIsLoading(true);
            },
            onSuccess(data: any) {
                // console.log(data.data);
                setDetailData(data.data)

            },
            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 === ' FULL_REFUND') {
                    return '全额退款';
                } 
                if (value === 'PENDING') {
                    return '等待';
                }
                if (value === 'CORRECTION1_REFUND') {
                    return '补正1次退款';
                }
                if (value === 'CORRECTION2_REFUND') {
                    return '补正2次退款';
                }
            }
        },
        {
            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>
        //     }
        // },
        {
            title: '订单详情',
            align: 'center',
            width: 100,
            render: (_, record) => (
                // {record.name}
                <div className='refunBtn' onClick={() => {
                    // console.log(record.orderId); //id
                    // console.log(record.orderNo); //编号
                    // setOrderId(record.orderId)
                    setOrderDetailsModal(true)
                    getOrderDetails(record.orderId)
                }}>查看</div>
            ),
        },
    ]
    const detailColumns: TableProps<DataTypeDetail>['columns'] = [
        {
            title: '商品名称',
            dataIndex: 'productName',
            align: 'center',
            // width: 250,
            ellipsis: {
                showTitle: false,
            },
            render: (_value, record) => {
                return <Tooltip placement="top" title={record.productName}>{record.productName}</Tooltip>
            }
        },
        {
            title: '商品类型',
            dataIndex: 'productType',
            align: 'center',
            render: (_value, record) => {
                if (record.productType === 'PROJ') {
                    return '项目创建'
                }
                if (record.productType === 'AGENT') {
                    return '项目代理'
                }
                if (record.productType === 'FULL_REFUND') {
                    return '全额退款'
                }
                if (record.productType === 'CORRECTION1_REFUND') {
                    return '补正1次退款'
                }
                if (record.productType === 'CORRECTION2_REFUND') {
                    return '补正2次退款'
                }
                return record.productType
            }

        },
        {
            title: '购买数量',
            dataIndex: 'quantity',
            align: 'center',
            width: 100,

        },
        {
            title: '单价',
            dataIndex: 'unitPrice',
            align: 'center',
            render: (value) => {
                return (value / 100).toFixed(2)
            }

        },

        {
            title: '订单备注',
            dataIndex: 'detail.notes',
            align: 'center',
            // width: 120,
            render: (_value, record) => {
                return <Tooltip placement="top" title={record.notes}>{record.notes}</Tooltip>
            }
        },
        {
            title: '商品描述',
            dataIndex: 'productDescription',
            align: 'center',
            width: 200,
            ellipsis: {
                showTitle: false,
            },
            render: (_value, record) => {
                return <Tooltip placement="top" title={record.productDescription}>{record.productDescription}</Tooltip>
            }
        }
    ]
    // useEffect(() => {
    //     getData();
    // }, []);
    const handleSearch = (value: string) => {
        // console.log(value);
        setKewWords(value)
    }
    const handleChange = (e: any) => {

        // console.log(e.target.value);
        if (e.target.value == '') {
            setKewWords('')
        }
    }
    useEffect(() => {
        getData();
    }, [page, keyWords]);
    return (
        <div>
            {messageContext}
            <div style={{
                marginBottom: 10,
                marginTop: 10
            }}>
                <Search placeholder="输入订单号查询订单"
                    // value={nowKeyword}
                    onSearch={handleSearch}
                    onChange={handleChange}
                    style={{
                        width: '300px',
                       
                    }}
                />
            </div>

            <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>
            <Modal
                title="订单详情"
                cancelText="取消"
                destroyOnClose={true}
                open={orderDetailsModal}
                // onOk={() => {
                //     setOrderDetailsModal(false)
                // }}
                width={1300}
                onCancel={() => {
                    setOrderDetailsModal(false)
                }}
                footer={null}
            >
                <Spin tip="加载中..." spinning={isLoading}>
                    <Table columns={detailColumns}
                        dataSource={detailData}
                        // pagination={
                        //     {
                        //         pageSize: 20,
                        //         total: total,
                        //         onChange: (currentPage) => {
                        //             setPage(currentPage);
                        //         },
                        //         showSizeChanger: false
                        //     }
                        // }
                        pagination={false}
                        // scroll={{ y: 500 }}
                        bordered key="dataTable" rowKey="orderId" />
                </Spin>
            </Modal>
        </div>
    )
}