forked from yoone/WEB
715 lines
22 KiB
TypeScript
715 lines
22 KiB
TypeScript
import { productcontrollerGetproductlist } from '@/servers/api/product';
|
||
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, Spin, Tag, message, Select, Progress, Modal } from 'antd';
|
||
import React, { useEffect, useRef, useState } from 'react';
|
||
import EditForm from '../List/EditForm';
|
||
|
||
// 定义站点接口
|
||
interface Site {
|
||
id: string;
|
||
name: string;
|
||
skuPrefix?: string;
|
||
isDisabled?: boolean;
|
||
}
|
||
|
||
// 定义WordPress商品接口
|
||
interface WpProduct {
|
||
id?: number;
|
||
externalProductId?: string;
|
||
sku: string;
|
||
name: string;
|
||
price: string;
|
||
regular_price?: string;
|
||
sale_price?: string;
|
||
stock_quantity: number;
|
||
stockQuantity?: number;
|
||
status: string;
|
||
attributes?: any[];
|
||
constitution?: { sku: string; quantity: number }[];
|
||
}
|
||
|
||
// 扩展本地产品接口，包含对应的 WP 产品信息
|
||
interface ProductWithWP extends API.Product {
|
||
wpProducts: Record<string, WpProduct>;
|
||
attributes?: any[];
|
||
siteSkus?: Array<{
|
||
siteSku: string;
|
||
[key: string]: any;
|
||
}>;
|
||
}
|
||
|
||
// 定义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 getWPProducts = async (): Promise<ApiResponse<WpProduct>> => {
|
||
return request('/product/wp-products', {
|
||
method: 'GET',
|
||
});
|
||
};
|
||
|
||
const ProductSyncPage: React.FC = () => {
|
||
const [sites, setSites] = useState<Site[]>([]);
|
||
// 存储所有 WP 产品，用于查找匹配。 Key: SKU (包含前缀)
|
||
const [wpProductMap, setWpProductMap] = useState<Map<string, WpProduct>>(
|
||
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: [] });
|
||
|
||
// 初始化数据：获取站点和所有 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 wpProductsResponse = await getWPProducts();
|
||
const wpProductList: WpProduct[] = wpProductsResponse.data || [];
|
||
|
||
// 构建 WP 产品 Map，Key 为 SKU
|
||
const map = new Map<string, WpProduct>();
|
||
wpProductList.forEach((p) => {
|
||
if (p.sku) {
|
||
map.set(p.sku, p);
|
||
}
|
||
});
|
||
setWpProductMap(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,
|
||
wpProductId?: 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 (wpProductId) {
|
||
res = await request(`/site-api/${site.id}/products/${wpProductId}`, {
|
||
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，避免刷新
|
||
setWpProductMap((prev) => {
|
||
const newMap = new Map(prev);
|
||
if (res.data && typeof res.data === 'object') {
|
||
newMap.set(values.sku, res.data as WpProduct);
|
||
}
|
||
return newMap;
|
||
});
|
||
|
||
hide();
|
||
message.success('同步成功');
|
||
return true;
|
||
} catch (error: any) {
|
||
message.error('同步失败: ' + (error.message || error.toString()));
|
||
return false;
|
||
} finally {
|
||
}
|
||
};
|
||
|
||
// 批量同步产品到指定站点
|
||
const batchSyncProducts = async () => {
|
||
if (!selectedSiteId) {
|
||
message.error('请选择要同步到的站点');
|
||
return;
|
||
}
|
||
|
||
const targetSite = sites.find(site => site.id === selectedSiteId);
|
||
if (!targetSite) {
|
||
message.error('选择的站点不存在');
|
||
return;
|
||
}
|
||
|
||
setSyncing(true);
|
||
setSyncProgress(0);
|
||
setSyncResults({ success: 0, failed: 0, errors: [] });
|
||
|
||
try {
|
||
// 获取所有产品
|
||
const { data, success } = await productcontrollerGetproductlist({
|
||
current: 1,
|
||
pageSize: 10000, // 获取所有产品
|
||
} as any);
|
||
|
||
if (!success || !data?.items) {
|
||
message.error('获取产品列表失败');
|
||
return;
|
||
}
|
||
|
||
const products = data.items as ProductWithWP[];
|
||
const totalProducts = products.length;
|
||
let processed = 0;
|
||
let successCount = 0;
|
||
let failedCount = 0;
|
||
const errors: string[] = [];
|
||
|
||
// 逐个同步产品
|
||
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
|
||
? renderSku(skuTemplate, { site: targetSite, product })
|
||
: `${targetSite.skuPrefix || ''}-${product.sku}`
|
||
);
|
||
|
||
// 检查是否已存在
|
||
const existingProduct = wpProductMap.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++;
|
||
// 更新本地缓存
|
||
setWpProductMap((prev) => {
|
||
const newMap = new Map(prev);
|
||
if (res.data && typeof res.data === 'object') {
|
||
newMap.set(expectedSku, res.data as WpProduct);
|
||
}
|
||
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 renderSku = (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
|
||
? renderSku(skuTemplate, { site, product: record })
|
||
: `${site.skuPrefix || ''}-${record.sku}`
|
||
);
|
||
|
||
// 尝试用确定的SKU获取WP产品
|
||
let wpProduct = wpProductMap.get(expectedSku);
|
||
|
||
// 如果根据实际SKU没找到，再尝试用模板生成的SKU查找
|
||
if (!wpProduct && siteProductSku && skuTemplate) {
|
||
const templateSku = renderSku(skuTemplate, { site, product: record });
|
||
wpProduct = wpProductMap.get(templateSku);
|
||
}
|
||
|
||
if (!wpProduct) {
|
||
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
|
||
? renderSku(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' }}>{wpProduct.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,
|
||
wpProduct.externalProductId,
|
||
);
|
||
}}
|
||
initialValues={{
|
||
sku: wpProduct.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: {wpProduct.regular_price ?? wpProduct.price}</div>
|
||
{wpProduct.sale_price && (
|
||
<div style={{ color: 'red' }}>Sale: {wpProduct.sale_price}</div>
|
||
)}
|
||
<div>
|
||
Stock: {wpProduct.stock_quantity ?? wpProduct.stockQuantity}
|
||
</div>
|
||
<div style={{ marginTop: 2 }}>
|
||
Status:{' '}
|
||
{wpProduct.status === 'publish' ? (
|
||
<Tag color="green">Published</Tag>
|
||
) : (
|
||
<Tag>{wpProduct.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"
|
||
extra={
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<Select
|
||
style={{ width: 200 }}
|
||
placeholder="选择目标站点"
|
||
value={selectedSiteId}
|
||
onChange={setSelectedSiteId}
|
||
options={sites.map(site => ({
|
||
label: site.name,
|
||
value: site.id,
|
||
}))}
|
||
/>
|
||
<Button
|
||
type="primary"
|
||
icon={<SyncOutlined />}
|
||
onClick={() => setBatchSyncModalVisible(true)}
|
||
disabled={!selectedSiteId || sites.length === 0}
|
||
>
|
||
批量同步
|
||
</Button>
|
||
</div>
|
||
}
|
||
>
|
||
<ProTable<ProductWithWP>
|
||
columns={generateColumns()}
|
||
actionRef={actionRef}
|
||
rowKey="id"
|
||
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>
|
||
<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;
|