369 lines
13 KiB
TypeScript
369 lines
13 KiB
TypeScript
import React, { useEffect, useState, useMemo } from 'react';
|
||
import { PageContainer, ProFormSelect } from '@ant-design/pro-components';
|
||
import { Card, Collapse, Divider, Image, Select, Space, Typography, message } from 'antd';
|
||
import { categorycontrollerGetall } from '@/servers/api/category';
|
||
import { productcontrollerGetproductlistgrouped } from '@/servers/api/product';
|
||
import { dictcontrollerGetdictitems } from '@/servers/api/dict';
|
||
|
||
// Define interfaces
|
||
interface Category {
|
||
id: number;
|
||
name: string;
|
||
title: string;
|
||
attributes: string[]; // List of attribute names for this category
|
||
}
|
||
interface Attribute {
|
||
id: number;
|
||
name: string;
|
||
title: string;
|
||
}
|
||
|
||
interface AttributeValue {
|
||
id: number;
|
||
name: string;
|
||
title: string;
|
||
titleCN?: string;
|
||
value?: string;
|
||
image?: string;
|
||
}
|
||
|
||
interface Product {
|
||
id: number;
|
||
sku: string;
|
||
name: string;
|
||
image?: string;
|
||
brandId: number;
|
||
brandName: string;
|
||
attributes: { [key: string]: number }; // attribute name to attribute value id mapping
|
||
price?: number;
|
||
}
|
||
|
||
// Grouped products by attribute value
|
||
interface GroupedProducts {
|
||
[attributeValueId: string]: Product[];
|
||
}
|
||
|
||
// ProductCard component for displaying single product
|
||
const ProductCard: React.FC<{ product: Product }> = ({ product }) => {
|
||
return (
|
||
<Card hoverable style={{ width: 240 }}>
|
||
{/* <div style={{ height: 180, overflow: 'hidden', marginBottom: '12px' }}>
|
||
<Image
|
||
src={product.image || 'https://via.placeholder.com/240x180?text=No+Image'}
|
||
alt={product.name}
|
||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||
/>
|
||
</div> */}
|
||
<div>
|
||
<Typography.Text type="secondary" style={{ fontSize: 12, display: 'block', marginBottom: '4px' }}>
|
||
{product.sku}
|
||
</Typography.Text>
|
||
<Typography.Text ellipsis style={{ width: '100%', display: 'block', marginBottom: '8px' }}>
|
||
{product.name}
|
||
</Typography.Text>
|
||
<Typography.Text strong style={{ fontSize: 16, color: '#ff4d4f', display: 'block' }}>
|
||
¥{product.price || '--'}
|
||
</Typography.Text>
|
||
</div>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
// ProductGroup component for displaying grouped products
|
||
const ProductGroup: React.FC<{
|
||
attributeValueId: string;
|
||
groupProducts: Product[];
|
||
attributeValue: AttributeValue | undefined;
|
||
attributeName: string;
|
||
}> = ({ attributeValueId, groupProducts, attributeValue }) => {
|
||
// State for collapse control
|
||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||
|
||
// Create collapse panel header
|
||
const panelHeader = (
|
||
<Space>
|
||
{attributeValue?.image && (
|
||
<Image
|
||
src={attributeValue.image}
|
||
style={{ width: 24, height: 24, objectFit: 'cover', borderRadius: 4 }}
|
||
/>
|
||
)}
|
||
<Typography.Title level={5} style={{ margin: 0 }}>
|
||
<span>
|
||
{attributeValue?.titleCN || attributeValue?.title || attributeValue?.name || attributeValueId||'未知'}
|
||
(共 {groupProducts.length} 个产品)
|
||
</span>
|
||
</Typography.Title>
|
||
</Space>
|
||
);
|
||
|
||
return (
|
||
<Collapse
|
||
activeKey={isCollapsed ? [] : [attributeValueId]}
|
||
onChange={(key) => setIsCollapsed(Array.isArray(key) && key.length === 0)}
|
||
ghost
|
||
bordered={false}
|
||
items={[
|
||
{
|
||
key: attributeValueId,
|
||
label: panelHeader,
|
||
children: (
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', paddingTop: '8px' }}>
|
||
{groupProducts.map((product) => (
|
||
<ProductCard key={product.id} product={product} />
|
||
))}
|
||
</div>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
);
|
||
};
|
||
|
||
// Main ProductGroupBy component
|
||
const ProductGroupBy: React.FC = () => {
|
||
// State management
|
||
const [categories, setCategories] = useState<Category[]>([]);
|
||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||
// Store selected values for each attribute
|
||
const [attributeFilters, setAttributeFilters] = useState<{ [key: string]: number | null }>({});
|
||
|
||
// Group by attribute
|
||
const [groupByAttribute, setGroupByAttribute] = useState<string | null>(null);
|
||
|
||
// Products
|
||
const [products, setProducts] = useState<Product[]>([]);
|
||
const [groupedProducts, setGroupedProducts] = useState<GroupedProducts>({});
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
// Extract all unique attributes from categories
|
||
const categoryAttributes = useMemo(() => {
|
||
if (!selectedCategory) return [];
|
||
const categoryItem = categories.find((category: any) => category.name === selectedCategory);
|
||
if (!categoryItem) return [];
|
||
const attributesList: Attribute[] = categoryItem.attributes.map((attribute: any, index) => ({
|
||
...attribute.attributeDict,
|
||
id: index + 1,
|
||
}));
|
||
return attributesList;
|
||
}, [selectedCategory]);
|
||
|
||
// Fetch categories list
|
||
const fetchCategories = async () => {
|
||
try {
|
||
const response = await categorycontrollerGetall();
|
||
const rawCategories = Array.isArray(response) ? response : response?.data || [];
|
||
setCategories(rawCategories);
|
||
|
||
// Set default category
|
||
if (rawCategories.length > 0) {
|
||
const defaultCategory = rawCategories.find((category: any) => category.name === 'nicotine-pouches');
|
||
setSelectedCategory(defaultCategory?.name || rawCategories[0].name);
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to fetch categories:', error);
|
||
message.error('获取分类列表失败');
|
||
}
|
||
};
|
||
|
||
// Update category attributes when selected category changes
|
||
useEffect(() => {
|
||
if (!selectedCategory) return;
|
||
|
||
const category = categories.find(cat => cat.name === selectedCategory);
|
||
if (!category) return;
|
||
|
||
// Get attributes for this category
|
||
const attributesForCategory = categoryAttributes.filter(attr =>
|
||
attr.name === 'brand' || category.attributes.includes(attr.name)
|
||
);
|
||
// Reset attribute filters when category changes
|
||
const newFilters: { [key: string]: number | null } = {};
|
||
attributesForCategory.forEach(attr => {
|
||
newFilters[attr.name] = null;
|
||
});
|
||
setAttributeFilters(newFilters);
|
||
|
||
// Set default group by attribute
|
||
if (attributesForCategory.length > 0) {
|
||
setGroupByAttribute(attributesForCategory[0].name);
|
||
}
|
||
}, [selectedCategory, categories, categoryAttributes]);
|
||
|
||
// Handle attribute filter change
|
||
const handleAttributeFilterChange = (attributeName: string, value: number | null) => {
|
||
setAttributeFilters(prev => ({ ...prev, [attributeName]: value }));
|
||
};
|
||
|
||
// Fetch products based on filters
|
||
const fetchProducts = async () => {
|
||
if (!selectedCategory || !groupByAttribute) return;
|
||
|
||
setLoading(true);
|
||
try {
|
||
const params: any = {
|
||
category: selectedCategory,
|
||
groupBy: groupByAttribute
|
||
};
|
||
|
||
|
||
const response = await productcontrollerGetproductlistgrouped(params);
|
||
const grouped = response?.data || {};
|
||
setGroupedProducts(grouped);
|
||
|
||
// Flatten grouped products to get all products
|
||
const allProducts = Object.values(grouped).flat() as Product[];
|
||
setProducts(allProducts);
|
||
} catch (error) {
|
||
console.error('Failed to fetch grouped products:', error);
|
||
message.error('获取分组产品列表失败');
|
||
setProducts([]);
|
||
setGroupedProducts({});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// Initial data fetch
|
||
useEffect(() => {
|
||
fetchCategories();
|
||
}, []);
|
||
|
||
// Fetch products when filters change
|
||
useEffect(() => {
|
||
fetchProducts();
|
||
}, [selectedCategory, attributeFilters, groupByAttribute]);
|
||
|
||
// Destructure antd components
|
||
const { Title, Text } = Typography;
|
||
|
||
return (
|
||
<PageContainer title="聚合空间">
|
||
<div style={{ padding: '16px', background: '#fff' }}>
|
||
{/* Filter Section */}
|
||
<div style={{ marginBottom: '24px' }}>
|
||
<Title level={4} style={{ marginBottom: '16px' }}>筛选条件</Title>
|
||
<Space direction="vertical" size="large">
|
||
{/* Category Filter */}
|
||
<div>
|
||
<Text strong>选择分类：</Text>
|
||
<Select
|
||
placeholder="请选择分类"
|
||
style={{ width: 300, marginLeft: '8px' }}
|
||
value={selectedCategory}
|
||
onChange={setSelectedCategory}
|
||
allowClear
|
||
showSearch
|
||
optionFilterProp="children"
|
||
>
|
||
{categories.map(category => (
|
||
<Option key={category.id} value={category.name}>
|
||
{category.title}
|
||
</Option>
|
||
))}
|
||
</Select>
|
||
</div>
|
||
|
||
{/* Attribute Filters */}
|
||
{categoryAttributes.length > 0 && (
|
||
<div>
|
||
<Text strong>属性筛选：</Text>
|
||
<Space direction="vertical" style={{ marginTop: '8px', width: '100%' }}>
|
||
{categoryAttributes.map(attr => (
|
||
<div key={attr.id} style={{ display: 'flex', alignItems: 'center' }}>
|
||
<Text style={{ width: '100px' }}>{attr.title}：</Text>
|
||
<ProFormSelect
|
||
placeholder={`请选择${attr.title}`}
|
||
style={{ width: 300 }}
|
||
value={attributeFilters[attr.name] || null}
|
||
onChange={value => handleAttributeFilterChange(attr.name, value)}
|
||
allowClear
|
||
showSearch
|
||
optionFilterProp="children"
|
||
request={async (params) => {
|
||
try {
|
||
console.log('params', params,attr);
|
||
const response = await dictcontrollerGetdictitems({ dictId: attr.name });
|
||
const rawValues = Array.isArray(response) ? response : response?.data?.items || [];
|
||
const filteredValues = rawValues.filter((value: any) =>
|
||
value.dictId === attr.name || value.dict?.id === attr.name || value.dict?.name === attr.name
|
||
);
|
||
return {
|
||
options: filteredValues.map((value: any) => ({
|
||
label: `${value.name}${value.titleCN || value.title}`,
|
||
value: value.id
|
||
}))
|
||
};
|
||
} catch (error) {
|
||
console.error(`Failed to fetch ${attr.title} values:`, error);
|
||
message.error(`获取${attr.title}属性值失败`);
|
||
return { options: [] };
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
))}
|
||
</Space>
|
||
</div>
|
||
)}
|
||
|
||
{/* Group By Attribute */}
|
||
{categoryAttributes.length > 0 && (
|
||
<div>
|
||
<Text strong>分组依据：</Text>
|
||
<Select
|
||
placeholder="请选择分组属性"
|
||
style={{ width: 300, marginLeft: '8px' }}
|
||
value={groupByAttribute}
|
||
onChange={setGroupByAttribute}
|
||
showSearch
|
||
optionFilterProp="children"
|
||
>
|
||
{categoryAttributes.map(attr => (
|
||
<Option key={attr.id} value={attr.name}>
|
||
{attr.title}
|
||
</Option>
|
||
))}
|
||
</Select>
|
||
</div>
|
||
)}
|
||
</Space>
|
||
</div>
|
||
|
||
<Divider />
|
||
|
||
{/* Products Section */}
|
||
<div>
|
||
<Title level={4} style={{ marginBottom: '16px' }}>产品列表 ({products.length} 个产品)</Title>
|
||
|
||
{loading ? (
|
||
<div style={{ textAlign: 'center', padding: '64px' }}>
|
||
<Text>加载中...</Text>
|
||
</div>
|
||
) : groupByAttribute && Object.keys(groupedProducts).length > 0 ? (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
|
||
{Object.entries(groupedProducts).map(([attrValueId, groupProducts]) => {
|
||
return (
|
||
<ProductGroup
|
||
key={attrValueId}
|
||
attributeValueId={attrValueId}
|
||
groupProducts={groupProducts}
|
||
// attributeValue={}
|
||
attributeName={groupByAttribute!}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
) : (
|
||
<div style={{ textAlign: 'center', padding: '64px', background: '#fafafa', borderRadius: 8 }}>
|
||
<Text type="secondary">暂无产品</Text>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</PageContainer>
|
||
);
|
||
};
|
||
|
||
export default ProductGroupBy;
|