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 = { 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([]); const getData = () => { get>({ 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['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 {record.detail.productDescription} } }, ] // useEffect(() => { // getData(); // }, []); useEffect(() => { getData(); }, [page]); return (
{messageContext} { setPage(currentPage); }, showSizeChanger:false } } scroll={{ y: 500 }} bordered key="dataTable" rowKey="orderId" />; ) }