feat(产品列表): 添加批量创建套装产品功能
新增批量创建套装产品功能,包含以下主要修改: 1. 添加 BatchCreateBundleModal 组件用于批量创建套装 2. 在产品列表页面添加批量创建套装按钮 3. 实现批量创建逻辑,支持选择单品和数量组合创建套装
This commit is contained in:
parent
686432f893
commit
85ad42278b
|
|
@ -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 CreateForm from './CreateForm';
|
||||||
import EditForm from './EditForm';
|
import EditForm from './EditForm';
|
||||||
import SyncToSiteModal from './SyncToSiteModal';
|
import SyncToSiteModal from './SyncToSiteModal';
|
||||||
|
import BatchCreateBundleModal from './BatchCreateBundleModal';
|
||||||
|
|
||||||
const NameCn: React.FC<{
|
const NameCn: React.FC<{
|
||||||
id: number;
|
id: number;
|
||||||
|
|
@ -188,6 +189,7 @@ const List: React.FC = () => {
|
||||||
const [batchEditModalVisible, setBatchEditModalVisible] = useState(false);
|
const [batchEditModalVisible, setBatchEditModalVisible] = useState(false);
|
||||||
const [syncProducts, setSyncProducts] = useState<API.Product[]>([]);
|
const [syncProducts, setSyncProducts] = useState<API.Product[]>([]);
|
||||||
const [syncModalVisible, setSyncModalVisible] = useState(false);
|
const [syncModalVisible, setSyncModalVisible] = useState(false);
|
||||||
|
const [batchCreateBundleModalVisible, setBatchCreateBundleModalVisible] = useState(false);
|
||||||
|
|
||||||
const { message } = App.useApp();
|
const { message } = App.useApp();
|
||||||
// 导出产品 CSV(带认证请求)
|
// 导出产品 CSV(带认证请求)
|
||||||
|
|
@ -463,6 +465,12 @@ const List: React.FC = () => {
|
||||||
>
|
>
|
||||||
批量修改
|
批量修改
|
||||||
</Button>,
|
</Button>,
|
||||||
|
// 批量创建 bundle 产品按钮
|
||||||
|
<Button
|
||||||
|
onClick={() => setBatchCreateBundleModalVisible(true)}
|
||||||
|
>
|
||||||
|
批量创建套装
|
||||||
|
</Button>,
|
||||||
// 批量同步按钮
|
// 批量同步按钮
|
||||||
<Button
|
<Button
|
||||||
disabled={selectedRows.length <= 0}
|
disabled={selectedRows.length <= 0}
|
||||||
|
|
@ -578,6 +586,14 @@ const List: React.FC = () => {
|
||||||
actionRef.current?.reload();
|
actionRef.current?.reload();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
<BatchCreateBundleModal
|
||||||
|
visible={batchCreateBundleModalVisible}
|
||||||
|
onClose={() => setBatchCreateBundleModalVisible(false)}
|
||||||
|
onSuccess={() => {
|
||||||
|
setBatchCreateBundleModalVisible(false);
|
||||||
|
actionRef.current?.reload();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</PageContainer>
|
</PageContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue