yoone
/
WEB
1
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(订单): 添加同步订单表单组件并优化类型检查 

将同步订单表单抽离为独立组件SyncForm
在订单列表和详情页添加类型安全检查
优化错误处理逻辑，统一使用error.message
This commit is contained in:
tikkhun 2025-11-26 11:10:49 +08:00
parent bd3d9a00c5
commit 5fdbce88cd
3 changed files with 131 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/SyncForm.tsx Normal file
View File

@ -0,0 +1,69 @@
import { sitecontrollerAll } from '@/servers/api/site';
import { SyncOutlined } from '@ant-design/icons';
import {
ActionType,
DrawerForm,
ProForm,
ProFormSelect,
} from '@ant-design/pro-components';
import { App, Button } from 'antd';
import React from 'react';
// 定义SyncForm组件的props类型
interface SyncFormProps {
tableRef: React.MutableRefObject<ActionType | undefined>;
onFinish: (values:any) => Promise<void>;
}
/**
* 同步订单的表单组件
* @param {SyncFormProps} props 组件属性
* @returns {React.ReactElement} 抽屉表单
*/
const SyncForm: React.FC<SyncFormProps> = ({ tableRef, onFinish }) => {
// 使用 antd 的 App 组件提供的 message API
// 返回一个抽屉表单
return (
<DrawerForm<API.ordercontrollerSyncorderParams>
title="同步订单"
// 表单的触发器，一个带图标的按钮
trigger={
<Button key="syncSite" type="primary">
<SyncOutlined />
同步订单
</Button>
}
// 自动聚焦第一个输入框
autoFocusFirstInput
// 抽屉关闭时销毁内部组件
drawerProps={{
destroyOnHidden: true,
}}
// 表单提交成功后的回调
onFinish={onFinish}
>
<ProForm.Group>
{/* 站点选择框 */}
<ProFormSelect
name="siteId"
width="lg"
label="站点"
placeholder="请选择站点"
// 异步请求站点列表数据
request={async () => {
const { data = [] } = await sitecontrollerAll();
// 将返回的数据格式化为 ProFormSelect 需要的格式
return data.map((item) => ({
label: item.siteName,
value: item.id,
}));
}}
/>
</ProForm.Group>
</DrawerForm>
);
};
export default SyncForm;

123
src/pages/Order/List/index.tsx
View File

@ -1,6 +1,7 @@
import styles from '../../../style/order-list.css';
import InternationalPhoneInput from '@/components/InternationalPhoneInput';
import SyncForm from '@/components/SyncForm';
import { HistoryOrder } from '@/pages/Statistics/Order';
import { ORDER_STATUS_ENUM } from '@/constants';
import {
@ -180,7 +181,7 @@ const ListPage: React.FC = () => {
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);
const isSub = related.some((it: any) => it?.externalSubscriptionId || it?.billing_period || it?.line_items);
return <Tag color={isSub ? 'green' : 'default'}>{isSub ? '是' : '否'}</Tag>;
},
},
@ -259,7 +260,7 @@ const ListPage: React.FC = () => {
render: (_, record) => {
return (
<div>
{record?.shipmentList?.map((item) => {
{(record as any)?.shipmentList?.map((item: any) => {
if (!item) return;
return (
<div>
@ -330,17 +331,21 @@ const ListPage: React.FC = () => {
type="primary"
onClick={async () => {
try {
if (!record.siteId || !record.externalOrderId) {
message.error('站点ID或外部订单ID不存在');
return;
}
const { success, message: errMsg } =
await ordercontrollerSyncorderbyid({
siteId: record.siteId as string,
orderId: record.externalOrderId as string,
siteId: record.siteId,
orderId: record.externalOrderId,
});
if (!success) {
throw new Error(errMsg);
}
message.success('同步成功');
actionRef.current?.reload();
} catch (error) {
} catch (error: any) {
message.error(error?.message || '同步失败');
}
}}
@ -377,6 +382,10 @@ const ListPage: React.FC = () => {
description="确认转至售后？"
onConfirm={async () => {
try {
if (!record.id) {
message.error('订单ID不存在');
return;
}
const { success, message: errMsg } =
await ordercontrollerChangestatus(
{
@ -440,9 +449,21 @@ const ListPage: React.FC = () => {
}}
toolBarRender={() => [
<CreateOrder tableRef={actionRef} />,
<SyncForm tableRef={actionRef} />,
<SyncForm onFinish={async (values: any) => {
try {
const { success, message: errMsg } =
await ordercontrollerSyncorderbyid(values);
if (!success) {
throw new Error(errMsg);
}
message.success('同步成功');
actionRef.current?.reload();
} catch (error: any) {
message.error(error?.message || '同步失败');
}
}} tableRef={actionRef} />,
]}
request={async ({ date, ...param }) => {
request={async ({ date, ...param }: any) => {
if (param.status === 'all') {
delete param.status;
}
@ -469,58 +490,6 @@ const ListPage: React.FC = () => {
);
};
const SyncForm: React.FC<{
tableRef: React.MutableRefObject<ActionType | undefined>;
}> = ({ tableRef }) => {
const { message } = App.useApp();
return (
<DrawerForm<API.ordercontrollerSyncorderParams>
title="同步订单"
trigger={
<Button key="syncSite" type="primary">
<SyncOutlined />
同步订单
</Button>
}
autoFocusFirstInput
drawerProps={{
destroyOnHidden: true,
}}
onFinish={async (values) => {
try {
const { success, message: errMsg } = await ordercontrollerSyncorder(
values,
);
if (!success) {
throw new Error(errMsg);
}
message.success('同步成功');
tableRef.current?.reload();
return true;
} catch (error: any) {
message.error(error.message);
}
}}
>
<ProForm.Group>
<ProFormSelect
name="siteId"
width="lg"
label="站点"
placeholder="请选择站点"
request={async () => {
const { data = [] } = await sitecontrollerAll();
return data.map((item) => ({
label: item.siteName,
value: item.id,
}));
}}
/>
</ProForm.Group>
</DrawerForm>
);
};
const Detail: React.FC<{
tableRef: React.MutableRefObject<ActionType | undefined>;
orderId: number;
@ -582,17 +551,21 @@ const Detail: React.FC<{
type="primary"
onClick={async () => {
try {
if (!record.siteId || !record.externalOrderId) {
message.error('站点ID或外部订单ID不存在');
return;
}
const { success, message: errMsg } =
await ordercontrollerSyncorderbyid({
siteId: record.siteId as string,
orderId: record.externalOrderId as string,
siteId: record.siteId,
orderId: record.externalOrderId,
});
if (!success) {
throw new Error(errMsg);
}
message.success('同步成功');
tableRef.current?.reload();
} catch (error) {
} catch (error: any) {
message.error(error?.message || '同步失败');
}
}}
@ -624,6 +597,10 @@ const Detail: React.FC<{
description="确认转至售后？"
onConfirm={async () => {
try {
if (!record.id) {
message.error('订单ID不存在');
return;
}
const { success, message: errMsg } =
await ordercontrollerChangestatus(
{
@ -656,6 +633,10 @@ const Detail: React.FC<{
description="确认转至取消？"
onConfirm={async () => {
try {
if (!record.id) {
message.error('订单ID不存在');
return;
}
const { success, message: errMsg } =
await ordercontrollerCancelorder({
id: record.id,
@ -679,6 +660,10 @@ const Detail: React.FC<{
description="确认转至退款？"
onConfirm={async () => {
try {
if (!record.id) {
message.error('订单ID不存在');
return;
}
const { success, message: errMsg } =
await ordercontrollerRefundorder({
id: record.id,
@ -702,6 +687,10 @@ const Detail: React.FC<{
description="确认转至完成？"
onConfirm={async () => {
try {
if (!record.id) {
message.error('订单ID不存在');
return;
}
const { success, message: errMsg } =
await ordercontrollerCompletedorder({
id: record.id,
@ -1333,7 +1322,7 @@ const Shipping: React.FC<{
// const labelContent = resLabel.content;
// printPDF([labelContent]);
return true;
} catch (error) {
} catch (error: any) {
message.error(error?.message || '创建失败');
}
}}
@ -1445,7 +1434,7 @@ const Shipping: React.FC<{
};
}) || options
);
} catch (error) {
} catch (error: any) {
return options;
}
}}
@ -1947,7 +1936,7 @@ const Shipping: React.FC<{
shipmentFee: fee
});
message.success('获取运费成功');
} catch (error) {
} catch (error: any) {
message.error(error?.message || '获取运费失败');
}
}}
@ -2051,7 +2040,7 @@ const SalesChange: React.FC<{
};
})
);
} catch (error) {
} catch (error: any) {
return [];
}
}}
@ -2102,7 +2091,7 @@ const SalesChange: React.FC<{
};
})
);
} catch (error) {
} catch (error: any) {
return [];
}
}}

6
src/pages/Site/List/index.tsx
View File

@ -216,6 +216,12 @@ const SiteList: React.FC = () => {
>
新增站点
</Button>,
// 同步包括 orders subscriptions 等等
// <Button key='new' type='primary' onClick={()=> {
//
// }}}>
// 同步站点数据
// </Button>
]}
/>