395 lines
12 KiB
TypeScript
395 lines
12 KiB
TypeScript
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>
|
||
)
|
||
}
|