feat(产品列表): 添加批量创建套装产品功能

新增批量创建套装产品功能,包含以下主要修改:
1. 添加 BatchCreateBundleModal 组件用于批量创建套装
2. 在产品列表页面添加批量创建套装按钮
3. 实现批量创建逻辑,支持选择单品和数量组合创建套装
This commit is contained in:
tikkhun 2026-01-27 10:30:05 +08:00
parent fcbf0a4833
commit 7c0fa5796d
3 changed files with 134 additions and 0 deletions

View File

@ -0,0 +1,118 @@
import { productcontrollerCreateproduct, productcontrollerGetproductlist } from '@/servers/api/product';
import {
ModalForm,
ProFormSelect,
} from '@ant-design/pro-components';
import { App } from 'antd';
import React from 'react';
const BatchCreateBundleModal: React.FC<{
visible: boolean;
onClose: () => void;
onSuccess: () => void;
}> = ({ visible, onClose, onSuccess }) => {
const { message } = App.useApp();
// 批量创建数量选项
const quantityOptions = [
{ label: '1', value: 1 },
{ label: '5', value: 5 },
{ label: '10', value: 10 },
{ label: '20', value: 20 },
{ label: '50', value: 50 },
{ label: '100', value: 100 },
];
return (
<ModalForm
title="批量创建套装产品"
open={visible}
onOpenChange={(open) => !open && onClose()}
modalProps={{ destroyOnClose: true }}
onFinish={async (values) => {
const { products, quantity } = values;
if (!products || products.length === 0) {
message.error('请选择至少一个单品');
return false;
}
// 生成批量创建的 Promise 数组
const createPromises = products.flatMap((product: any) => {
return quantity.map((q: number) => {
const bundleSku = `bundle-${product.sku}-${q}`;
return productcontrollerCreateproduct({
sku: bundleSku,
name: `套装 ${product.name} x ${q}`,
type: 'bundle',
components: [
{
sku: product.sku,
quantity: q
}
],
attributes: [],
});
});
});
try {
// 并行执行批量创建
const results = await Promise.all(createPromises);
// 检查是否所有创建都成功
const allSuccess = results.every((result) => result.success);
if (allSuccess) {
const totalCreated = createPromises.length;
message.success(`成功创建 ${totalCreated} 个套装产品`);
onSuccess();
return true;
} else {
message.error('部分产品创建失败,请检查');
return false;
}
} catch (error) {
message.error('创建失败,请重试');
return false;
}
}}
>
<ProFormSelect
name="products"
label="选择单品"
mode="multiple"
placeholder="请选择要创建套装的单品"
rules={[{ required: true, message: '请选择至少一个单品' }]}
request={async ({ keyWords }) => {
const params = keyWords
? { sku: keyWords, name: keyWords, type: 'single' }
: { pageSize: 9999, type: 'single' };
const { data } = await productcontrollerGetproductlist(
params as any,
);
if (!data || !data.items) {
return [];
}
// 只返回类型为单品的产品
return data.items
.filter((item: any) => item.type === 'single' && item.sku)
.map((item: any) => ({
label: `${item.sku} - ${item.name}`,
value: item,
}));
}}
/>
<ProFormSelect
name="quantity"
label="选择数量"
mode="multiple"
options={quantityOptions}
placeholder="请选择套装包含的单品数量"
rules={[{ required: true, message: '请选择至少一个数量' }]}
/>
</ModalForm>
);
};
export default BatchCreateBundleModal;

View File

@ -21,6 +21,7 @@ import React, { useEffect, useRef, useState } from 'react';
import CreateForm from './CreateForm';
import EditForm from './EditForm';
import SyncToSiteModal from './SyncToSiteModal';
import BatchCreateBundleModal from './BatchCreateBundleModal';
const NameCn: React.FC<{
id: number;
@ -188,6 +189,7 @@ const List: React.FC = () => {
const [batchEditModalVisible, setBatchEditModalVisible] = useState(false);
const [syncProducts, setSyncProducts] = useState<API.Product[]>([]);
const [syncModalVisible, setSyncModalVisible] = useState(false);
const [batchCreateBundleModalVisible, setBatchCreateBundleModalVisible] = useState(false);
const { message } = App.useApp();
// 导出产品 CSV(带认证请求)
@ -463,6 +465,12 @@ const List: React.FC = () => {
>
</Button>,
// 批量创建 bundle 产品按钮
<Button
onClick={() => setBatchCreateBundleModalVisible(true)}
>
</Button>,
// 批量同步按钮
<Button
disabled={selectedRows.length <= 0}
@ -578,6 +586,14 @@ const List: React.FC = () => {
actionRef.current?.reload();
}}
/>
<BatchCreateBundleModal
visible={batchCreateBundleModalVisible}
onClose={() => setBatchCreateBundleModalVisible(false)}
onSuccess={() => {
setBatchCreateBundleModalVisible(false);
actionRef.current?.reload();
}}
/>
</PageContainer>
);
};

View File