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;
    orderDetails: any;
    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 [orderId, setorderId] = useState('')
    // const [orderDetailsModal, setOrderDetailsModal] = useState(false) //详情弹窗
    const [keyWords, setKewWords] = useState('')
    const [productName, setProductName] = useState('')
    const [expandedRowKeys, setExpandedRowKeys] = useState<any[]>([]); //展开项
    const getData = () => {
        // setDataArray([])
        get<IListPage<DataType>>({
            messageApi,
            url: '/api/order/listpage/self',
            config: {
                params: {
                    page: page,
                    rows: 20,
                    keywords: keyWords,
                    productName: productName
                }
            },
            onBefore() {
                setIsLoading(true);
            },
            onSuccess({ data }) {
                // console.log(data);

                setPage(data.page);
                setTotal(data.total);
                setDataArray(data.rows);

                setExpandedRowKeys(data.rows.map(item => item.orderId))
            },
            onFinally() {
                setIsLoading(false);
            }
        })
    }
    // const getOrderDetails = () => {
    //     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: 'index',
            align: 'center',
            width: 50,
            render: (_text, _record, index) => (page - 1) * 20 + index + 1, // 显示序号，从1开始
        },


        {
            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
        },
        Table.EXPAND_COLUMN,
        // {
        //     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: <div style={{
                // color: 'rgba(0, 0, 0, 0.45)'
            }}>商品名称</div>,
            dataIndex: 'productName',
            align: 'center',
            // width: 250,
            ellipsis: {
                showTitle: false,
            },
            render: (_value, record) => {
                return <Tooltip placement="top" title={record.productName}>{record.productName}</Tooltip>
            }
        },
        {
            title: <div >商品类型</div>,
            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: <div >购买数量</div>,
            dataIndex: 'quantity',
            align: 'center',
            width: 100,

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

        },

        {
            title: <div >订单备注</div>,
            dataIndex: 'detail.notes',
            align: 'center',
            // width: 120,
            ellipsis: {
                showTitle: false,
            },
            render: (_value, record) => {
                return <Tooltip placement="top" title={record.notes}>{record.notes}</Tooltip>
            }
        },
        {
            title: <div >商品描述</div>,
            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('')
        }
    }
    const namehandleSearch = (value: string) => {
        setProductName(value)
    }
    const namehandleChange = (e: any) => {

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

                    }}
                    allowClear
                />
                <Search placeholder="输入商品名称查询订单"
                    // value={nowKeyword}
                    onSearch={namehandleSearch}
                    onChange={namehandleChange}
                    style={{
                        width: '220px',
                        marginLeft: 10
                    }}
                    allowClear
                />
            </div>

            <Spin tip="加载中..." spinning={isLoading}>
                <Table columns={columns} dataSource={dataArray}
                    pagination={
                        {
                            pageSize: 20,
                            total: total,
                            onChange: (currentPage) => {
                                setPage(currentPage);
                            },
                            showSizeChanger: false
                        }
                    }
                    expandable={{
                        expandedRowRender: (record) => {
                            // setorderId(record.orderId)
                            return <div style={{ padding: '0px 20px', marginLeft: 60 }}>
                                <div style={{
                                    marginBottom: 10
                                }}>订单详情</div>
                                <Spin tip="加载中..." spinning={isLoading}>
                                    <Table columns={detailColumns}
                                        dataSource={record.orderDetails}
                                        pagination={false}
                                        bordered key="orderDetailId" rowKey="orderDetailId"
                                        style={{ border: '1px solid #efefef' }}
                                    />
                                </Spin>
                            </div>
                        },
                        defaultExpandAllRows: true,
                        // columnTitle:'订单详情'
                        expandedRowKeys: expandedRowKeys,
                    }}
                    bordered
                    scroll={{ y: 500 }} key="orderId" 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="orderDetailId" />
                </Spin>
            </Modal> */}
        </div>
    )
}