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

main #43

Merged
zhuotianyuan merged 2 commits from zksu/WEB:main into main 2026-01-14 11:58:30 +00:00
Conversation 0 Commits 2 Files Changed 25 +305 -75
2 changed files with 305 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 66256acee0 - Show all commits

7
src/pages/Product/Category/index.tsx
View File

@ -246,7 +246,7 @@ const CategoryPage: React.FC = () => {
>
<List.Item.Meta
title={`${item.title}(${item.titleCN ?? '-'})`}
description={item.name}
description={`${item.name} | ${item.shortName ?? '-'}`}
/>
</List.Item>
)}
@ -255,7 +255,7 @@ const CategoryPage: React.FC = () => {
<Content style={{ padding: '24px' }}>
{selectedCategory ? (
<Card
title={`分类:${selectedCategory.title} (${selectedCategory.name})`}
title={`分类:${selectedCategory.title} (${selectedCategory.shortName ?? selectedCategory.name})`}
extra={
<Button type="primary" onClick={handleAddAttribute}>
添加关联属性
@ -319,6 +319,9 @@ const CategoryPage: React.FC = () => {
<Form.Item name="titleCN" label="中文名称">
<Input />
</Form.Item>
<Form.Item name="shortName" label="短名称">
<Input />
</Form.Item>
<Form.Item name="name" label="标识 (Code)">
<Input />
</Form.Item>

373
src/pages/Product/CsvTool/index.tsx
View File

@ -3,10 +3,9 @@ import {
PageContainer,
ProForm,
ProFormSelect,
ProFormText,
} from '@ant-design/pro-components';
import { request } from '@umijs/max';
import { Button, Card, Col, Input, message, Row, Upload } from 'antd';
import { Button, Card, Checkbox, Col, Input, message, Row, Upload } from 'antd';
import React, { useEffect, useState } from 'react';
import * as XLSX from 'xlsx';
import { productcontrollerGetcategoriesall } from '@/servers/api/product';
@ -20,14 +19,22 @@ interface Site {
isDisabled?: boolean;
}
// 定义选项接口，用于下拉选择框的选项
interface Option {
name: string; // 显示名称
shortName: string; // 短名称，用于生成SKU
}
// 定义配置接口
interface SkuConfig {
brands: string[];
categories: string[];
flavors: string[];
strengths: string[];
humidities: string[];
versions: string[];
brands: Option[];
categories: Option[];
flavors: Option[];
strengths: Option[];
humidities: Option[];
versions: Option[];
sizes: Option[];
quantities: Option[];
}
// 定义通用属性映射接口，用于存储属性名称和shortName的对应关系
@ -43,6 +50,8 @@ interface AttributeMappings {
strengths: AttributeMapping;
humidities: AttributeMapping;
versions: AttributeMapping;
sizes: AttributeMapping;
quantities: AttributeMapping;
}
/**
@ -57,6 +66,7 @@ const CsvTool: React.FC = () => {
const [isProcessing, setIsProcessing] = useState(false);
const [sites, setSites] = useState<Site[]>([]);
const [selectedSites, setSelectedSites] = useState<Site[]>([]); // 现在使用多选
const [generateBundleSkuForSingle, setGenerateBundleSkuForSingle] = useState(true); // 是否为type为single的记录生成包含quantity的bundle SKU
const [config, setConfig] = useState<SkuConfig>({
brands: [],
categories: [],
@ -64,6 +74,8 @@ const CsvTool: React.FC = () => {
strengths: [],
humidities: [],
versions: [],
sizes: [],
quantities: [],
});
// 所有属性名称到shortName的映射
const [attributeMappings, setAttributeMappings] = useState<AttributeMappings>({
@ -72,7 +84,9 @@ const CsvTool: React.FC = () => {
flavors: {},
strengths: {},
humidities: {},
versions: {}
versions: {},
sizes: {},
quantities: {},
});
// 在组件加载时获取站点列表和字典数据
@ -92,21 +106,24 @@ const CsvTool: React.FC = () => {
const dictListResponse = await request('/dict/list');
const dictList = dictListResponse?.data || dictListResponse || [];
// 3. 根据字典名称获取字典项，返回包含name和shortName的对象数组
// 3. 根据字典名称获取字典项，返回包含name和shortName的完整对象数组
const getDictItems = async (dictName: string) => {
try {
const dict = dictList.find((d: any) => d.name === dictName);
if (!dict) {
console.warn(`Dictionary ${dictName} not found`);
return { names: [], mapping: {} };
return { options: [], mapping: {} };
}
const itemsResponse = await request('/dict/items', {
params: { dictId: dict.id },
});
const items = itemsResponse?.data || itemsResponse || [];
// 提取名称数组
const names = items.map((item: any) => item.name);
// 创建完整的选项数组
const options = items.map((item: any) => ({
name: item.name,
shortName: item.shortName || item.name
}));
// 创建name到shortName的映射
const mapping = items.reduce((acc: AttributeMapping, item: any) => {
@ -114,25 +131,30 @@ const CsvTool: React.FC = () => {
return acc;
}, {});
return { names, mapping };
return { options, mapping };
} catch (error) {
console.error(`Failed to fetch items for ${dictName}:`, error);
return { names: [], mapping: {} };
return { options: [], mapping: {} };
}
};
// 4. 获取所有字典项（品牌、口味、强度、湿度、版本）
const [brandResult, flavorResult, strengthResult, humidityResult, versionResult] = await Promise.all([
// 4. 获取所有字典项（品牌、口味、强度、湿度、版本、尺寸、数量）
const [brandResult, flavorResult, strengthResult, humidityResult, versionResult, sizeResult, quantityResult] = await Promise.all([
getDictItems('brand'),
getDictItems('flavor'),
getDictItems('strength'),
getDictItems('humidity'),
getDictItems('version'),
getDictItems('size'),
getDictItems('quantity'),
]);
// 5. 获取商品分类列表
const categoriesResponse = await productcontrollerGetcategoriesall();
const categories = categoriesResponse?.data?.map((category: any) => category.name) || [];
const categoryOptions = categoriesResponse?.data?.map((category: any) => ({
name: category.name,
shortName: category.shortName || category.name
})) || [];
// 商品分类的映射（如果分类有shortName的话）
const categoryMapping = categoriesResponse?.data?.reduce((acc: AttributeMapping, category: any) => {
@ -140,27 +162,42 @@ const CsvTool: React.FC = () => {
return acc;
}, {}) || {};
// 7. 设置所有属性映射
// 6. 设置所有属性映射
setAttributeMappings({
brands: brandResult.mapping,
categories: categoryMapping,
flavors: flavorResult.mapping,
strengths: strengthResult.mapping,
humidities: humidityResult.mapping,
versions: versionResult.mapping
versions: versionResult.mapping,
sizes: sizeResult.mapping,
quantities: quantityResult.mapping
});
// 更新配置状态
const newConfig = {
brands: brandResult.names,
categories,
flavors: flavorResult.names,
strengths: strengthResult.names,
humidities: humidityResult.names,
versions: versionResult.names,
brands: brandResult.options,
categories: categoryOptions,
flavors: flavorResult.options,
strengths: strengthResult.options,
humidities: humidityResult.options,
versions: versionResult.options,
sizes: sizeResult.options,
quantities: quantityResult.options,
};
setConfig(newConfig);
form.setFieldsValue(newConfig);
// 设置表单值时只需要name数组
form.setFieldsValue({
brands: brandResult.options.map(opt => opt.name),
categories: categoryOptions.map(opt => opt.name),
flavors: flavorResult.options.map(opt => opt.name),
strengths: strengthResult.options.map(opt => opt.name),
humidities: humidityResult.options.map(opt => opt.name),
versions: versionResult.options.map(opt => opt.name),
sizes: sizeResult.options.map(opt => opt.name),
quantities: quantityResult.options.map(opt => opt.name),
generateBundleSkuForSingle: true,
});
message.success({ content: '数据加载成功', key: 'loading' });
} catch (error) {
@ -184,46 +221,95 @@ const CsvTool: React.FC = () => {
setFile(uploadedFile);
const reader = new FileReader();
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];
// 检查是否为CSV文件
const isCsvFile = uploadedFile.name.match(/\.csv$/i);
if (isCsvFile) {
// 对于CSV文件，使用readAsText并指定UTF-8编码以正确处理中文
reader.onload = (e) => {
try {
const textData = e.target?.result as string;
// 使用XLSX.read处理CSV文本数据，指定type为'csv'并设置编码
const workbook = XLSX.read(textData, {
type: 'string',
codepage: 65001, // UTF-8 encoding
cellText: true,
cellDates: true
});
return rowData;
});
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
message.success(`成功解析 ${rows.length} 条数据.`);
setCsvData(rows);
setProcessedData([]); // 清空旧的处理结果
} catch (error) {
message.error('文件解析失败,请检查文件格式!');
console.error('File Parse Error:', error);
setCsvData([]);
}
};
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('CSV文件解析失败,请检查文件格式和编码!');
console.error('CSV Parse Error:', error);
setCsvData([]);
}
};
reader.readAsText(uploadedFile, 'UTF-8');
} else {
// 对于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);
};
// 使用readAsArrayBuffer替代已弃用的readAsBinaryString
reader.readAsArrayBuffer(uploadedFile);
return false; // 阻止antd Upload组件的默认上传行为
};
@ -252,15 +338,19 @@ const CsvTool: React.FC = () => {
* @param {string} strength - 强度
* @param {string} humidity - 湿度
* @param {string} version - 版本
* @param {string} type - 产品类型
* @returns {string} 生成的SKU
*/
const generateSku = (
brand: string,
version: string,
category: string,
flavor: string,
strength: string,
humidity: string,
version: string
size: string,
quantity?: any,
type?: string
): string => {
// 构建SKU组件，不包含站点前缀
const skuComponents: string[] = [];
@ -271,6 +361,11 @@ const CsvTool: React.FC = () => {
const brandShortName = attributeMappings.brands[brand] || brand;
skuComponents.push(brandShortName);
}
if (version) {
// 使用版本的shortName，如果没有则使用版本名称
const versionShortName = attributeMappings.versions[version] || version;
skuComponents.push(versionShortName);
}
if (category) {
// 使用分类的shortName，如果没有则使用分类名称
const categoryShortName = attributeMappings.categories[category] || category;
@ -291,10 +386,22 @@ const CsvTool: React.FC = () => {
const humidityShortName = attributeMappings.humidities[humidity] || humidity;
skuComponents.push(humidityShortName);
}
if (version) {
// 使用版本的shortName，如果没有则使用版本名称
const versionShortName = attributeMappings.versions[version] || version;
skuComponents.push(versionShortName);
if (size) {
// 使用尺寸的shortName，如果没有则使用尺寸名称
const sizeShortName = attributeMappings.sizes[size] || size;
skuComponents.push(sizeShortName);
}
// 如果type为single且启用了生成bundle SKU，则添加quantity
if ((!type || type === 'single') && generateBundleSkuForSingle && quantity) {
// 将quantity转换为数字，然后格式化为四位数（前导零）
const formattedQuantity = Number(quantity).toString().padStart(4, '0');
skuComponents.push(formattedQuantity);
} else if (type === 'bundle' && quantity) {
// 对于bundle类型，始终添加quantity
const formattedQuantity = Number(quantity).toString().padStart(4, '0');
skuComponents.push(formattedQuantity);
}
// 合并所有组件，使用短横线分隔
@ -352,22 +459,82 @@ const CsvTool: React.FC = () => {
const strength = row.attribute_strength || '';
const humidity = row.attribute_humidity || '';
const version = row.attribute_version || '';
const size = row.attribute_size || row.size || '';
// 将quantity保存到attribute_quantity字段
const quantity = row.attribute_quantity || row.quantity;
// 获取产品类型
const type = row.type || '';
// 生成基础SKU（不包含站点前缀）
const baseSku = generateSku(brand, category, flavor, strength, humidity, version);
const baseSku = generateSku(brand, version, category, flavor, strength, humidity, size, quantity, type);
// 为所有站点生成带前缀的siteSkus
const siteSkus = generateSiteSkus(baseSku);
// 返回包含新SKU和siteSkus的行数据
return { ...row, GeneratedSKU: baseSku, siteSkus };
// 返回包含新SKU和siteSkus的行数据，将SKU直接保存到sku字段
return {
...row,
sku: baseSku, // 直接生成在sku栏
siteSkus,
attribute_quantity: quantity // 确保quantity保存到attribute_quantity
};
});
setProcessedData(dataWithSku);
// Determine which data to use for processing and download
let finalData = dataWithSku;
// If generateBundleSkuForSingle is enabled, generate bundle products for single products
if(generateBundleSkuForSingle) {
// Filter out single records
const singleRecords = dataWithSku.filter(row => row.type === 'single');
// Get quantity values from the config (same source as other attributes like brand)
const quantityValues = config.quantities
.map(quantity => Number(quantity.name)) // Extract name and convert to number
.filter(quantity => !isNaN(quantity)); // Filter out invalid numbers
// Generate bundle products for each single record and quantity
const generatedBundleRecords = singleRecords.flatMap(singleRecord => {
return quantityValues.map(quantity => {
// Extract all necessary attributes from the single record
const brand = singleRecord.attribute_brand || '';
const version = singleRecord.attribute_version || '';
const category = singleRecord.category || '';
const flavor = singleRecord.attribute_flavor || '';
const strength = singleRecord.attribute_strength || '';
const humidity = singleRecord.attribute_humidity || '';
const size = singleRecord.attribute_size || singleRecord.size || '';
// Generate bundle SKU with the quantity
const bundleSku = generateSku(brand, version, category, flavor, strength, humidity, size, quantity, 'bundle');
// Generate siteSkus for the bundle
const bundleSiteSkus = generateSiteSkus(bundleSku);
// Create the bundle record
return {
...singleRecord,
type: 'bundle', // Change type to bundle
sku: bundleSku, // Use the new bundle SKU
siteSkus: bundleSiteSkus,
attribute_quantity: quantity, // Set the attribute_quantity
component_1_sku: singleRecord.sku, // Set component_1_sku to the single product's sku
component_1_quantity: quantity, // Set component_1_quantity to the same as attribute_quantity
};
});
});
// Combine original dataWithSku with generated bundle records
finalData = [...dataWithSku, ...generatedBundleRecords];
}
// Set the processed data
setProcessedData(finalData);
message.success({ content: 'SKU生成成功!正在自动下载...', key: 'processing' });
// 自动下载
downloadData(dataWithSku);
// 自动下载 the final data (with or without generated bundle products)
downloadData(finalData);
} catch (error) {
message.error({ content: '处理失败,请检查配置或文件.', key: 'processing' });
console.error('Processing Error:', error);
@ -397,6 +564,10 @@ const CsvTool: React.FC = () => {
placeholder="请输入品牌,按回车确认"
rules={[{ required: true, message: '至少需要一个品牌' }]}
tooltip="品牌名称会作为SKU的第一个组成部分"
options={config.brands.map(opt => ({
label: `${opt.name} (${opt.shortName})`,
value: opt.name
}))}
/>
<ProFormSelect
name="categories"
@ -405,6 +576,10 @@ const CsvTool: React.FC = () => {
placeholder="请输入分类,按回车确认"
rules={[{ required: true, message: '至少需要一个分类' }]}
tooltip="分类名称会作为SKU的第二个组成部分"
options={config.categories.map(opt => ({
label: `${opt.name} (${opt.shortName})`,
value: opt.name
}))}
/>
<ProFormSelect
name="flavors"
@ -413,6 +588,10 @@ const CsvTool: React.FC = () => {
placeholder="请输入口味,按回车确认"
rules={[{ required: true, message: '至少需要一个口味' }]}
tooltip="口味名称会作为SKU的第三个组成部分"
options={config.flavors.map(opt => ({
label: `${opt.name} (${opt.shortName})`,
value: opt.name
}))}
/>
<ProFormSelect
name="strengths"
@ -420,6 +599,10 @@ const CsvTool: React.FC = () => {
mode="tags"
placeholder="请输入强度,按回车确认"
tooltip="强度信息会作为SKU的第四个组成部分"
options={config.strengths.map(opt => ({
label: `${opt.name} (${opt.shortName})`,
value: opt.name
}))}
/>
<ProFormSelect
name="humidities"
@ -427,6 +610,10 @@ const CsvTool: React.FC = () => {
mode="tags"
placeholder="请输入湿度,按回车确认"
tooltip="湿度信息会作为SKU的第五个组成部分"
options={config.humidities.map(opt => ({
label: `${opt.name} (${opt.shortName})`,
value: opt.name
}))}
/>
<ProFormSelect
name="versions"
@ -434,7 +621,47 @@ const CsvTool: React.FC = () => {
mode="tags"
placeholder="请输入版本,按回车确认"
tooltip="版本信息会作为SKU的第六个组成部分"
options={config.versions.map(opt => ({
label: `${opt.name} (${opt.shortName})`,
value: opt.name
}))}
/>
<ProFormSelect
name="sizes"
label="尺寸列表"
mode="tags"
placeholder="请输入尺寸,按回车确认"
tooltip="尺寸信息会作为SKU的第七个组成部分"
options={config.sizes.map(opt => ({
label: `${opt.name} (${opt.shortName})`,
value: opt.name
}))}
/>
<ProFormSelect
name="quantities"
label="数量列表"
mode="tags"
placeholder="请输入数量,按回车确认"
tooltip="数量信息会作为bundle SKU的组成部分"
options={config.quantities.map(opt => ({
label: `${opt.name} (${opt.shortName})`,
value: opt.name
}))}
fieldProps={{ allowClear: true }}
/>
<ProForm.Item
name="generateBundleSkuForSingle"
label="为type=single生成bundle产品数据行"
tooltip="为类型为single的记录生成包含quantity的bundle SKU"
valuePropName="checked"
initialValue={true}
>
<Checkbox onChange={setGenerateBundleSkuForSingle}>
启用为single类型生成bundle SKU
</Checkbox>
</ProForm.Item>
</ProForm>
</Card>
@ -453,7 +680,7 @@ const CsvTool: React.FC = () => {
{sites.map(site => (
<tr key={site.id}>
<td style={{ padding: '8px', borderBottom: '1px solid #e8e8e8' }}>{site.name}</td>
<td style={{ padding: '8px', borderBottom: '1px solid #e8e8e8', fontWeight: 'bold' }}>{site.shortName}</td>
<td style={{ padding: '8px', borderBottom: '1px solid #e8e8e8', fontWeight: 'bold' }}>{site.skuPrefix}</td>
</tr>
))}
</tbody>