diff --git a/src/pages/Order/List/RelatedOrders.tsx b/src/pages/Order/List/RelatedOrders.tsx new file mode 100644 index 0000000..ed94eb7 --- /dev/null +++ b/src/pages/Order/List/RelatedOrders.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { Empty, Tag } from 'antd'; +import dayjs from 'dayjs'; +import relativeTime from 'dayjs/plugin/relativeTime'; + +dayjs.extend(relativeTime); + +/** + * RelatedOrders 表格组件 + * 用于展示订单详情中的关联数据(订阅/订单),按统一表格样式渲染 + * 中文注释:本组件将订阅与订单统一归一化为五列展示,便于快速浏览 + */ +const RelatedOrders: React.FC<{ data?: any[] }> = ({ data = [] }) => { + const rows = (Array.isArray(data) ? data : []).map((it: any) => { + const isSubscription = !!it?.externalSubscriptionId || !!it?.billing_period || !!it?.line_items; + const number = isSubscription ? `#${it?.externalSubscriptionId || it?.id}` : `#${it?.externalOrderId || it?.id}`; + const relationship = isSubscription ? 'Subscription' : 'Order'; + const dateRaw = it?.start_date || it?.date_created || it?.createdAt || it?.updatedAt; + const dateText = dateRaw ? dayjs(dateRaw).fromNow() : '-'; + const status = (isSubscription ? it?.status : it?.orderStatus) || '-'; + const statusLower = String(status).toLowerCase(); + const color = statusLower === 'active' ? 'green' : statusLower === 'cancelled' ? 'red' : 'default'; + const totalNum = Number(it?.total || 0); + const totalText = isSubscription ? `$${totalNum.toFixed(2)} / ${it?.billing_period || 'period'}` : `$${totalNum.toFixed(2)}`; + return { key: `${isSubscription ? 'sub' : 'order'}-${it?.id}`, number, relationship, dateText, status, color, totalText }; + }); + + if (rows.length === 0) return ; + + return ( +
+ {/* 表头(英文文案,符合国际化默认英文的要求) */} +
+
订单编号
+
关系
+
日期
+
状态
+
金额
+
+
+ {rows.map((r) => ( +
+
{r.number}
+
{r.relationship}
+
{r.dateText}
+
{r.status}
+
{r.totalText}
+
+ ))} +
+
+ ); +}; + +export default RelatedOrders; diff --git a/src/pages/Order/List/index.tsx b/src/pages/Order/List/index.tsx index 4561f65..b4c513c 100644 --- a/src/pages/Order/List/index.tsx +++ b/src/pages/Order/List/index.tsx @@ -77,9 +77,10 @@ import { Space, Tabs, TabsProps, + Tag, } from 'antd'; import Item from 'antd/es/list/Item'; -import dayjs from 'dayjs'; +import RelatedOrders from './RelatedOrders'; import React, { useMemo, useRef, useState } from 'react'; import { printPDF } from '@/utils/util'; @@ -172,9 +173,16 @@ const ListPage: React.FC = () => { hideInTable: true, valueType: 'dateRange', }, + { - title: '订单号', - dataIndex: 'externalOrderId', + title: '订阅', + dataIndex: 'isSubscription', + hideInSearch: true, + render: (_, record) => { + const related = Array.isArray((record as any)?.related) ? (record as any).related : []; + const isSub = related.some((it) => it?.externalSubscriptionId || it?.billing_period || it?.line_items); + return {isSub ? '是' : '否'}; + }, }, { title: '站点', @@ -885,6 +893,7 @@ const Detail: React.FC<{ ); }} /> + {/* 原始订单 */} - {/* TODO 显示 related order */} - { - return ( -
    - {record?.related?.map((item: any) => ( -
  • - {JSON.stringify(item)} -
  • - ))} -
- ); - }} - /> + {/* 显示 related order */} + { + return ; + }} +/> + {/* 订单内容 */}