feat(产品列表): 添加批量创建套装产品功能
新增批量创建套装产品功能,包含以下主要修改: 1. 添加 BatchCreateBundleModal 组件用于批量创建套装 2. 在产品列表页面添加批量创建套装按钮 3. 实现批量创建逻辑,支持选择单品和数量组合创建套装
This commit is contained in:
parent
fcbf0a4833
commit
7c0fa5796d
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue