zhuotianyuan
/
WEB
forked from yoone/WEB
1
0
Fork 0
Code Pull Requests Activity

style: 格式化订单列表页代码缩进和换行

This commit is contained in:
zhuotianyuan 2026-01-27 17:09:30 +08:00
parent 139fdf0474
commit bf41887b6b
1 changed files with 313 additions and 313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -84,8 +84,8 @@ import dayjs from 'dayjs';
import * as XLSX from 'xlsx'; import * as XLSX from 'xlsx';
const ListPage: React.FC = () => { const ListPage: React.FC = () => {
const [file, setFile] = useState<File | null>(null); const [file, setFile] = useState<File | null>(null);
const [csvData, setCsvData] = useState<any[]>([]); const [csvData, setCsvData] = useState<any[]>([]);
const [processedData, setProcessedData] = useState<any[]>([]); const [processedData, setProcessedData] = useState<any[]>([]);
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
const [activeKey, setActiveKey] = useState<string>('all'); const [activeKey, setActiveKey] = useState<string>('all');
const [count, setCount] = useState<any[]>([]); const [count, setCount] = useState<any[]>([]);
@ -476,63 +476,63 @@ const ListPage: React.FC = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [selectedRowKeys, setSelectedRowKeys] = useState([]);
/** /**
* @description 处理文件上传 * @description 处理文件上传
*/ */
const handleFileUpload = (uploadedFile: File) => { const handleFileUpload = (uploadedFile: File) => {
// 检查文件类型 // 检查文件类型
if (!uploadedFile.name.match(/\.(xlsx)$/)) { if (!uploadedFile.name.match(/\.(xlsx)$/)) {
message.error('请上传 xlsx 格式的文件!'); message.error('请上传 xlsx 格式的文件!');
return false; return false;
}
setFile(uploadedFile);
const reader = new FileReader();
// 对于Excel文件，继续使用readAsArrayBuffer
reader.onload = (e) => {
try {
const data = e.target?.result;
// 如果是ArrayBuffer，使用type: 'array'来处理
const workbook = XLSX.read(data, { type: 'array' });
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
if (jsonData.length < 2) {
message.error('文件为空或缺少表头!');
setCsvData([]);
return;
}
// 将数组转换为对象数组
const headers = jsonData[0] as string[];
const rows = jsonData.slice(1).map((rowArray: any) => {
const rowData: { [key: string]: any } = {};
headers.forEach((header, index) => {
rowData[header] = rowArray[index];
});
return rowData;
});
message.success(`成功解析 ${rows.length} 条数据.`);
setCsvData(rows);
setProcessedData([]); // 清空旧的处理结果
} catch (error) {
message.error('Excel文件解析失败,请检查文件格式!');
console.error('Excel Parse Error:', error);
setCsvData([]);
} }
setFile(uploadedFile);
const reader = new FileReader();
// 对于Excel文件，继续使用readAsArrayBuffer
reader.onload = (e) => {
try {
const data = e.target?.result;
// 如果是ArrayBuffer，使用type: 'array'来处理
const workbook = XLSX.read(data, { type: 'array' });
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
if (jsonData.length < 2) {
message.error('文件为空或缺少表头!');
setCsvData([]);
return;
}
// 将数组转换为对象数组
const headers = jsonData[0] as string[];
const rows = jsonData.slice(1).map((rowArray: any) => {
const rowData: { [key: string]: any } = {};
headers.forEach((header, index) => {
rowData[header] = rowArray[index];
});
return rowData;
});
message.success(`成功解析 ${rows.length} 条数据.`);
setCsvData(rows);
setProcessedData([]); // 清空旧的处理结果
} catch (error) {
message.error('Excel文件解析失败,请检查文件格式!');
console.error('Excel Parse Error:', error);
setCsvData([]);
}
};
reader.readAsArrayBuffer(uploadedFile);
reader.onerror = (error) => {
message.error('文件读取失败!');
console.error('File Read Error:', error);
};
return false; // 阻止antd Upload组件的默认上传行为
}; };
reader.readAsArrayBuffer(uploadedFile);
reader.onerror = (error) => {
message.error('文件读取失败!');
console.error('File Read Error:', error);
};
return false; // 阻止antd Upload组件的默认上传行为
};
return ( return (
<PageContainer ghost> <PageContainer ghost>
<Tabs items={tabs} activeKey={activeKey} onChange={setActiveKey} /> <Tabs items={tabs} activeKey={activeKey} onChange={setActiveKey} />
@ -560,42 +560,42 @@ const ListPage: React.FC = () => {
}} }}
toolBarRender={() => [ toolBarRender={() => [
// <CreateOrder tableRef={actionRef} />, // <CreateOrder tableRef={actionRef} />,
<Upload <Upload
// beforeUpload={handleFileUpload} // beforeUpload={handleFileUpload}
name="file" name="file"
accept=".xlsx" accept=".xlsx"
showUploadList={false} showUploadList={false}
maxCount={1} maxCount={1}
customRequest={async (options) => { customRequest={async (options) => {
const { file, onSuccess, onError } = options; const { file, onSuccess, onError } = options;
console.log(file); console.log(file);
const formData = new FormData(); const formData = new FormData();
formData.append('file', file); formData.append('file', file);
try { try {
const res = await request('/order/import', { const res = await request('/order/import', {
method: 'POST', method: 'POST',
data: formData, data: formData,
requestType: 'form', requestType: 'form',
}); });
if (res?.success && res.data) { if (res?.success && res.data) {
// 使用xlsx将JSON数据转换为Excel // 使用xlsx将JSON数据转换为Excel
const XLSX = require('xlsx'); const XLSX = require('xlsx');
const worksheet = XLSX.utils.json_to_sheet(res.data); const worksheet = XLSX.utils.json_to_sheet(res.data);
const workbook = XLSX.utils.book_new(); const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Orders'); XLSX.utils.book_append_sheet(workbook, worksheet, 'Orders');
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
// 否则按原逻辑处理二进制数据 // 否则按原逻辑处理二进制数据
const blob = new Blob([excelBuffer], { const blob = new Blob([excelBuffer], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
}); });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const a = document.createElement('a'); const a = document.createElement('a');
a.href = url; a.href = url;
a.download = 'orders.xlsx'; a.download = 'orders.xlsx';
a.click(); a.click();
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
} else { } else {
message.error(res.message || '导出失败'); message.error(res.message || '导出失败');
} }
@ -606,9 +606,9 @@ const ListPage: React.FC = () => {
onError?.(error); onError?.(error);
} }
}} }}
> >
<Button icon={<UploadOutlined />}>选择文件</Button> <Button icon={<UploadOutlined />}>选择文件</Button>
</Upload>, </Upload>,
<SyncForm <SyncForm
onFinish={async (values: any) => { onFinish={async (values: any) => {
try { try {
@ -756,36 +756,36 @@ const Detail: React.FC<{
) )
? [] ? []
: [ : [
<Divider type="vertical" />, <Divider type="vertical" />,
<Button <Button
type="primary" type="primary"
onClick={async () => { onClick={async () => {
try { try {
if (!record.siteId || !record.externalOrderId) { if (!record.siteId || !record.externalOrderId) {
message.error('站点ID或外部订单ID不存在'); message.error('站点ID或外部订单ID不存在');
return; return;
}
const {
success,
message: errMsg,
data,
} = await ordercontrollerSyncorderbyid({
siteId: record.siteId,
orderId: record.externalOrderId,
});
if (!success) {
throw new Error(errMsg);
}
showSyncResult(data as SyncResultData, '订单');
tableRef.current?.reload();
} catch (error: any) {
message.error(error?.message || '同步失败');
} }
}} const {
> success,
同步订单 message: errMsg,
</Button>, data,
]), } = await ordercontrollerSyncorderbyid({
siteId: record.siteId,
orderId: record.externalOrderId,
});
if (!success) {
throw new Error(errMsg);
}
showSyncResult(data as SyncResultData, '订单');
tableRef.current?.reload();
} catch (error: any) {
message.error(error?.message || '同步失败');
}
}}
>
同步订单
</Button>,
]),
// ...(['processing', 'pending_reshipment'].includes(record.orderStatus) // ...(['processing', 'pending_reshipment'].includes(record.orderStatus)
// ? [ // ? [
// <Divider type="vertical" />, // <Divider type="vertical" />,
@ -804,152 +804,152 @@ const Detail: React.FC<{
'pending_refund', 'pending_refund',
].includes(record.orderStatus) ].includes(record.orderStatus)
? [ ? [
<Divider type="vertical" />, <Divider type="vertical" />,
<Popconfirm <Popconfirm
title="转至售后" title="转至售后"
description="确认转至售后?" description="确认转至售后?"
onConfirm={async () => { onConfirm={async () => {
try { try {
if (!record.id) { if (!record.id) {
message.error('订单ID不存在'); message.error('订单ID不存在');
return; return;
}
const { success, message: errMsg } =
await ordercontrollerChangestatus(
{
id: record.id,
},
{
status: 'after_sale_pending',
},
);
if (!success) {
throw new Error(errMsg);
}
tableRef.current?.reload();
} catch (error: any) {
message.error(error.message);
} }
}} const { success, message: errMsg } =
> await ordercontrollerChangestatus(
<Button type="primary" ghost> {
转至售后 id: record.id,
</Button> },
</Popconfirm>, {
] status: 'after_sale_pending',
},
);
if (!success) {
throw new Error(errMsg);
}
tableRef.current?.reload();
} catch (error: any) {
message.error(error.message);
}
}}
>
<Button type="primary" ghost>
转至售后
</Button>
</Popconfirm>,
]
: []), : []),
...(record.orderStatus === 'after_sale_pending' ...(record.orderStatus === 'after_sale_pending'
? [ ? [
<Divider type="vertical" />, <Divider type="vertical" />,
<Popconfirm <Popconfirm
title="转至取消" title="转至取消"
description="确认转至取消?" description="确认转至取消?"
onConfirm={async () => { onConfirm={async () => {
try { try {
if (!record.id) { if (!record.id) {
message.error('订单ID不存在'); message.error('订单ID不存在');
return; return;
} }
const { success, message: errMsg } = const { success, message: errMsg } =
await ordercontrollerCancelorder({ await ordercontrollerCancelorder({
id: record.id,
});
if (!success) {
throw new Error(errMsg);
}
tableRef.current?.reload();
} catch (error: any) {
message.error(error.message);
}
}}
>
<Button type="primary" ghost>
转至取消
</Button>
</Popconfirm>,
<Divider type="vertical" />,
<Popconfirm
title="转至退款"
description="确认转至退款?"
onConfirm={async () => {
try {
if (!record.id) {
message.error('订单ID不存在');
return;
}
const { success, message: errMsg } =
await ordercontrollerRefundorder({
id: record.id,
});
if (!success) {
throw new Error(errMsg);
}
tableRef.current?.reload();
} catch (error: any) {
message.error(error.message);
}
}}
>
<Button type="primary" ghost>
转至退款
</Button>
</Popconfirm>,
<Divider type="vertical" />,
<Popconfirm
title="转至完成"
description="确认转至完成?"
onConfirm={async () => {
try {
if (!record.id) {
message.error('订单ID不存在');
return;
}
const { success, message: errMsg } =
await ordercontrollerCompletedorder({
id: record.id,
});
if (!success) {
throw new Error(errMsg);
}
tableRef.current?.reload();
} catch (error: any) {
message.error(error.message);
}
}}
>
<Button type="primary" ghost>
转至完成
</Button>
</Popconfirm>,
<Divider type="vertical" />,
<Popconfirm
title="转至待补发"
description="确认转至待补发?"
onConfirm={async () => {
try {
const { success, message: errMsg } =
await ordercontrollerChangestatus(
{
id: record.id, id: record.id,
}); },
if (!success) { {
throw new Error(errMsg); status: 'pending_reshipment',
} },
tableRef.current?.reload(); );
} catch (error: any) { if (!success) {
message.error(error.message); throw new Error(errMsg);
} }
}} tableRef.current?.reload();
> } catch (error: any) {
<Button type="primary" ghost> message.error(error.message);
转至取消 }
</Button> }}
</Popconfirm>, >
<Divider type="vertical" />, <Button type="primary" ghost>
<Popconfirm 转至待补发
title="转至退款" </Button>
description="确认转至退款?" </Popconfirm>,
onConfirm={async () => { ]
try {
if (!record.id) {
message.error('订单ID不存在');
return;
}
const { success, message: errMsg } =
await ordercontrollerRefundorder({
id: record.id,
});
if (!success) {
throw new Error(errMsg);
}
tableRef.current?.reload();
} catch (error: any) {
message.error(error.message);
}
}}
>
<Button type="primary" ghost>
转至退款
</Button>
</Popconfirm>,
<Divider type="vertical" />,
<Popconfirm
title="转至完成"
description="确认转至完成?"
onConfirm={async () => {
try {
if (!record.id) {
message.error('订单ID不存在');
return;
}
const { success, message: errMsg } =
await ordercontrollerCompletedorder({
id: record.id,
});
if (!success) {
throw new Error(errMsg);
}
tableRef.current?.reload();
} catch (error: any) {
message.error(error.message);
}
}}
>
<Button type="primary" ghost>
转至完成
</Button>
</Popconfirm>,
<Divider type="vertical" />,
<Popconfirm
title="转至待补发"
description="确认转至待补发?"
onConfirm={async () => {
try {
const { success, message: errMsg } =
await ordercontrollerChangestatus(
{
id: record.id,
},
{
status: 'pending_reshipment',
},
);
if (!success) {
throw new Error(errMsg);
}
tableRef.current?.reload();
} catch (error: any) {
message.error(error.message);
}
}}
>
<Button type="primary" ghost>
转至待补发
</Button>
</Popconfirm>,
]
: []), : []),
]} ]}
> >
@ -1212,31 +1212,31 @@ const Detail: React.FC<{
} }
actions={ actions={
v.state === 'waiting-for-scheduling' || v.state === 'waiting-for-scheduling' ||
v.state === 'waiting-for-transit' v.state === 'waiting-for-transit'
? [ ? [
<Popconfirm <Popconfirm
title="取消运单" title="取消运单"
description="确认取消运单?" description="确认取消运单?"
onConfirm={async () => { onConfirm={async () => {
try { try {
const { success, message: errMsg } = const { success, message: errMsg } =
await logisticscontrollerDelshipment({ await logisticscontrollerDelshipment({
id: v.id, id: v.id,
}); });
if (!success) { if (!success) {
throw new Error(errMsg); throw new Error(errMsg);
}
tableRef.current?.reload();
initRequest();
} catch (error: any) {
message.error(error.message);
} }
}} tableRef.current?.reload();
> initRequest();
<DeleteFilled /> } catch (error: any) {
取消运单 message.error(error.message);
</Popconfirm>, }
] }}
>
<DeleteFilled />
取消运单
</Popconfirm>,
]
: [] : []
} }
> >
@ -1381,16 +1381,16 @@ const Shipping: React.FC<{
const [rates, setRates] = useState<API.RateDTO[]>([]); const [rates, setRates] = useState<API.RateDTO[]>([]);
const [ratesLoading, setRatesLoading] = useState(false); const [ratesLoading, setRatesLoading] = useState(false);
const { message } = App.useApp(); const { message } = App.useApp();
const [shipmentPlatforms, setShipmentPlatforms] = useState([ const [shipmentPlatforms, setShipmentPlatforms] = useState([
{ label: 'uniuni', value: 'uniuni' }, { label: 'uniuni', value: 'uniuni' },
{ label: 'tms.freightwaves', value: 'freightwaves' }, { label: 'tms.freightwaves', value: 'freightwaves' },
]); ]);
const [courierCompany, setCourierCompany] = useState([ const [courierCompany, setCourierCompany] = useState([
{ label: 'UNIUNI', value: 'UNIUNI' }, { label: 'UNIUNI', value: 'UNIUNI' },
{ label: 'PuroYYZ', value: 'PuroYYZ' }, { label: 'PuroYYZ', value: 'PuroYYZ' },
{ label: 'CPYYZ', value: 'CPYYZ' }, { label: 'CPYYZ', value: 'CPYYZ' },
{ label: 'UPSYYZ7000NEW', value: 'UPSYYZ7000NEW' }, { label: 'UPSYYZ7000NEW', value: 'UPSYYZ7000NEW' },
]); ]);
return ( return (
<ModalForm <ModalForm
formRef={formRef} formRef={formRef}
@ -1419,7 +1419,7 @@ const [shipmentPlatforms, setShipmentPlatforms] = useState([
await ordercontrollerGetorderdetail({ await ordercontrollerGetorderdetail({
orderId: id, orderId: id,
}); });
console.log('success data',success,data) console.log('success data', success, data)
if (!success || !data) return {}; if (!success || !data) return {};
data.sales = data.sales?.reduce( data.sales = data.sales?.reduce(
(acc: API.OrderSale[], cur: API.OrderSale) => { (acc: API.OrderSale[], cur: API.OrderSale) => {
@ -1442,7 +1442,7 @@ const [shipmentPlatforms, setShipmentPlatforms] = useState([
if (reShipping) data.sales = [{}]; if (reShipping) data.sales = [{}];
let shipmentInfo = localStorage.getItem('shipmentInfo'); let shipmentInfo = localStorage.getItem('shipmentInfo');
if (shipmentInfo) shipmentInfo = JSON.parse(shipmentInfo); if (shipmentInfo) shipmentInfo = JSON.parse(shipmentInfo);
const a = { const a = {
shipmentPlatform: 'uniuni', shipmentPlatform: 'uniuni',
courierCompany: 'UNIUNI', courierCompany: 'UNIUNI',
...data, ...data,
@ -1471,7 +1471,7 @@ const [shipmentPlatforms, setShipmentPlatforms] = useState([
}, },
origin: { origin: {
name: data?.name, name: data?.name,
email_addresses: shipmentInfo?.email_addresses , email_addresses: shipmentInfo?.email_addresses,
contact_name: data?.name, contact_name: data?.name,
phone_number: shipmentInfo?.phone_number, phone_number: shipmentInfo?.phone_number,
address: { address: {
@ -1504,7 +1504,7 @@ const [shipmentPlatforms, setShipmentPlatforms] = useState([
}, },
}, },
}; };
return a return a
}} }}
onFinish={async ({ onFinish={async ({
customer_note, customer_note,
@ -1569,25 +1569,25 @@ const [shipmentPlatforms, setShipmentPlatforms] = useState([
} }
}} }}
> >
<Row gutter={16}> <Row gutter={16}>
<Col span={8}> <Col span={8}>
<ProFormSelect <ProFormSelect
name="shipmentPlatform" name="shipmentPlatform"
label="发货平台" label="发货平台"
options={shipmentPlatforms} options={shipmentPlatforms}
placeholder="请选择发货平台" placeholder="请选择发货平台"
rules={[{ required: true, message: '请选择一个选项' }]} rules={[{ required: true, message: '请选择一个选项' }]}
/> />
</Col> </Col>
<Col span={8}> <Col span={8}>
<ProFormSelect <ProFormSelect
name="courierCompany" name="courierCompany"
label="快递公司" label="快递公司"
options={courierCompany} options={courierCompany}
placeholder="请选择快递公司" placeholder="请选择快递公司"
/> />
</Col> </Col>
</Row> </Row>
<ProFormText label="订单号" readonly name='externalOrderId' /> <ProFormText label="订单号" readonly name='externalOrderId' />
<ProFormText label="客户备注" readonly name="customer_note" /> <ProFormText label="客户备注" readonly name="customer_note" />
<ProFormList <ProFormList
@ -1657,16 +1657,16 @@ const [shipmentPlatforms, setShipmentPlatforms] = useState([
<ProFormList <ProFormList
label="发货产品" label="发货产品"
name="sales" name="sales"
// rules={[ // rules={[
// { // {
// required: true, // required: true,
// message: '至少需要一个商品', // message: '至少需要一个商品',
// validator: (_, value) => // validator: (_, value) =>
// value && value.length > 0 // value && value.length > 0
//</Col> ? Promise.resolve() //</Col> ? Promise.resolve()
// : Promise.reject('至少需要一个商品'), // : Promise.reject('至少需要一个商品'),
// }, // },
// ]} // ]}
> >
<ProForm.Group> <ProForm.Group>
<ProFormSelect <ProFormSelect
@ -1734,7 +1734,7 @@ const [shipmentPlatforms, setShipmentPlatforms] = useState([
// address_id: row.id, // address_id: row.id,
details: { details: {
origin: { origin: {
email_addresses:email, email_addresses: email,
address, address,
phone_number: { phone_number: {
phone: phone_number, phone: phone_number,
@ -1747,7 +1747,7 @@ const [shipmentPlatforms, setShipmentPlatforms] = useState([
/> />
} }
> >
{/* <ProFormText {/* <ProFormText
label="address_id" label="address_id"
name={'address_id'} name={'address_id'}
rules={[{ required: true, message: '请输入ID' }]} rules={[{ required: true, message: '请输入ID' }]}
@ -2100,7 +2100,7 @@ const [shipmentPlatforms, setShipmentPlatforms] = useState([
name="description" name="description"
placeholder="请输入描述" placeholder="请输入描述"
width="lg" width="lg"
// rules={[{ required: true, message: '请输入描述' }]} // rules={[{ required: true, message: '请输入描述' }]}
/> />
</ProForm.Group> </ProForm.Group>
</ProFormList> </ProFormList>
@ -2500,7 +2500,7 @@ const CreateOrder: React.FC<{
<ProFormText <ProFormText
label="公司名称" label="公司名称"
name={['billing', 'company']} name={['billing', 'company']}
rules={[{ message: '请输入公司名称' }]} rules={[{ message: '请输入公司名称' }]}
/> />
<ProFormItem <ProFormItem
name={['billing', 'country']} name={['billing', 'country']}
@ -2587,7 +2587,7 @@ const AddressPicker: React.FC<{
})); }));
}, },
}, },
{ {
title: 'id', title: 'id',
dataIndex: ['id'], dataIndex: ['id'],
hideInSearch: true, hideInSearch: true,
@ -2620,7 +2620,7 @@ const AddressPicker: React.FC<{
}, },
{ {
title: '邮箱', title: '邮箱',
dataIndex: [ 'email'], dataIndex: ['email'],
hideInSearch: true, hideInSearch: true,
}, },
]; ];