refactor(订单): 清理合并冲突并优化订单详情抽屉组件复用
移除合并冲突标记和重复代码，统一使用相对路径导入组件 简化订单详情逻辑，直接复用OrderDetailDrawer组件
This commit is contained in:
tikkhun
parent
9814eca928
commit
9c5caa1aea
|
|
@ -7,18 +7,8 @@ dayjs.extend(relativeTime);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* RelatedOrders 表格组件
|
* RelatedOrders 表格组件
|
||||||
<<<<<<< HEAD
|
|
||||||
<<<<<<< HEAD
|
|
||||||
* 用于展示订单详情中的关联数据(订阅/订单)，按统一表格样式渲染
|
* 用于展示订单详情中的关联数据(订阅/订单)，按统一表格样式渲染
|
||||||
* 中文注释:本组件将订阅与订单统一归一化为五列展示，便于快速浏览
|
* 中文注释:本组件将订阅与订单统一归一化为五列展示，便于快速浏览
|
||||||
=======
|
|
||||||
* 用于展示订单详情中的关联数据（订阅/订单），按统一表格样式渲染
|
|
||||||
* 中文注释：本组件将订阅与订单统一归一化为五列展示，便于快速浏览
|
|
||||||
>>>>>>> d98e843 (refactor(订单): 重构订单详情抽屉组件并移动相关文件)
|
|
||||||
=======
|
|
||||||
* 用于展示订单详情中的关联数据(订阅/订单)，按统一表格样式渲染
|
|
||||||
* 中文注释:本组件将订阅与订单统一归一化为五列展示，便于快速浏览
|
|
||||||
>>>>>>> 3ac2724 (style: 统一中文标点符号为英文格式)
|
|
||||||
*/
|
*/
|
||||||
const RelatedOrders: React.FC<{ data?: any[] }> = ({ data = [] }) => {
|
const RelatedOrders: React.FC<{ data?: any[] }> = ({ data = [] }) => {
|
||||||
const rows = (Array.isArray(data) ? data : []).map((it: any) => {
|
const rows = (Array.isArray(data) ? data : []).map((it: any) => {
|
||||||
|
|
@ -39,15 +29,7 @@ const RelatedOrders: React.FC<{ data?: any[] }> = ({ data = [] }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ width: '100%' }}>
|
<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 style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr', padding: '8px 0', fontWeight: 600 }}>
|
||||||
<div>订单编号</div>
|
<div>订单编号</div>
|
||||||
<div>关系</div>
|
<div>关系</div>
|
||||||
|
|
|
||||||
|
|
@ -2,30 +2,11 @@ import React, { useRef, useState } from 'react';
|
||||||
import { PageContainer } from '@ant-design/pro-layout';
|
import { PageContainer } from '@ant-design/pro-layout';
|
||||||
import type { ProColumns, ActionType, ProTableProps } from '@ant-design/pro-components';
|
import type { ProColumns, ActionType, ProTableProps } from '@ant-design/pro-components';
|
||||||
import { ProTable } from '@ant-design/pro-components';
|
import { ProTable } from '@ant-design/pro-components';
|
||||||
<<<<<<< HEAD
|
|
||||||
<<<<<<< HEAD
|
|
||||||
import { App, Tag, Button } from 'antd';
|
import { App, Tag, Button } from 'antd';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { ordercontrollerGetorders } from '@/servers/api/order';
|
import { ordercontrollerGetorders } from '@/servers/api/order';
|
||||||
import OrderDetailDrawer from './OrderDetailDrawer';
|
import OrderDetailDrawer from './OrderDetailDrawer';
|
||||||
<<<<<<< HEAD
|
|
||||||
import { sitecontrollerAll } from '@/servers/api/site';
|
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 {
|
interface OrderItemRow {
|
||||||
id: number;
|
id: number;
|
||||||
|
|
@ -41,31 +22,11 @@ interface OrderItemRow {
|
||||||
const OrdersPage: React.FC = () => {
|
const OrdersPage: React.FC = () => {
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const { message } = App.useApp();
|
const { message } = App.useApp();
|
||||||
<<<<<<< HEAD
|
|
||||||
<<<<<<< HEAD
|
|
||||||
<<<<<<< HEAD
|
|
||||||
// 抽屉状态:改为复用订单详情抽屉组件
|
// 抽屉状态:改为复用订单详情抽屉组件
|
||||||
=======
|
|
||||||
// 抽屉状态：改为复用订单详情抽屉组件
|
|
||||||
>>>>>>> 1f4128f (refactor(订单): 抽离订单详情抽屉为独立组件并复用)
|
|
||||||
=======
|
|
||||||
// 抽屉状态:改为复用订单详情抽屉组件
|
|
||||||
>>>>>>> 3ac2724 (style: 统一中文标点符号为英文格式)
|
|
||||||
const [detailOpen, setDetailOpen] = useState(false);
|
const [detailOpen, setDetailOpen] = useState(false);
|
||||||
const [detailRecord, setDetailRecord] = useState<any | null>(null);
|
const [detailRecord, setDetailRecord] = useState<any | null>(null);
|
||||||
const [detailOrderId, setDetailOrderId] = useState<number | null>(null);
|
const [detailOrderId, setDetailOrderId] = useState<number | null>(null);
|
||||||
const Noop: React.FC<any> = () => 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>[] = [
|
const columns: ProColumns<OrderItemRow>[] = [
|
||||||
{
|
{
|
||||||
|
|
@ -123,54 +84,10 @@ const OrdersPage: React.FC = () => {
|
||||||
render: (_, row) => (
|
render: (_, row) => (
|
||||||
<Button
|
<Button
|
||||||
size="small"
|
size="small"
|
||||||
<<<<<<< HEAD
|
|
||||||
<<<<<<< HEAD
|
|
||||||
=======
|
|
||||||
>>>>>>> 1f4128f (refactor(订单): 抽离订单详情抽屉为独立组件并复用)
|
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setDetailRecord(row as any);
|
setDetailRecord(row as any);
|
||||||
setDetailOrderId(row.id as number);
|
setDetailOrderId(row.id as number);
|
||||||
setDetailOpen(true);
|
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}
|
toolBarRender={false}
|
||||||
/>
|
/>
|
||||||
<<<<<<< HEAD
|
|
||||||
<<<<<<< HEAD
|
|
||||||
<<<<<<< HEAD
|
|
||||||
{/* 订阅关联:直接使用订单详情抽屉组件 */}
|
{/* 订阅关联:直接使用订单详情抽屉组件 */}
|
||||||
=======
|
|
||||||
{/* 订阅关联：直接使用订单详情抽屉组件 */}
|
|
||||||
>>>>>>> 1f4128f (refactor(订单): 抽离订单详情抽屉为独立组件并复用)
|
|
||||||
=======
|
|
||||||
{/* 订阅关联:直接使用订单详情抽屉组件 */}
|
|
||||||
>>>>>>> 3ac2724 (style: 统一中文标点符号为英文格式)
|
|
||||||
{detailRecord && detailOrderId !== null && (
|
{detailRecord && detailOrderId !== null && (
|
||||||
<OrderDetailDrawer
|
<OrderDetailDrawer
|
||||||
open={detailOpen}
|
open={detailOpen}
|
||||||
|
|
@ -252,57 +160,8 @@ const OrdersPage: React.FC = () => {
|
||||||
setActiveLine={() => {}}
|
setActiveLine={() => {}}
|
||||||
OrderNoteComponent={Noop}
|
OrderNoteComponent={Noop}
|
||||||
SalesChangeComponent={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>
|
</PageContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue