refactor(订单): 清理合并冲突并优化订单详情抽屉组件复用
移除合并冲突标记和重复代码，统一使用相对路径导入组件 简化订单详情逻辑，直接复用OrderDetailDrawer组件
This commit is contained in:
tikkhun
parent
9814eca928
commit
9c5caa1aea
|
|
@ -7,18 +7,8 @@ dayjs.extend(relativeTime);
|
|||
|
||||
/**
|
||||
* RelatedOrders 表格组件
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
* 用于展示订单详情中的关联数据(订阅/订单)，按统一表格样式渲染
|
||||
* 中文注释:本组件将订阅与订单统一归一化为五列展示，便于快速浏览
|
||||
=======
|
||||
* 用于展示订单详情中的关联数据（订阅/订单），按统一表格样式渲染
|
||||
* 中文注释：本组件将订阅与订单统一归一化为五列展示，便于快速浏览
|
||||
>>>>>>> d98e843 (refactor(订单): 重构订单详情抽屉组件并移动相关文件)
|
||||
=======
|
||||
* 用于展示订单详情中的关联数据(订阅/订单)，按统一表格样式渲染
|
||||
* 中文注释:本组件将订阅与订单统一归一化为五列展示，便于快速浏览
|
||||
>>>>>>> 3ac2724 (style: 统一中文标点符号为英文格式)
|
||||
*/
|
||||
const RelatedOrders: React.FC<{ data?: any[] }> = ({ data = [] }) => {
|
||||
const rows = (Array.isArray(data) ? data : []).map((it: any) => {
|
||||
|
|
@ -39,15 +29,7 @@ const RelatedOrders: React.FC<{ data?: any[] }> = ({ data = [] }) => {
|
|||
|
||||
return (
|
||||
<div style={{ width: '100%' }}>
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
{/* 表头(英文文案，符合国际化默认英文的要求) */}
|
||||
=======
|
||||
{/* 表头（英文文案，符合国际化默认英文的要求） */}
|
||||
>>>>>>> d98e843 (refactor(订单): 重构订单详情抽屉组件并移动相关文件)
|
||||
=======
|
||||
{/* 表头(英文文案，符合国际化默认英文的要求) */}
|
||||
>>>>>>> 3ac2724 (style: 统一中文标点符号为英文格式)
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr', padding: '8px 0', fontWeight: 600 }}>
|
||||
<div>订单编号</div>
|
||||
<div>关系</div>
|
||||
|
|
|
|||
|
|
@ -2,30 +2,11 @@ import React, { useRef, useState } from 'react';
|
|||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import type { ProColumns, ActionType, ProTableProps } from '@ant-design/pro-components';
|
||||
import { ProTable } from '@ant-design/pro-components';
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
import { App, Tag, Button } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { ordercontrollerGetorders } from '@/servers/api/order';
|
||||
import OrderDetailDrawer from './OrderDetailDrawer';
|
||||
<<<<<<< HEAD
|
||||
import { sitecontrollerAll } from '@/servers/api/site';
|
||||
=======
|
||||
import { App, Tag, Button, Drawer, List } from 'antd';
|
||||
=======
|
||||
import { App, Tag, Button } from 'antd';
|
||||
>>>>>>> 1f4128f (refactor(订单): 抽离订单详情抽屉为独立组件并复用)
|
||||
import dayjs from 'dayjs';
|
||||
import { ordercontrollerGetorders } from '@/servers/api/order';
|
||||
import OrderDetailDrawer from '@/pages/Order/List/OrderDetailDrawer';
|
||||
=======
|
||||
>>>>>>> 502cd0c (refactor(Subscription/Orders): 使用相对路径导入OrderDetailDrawer组件)
|
||||
import { sitecontrollerAll } from '@/servers/api/site';
|
||||
<<<<<<< HEAD
|
||||
import { request } from 'umi';
|
||||
>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
|
||||
=======
|
||||
>>>>>>> 43be89b (feat(订单列表): 添加关联订单组件并优化订阅显示)
|
||||
|
||||
interface OrderItemRow {
|
||||
id: number;
|
||||
|
|
@ -41,31 +22,11 @@ interface OrderItemRow {
|
|||
const OrdersPage: React.FC = () => {
|
||||
const actionRef = useRef<ActionType>();
|
||||
const { message } = App.useApp();
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
// 抽屉状态:改为复用订单详情抽屉组件
|
||||
=======
|
||||
// 抽屉状态：改为复用订单详情抽屉组件
|
||||
>>>>>>> 1f4128f (refactor(订单): 抽离订单详情抽屉为独立组件并复用)
|
||||
=======
|
||||
// 抽屉状态:改为复用订单详情抽屉组件
|
||||
>>>>>>> 3ac2724 (style: 统一中文标点符号为英文格式)
|
||||
const [detailOpen, setDetailOpen] = useState(false);
|
||||
const [detailRecord, setDetailRecord] = useState<any | null>(null);
|
||||
const [detailOrderId, setDetailOrderId] = useState<number | null>(null);
|
||||
const Noop: React.FC<any> = () => null;
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
// 抽屉状态：用于展示与订阅相关的订单详情（含行项目meta）
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [drawerTitle, setDrawerTitle] = useState<string>('订阅关联');
|
||||
const [drawerItems, setDrawerItems] = useState<any[]>([]);
|
||||
const [drawerMeta, setDrawerMeta] = useState<any[]>([]);
|
||||
const [isSubscription, setIsSubscription] = useState<boolean>(false);
|
||||
>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
|
||||
=======
|
||||
>>>>>>> 1f4128f (refactor(订单): 抽离订单详情抽屉为独立组件并复用)
|
||||
|
||||
const columns: ProColumns<OrderItemRow>[] = [
|
||||
{
|
||||
|
|
@ -123,54 +84,10 @@ const OrdersPage: React.FC = () => {
|
|||
render: (_, row) => (
|
||||
<Button
|
||||
size="small"
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
>>>>>>> 1f4128f (refactor(订单): 抽离订单详情抽屉为独立组件并复用)
|
||||
onClick={() => {
|
||||
setDetailRecord(row as any);
|
||||
setDetailOrderId(row.id as number);
|
||||
setDetailOpen(true);
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
onClick={async () => {
|
||||
try {
|
||||
// 拉取订单详情（包含 items 与 meta_data），用于判断是否为订阅订单
|
||||
const resp = await request(`/order/${row.id}`, { method: 'GET' });
|
||||
const { success, data, message: errMsg } = resp as any;
|
||||
if (!success) throw new Error(errMsg || '获取失败');
|
||||
const items: any[] = data?.items || [];
|
||||
const orderMeta: any[] = data?.meta_data || [];
|
||||
// 订阅识别：检查行项目 meta_data 中的关键键
|
||||
const keys = [
|
||||
'is_subscription',
|
||||
'_wcs_bought_as_subscription',
|
||||
'subscription_product_type',
|
||||
'subscription_period',
|
||||
'subscription_interval',
|
||||
'_subscription',
|
||||
'_subscription_period',
|
||||
'_subscription_interval',
|
||||
];
|
||||
let detected = false;
|
||||
for (const it of items) {
|
||||
const md = Array.isArray(it?.meta_data) ? it.meta_data : [];
|
||||
if (md.some((m: any) => keys.includes(String(m?.key)))) {
|
||||
detected = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
setIsSubscription(detected);
|
||||
setDrawerItems(items);
|
||||
setDrawerMeta(orderMeta);
|
||||
setDrawerTitle(`订阅关联（订单号：${row.externalOrderId}）`);
|
||||
setDrawerOpen(true);
|
||||
} catch (e: any) {
|
||||
message.error(e?.message || '获取失败');
|
||||
}
|
||||
>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
|
||||
=======
|
||||
>>>>>>> 1f4128f (refactor(订单): 抽离订单详情抽屉为独立组件并复用)
|
||||
}}
|
||||
>
|
||||
查看
|
||||
|
|
@ -232,16 +149,7 @@ const OrdersPage: React.FC = () => {
|
|||
}}
|
||||
toolBarRender={false}
|
||||
/>
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
{/* 订阅关联:直接使用订单详情抽屉组件 */}
|
||||
=======
|
||||
{/* 订阅关联：直接使用订单详情抽屉组件 */}
|
||||
>>>>>>> 1f4128f (refactor(订单): 抽离订单详情抽屉为独立组件并复用)
|
||||
=======
|
||||
{/* 订阅关联:直接使用订单详情抽屉组件 */}
|
||||
>>>>>>> 3ac2724 (style: 统一中文标点符号为英文格式)
|
||||
{detailRecord && detailOrderId !== null && (
|
||||
<OrderDetailDrawer
|
||||
open={detailOpen}
|
||||
|
|
@ -252,57 +160,8 @@ const OrdersPage: React.FC = () => {
|
|||
setActiveLine={() => {}}
|
||||
OrderNoteComponent={Noop}
|
||||
SalesChangeComponent={Noop}
|
||||
<<<<<<< HEAD
|
||||
/>
|
||||
)}
|
||||
=======
|
||||
{/* 订阅关联抽屉：展示行项目与订单元数据，标注是否订阅 */}
|
||||
<Drawer
|
||||
open={drawerOpen}
|
||||
title={drawerTitle}
|
||||
width={720}
|
||||
onClose={() => setDrawerOpen(false)}
|
||||
>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Tag color={isSubscription ? 'green' : 'default'}>
|
||||
{isSubscription ? '订阅订单' : '非订阅订单'}
|
||||
</Tag>
|
||||
</div>
|
||||
{/* 行项目列表，展示 meta_data 关键键值 */}
|
||||
<List
|
||||
header={<div>订单行项目</div>}
|
||||
dataSource={drawerItems}
|
||||
renderItem={(item: any) => (
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
title={`${item?.name || '-'}（数量：${item?.quantity || 0}）`}
|
||||
description={`SKU：${item?.sku || '-'}，产品ID：${item?.externalProductId || '-'}，变体ID：${item?.externalVariationId || '-'}`}
|
||||
/>
|
||||
<div style={{ maxWidth: 420 }}>
|
||||
{(Array.isArray(item?.meta_data) ? item.meta_data : []).map((m: any) => (
|
||||
<Tag key={`${m?.key}-${m?.id}`}>{`${m?.key}: ${m?.value}`}</Tag>
|
||||
))}
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
{/* 订单级元数据 */}
|
||||
<List
|
||||
style={{ marginTop: 16 }}
|
||||
header={<div>订单元数据</div>}
|
||||
dataSource={drawerMeta}
|
||||
renderItem={(m: any) => (
|
||||
<List.Item>
|
||||
<Tag>{`${m?.key}: ${m?.value}`}</Tag>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</Drawer>
|
||||
>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
|
||||
=======
|
||||
/>
|
||||
)}
|
||||
>>>>>>> 1f4128f (refactor(订单): 抽离订单详情抽屉为独立组件并复用)
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue