128 lines
3.1 KiB
TypeScript
128 lines
3.1 KiB
TypeScript
import type { ColumnDef } from "@tanstack/react-table"
|
|
import { fetchMyRefundOrders } from "@/api/order"
|
|
import AccountCell from "@/components/composites/accountCell"
|
|
import OrderFilterBar from "@/components/composites/orderFilterBar"
|
|
import DataTable from "@/components/data-table"
|
|
import Page from "@/components/page"
|
|
import { useMyOrderPage } from "@/lib/hooks/useMyOrderPage"
|
|
import { useProducts } from "@/lib/hooks/useProducts"
|
|
import {
|
|
formatDate,
|
|
formatMoney,
|
|
formatOrderType,
|
|
type MyOrderQueryParams,
|
|
type OrderFilters,
|
|
type OrderItem,
|
|
} from "@/lib/models/order"
|
|
|
|
const mapRefundFilters = (
|
|
filters: OrderFilters,
|
|
): Partial<MyOrderQueryParams> => ({
|
|
BTime: filters.bTime || undefined,
|
|
ETime: filters.eTime || undefined,
|
|
ProductId: filters.productId === "0" ? undefined : Number(filters.productId),
|
|
PackageId: filters.packageName === "0" ? undefined : filters.packageName,
|
|
KeyWord: filters.keyword.trim() || undefined,
|
|
})
|
|
|
|
const columns: ColumnDef<OrderItem>[] = [
|
|
{
|
|
accessorKey: "CreateTime",
|
|
header: "日期",
|
|
cell: ({ row }) => formatDate(row.original.CreateTime),
|
|
},
|
|
{
|
|
accessorKey: "OrderNo",
|
|
header: "订单编号",
|
|
},
|
|
{
|
|
accessorKey: "OrderType",
|
|
header: "类型",
|
|
cell: ({ row }) => formatOrderType(row.original.OrderType),
|
|
},
|
|
{
|
|
accessorKey: "ProductName",
|
|
header: "产品",
|
|
},
|
|
{
|
|
accessorKey: "PackageName",
|
|
header: "套餐",
|
|
},
|
|
{
|
|
accessorKey: "Accounts",
|
|
header: "账号",
|
|
cell: ({ row }) => <AccountCell accounts={row.original.Accounts} />,
|
|
},
|
|
{
|
|
accessorKey: "ConnectCount",
|
|
header: "连接数",
|
|
cell: ({ row }) => row.original.ConnectCount,
|
|
},
|
|
{
|
|
accessorKey: "DayCount",
|
|
header: "退款时长",
|
|
cell: ({ row }) => `${row.original.DayCount}天`,
|
|
},
|
|
{
|
|
accessorKey: "DayPrice",
|
|
header: "退款单价",
|
|
cell: ({ row }) => formatMoney(row.original.DayPrice),
|
|
},
|
|
{
|
|
accessorKey: "PaymentAmount",
|
|
header: "实付金额",
|
|
cell: ({ row }) => formatMoney(row.original.PaymentAmount),
|
|
},
|
|
{
|
|
accessorKey: "RefundAmount",
|
|
header: "退款金额",
|
|
cell: ({ row }) => formatMoney(row.original.RefundAmount),
|
|
},
|
|
]
|
|
|
|
export default function RefundOrdersPage() {
|
|
const products = useProducts()
|
|
const {
|
|
filters,
|
|
patch,
|
|
load,
|
|
reset,
|
|
total,
|
|
status,
|
|
page,
|
|
size,
|
|
setPage,
|
|
changeSize,
|
|
paged,
|
|
} = useMyOrderPage(fetchMyRefundOrders, mapRefundFilters)
|
|
|
|
return (
|
|
<Page>
|
|
<OrderFilterBar
|
|
filters={filters}
|
|
products={products}
|
|
showOrderType={false}
|
|
onPatch={patch}
|
|
onSearch={load}
|
|
onReset={reset}
|
|
/>
|
|
|
|
<div className="bg-white rounded-lg p-4 flex flex-col gap-4">
|
|
<h3 className="font-semibold text-lg">退货订单管理</h3>
|
|
<DataTable
|
|
data={paged}
|
|
status={status}
|
|
columns={columns}
|
|
pagination={{
|
|
page,
|
|
size,
|
|
total,
|
|
onPageChange: setPage,
|
|
onSizeChange: changeSize,
|
|
}}
|
|
/>
|
|
</div>
|
|
</Page>
|
|
)
|
|
}
|