1077 lines
33 KiB
TypeScript
1077 lines
33 KiB
TypeScript
|
import React, { useState, useEffect } from 'react'
|
||
|
|
import {
|
||
|
|
Table, Button, Modal, Form, Input, Select, message, Space, Tag, Card,
|
||
|
|
Row, Col, Statistic, TreeSelect, Image, Popconfirm, Tabs, Empty, Spin, InputNumber,
|
||
|
|
Upload, Progress
|
||
|
|
} from 'antd'
|
||
|
|
import {
|
||
|
|
PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined,
|
||
|
|
ShopOutlined, AppstoreOutlined, FolderOutlined, FolderAddOutlined,
|
||
|
|
PictureOutlined, UploadOutlined, DownloadOutlined
|
||
|
|
} from '@ant-design/icons'
|
||
|
|
import type { ColumnsType } from 'antd/es/table'
|
||
|
|
import type { DataNode } from 'antd/es/tree'
|
||
|
|
|
||
|
|
// ==================== 类型定义 ====================
|
||
|
|
interface Category {
|
||
|
|
id: number
|
||
|
|
name: string
|
||
|
|
parent_id: number | null
|
||
|
|
parent_name?: string
|
||
|
|
children?: Category[]
|
||
|
|
created_at: string
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Product {
|
||
|
|
id: number
|
||
|
|
name: string
|
||
|
|
model: string | null
|
||
|
|
category_id: number
|
||
|
|
category_name: string
|
||
|
|
parent_category_name: string | null
|
||
|
|
unit: string
|
||
|
|
quantity: number
|
||
|
|
cost_price: number
|
||
|
|
thumbnail: string | null
|
||
|
|
specification: string | null
|
||
|
|
brand: string | null
|
||
|
|
remark: string | null
|
||
|
|
source: string | null
|
||
|
|
created_at: string
|
||
|
|
updated_at: string
|
||
|
|
}
|
||
|
|
|
||
|
|
// ==================== 组件 ====================
|
||
|
|
const ProductPage: React.FC = () => {
|
||
|
|
// 商品列表状态
|
||
|
|
const [products, setProducts] = useState<Product[]>([])
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
const [total, setTotal] = useState(0)
|
||
|
|
const [page, setPage] = useState(1)
|
||
|
|
const [pageSize, setPageSize] = useState(20)
|
||
|
|
const [searchText, setSearchText] = useState('')
|
||
|
|
const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null)
|
||
|
|
|
||
|
|
// 分类状态
|
||
|
|
const [categories, setCategories] = useState<Category[]>([])
|
||
|
|
const [categoryTree, setCategoryTree] = useState<DataNode[]>([])
|
||
|
|
const [categoryLoading, setCategoryLoading] = useState(false)
|
||
|
|
|
||
|
|
// 弹窗状态
|
||
|
|
const [productModalVisible, setProductModalVisible] = useState(false)
|
||
|
|
const [categoryModalVisible, setCategoryModalVisible] = useState(false)
|
||
|
|
const [editingProduct, setEditingProduct] = useState<Product | null>(null)
|
||
|
|
const [editingCategory, setEditingCategory] = useState<Category | null>(null)
|
||
|
|
|
||
|
|
// 表单
|
||
|
|
const [productForm] = Form.useForm()
|
||
|
|
const [categoryForm] = Form.useForm()
|
||
|
|
|
||
|
|
// Tab状态
|
||
|
|
const [activeTab, setActiveTab] = useState('products')
|
||
|
|
|
||
|
|
// 批量上传状态
|
||
|
|
const [importModalVisible, setImportModalVisible] = useState(false)
|
||
|
|
const [importLoading, setImportLoading] = useState(false)
|
||
|
|
const [importProgress, setImportProgress] = useState(0)
|
||
|
|
|
||
|
|
// ==================== 数据加载 ====================
|
||
|
|
|
||
|
|
// 加载分类（从分类API获取）
|
||
|
|
const fetchCategories = async () => {
|
||
|
|
setCategoryLoading(true)
|
||
|
|
try {
|
||
|
|
// 从分类API获取所有分类
|
||
|
|
const response = await fetch('/api/categories')
|
||
|
|
const data = await response.json()
|
||
|
|
if (data.success && data.data && Array.isArray(data.data)) {
|
||
|
|
const cats = data.data.map((cat: any) => ({
|
||
|
|
id: cat.id,
|
||
|
|
name: cat.name,
|
||
|
|
parent_id: cat.parent_id,
|
||
|
|
level: cat.level,
|
||
|
|
created_at: cat.created_at
|
||
|
|
}))
|
||
|
|
setCategories(cats)
|
||
|
|
setCategoryTree(convertToTreeData(cats))
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取分类失败:', error)
|
||
|
|
} finally {
|
||
|
|
setCategoryLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 加载商品
|
||
|
|
const fetchProducts = async () => {
|
||
|
|
setLoading(true)
|
||
|
|
try {
|
||
|
|
console.log('开始获取商品数据')
|
||
|
|
const params = new URLSearchParams({
|
||
|
|
page: page.toString(),
|
||
|
|
pageSize: pageSize.toString(),
|
||
|
|
...(selectedCategoryId && { category_id: selectedCategoryId.toString() }),
|
||
|
|
...(searchText && { search: searchText })
|
||
|
|
})
|
||
|
|
|
||
|
|
console.log('请求URL:', `/api/products?${params}`)
|
||
|
|
const response = await fetch(`/api/products?${params}`)
|
||
|
|
console.log('响应状态:', response.status)
|
||
|
|
const data = await response.json()
|
||
|
|
console.log('响应数据:', data)
|
||
|
|
|
||
|
|
if (data.success && data.data && Array.isArray(data.data)) {
|
||
|
|
console.log('商品数据:', data.data.length, '条')
|
||
|
|
setProducts(data.data)
|
||
|
|
setTotal(data.total || data.data.length)
|
||
|
|
} else {
|
||
|
|
console.error('获取商品失败:', data)
|
||
|
|
setProducts([])
|
||
|
|
setTotal(0)
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取商品失败:', error)
|
||
|
|
message.error('获取商品列表失败')
|
||
|
|
setProducts([])
|
||
|
|
setTotal(0)
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
console.log('获取商品完成')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchCategories()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchProducts()
|
||
|
|
}, [page, pageSize, selectedCategoryId])
|
||
|
|
|
||
|
|
// ==================== 工具函数 ====================
|
||
|
|
|
||
|
|
// 转换分类为Tree组件数据
|
||
|
|
const convertToTreeData = (cats: Category[]): DataNode[] => {
|
||
|
|
const map: Record<number, DataNode> = {}
|
||
|
|
const roots: DataNode[] = []
|
||
|
|
|
||
|
|
cats.forEach(c => {
|
||
|
|
map[c.id] = {
|
||
|
|
key: c.id,
|
||
|
|
title: c.name,
|
||
|
|
children: []
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
cats.forEach(c => {
|
||
|
|
if (c.parent_id === null) {
|
||
|
|
roots.push(map[c.id])
|
||
|
|
} else if (map[c.parent_id]) {
|
||
|
|
map[c.parent_id].children!.push(map[c.id])
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
return roots
|
||
|
|
}
|
||
|
|
|
||
|
|
// 转换分类为TreeSelect组件数据
|
||
|
|
const convertToTreeSelectData = (cats: Category[]): any[] => {
|
||
|
|
const map: Record<number, any> = {}
|
||
|
|
const roots: any[] = []
|
||
|
|
|
||
|
|
cats.forEach(c => {
|
||
|
|
map[c.id] = {
|
||
|
|
value: c.id,
|
||
|
|
title: c.name,
|
||
|
|
children: []
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
cats.forEach(c => {
|
||
|
|
if (c.parent_id === null) {
|
||
|
|
roots.push(map[c.id])
|
||
|
|
} else if (map[c.parent_id]) {
|
||
|
|
map[c.parent_id].children.push(map[c.id])
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
return roots
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取一级分类选项
|
||
|
|
const getParentCategoryOptions = () => {
|
||
|
|
return categories
|
||
|
|
.filter(c => c.parent_id === null)
|
||
|
|
.map(c => ({ label: c.name, value: c.id }))
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取二级分类选项（根据选择的一级分类）
|
||
|
|
const getChildCategoryOptions = (parentId: number | null) => {
|
||
|
|
if (!parentId) return []
|
||
|
|
return categories
|
||
|
|
.filter(c => c.parent_id === parentId)
|
||
|
|
.map(c => ({ label: c.name, value: c.id }))
|
||
|
|
}
|
||
|
|
|
||
|
|
// ==================== 商品操作 ====================
|
||
|
|
|
||
|
|
// 打开新增商品弹窗
|
||
|
|
const handleAddProduct = () => {
|
||
|
|
setEditingProduct(null)
|
||
|
|
productForm.resetFields()
|
||
|
|
productForm.setFieldsValue({
|
||
|
|
unit: '个',
|
||
|
|
cost_price: 0,
|
||
|
|
source: '老挝'
|
||
|
|
})
|
||
|
|
setProductModalVisible(true)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 打开编辑商品弹窗
|
||
|
|
const handleEditProduct = (product: Product) => {
|
||
|
|
setEditingProduct(product)
|
||
|
|
// 找到父分类ID
|
||
|
|
const parentCat = categories.find(c => c.name === product.parent_category_name && c.parent_id === null)
|
||
|
|
productForm.setFieldsValue({
|
||
|
|
name: product.name,
|
||
|
|
model: product.model,
|
||
|
|
parent_category_id: parentCat?.id || null,
|
||
|
|
category_id: product.category_id,
|
||
|
|
unit: product.unit,
|
||
|
|
cost_price: product.cost_price,
|
||
|
|
specification: product.specification,
|
||
|
|
brand: product.brand,
|
||
|
|
remark: product.remark,
|
||
|
|
source: product.source || '老挝'
|
||
|
|
})
|
||
|
|
setProductModalVisible(true)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 保存商品
|
||
|
|
const handleSaveProduct = async () => {
|
||
|
|
try {
|
||
|
|
const values = await productForm.validateFields()
|
||
|
|
|
||
|
|
const url = editingProduct
|
||
|
|
? `/api/products/${editingProduct.id}`
|
||
|
|
: '/api/products'
|
||
|
|
const method = editingProduct ? 'PUT' : 'POST'
|
||
|
|
|
||
|
|
const response = await fetch(url, {
|
||
|
|
method,
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify({
|
||
|
|
name: values.name,
|
||
|
|
model: values.model,
|
||
|
|
category_id: values.category_id || values.parent_category_id,
|
||
|
|
unit: values.unit,
|
||
|
|
cost_price: values.cost_price || 0,
|
||
|
|
specification: values.specification,
|
||
|
|
brand: values.brand,
|
||
|
|
remark: values.remark,
|
||
|
|
source: values.source || '老挝'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
const data = await response.json()
|
||
|
|
if (data.success) {
|
||
|
|
message.success(editingProduct ? '更新成功' : '创建成功')
|
||
|
|
setProductModalVisible(false)
|
||
|
|
fetchProducts()
|
||
|
|
fetchCategories() // 刷新分类
|
||
|
|
} else {
|
||
|
|
message.error(data.error || '操作失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('保存商品失败:', error)
|
||
|
|
message.error('保存失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 删除商品
|
||
|
|
const handleDeleteProduct = async (id: number) => {
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/api/products/${id}`, { method: 'DELETE' })
|
||
|
|
const data = await response.json()
|
||
|
|
if (data.success) {
|
||
|
|
message.success('删除成功')
|
||
|
|
fetchProducts()
|
||
|
|
} else {
|
||
|
|
message.error(data.error || '删除失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('删除商品失败:', error)
|
||
|
|
message.error('删除失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 批量上传商品
|
||
|
|
const handleBatchImport = async (file: any) => {
|
||
|
|
setImportLoading(true)
|
||
|
|
setImportProgress(0)
|
||
|
|
|
||
|
|
try {
|
||
|
|
console.log('文件信息:', file)
|
||
|
|
const formData = new FormData()
|
||
|
|
formData.append('file', file)
|
||
|
|
|
||
|
|
console.log('表单数据:', formData)
|
||
|
|
console.log('发送请求到:', '/api/products/batch-import')
|
||
|
|
const response = await fetch('/api/products/batch-import', {
|
||
|
|
method: 'POST',
|
||
|
|
body: formData
|
||
|
|
})
|
||
|
|
|
||
|
|
console.log('响应状态:', response.status)
|
||
|
|
console.log('响应状态文本:', response.statusText)
|
||
|
|
const data = await response.json()
|
||
|
|
console.log('响应数据:', data)
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
message.success(data.message)
|
||
|
|
if (data.data && data.data.errorCount > 0 && data.data.errors) {
|
||
|
|
// 显示失败的详细信息（限制显示数量）
|
||
|
|
const errorDetails = data.data.errors.slice(0, 5).map((err: any) => `${err.item || '未知商品'}: ${err.error}`).join('\n')
|
||
|
|
const moreErrors = data.data.errorCount > 5 ? `\n...等${data.data.errorCount - 5}条错误` : ''
|
||
|
|
message.error(`导入失败 ${data.data.errorCount} 条:\n${errorDetails}${moreErrors}`)
|
||
|
|
}
|
||
|
|
fetchProducts()
|
||
|
|
fetchCategories()
|
||
|
|
} else {
|
||
|
|
message.error(data.error || '导入失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('批量导入失败:', error)
|
||
|
|
message.error('导入失败')
|
||
|
|
} finally {
|
||
|
|
setImportLoading(false)
|
||
|
|
setImportProgress(0)
|
||
|
|
setImportModalVisible(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 阻止自动上传
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
|
||
|
|
// 下载商品模板
|
||
|
|
const handleDownloadTemplate = () => {
|
||
|
|
window.open('/api/products/template', '_blank')
|
||
|
|
}
|
||
|
|
|
||
|
|
// ==================== 分类操作 ====================
|
||
|
|
|
||
|
|
// 打开新增分类弹窗
|
||
|
|
const handleAddCategory = () => {
|
||
|
|
setEditingCategory(null)
|
||
|
|
categoryForm.resetFields()
|
||
|
|
categoryForm.setFieldsValue({ parent_id: null, level: 1 })
|
||
|
|
setCategoryModalVisible(true)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 打开编辑分类弹窗
|
||
|
|
const handleEditCategory = (category: Category) => {
|
||
|
|
setEditingCategory(category)
|
||
|
|
categoryForm.setFieldsValue({
|
||
|
|
name: category.name,
|
||
|
|
parent_id: category.parent_id,
|
||
|
|
level: category.level
|
||
|
|
})
|
||
|
|
setCategoryModalVisible(true)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 保存分类
|
||
|
|
const handleSaveCategory = async () => {
|
||
|
|
try {
|
||
|
|
const values = await categoryForm.validateFields()
|
||
|
|
|
||
|
|
const url = editingCategory
|
||
|
|
? `/api/categories/${editingCategory.id}`
|
||
|
|
: '/api/categories'
|
||
|
|
const method = editingCategory ? 'PUT' : 'POST'
|
||
|
|
|
||
|
|
const response = await fetch(url, {
|
||
|
|
method,
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify(values)
|
||
|
|
})
|
||
|
|
|
||
|
|
const data = await response.json()
|
||
|
|
if (data.success) {
|
||
|
|
message.success(editingCategory ? '分类更新成功' : '分类创建成功')
|
||
|
|
setCategoryModalVisible(false)
|
||
|
|
fetchCategories()
|
||
|
|
} else {
|
||
|
|
message.error(data.message || '操作失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('保存分类失败:', error)
|
||
|
|
message.error('保存失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 删除分类
|
||
|
|
const handleDeleteCategory = async (id: number) => {
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/api/categories/${id}`, { method: 'DELETE' })
|
||
|
|
const data = await response.json()
|
||
|
|
if (data.success) {
|
||
|
|
message.success('分类删除成功')
|
||
|
|
fetchCategories()
|
||
|
|
} else {
|
||
|
|
message.error(data.message || '删除失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('删除分类失败:', error)
|
||
|
|
message.error('删除失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ==================== 表格列定义 ====================
|
||
|
|
const columns: ColumnsType<Product> = [
|
||
|
|
{
|
||
|
|
title: '缩略图',
|
||
|
|
dataIndex: 'thumbnail',
|
||
|
|
key: 'thumbnail',
|
||
|
|
width: 80,
|
||
|
|
render: (thumbnail) => (
|
||
|
|
thumbnail ? (
|
||
|
|
<Image
|
||
|
|
src={thumbnail}
|
||
|
|
width={50}
|
||
|
|
height={50}
|
||
|
|
style={{ objectFit: 'cover', borderRadius: 4 }}
|
||
|
|
fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<div style={{
|
||
|
|
width: 50, height: 50,
|
||
|
|
background: '#f5f5f5',
|
||
|
|
borderRadius: 4,
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center'
|
||
|
|
}}>
|
||
|
|
<PictureOutlined style={{ color: '#ccc' }} />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '商品名称',
|
||
|
|
dataIndex: 'name',
|
||
|
|
key: 'name',
|
||
|
|
width: 200,
|
||
|
|
render: (text) => <span style={{ fontWeight: 500 }}>{text}</span>
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '型号',
|
||
|
|
dataIndex: 'model',
|
||
|
|
key: 'model',
|
||
|
|
width: 150,
|
||
|
|
render: (text) => text || '-'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '一级分类',
|
||
|
|
dataIndex: 'parent_category_name',
|
||
|
|
key: 'parent_category_name',
|
||
|
|
width: 100,
|
||
|
|
render: (text, record) => (
|
||
|
|
<Tag color="blue">{text || record.category_name}</Tag>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '二级分类',
|
||
|
|
dataIndex: 'category_name',
|
||
|
|
key: 'category_name',
|
||
|
|
width: 100,
|
||
|
|
render: (text, record) => (
|
||
|
|
record.parent_category_name ? <Tag color="green">{text}</Tag> : '-'
|
||
|
|
)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '单位',
|
||
|
|
dataIndex: 'unit',
|
||
|
|
key: 'unit',
|
||
|
|
width: 60
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '数量',
|
||
|
|
dataIndex: 'quantity',
|
||
|
|
key: 'quantity',
|
||
|
|
width: 80,
|
||
|
|
render: (qty) => (
|
||
|
|
<span style={{ color: (qty || 0) > 0 ? '#52c41a' : '#999' }}>
|
||
|
|
{(qty || 0).toLocaleString()}
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '成本单价',
|
||
|
|
dataIndex: 'cost_price',
|
||
|
|
key: 'cost_price',
|
||
|
|
width: 100,
|
||
|
|
render: (price) => (
|
||
|
|
<span style={{ color: (price || 0) > 0 ? '#1890ff' : '#999' }}>
|
||
|
|
{(price || 0) > 0 ? `¥${Number(price || 0).toFixed(2)}` : '¥0.00'}
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '品牌',
|
||
|
|
dataIndex: 'brand',
|
||
|
|
key: 'brand',
|
||
|
|
width: 100,
|
||
|
|
render: (text) => text || '-'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '操作',
|
||
|
|
key: 'action',
|
||
|
|
width: 120,
|
||
|
|
fixed: 'right',
|
||
|
|
render: (_, record) => (
|
||
|
|
<Space size="small">
|
||
|
|
<Button
|
||
|
|
type="link"
|
||
|
|
size="small"
|
||
|
|
icon={<EditOutlined />}
|
||
|
|
onClick={() => handleEditProduct(record)}
|
||
|
|
>
|
||
|
|
编辑
|
||
|
|
</Button>
|
||
|
|
<Popconfirm
|
||
|
|
title="确定删除此商品吗？"
|
||
|
|
onConfirm={() => handleDeleteProduct(record.id)}
|
||
|
|
okText="确定"
|
||
|
|
cancelText="取消"
|
||
|
|
>
|
||
|
|
<Button
|
||
|
|
type="link"
|
||
|
|
size="small"
|
||
|
|
danger
|
||
|
|
icon={<DeleteOutlined />}
|
||
|
|
>
|
||
|
|
删除
|
||
|
|
</Button>
|
||
|
|
</Popconfirm>
|
||
|
|
</Space>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
// ==================== 渲染 ====================
|
||
|
|
|
||
|
|
// 统计数据
|
||
|
|
const stats = {
|
||
|
|
totalProducts: total,
|
||
|
|
totalCategories: categories.length,
|
||
|
|
parentCategories: categories.filter(c => c.parent_id === null).length,
|
||
|
|
childCategories: categories.filter(c => c.parent_id !== null).length
|
||
|
|
}
|
||
|
|
|
||
|
|
// 分类展开/折叠状态
|
||
|
|
const [expandedCategories, setExpandedCategories] = useState<Set<number>>(new Set())
|
||
|
|
|
||
|
|
// 切换分类展开/折叠
|
||
|
|
const toggleCategory = (id: number) => {
|
||
|
|
const newExpanded = new Set(expandedCategories)
|
||
|
|
if (newExpanded.has(id)) {
|
||
|
|
newExpanded.delete(id)
|
||
|
|
} else {
|
||
|
|
newExpanded.add(id)
|
||
|
|
}
|
||
|
|
setExpandedCategories(newExpanded)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 分类树渲染（支持编辑和展开/折叠）
|
||
|
|
const renderCategoryTree = () => {
|
||
|
|
const renderTreeNodes = (cats: Category[]): React.ReactNode => {
|
||
|
|
return cats.map(cat => {
|
||
|
|
const childCategories = categories.filter(c => c.parent_id === cat.id)
|
||
|
|
const isParent = cat.parent_id === null
|
||
|
|
const isExpanded = expandedCategories.has(cat.id)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div key={cat.id} style={{ marginBottom: 8 }}>
|
||
|
|
<div style={{
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
padding: '8px 12px',
|
||
|
|
background: isParent ? '#f0f5ff' : '#f6ffed',
|
||
|
|
borderRadius: 6,
|
||
|
|
border: '1px solid #e8e8e8',
|
||
|
|
cursor: isParent && childCategories.length > 0 ? 'pointer' : 'default'
|
||
|
|
}} onClick={() => isParent && childCategories.length > 0 && toggleCategory(cat.id)}>
|
||
|
|
{isParent && childCategories.length > 0 && (
|
||
|
|
<span style={{ marginRight: 8, fontSize: '12px', color: '#666' }}>
|
||
|
|
{isExpanded ? '▼' : '▶'}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
{(!isParent || childCategories.length === 0) && (
|
||
|
|
<span style={{ marginRight: 8, width: '12px' }}></span>
|
||
|
|
)}
|
||
|
|
<FolderOutlined style={{ marginRight: 8, color: isParent ? '#1890ff' : '#52c41a' }} />
|
||
|
|
<span style={{ flex: 1, fontWeight: isParent ? 500 : 400 }}>
|
||
|
|
{cat.name}
|
||
|
|
</span>
|
||
|
|
<Space size="small">
|
||
|
|
<Button
|
||
|
|
type="link"
|
||
|
|
size="small"
|
||
|
|
icon={<EditOutlined />}
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation()
|
||
|
|
handleEditCategory(cat)
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
编辑
|
||
|
|
</Button>
|
||
|
|
<Popconfirm
|
||
|
|
title="确定删除此分类吗？"
|
||
|
|
onConfirm={() => handleDeleteCategory(cat.id)}
|
||
|
|
okText="确定"
|
||
|
|
cancelText="取消"
|
||
|
|
>
|
||
|
|
<Button
|
||
|
|
type="link"
|
||
|
|
size="small"
|
||
|
|
danger
|
||
|
|
icon={<DeleteOutlined />}
|
||
|
|
onClick={(e) => e.stopPropagation()}
|
||
|
|
>
|
||
|
|
删除
|
||
|
|
</Button>
|
||
|
|
</Popconfirm>
|
||
|
|
<Tag color={isParent ? 'blue' : 'green'}>
|
||
|
|
{isParent ? '一级分类' : '二级分类'}
|
||
|
|
</Tag>
|
||
|
|
</Space>
|
||
|
|
</div>
|
||
|
|
{isParent && childCategories.length > 0 && isExpanded && (
|
||
|
|
<div key={`${cat.id}-children`} style={{ marginLeft: 24, marginTop: 8 }}>
|
||
|
|
{renderTreeNodes(childCategories)}
|
||
|
|
{/* 二级分类新增按钮 */}
|
||
|
|
<div style={{ marginTop: 8, textAlign: 'center' }}>
|
||
|
|
<Button
|
||
|
|
type="dashed"
|
||
|
|
size="small"
|
||
|
|
icon={<PlusOutlined />}
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation()
|
||
|
|
setEditingCategory(null)
|
||
|
|
categoryForm.resetFields()
|
||
|
|
categoryForm.setFieldsValue({
|
||
|
|
parent_id: cat.id,
|
||
|
|
level: 2
|
||
|
|
})
|
||
|
|
setCategoryModalVisible(true)
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
新增二级分类
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const parentCategories = categories.filter(c => c.parent_id === null)
|
||
|
|
const treeNodes = renderTreeNodes(parentCategories)
|
||
|
|
|
||
|
|
// 在一级分类列表末尾添加新增按钮
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
{treeNodes}
|
||
|
|
<div style={{ marginTop: 16, textAlign: 'center' }}>
|
||
|
|
<Button
|
||
|
|
type="dashed"
|
||
|
|
icon={<PlusOutlined />}
|
||
|
|
onClick={handleAddCategory}
|
||
|
|
>
|
||
|
|
新增一级分类
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{ padding: 24 }}>
|
||
|
|
{/* 统计卡片 */}
|
||
|
|
<Row gutter={16} style={{ marginBottom: 24 }}>
|
||
|
|
<Col span={6}>
|
||
|
|
<Card>
|
||
|
|
<Statistic
|
||
|
|
title="商品总数"
|
||
|
|
value={stats.totalProducts}
|
||
|
|
prefix={<ShopOutlined />}
|
||
|
|
/>
|
||
|
|
</Card>
|
||
|
|
</Col>
|
||
|
|
<Col span={6}>
|
||
|
|
<Card>
|
||
|
|
<Statistic
|
||
|
|
title="分类总数"
|
||
|
|
value={stats.totalCategories}
|
||
|
|
prefix={<AppstoreOutlined />}
|
||
|
|
/>
|
||
|
|
</Card>
|
||
|
|
</Col>
|
||
|
|
<Col span={6}>
|
||
|
|
<Card>
|
||
|
|
<Statistic
|
||
|
|
title="一级分类"
|
||
|
|
value={stats.parentCategories}
|
||
|
|
valueStyle={{ color: '#1890ff' }}
|
||
|
|
/>
|
||
|
|
</Card>
|
||
|
|
</Col>
|
||
|
|
<Col span={6}>
|
||
|
|
<Card>
|
||
|
|
<Statistic
|
||
|
|
title="二级分类"
|
||
|
|
value={stats.childCategories}
|
||
|
|
valueStyle={{ color: '#52c41a' }}
|
||
|
|
/>
|
||
|
|
</Card>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
{/* 主内容区 */}
|
||
|
|
<Card>
|
||
|
|
<Tabs
|
||
|
|
activeKey={activeTab}
|
||
|
|
onChange={setActiveTab}
|
||
|
|
tabBarExtraContent={
|
||
|
|
activeTab === 'products' ? (
|
||
|
|
<Space>
|
||
|
|
<Input.Search
|
||
|
|
placeholder="搜索商品名称/型号/品牌"
|
||
|
|
allowClear
|
||
|
|
style={{ width: 250 }}
|
||
|
|
value={searchText}
|
||
|
|
onChange={e => setSearchText(e.target.value)}
|
||
|
|
onSearch={() => {
|
||
|
|
setPage(1)
|
||
|
|
fetchProducts()
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
icon={<DownloadOutlined />}
|
||
|
|
onClick={handleDownloadTemplate}
|
||
|
|
>
|
||
|
|
下载模板
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
icon={<UploadOutlined />}
|
||
|
|
onClick={() => setImportModalVisible(true)}
|
||
|
|
>
|
||
|
|
批量上传
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
type="primary"
|
||
|
|
icon={<PlusOutlined />}
|
||
|
|
onClick={handleAddProduct}
|
||
|
|
>
|
||
|
|
新增商品
|
||
|
|
</Button>
|
||
|
|
</Space>
|
||
|
|
) : null
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Tabs.TabPane
|
||
|
|
tab={<span><ShopOutlined /> 商品列表</span>}
|
||
|
|
key="products"
|
||
|
|
>
|
||
|
|
{/* 分类筛选 */}
|
||
|
|
<div style={{ marginBottom: 16 }}>
|
||
|
|
<Space>
|
||
|
|
<span>按分类筛选：</span>
|
||
|
|
<TreeSelect
|
||
|
|
style={{ width: 250 }}
|
||
|
|
placeholder="选择分类"
|
||
|
|
allowClear
|
||
|
|
treeData={convertToTreeSelectData(categories)}
|
||
|
|
onChange={(value) => {
|
||
|
|
setSelectedCategoryId(value)
|
||
|
|
setPage(1)
|
||
|
|
}}
|
||
|
|
value={selectedCategoryId}
|
||
|
|
/>
|
||
|
|
{selectedCategoryId && (
|
||
|
|
<Button onClick={() => setSelectedCategoryId(null)}>
|
||
|
|
清除筛选
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</Space>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Table
|
||
|
|
columns={columns}
|
||
|
|
dataSource={products || []}
|
||
|
|
rowKey="id"
|
||
|
|
loading={loading}
|
||
|
|
scroll={{ x: 1200 }}
|
||
|
|
pagination={{
|
||
|
|
current: page,
|
||
|
|
pageSize,
|
||
|
|
total: total || 0,
|
||
|
|
showSizeChanger: true,
|
||
|
|
showQuickJumper: true,
|
||
|
|
showTotal: (total) => `共 ${total} 条`,
|
||
|
|
onChange: (p, ps) => {
|
||
|
|
setPage(p)
|
||
|
|
setPageSize(ps)
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Tabs.TabPane>
|
||
|
|
|
||
|
|
<Tabs.TabPane
|
||
|
|
tab={<span><FolderOutlined /> 分类管理</span>}
|
||
|
|
key="categories"
|
||
|
|
>
|
||
|
|
<div style={{ marginBottom: 16, display: 'flex', justifyContent: 'flex-end' }}>
|
||
|
|
<Button
|
||
|
|
type="primary"
|
||
|
|
icon={<FolderAddOutlined />}
|
||
|
|
onClick={handleAddCategory}
|
||
|
|
>
|
||
|
|
新增分类
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
{categoryLoading ? (
|
||
|
|
<div style={{ textAlign: 'center', padding: 40 }}>
|
||
|
|
<Spin />
|
||
|
|
</div>
|
||
|
|
) : categories.length === 0 ? (
|
||
|
|
<Empty description="暂无分类" />
|
||
|
|
) : (
|
||
|
|
<div style={{ padding: 16 }}>
|
||
|
|
{renderCategoryTree()}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Tabs.TabPane>
|
||
|
|
</Tabs>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* 商品弹窗 */}
|
||
|
|
<Modal
|
||
|
|
title={editingProduct ? '编辑商品' : '新增商品'}
|
||
|
|
open={productModalVisible}
|
||
|
|
onOk={handleSaveProduct}
|
||
|
|
onCancel={() => setProductModalVisible(false)}
|
||
|
|
width={600}
|
||
|
|
okText="保存"
|
||
|
|
cancelText="取消"
|
||
|
|
>
|
||
|
|
<Form form={productForm} layout="vertical">
|
||
|
|
<Row gutter={16}>
|
||
|
|
<Col span={12}>
|
||
|
|
<Form.Item
|
||
|
|
name="name"
|
||
|
|
label="商品名称"
|
||
|
|
rules={[{ required: true, message: '请输入商品名称' }]}
|
||
|
|
>
|
||
|
|
<Input placeholder="如：JKLYJ-120-22kV高压绝缘线" />
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col span={12}>
|
||
|
|
<Form.Item name="model" label="型号">
|
||
|
|
<Input placeholder="如：JKLYJ-120-22kV" />
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Row gutter={16}>
|
||
|
|
<Col span={12}>
|
||
|
|
<Form.Item
|
||
|
|
name="parent_category_id"
|
||
|
|
label="一级分类"
|
||
|
|
rules={[{ required: true, message: '请选择一级分类' }]}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
placeholder="选择一级分类"
|
||
|
|
onChange={(value) => {
|
||
|
|
productForm.setFieldsValue({ category_id: null })
|
||
|
|
}}
|
||
|
|
options={getParentCategoryOptions()}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col span={12}>
|
||
|
|
<Form.Item
|
||
|
|
name="category_id"
|
||
|
|
label="二级分类"
|
||
|
|
extra="可选，不选则使用一级分类"
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
placeholder="选择二级分类（可选）"
|
||
|
|
allowClear
|
||
|
|
options={getChildCategoryOptions(
|
||
|
|
productForm.getFieldValue('parent_category_id')
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Row gutter={16}>
|
||
|
|
<Col span={8}>
|
||
|
|
<Form.Item name="unit" label="单位">
|
||
|
|
<Select placeholder="选择单位">
|
||
|
|
<Select.Option value="个">个</Select.Option>
|
||
|
|
<Select.Option value="米">米</Select.Option>
|
||
|
|
<Select.Option value="根">根</Select.Option>
|
||
|
|
<Select.Option value="套">套</Select.Option>
|
||
|
|
<Select.Option value="台">台</Select.Option>
|
||
|
|
<Select.Option value="件">件</Select.Option>
|
||
|
|
<Select.Option value="箱">箱</Select.Option>
|
||
|
|
<Select.Option value="kg">kg</Select.Option>
|
||
|
|
<Select.Option value="吨">吨</Select.Option>
|
||
|
|
</Select>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col span={8}>
|
||
|
|
<Form.Item name="cost_price" label="成本单价">
|
||
|
|
<InputNumber
|
||
|
|
min={0}
|
||
|
|
precision={2}
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
placeholder="默认为0"
|
||
|
|
addonBefore="¥"
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col span={8}>
|
||
|
|
<Form.Item name="source" label="来源">
|
||
|
|
<Select defaultValue="老挝" placeholder="选择来源">
|
||
|
|
<Select.Option value="中国">中国</Select.Option>
|
||
|
|
<Select.Option value="老挝">老挝</Select.Option>
|
||
|
|
</Select>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Row gutter={16}>
|
||
|
|
<Col span={24}>
|
||
|
|
<Form.Item name="brand" label="品牌">
|
||
|
|
<Input placeholder="品牌名称" />
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Form.Item name="specification" label="规格参数">
|
||
|
|
<Input.TextArea rows={2} placeholder="如：120mm², 22kV" />
|
||
|
|
</Form.Item>
|
||
|
|
|
||
|
|
<Form.Item name="remark" label="备注">
|
||
|
|
<Input.TextArea rows={2} placeholder="其他说明" />
|
||
|
|
</Form.Item>
|
||
|
|
</Form>
|
||
|
|
</Modal>
|
||
|
|
|
||
|
|
{/* 批量上传弹窗 */}
|
||
|
|
<Modal
|
||
|
|
title="批量上传商品"
|
||
|
|
open={importModalVisible}
|
||
|
|
onCancel={() => setImportModalVisible(false)}
|
||
|
|
footer={null}
|
||
|
|
width={500}
|
||
|
|
maskClosable={false}
|
||
|
|
>
|
||
|
|
<div style={{ padding: 20 }}>
|
||
|
|
<div style={{ marginBottom: 24 }}>
|
||
|
|
<h4 style={{ marginBottom: 12 }}>上传说明：</h4>
|
||
|
|
<ul style={{ margin: 0, paddingLeft: 20, color: '#666' }}>
|
||
|
|
<li>请先下载模板文件，按照模板格式填写商品信息</li>
|
||
|
|
<li>支持 .xlsx 和 .xls 格式的Excel文件</li>
|
||
|
|
<li>商品名称和一级分类为必填字段</li>
|
||
|
|
<li>其他字段为选填，可根据实际情况填写</li>
|
||
|
|
<li>来源字段默认为老挝，可选填中国/老挝</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Upload
|
||
|
|
name="file"
|
||
|
|
accept=".xlsx,.xls"
|
||
|
|
showUploadList={false}
|
||
|
|
beforeUpload={handleBatchImport}
|
||
|
|
disabled={importLoading}
|
||
|
|
>
|
||
|
|
<Button
|
||
|
|
type="primary"
|
||
|
|
icon={<UploadOutlined />}
|
||
|
|
disabled={importLoading}
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
>
|
||
|
|
{importLoading ? '上传中...' : '选择Excel文件'}
|
||
|
|
</Button>
|
||
|
|
</Upload>
|
||
|
|
|
||
|
|
{importLoading && (
|
||
|
|
<div style={{ marginTop: 16 }}>
|
||
|
|
<Progress percent={importProgress} status="active" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div style={{ marginTop: 24, textAlign: 'center' }}>
|
||
|
|
<Button onClick={handleDownloadTemplate} icon={<DownloadOutlined />}>
|
||
|
|
下载导入模板
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Modal>
|
||
|
|
|
||
|
|
{/* 分类弹窗 */}
|
||
|
|
<Modal
|
||
|
|
title={editingCategory ? '编辑分类' : '新增分类'}
|
||
|
|
open={categoryModalVisible}
|
||
|
|
onOk={handleSaveCategory}
|
||
|
|
onCancel={() => setCategoryModalVisible(false)}
|
||
|
|
width={500}
|
||
|
|
okText="保存"
|
||
|
|
cancelText="取消"
|
||
|
|
>
|
||
|
|
<Form form={categoryForm} layout="vertical">
|
||
|
|
<Form.Item
|
||
|
|
name="name"
|
||
|
|
label="分类名称"
|
||
|
|
rules={[{ required: true, message: '请输入分类名称' }]}
|
||
|
|
>
|
||
|
|
<Input placeholder="如：电线电缆" />
|
||
|
|
</Form.Item>
|
||
|
|
|
||
|
|
<Form.Item
|
||
|
|
name="level"
|
||
|
|
label="分类级别"
|
||
|
|
rules={[{ required: true, message: '请选择分类级别' }]}
|
||
|
|
>
|
||
|
|
<Select placeholder="选择分类级别">
|
||
|
|
<Select.Option value={1}>一级分类</Select.Option>
|
||
|
|
<Select.Option value={2}>二级分类</Select.Option>
|
||
|
|
</Select>
|
||
|
|
</Form.Item>
|
||
|
|
|
||
|
|
<Form.Item
|
||
|
|
name="parent_id"
|
||
|
|
label="上级分类"
|
||
|
|
extra="选择二级分类时，必须选择上级分类"
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
placeholder="选择上级分类（可选）"
|
||
|
|
allowClear
|
||
|
|
options={categories
|
||
|
|
.filter(c => c.level === 1)
|
||
|
|
.map(c => ({ label: c.name, value: c.id }))}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</Form>
|
||
|
|
</Modal>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ProductPage
|