feat: 为多个页面表格添加快速跳转功能
在多个页面的表格分页器中添加 showQuickJumper 属性，允许用户快速跳转到指定页码
This commit is contained in:
tikkhun
parent
2467a0c3b2
commit
e498793678
|
|
@ -241,7 +241,7 @@ const HistoryOrders: React.FC<HistoryOrdersProps> = ({ customer, siteId }) => {
|
||||||
pagination={{
|
pagination={{
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
showSizeChanger: true,
|
showSizeChanger: true,
|
||||||
showTotal: (total) => `共 ${total} 条`,
|
showQuickJumper: true,
|
||||||
}}
|
}}
|
||||||
scroll={{ x: 800 }}
|
scroll={{ x: 800 }}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -352,8 +352,7 @@ const CustomerList: React.FC = () => {
|
||||||
pagination={{
|
pagination={{
|
||||||
pageSize: 20,
|
pageSize: 20,
|
||||||
showSizeChanger: true,
|
showSizeChanger: true,
|
||||||
showTotal: (total, range) =>
|
showQuickJumper: true,
|
||||||
`第 ${range[0]}-${range[1]} 条/总共 ${total} 条`,
|
|
||||||
}}
|
}}
|
||||||
toolBarRender={() => [
|
toolBarRender={() => [
|
||||||
<Button
|
<Button
|
||||||
|
|
|
||||||
|
|
@ -151,7 +151,10 @@ const OrderItemsPage: React.FC = () => {
|
||||||
}
|
}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
request={request}
|
request={request}
|
||||||
pagination={{ showSizeChanger: true }}
|
pagination={{
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
}}
|
||||||
search={{ labelWidth: 90, span: 6 }}
|
search={{ labelWidth: 90, span: 6 }}
|
||||||
toolBarRender={false}
|
toolBarRender={false}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -479,6 +479,7 @@ const ListPage: React.FC = () => {
|
||||||
pagination={{
|
pagination={{
|
||||||
pageSizeOptions: ['10', '20', '50', '100', '1000'],
|
pageSizeOptions: ['10', '20', '50', '100', '1000'],
|
||||||
showSizeChanger: true,
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
defaultPageSize: 10,
|
defaultPageSize: 10,
|
||||||
}}
|
}}
|
||||||
toolBarRender={() => [
|
toolBarRender={() => [
|
||||||
|
|
|
||||||
|
|
@ -400,6 +400,7 @@ const PermutationPage: React.FC = () => {
|
||||||
pagination={{
|
pagination={{
|
||||||
defaultPageSize: 50,
|
defaultPageSize: 50,
|
||||||
showSizeChanger: true,
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
pageSizeOptions: ['50', '100', '200', '500', '1000', '2000'],
|
pageSizeOptions: ['50', '100', '200', '500', '1000', '2000'],
|
||||||
}}
|
}}
|
||||||
scroll={{ x: 'max-content' }}
|
scroll={{ x: 'max-content' }}
|
||||||
|
|
|
||||||
|
|
@ -414,6 +414,7 @@ const ProductSyncPage: React.FC = () => {
|
||||||
pagination={{
|
pagination={{
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
showSizeChanger: true,
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
}}
|
}}
|
||||||
scroll={{ x: 'max-content' }}
|
scroll={{ x: 'max-content' }}
|
||||||
search={{
|
search={{
|
||||||
|
|
|
||||||
|
|
@ -1,761 +0,0 @@
|
||||||
import { productcontrollerGetproductlist } from '@/servers/api/product';
|
|
||||||
import { siteapicontrollerGetproducts } from '@/servers/api/siteApi';
|
|
||||||
import { templatecontrollerGettemplatebyname } from '@/servers/api/template';
|
|
||||||
import { EditOutlined, SyncOutlined } from '@ant-design/icons';
|
|
||||||
import {
|
|
||||||
ActionType,
|
|
||||||
ModalForm,
|
|
||||||
ProColumns,
|
|
||||||
ProFormText,
|
|
||||||
ProTable,
|
|
||||||
} from '@ant-design/pro-components';
|
|
||||||
import { request } from '@umijs/max';
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
Card,
|
|
||||||
message,
|
|
||||||
Modal,
|
|
||||||
Progress,
|
|
||||||
Select,
|
|
||||||
Spin,
|
|
||||||
Tag,
|
|
||||||
} from 'antd';
|
|
||||||
import React, { useEffect, useRef, useState } from 'react';
|
|
||||||
import EditForm from '../List/EditForm';
|
|
||||||
|
|
||||||
// 定义站点接口
|
|
||||||
interface Site {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
skuPrefix?: string;
|
|
||||||
isDisabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 定义站点商品接口
|
|
||||||
interface SiteProduct {
|
|
||||||
id: string;
|
|
||||||
sku: string;
|
|
||||||
name: string;
|
|
||||||
price: number;
|
|
||||||
stock: number;
|
|
||||||
categories: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 定义API响应接口
|
|
||||||
interface ApiResponse<T> {
|
|
||||||
data: T[];
|
|
||||||
success: boolean;
|
|
||||||
message?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 模拟API请求函数
|
|
||||||
const getSites = async (): Promise<ApiResponse<Site>> => {
|
|
||||||
const res = await request('/site/list', {
|
|
||||||
method: 'GET',
|
|
||||||
params: {
|
|
||||||
current: 1,
|
|
||||||
pageSize: 1000,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
data: res.data?.items || [],
|
|
||||||
success: res.success,
|
|
||||||
message: res.message,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const getsiteProduct = async (): Promise<ApiResponse<SiteProduct>> => {
|
|
||||||
return request('/product/wp-products', {
|
|
||||||
method: 'GET',
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const ProductSyncPage: React.FC = () => {
|
|
||||||
const [sites, setSites] = useState<Site[]>([]);
|
|
||||||
// 存储所有 WP 产品，用于查找匹配。 Key: SKU (包含前缀)
|
|
||||||
const [siteProductMap, setSiteProductMap] = useState<Map<string, SiteProduct>>(
|
|
||||||
new Map(),
|
|
||||||
);
|
|
||||||
const [skuTemplate, setSkuTemplate] = useState<string>('');
|
|
||||||
const [initialLoading, setInitialLoading] = useState(true);
|
|
||||||
const actionRef = useRef<ActionType>();
|
|
||||||
const [selectedSiteId, setSelectedSiteId] = useState<string>('');
|
|
||||||
const [batchSyncModalVisible, setBatchSyncModalVisible] = useState(false);
|
|
||||||
const [syncProgress, setSyncProgress] = useState(0);
|
|
||||||
const [syncing, setSyncing] = useState(false);
|
|
||||||
const [syncResults, setSyncResults] = useState<{
|
|
||||||
success: number;
|
|
||||||
failed: number;
|
|
||||||
errors: string[];
|
|
||||||
}>({ success: 0, failed: 0, errors: [] });
|
|
||||||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
|
||||||
const [selectedRows, setSelectedRows] = useState<SiteProduct[]>([]);
|
|
||||||
|
|
||||||
// 初始化数据：获取站点和所有 WP 产品
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchData = async () => {
|
|
||||||
try {
|
|
||||||
setInitialLoading(true);
|
|
||||||
// 获取所有站点
|
|
||||||
const sitesResponse = await getSites();
|
|
||||||
const rawSiteList = sitesResponse.data || [];
|
|
||||||
// 过滤掉已禁用的站点
|
|
||||||
const siteList: Site[] = rawSiteList.filter((site) => !site.isDisabled);
|
|
||||||
setSites(siteList);
|
|
||||||
|
|
||||||
// 获取所有 WordPress 商品
|
|
||||||
const siteProductsResponse = await siteapicontrollerGetproducts({
|
|
||||||
siteId: selectedSiteId,
|
|
||||||
});
|
|
||||||
const siteProductList: SiteProduct[] = siteProductsResponse.data || [];
|
|
||||||
|
|
||||||
// 构建 WP 产品 Map，Key 为 SKU
|
|
||||||
const map = new Map<string, SiteProduct>();
|
|
||||||
siteProductList.forEach((p) => {
|
|
||||||
if (p.sku) {
|
|
||||||
map.set(p.sku, p);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
setSiteProductMap(map);
|
|
||||||
|
|
||||||
// 获取 SKU 模板
|
|
||||||
try {
|
|
||||||
const templateRes = await templatecontrollerGettemplatebyname({
|
|
||||||
name: 'site.product.sku',
|
|
||||||
});
|
|
||||||
if (templateRes && templateRes.value) {
|
|
||||||
setSkuTemplate(templateRes.value);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.log('Template site.product.sku not found, using default.');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
message.error('获取基础数据失败,请重试');
|
|
||||||
console.error('Error fetching data:', error);
|
|
||||||
} finally {
|
|
||||||
setInitialLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 同步产品到站点
|
|
||||||
const syncProductToSite = async (
|
|
||||||
values: any,
|
|
||||||
record: ProductWithWP,
|
|
||||||
site: Site,
|
|
||||||
siteProductId?: string,
|
|
||||||
) => {
|
|
||||||
try {
|
|
||||||
const hide = message.loading('正在同步...', 0);
|
|
||||||
const data = {
|
|
||||||
name: record.name,
|
|
||||||
sku: values.sku,
|
|
||||||
regular_price: record.price?.toString(),
|
|
||||||
sale_price: record.promotionPrice?.toString(),
|
|
||||||
type: record.type === 'bundle' ? 'simple' : record.type,
|
|
||||||
description: record.description,
|
|
||||||
status: 'publish',
|
|
||||||
stock_status: 'instock',
|
|
||||||
manage_stock: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
let res;
|
|
||||||
if (siteProductId) {
|
|
||||||
res = await request(`/site-api/${site.id}/products/${siteProductId}`, {
|
|
||||||
method: 'PUT',
|
|
||||||
data,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
res = await request(`/site-api/${site.id}/products`, {
|
|
||||||
method: 'POST',
|
|
||||||
data,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('res', res);
|
|
||||||
if (!res.success) {
|
|
||||||
hide();
|
|
||||||
throw new Error(res.message || '同步失败');
|
|
||||||
}
|
|
||||||
// 更新本地缓存 Map，避免刷新
|
|
||||||
setSiteProductMap((prev) => {
|
|
||||||
const newMap = new Map(prev);
|
|
||||||
if (res.data && typeof res.data === 'object') {
|
|
||||||
newMap.set(values.sku, res.data as SiteProduct);
|
|
||||||
}
|
|
||||||
return newMap;
|
|
||||||
});
|
|
||||||
|
|
||||||
hide();
|
|
||||||
message.success('同步成功');
|
|
||||||
return true;
|
|
||||||
} catch (error: any) {
|
|
||||||
message.error('同步失败: ' + (error.message || error.toString()));
|
|
||||||
return false;
|
|
||||||
} finally {
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 批量同步产品到指定站点
|
|
||||||
const batchSyncProducts = async (productsToSync?: ProductWithWP[]) => {
|
|
||||||
if (!selectedSiteId) {
|
|
||||||
message.error('请选择要同步到的站点');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const targetSite = sites.find((site) => site.id === selectedSiteId);
|
|
||||||
if (!targetSite) {
|
|
||||||
message.error('选择的站点不存在');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果没有传入产品列表，则使用选中的产品
|
|
||||||
let products = productsToSync || selectedRows;
|
|
||||||
|
|
||||||
// 如果既没有传入产品也没有选中产品，则同步所有产品
|
|
||||||
if (!products || products.length === 0) {
|
|
||||||
try {
|
|
||||||
const { data, success } = await productcontrollerGetproductlist({
|
|
||||||
current: 1,
|
|
||||||
pageSize: 10000, // 获取所有产品
|
|
||||||
} as any);
|
|
||||||
|
|
||||||
if (!success || !data?.items) {
|
|
||||||
message.error('获取产品列表失败');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
products = data.items as ProductWithWP[];
|
|
||||||
} catch (error) {
|
|
||||||
message.error('获取产品列表失败');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setSyncing(true);
|
|
||||||
setSyncProgress(0);
|
|
||||||
setSyncResults({ success: 0, failed: 0, errors: [] });
|
|
||||||
|
|
||||||
const totalProducts = products.length;
|
|
||||||
let processed = 0;
|
|
||||||
let successCount = 0;
|
|
||||||
let failedCount = 0;
|
|
||||||
const errors: string[] = [];
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 逐个同步产品
|
|
||||||
for (const product of products) {
|
|
||||||
try {
|
|
||||||
// 获取该产品在目标站点的SKU
|
|
||||||
let siteProductSku = '';
|
|
||||||
if (product.siteSkus && product.siteSkus.length > 0) {
|
|
||||||
const siteSkuInfo = product.siteSkus.find((sku: any) => {
|
|
||||||
return (
|
|
||||||
sku.siteSku &&
|
|
||||||
sku.siteSku.includes(targetSite.skuPrefix || targetSite.name)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
if (siteSkuInfo) {
|
|
||||||
siteProductSku = siteSkuInfo.siteSku;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果没有找到实际的siteSku，则根据模板生成
|
|
||||||
const expectedSku =
|
|
||||||
siteProductSku ||
|
|
||||||
(skuTemplate
|
|
||||||
? renderSiteSku(skuTemplate, { site: targetSite, product })
|
|
||||||
: `${targetSite.skuPrefix || ''}-${product.sku}`);
|
|
||||||
|
|
||||||
// 检查是否已存在
|
|
||||||
const existingProduct = siteProductMap.get(expectedSku);
|
|
||||||
|
|
||||||
// 准备同步数据
|
|
||||||
const syncData = {
|
|
||||||
name: product.name,
|
|
||||||
sku: expectedSku,
|
|
||||||
regular_price: product.price?.toString(),
|
|
||||||
sale_price: product.promotionPrice?.toString(),
|
|
||||||
type: product.type === 'bundle' ? 'simple' : product.type,
|
|
||||||
description: product.description,
|
|
||||||
status: 'publish',
|
|
||||||
stock_status: 'instock',
|
|
||||||
manage_stock: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
let res;
|
|
||||||
if (existingProduct?.externalProductId) {
|
|
||||||
// 更新现有产品
|
|
||||||
res = await request(
|
|
||||||
`/site-api/${targetSite.id}/products/${existingProduct.externalProductId}`,
|
|
||||||
{
|
|
||||||
method: 'PUT',
|
|
||||||
data: syncData,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
// 创建新产品
|
|
||||||
res = await request(`/site-api/${targetSite.id}/products`, {
|
|
||||||
method: 'POST',
|
|
||||||
data: syncData,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('res', res);
|
|
||||||
|
|
||||||
if (res.success) {
|
|
||||||
successCount++;
|
|
||||||
// 更新本地缓存
|
|
||||||
setSiteProductMap((prev) => {
|
|
||||||
const newMap = new Map(prev);
|
|
||||||
if (res.data && typeof res.data === 'object') {
|
|
||||||
newMap.set(expectedSku, res.data as SiteProduct);
|
|
||||||
}
|
|
||||||
return newMap;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
failedCount++;
|
|
||||||
errors.push(`产品 ${product.sku}: ${res.message || '同步失败'}`);
|
|
||||||
}
|
|
||||||
} catch (error: any) {
|
|
||||||
failedCount++;
|
|
||||||
errors.push(`产品 ${product.sku}: ${error.message || '未知错误'}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
processed++;
|
|
||||||
setSyncProgress(Math.round((processed / totalProducts) * 100));
|
|
||||||
}
|
|
||||||
|
|
||||||
setSyncResults({ success: successCount, failed: failedCount, errors });
|
|
||||||
|
|
||||||
if (failedCount === 0) {
|
|
||||||
message.success(`批量同步完成，成功同步 ${successCount} 个产品`);
|
|
||||||
} else {
|
|
||||||
message.warning(
|
|
||||||
`批量同步完成，成功 ${successCount} 个，失败 ${failedCount} 个`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 刷新表格
|
|
||||||
actionRef.current?.reload();
|
|
||||||
} catch (error: any) {
|
|
||||||
message.error('批量同步失败: ' + (error.message || error.toString()));
|
|
||||||
} finally {
|
|
||||||
setSyncing(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 简单的模板渲染函数
|
|
||||||
const renderSiteSku = (template: string, data: any) => {
|
|
||||||
if (!template) return '';
|
|
||||||
// 支持 <%= it.path %> (Eta) 和 {{ path }} (Mustache/Handlebars)
|
|
||||||
return template.replace(
|
|
||||||
/<%=\s*it\.([\w.]+)\s*%>|\{\{\s*([\w.]+)\s*\}\}/g,
|
|
||||||
(_, p1, p2) => {
|
|
||||||
const path = p1 || p2;
|
|
||||||
const keys = path.split('.');
|
|
||||||
let value = data;
|
|
||||||
for (const key of keys) {
|
|
||||||
value = value?.[key];
|
|
||||||
}
|
|
||||||
return value === undefined || value === null ? '' : String(value);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 生成表格列配置
|
|
||||||
const generateColumns = (): ProColumns<ProductWithWP>[] => {
|
|
||||||
const columns: ProColumns<ProductWithWP>[] = [
|
|
||||||
{
|
|
||||||
title: 'SKU',
|
|
||||||
dataIndex: 'sku',
|
|
||||||
key: 'sku',
|
|
||||||
width: 150,
|
|
||||||
fixed: 'left',
|
|
||||||
copyable: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '商品信息',
|
|
||||||
key: 'profile',
|
|
||||||
width: 300,
|
|
||||||
fixed: 'left',
|
|
||||||
render: (_, record) => (
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginBottom: 4,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ fontWeight: 'bold', fontSize: 14 }}>
|
|
||||||
{record.name}
|
|
||||||
</div>
|
|
||||||
<EditForm
|
|
||||||
record={record}
|
|
||||||
tableRef={actionRef}
|
|
||||||
trigger={
|
|
||||||
<EditOutlined
|
|
||||||
style={{
|
|
||||||
cursor: 'pointer',
|
|
||||||
fontSize: 16,
|
|
||||||
color: '#1890ff',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div style={{ fontSize: 12, color: '#666' }}>
|
|
||||||
<span style={{ marginRight: 8 }}>价格: {record.price}</span>
|
|
||||||
{record.promotionPrice && (
|
|
||||||
<span style={{ color: 'red' }}>
|
|
||||||
促销价: {record.promotionPrice}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 属性 */}
|
|
||||||
<div style={{ marginTop: 4 }}>
|
|
||||||
{record.attributes?.map((attr: any, idx: number) => (
|
|
||||||
<Tag
|
|
||||||
key={idx}
|
|
||||||
style={{ fontSize: 10, marginRight: 4, marginBottom: 2 }}
|
|
||||||
>
|
|
||||||
{attr.dict?.name || attr.name}: {attr.name}
|
|
||||||
</Tag>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 组成 (如果是 Bundle) */}
|
|
||||||
{record.type === 'bundle' &&
|
|
||||||
record.components &&
|
|
||||||
record.components.length > 0 && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
marginTop: 8,
|
|
||||||
fontSize: 12,
|
|
||||||
background: '#f5f5f5',
|
|
||||||
padding: 4,
|
|
||||||
borderRadius: 4,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ fontWeight: 'bold', marginBottom: 2 }}>
|
|
||||||
Components:
|
|
||||||
</div>
|
|
||||||
{record.components.map((comp: any, idx: number) => (
|
|
||||||
<div key={idx}>
|
|
||||||
{comp.sku} × {comp.quantity}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// 为每个站点生成列
|
|
||||||
sites.forEach((site: Site) => {
|
|
||||||
const siteColumn: ProColumns<ProductWithWP> = {
|
|
||||||
title: site.name,
|
|
||||||
key: `site_${site.id}`,
|
|
||||||
hideInSearch: true,
|
|
||||||
width: 220,
|
|
||||||
render: (_, record) => {
|
|
||||||
// 首先查找该产品在该站点的实际SKU
|
|
||||||
let siteProductSku = '';
|
|
||||||
if (record.siteSkus && record.siteSkus.length > 0) {
|
|
||||||
// 根据站点名称匹配对应的siteSku
|
|
||||||
const siteSkuInfo = record.siteSkus.find((sku: any) => {
|
|
||||||
// 这里假设可以根据站点名称或其他标识来匹配
|
|
||||||
// 如果需要更精确的匹配逻辑，可以根据实际需求调整
|
|
||||||
return (
|
|
||||||
sku.siteSku && sku.siteSku.includes(site.skuPrefix || site.name)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
if (siteSkuInfo) {
|
|
||||||
siteProductSku = siteSkuInfo.siteSku;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果没有找到实际的siteSku，则根据模板或默认规则生成期望的SKU
|
|
||||||
const expectedSku =
|
|
||||||
siteProductSku ||
|
|
||||||
(skuTemplate
|
|
||||||
? renderSiteSku(skuTemplate, { site, product: record })
|
|
||||||
: `${site.skuPrefix || ''}-${record.sku}`);
|
|
||||||
|
|
||||||
// 尝试用确定的SKU获取WP产品
|
|
||||||
let siteProduct = siteProductMap.get(expectedSku);
|
|
||||||
|
|
||||||
// 如果根据实际SKU没找到，再尝试用模板生成的SKU查找
|
|
||||||
if (!siteProduct && siteProductSku && skuTemplate) {
|
|
||||||
const templateSku = renderSiteSku(skuTemplate, {
|
|
||||||
site,
|
|
||||||
product: record,
|
|
||||||
});
|
|
||||||
siteProduct = siteProductMap.get(templateSku);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!siteProduct) {
|
|
||||||
return (
|
|
||||||
<ModalForm
|
|
||||||
title="同步产品"
|
|
||||||
trigger={
|
|
||||||
<Button type="link" icon={<SyncOutlined />}>
|
|
||||||
同步到站点
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
width={400}
|
|
||||||
onFinish={async (values) => {
|
|
||||||
return await syncProductToSite(values, record, site);
|
|
||||||
}}
|
|
||||||
initialValues={{
|
|
||||||
sku:
|
|
||||||
siteProductSku ||
|
|
||||||
(skuTemplate
|
|
||||||
? renderSiteSku(skuTemplate, { site, product: record })
|
|
||||||
: `${site.skuPrefix || ''}-${record.sku}`),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ProFormText
|
|
||||||
name="sku"
|
|
||||||
label="商店 SKU"
|
|
||||||
placeholder="请输入商店 SKU"
|
|
||||||
rules={[{ required: true, message: '请输入 SKU' }]}
|
|
||||||
/>
|
|
||||||
</ModalForm>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div style={{ fontSize: 12 }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'start',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ fontWeight: 'bold' }}>{siteProduct.sku}</div>
|
|
||||||
<ModalForm
|
|
||||||
title="更新同步"
|
|
||||||
trigger={
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
icon={<SyncOutlined spin={false} />}
|
|
||||||
></Button>
|
|
||||||
}
|
|
||||||
width={400}
|
|
||||||
onFinish={async (values) => {
|
|
||||||
return await syncProductToSite(
|
|
||||||
values,
|
|
||||||
record,
|
|
||||||
site,
|
|
||||||
siteProduct.externalProductId,
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
initialValues={{
|
|
||||||
sku: siteProduct.sku,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ProFormText
|
|
||||||
name="sku"
|
|
||||||
label="商店 SKU"
|
|
||||||
placeholder="请输入商店 SKU"
|
|
||||||
rules={[{ required: true, message: '请输入 SKU' }]}
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
<div style={{ marginBottom: 16, color: '#666' }}>
|
|
||||||
确定要将本地产品数据更新到站点吗？
|
|
||||||
</div>
|
|
||||||
</ModalForm>
|
|
||||||
</div>
|
|
||||||
<div>Price: {siteProduct.regular_price ?? siteProduct.price}</div>
|
|
||||||
{siteProduct.sale_price && (
|
|
||||||
<div style={{ color: 'red' }}>Sale: {siteProduct.sale_price}</div>
|
|
||||||
)}
|
|
||||||
<div>
|
|
||||||
Stock: {siteProduct.stock_quantity ?? siteProduct.stockQuantity}
|
|
||||||
</div>
|
|
||||||
<div style={{ marginTop: 2 }}>
|
|
||||||
Status:{' '}
|
|
||||||
{siteProduct.status === 'publish' ? (
|
|
||||||
<Tag color="green">Published</Tag>
|
|
||||||
) : (
|
|
||||||
<Tag>{siteProduct.status}</Tag>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
columns.push(siteColumn);
|
|
||||||
});
|
|
||||||
|
|
||||||
return columns;
|
|
||||||
};
|
|
||||||
|
|
||||||
if (initialLoading) {
|
|
||||||
return (
|
|
||||||
<Card title="商品同步状态" className="product-sync-card">
|
|
||||||
<Spin
|
|
||||||
size="large"
|
|
||||||
style={{ display: 'flex', justifyContent: 'center', padding: 40 }}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card title="商品同步状态" className="product-sync-card">
|
|
||||||
<ProTable<ProductWithWP>
|
|
||||||
columns={generateColumns()}
|
|
||||||
actionRef={actionRef}
|
|
||||||
rowKey="id"
|
|
||||||
rowSelection={{
|
|
||||||
selectedRowKeys,
|
|
||||||
onChange: (keys, rows) => {
|
|
||||||
setSelectedRowKeys(keys);
|
|
||||||
setSelectedRows(rows);
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
toolBarRender={() => [
|
|
||||||
<Select
|
|
||||||
key="site-select"
|
|
||||||
style={{ width: 200 }}
|
|
||||||
placeholder="选择目标站点"
|
|
||||||
value={selectedSiteId}
|
|
||||||
onChange={setSelectedSiteId}
|
|
||||||
options={sites.map((site) => ({
|
|
||||||
label: site.name,
|
|
||||||
value: site.id,
|
|
||||||
}))}
|
|
||||||
/>,
|
|
||||||
<Button
|
|
||||||
key="batch-sync"
|
|
||||||
type="primary"
|
|
||||||
icon={<SyncOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
if (!selectedSiteId) {
|
|
||||||
message.warning('请先选择目标站点');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setBatchSyncModalVisible(true);
|
|
||||||
}}
|
|
||||||
disabled={!selectedSiteId || sites.length === 0}
|
|
||||||
>
|
|
||||||
批量同步
|
|
||||||
</Button>,
|
|
||||||
]}
|
|
||||||
request={async (params, sort, filter) => {
|
|
||||||
// 调用本地获取产品列表 API
|
|
||||||
const { data, success } = await productcontrollerGetproductlist({
|
|
||||||
...params,
|
|
||||||
current: params.current,
|
|
||||||
pageSize: params.pageSize,
|
|
||||||
// 传递搜索参数
|
|
||||||
keyword: params.keyword, // 假设 ProTable 的 search 表单会传递 keyword 或其他字段
|
|
||||||
sku: (params as any).sku,
|
|
||||||
name: (params as any).name,
|
|
||||||
} as any);
|
|
||||||
|
|
||||||
// 返回给 ProTable
|
|
||||||
return {
|
|
||||||
data: (data?.items || []) as ProductWithWP[],
|
|
||||||
success,
|
|
||||||
total: data?.total || 0,
|
|
||||||
};
|
|
||||||
}}
|
|
||||||
pagination={{
|
|
||||||
pageSize: 10,
|
|
||||||
showSizeChanger: true,
|
|
||||||
}}
|
|
||||||
scroll={{ x: 'max-content' }}
|
|
||||||
search={{
|
|
||||||
labelWidth: 'auto',
|
|
||||||
}}
|
|
||||||
options={{
|
|
||||||
density: true,
|
|
||||||
fullScreen: true,
|
|
||||||
}}
|
|
||||||
dateFormatter="string"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 批量同步模态框 */}
|
|
||||||
<Modal
|
|
||||||
title="批量同步产品"
|
|
||||||
open={batchSyncModalVisible}
|
|
||||||
onCancel={() => !syncing && setBatchSyncModalVisible(false)}
|
|
||||||
footer={null}
|
|
||||||
closable={!syncing}
|
|
||||||
maskClosable={!syncing}
|
|
||||||
>
|
|
||||||
<div style={{ marginBottom: 16 }}>
|
|
||||||
<p>
|
|
||||||
目标站点：
|
|
||||||
<strong>{sites.find((s) => s.id === selectedSiteId)?.name}</strong>
|
|
||||||
</p>
|
|
||||||
{selectedRows.length > 0 ? (
|
|
||||||
<p>
|
|
||||||
已选择 <strong>{selectedRows.length}</strong> 个产品进行同步
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
<p>此操作将同步所有库存产品到指定站点，请确认是否继续？</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{syncing && (
|
|
||||||
<div style={{ marginBottom: 16 }}>
|
|
||||||
<div style={{ marginBottom: 8 }}>同步进度：</div>
|
|
||||||
<Progress percent={syncProgress} status="active" />
|
|
||||||
<div style={{ marginTop: 8, fontSize: 12, color: '#666' }}>
|
|
||||||
成功：{syncResults.success} | 失败：{syncResults.failed}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{syncResults.errors.length > 0 && (
|
|
||||||
<div style={{ marginBottom: 16, maxHeight: 200, overflow: 'auto' }}>
|
|
||||||
<div style={{ marginBottom: 8, color: '#ff4d4f' }}>错误详情：</div>
|
|
||||||
{syncResults.errors.slice(0, 10).map((error, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
style={{ fontSize: 12, color: '#666', marginBottom: 4 }}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{syncResults.errors.length > 10 && (
|
|
||||||
<div style={{ fontSize: 12, color: '#999' }}>
|
|
||||||
...还有 {syncResults.errors.length - 10} 个错误
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div style={{ textAlign: 'right' }}>
|
|
||||||
<Button
|
|
||||||
onClick={() => setBatchSyncModalVisible(false)}
|
|
||||||
disabled={syncing}
|
|
||||||
style={{ marginRight: 8 }}
|
|
||||||
>
|
|
||||||
取消
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
onClick={() => batchSyncProducts()}
|
|
||||||
loading={syncing}
|
|
||||||
disabled={syncing}
|
|
||||||
>
|
|
||||||
{syncing ? '同步中...' : '开始同步'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProductSyncPage;
|
|
||||||
|
|
@ -359,7 +359,6 @@ const SiteList: React.FC = () => {
|
||||||
defaultPageSize: 20,
|
defaultPageSize: 20,
|
||||||
showSizeChanger: true,
|
showSizeChanger: true,
|
||||||
showQuickJumper: true,
|
showQuickJumper: true,
|
||||||
showTotal: (total) => `共 ${total} 条`,
|
|
||||||
}}
|
}}
|
||||||
toolBarRender={() => [
|
toolBarRender={() => [
|
||||||
<Button
|
<Button
|
||||||
|
|
|
||||||
|
|
@ -465,7 +465,7 @@ const CustomerPage: React.FC = () => {
|
||||||
<ProTable
|
<ProTable
|
||||||
rowKey="id"
|
rowKey="id"
|
||||||
search={false}
|
search={false}
|
||||||
pagination={{ pageSize: 20 }}
|
pagination={{ pageSize: 20 ,showSizeChanger: true, showQuickJumper: true,}}
|
||||||
columns={[
|
columns={[
|
||||||
{ title: '订单号', dataIndex: 'number', copyable: true },
|
{ title: '订单号', dataIndex: 'number', copyable: true },
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -306,6 +306,7 @@ const OrdersPage: React.FC = () => {
|
||||||
pagination={{
|
pagination={{
|
||||||
pageSizeOptions: ['10', '20', '50', '100', '1000'],
|
pageSizeOptions: ['10', '20', '50', '100', '1000'],
|
||||||
showSizeChanger: true,
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
defaultPageSize: 10,
|
defaultPageSize: 10,
|
||||||
}}
|
}}
|
||||||
toolBarRender={() => [
|
toolBarRender={() => [
|
||||||
|
|
|
||||||
|
|
@ -394,6 +394,7 @@ const ProductsPage: React.FC = () => {
|
||||||
pagination={{
|
pagination={{
|
||||||
pageSizeOptions: ['10', '20', '50', '100', '1000', '2000'],
|
pageSizeOptions: ['10', '20', '50', '100', '1000', '2000'],
|
||||||
showSizeChanger: true,
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
defaultPageSize: 10,
|
defaultPageSize: 10,
|
||||||
}}
|
}}
|
||||||
actionRef={actionRef}
|
actionRef={actionRef}
|
||||||
|
|
|
||||||
|
|
@ -148,7 +148,7 @@ export const ErpProductBindModal: React.FC<ErpProductBindModalProps> = ({
|
||||||
pagination={{
|
pagination={{
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
showSizeChanger: true,
|
showSizeChanger: true,
|
||||||
showTotal: (total) => `共 ${total} 条`,
|
showQuickJumper: true,
|
||||||
}}
|
}}
|
||||||
toolBarRender={false}
|
toolBarRender={false}
|
||||||
options={false}
|
options={false}
|
||||||
|
|
|
||||||
|
|
@ -161,7 +161,10 @@ const OrdersPage: React.FC = () => {
|
||||||
rowKey="id"
|
rowKey="id"
|
||||||
columns={columns}
|
columns={columns}
|
||||||
request={request}
|
request={request}
|
||||||
pagination={{ showSizeChanger: true }}
|
pagination={{
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
}}
|
||||||
search={{
|
search={{
|
||||||
labelWidth: 90,
|
labelWidth: 90,
|
||||||
span: 6,
|
span: 6,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue