597 lines
20 KiB
JavaScript
597 lines
20 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import axios from '../../services/axios';
|
||
import { adminAPI } from '../../services/api';
|
||
import { toast } from 'react-toastify';
|
||
import '../../styles/admin/CategoryManagement.css';
|
||
|
||
const CategoryManagement = () => {
|
||
const [categories, setCategories] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||
const [showEditModal, setShowEditModal] = useState(false);
|
||
const [showTemplateModal, setShowTemplateModal] = useState(false);
|
||
const [currentCategory, setCurrentCategory] = useState(null);
|
||
const [categoryName, setCategoryName] = useState('');
|
||
const [categoryDescription, setCategoryDescription] = useState('');
|
||
const [parentCategory, setParentCategory] = useState(''); // 用于创建和编辑时的父分类选择
|
||
const [templates, setTemplates] = useState([]);
|
||
const [selectedTemplate, setSelectedTemplate] = useState('');
|
||
const [expandedCategories, setExpandedCategories] = useState({}); // 用于跟踪哪些分类被展开
|
||
|
||
// 切换分类展开/折叠状态
|
||
const toggleCategory = (categoryId) => {
|
||
setExpandedCategories(prev => {
|
||
const newState = { ...prev };
|
||
// 如果当前是折叠状态，则展开；如果是展开状态，则折叠
|
||
newState[categoryId] = !prev[categoryId];
|
||
return newState;
|
||
});
|
||
};
|
||
|
||
// 辅助函数：渲染分类列表（递归）
|
||
const renderCategoryList = (categoryList, isRoot = true) => {
|
||
if (!categoryList || !Array.isArray(categoryList)) {
|
||
console.error('renderCategoryList: categoryList is not an array', categoryList);
|
||
return null;
|
||
}
|
||
|
||
// 如果不是根级列表，并且父分类没有被展开，则不渲染
|
||
if (!isRoot && categoryList[0]?.parent_id && !expandedCategories[categoryList[0]?.parent_id]) {
|
||
return null;
|
||
}
|
||
|
||
return categoryList.map(category => {
|
||
const hasChildren = category.children && Array.isArray(category.children) && category.children.length > 0;
|
||
const isExpanded = expandedCategories[category.id];
|
||
|
||
return (
|
||
<React.Fragment key={category.id}>
|
||
<tr className={`category-row ${category.level > 1 ? 'child-category' : 'parent-category'}`}>
|
||
<td>{category.id}</td>
|
||
<td>
|
||
<div className="d-flex align-items-center">
|
||
{/* 缩进显示 */}
|
||
<div style={{ width: `${(category.level - 1) * 20}px` }}></div>
|
||
|
||
{/* 展开/折叠图标 */}
|
||
<span
|
||
className="category-toggle me-2"
|
||
onClick={() => toggleCategory(category.id)}
|
||
style={{ cursor: 'pointer' }}
|
||
>
|
||
{hasChildren ? (
|
||
isExpanded ? (
|
||
<span className="chevron-down">▼</span>
|
||
) : (
|
||
<span className="chevron-right">▶</span>
|
||
)
|
||
) : (
|
||
<span className="category-no-children">●</span>
|
||
)}
|
||
</span>
|
||
|
||
{/* 分类名称 */}
|
||
<span className={hasChildren ? 'fw-bold' : ''}>
|
||
{category.name}
|
||
</span>
|
||
|
||
{/* 父级标识 - 移除显示父级ID，通过缩进和层次结构已经清晰表达 */}
|
||
</div>
|
||
</td>
|
||
<td>{category.description}</td>
|
||
<td>
|
||
<button
|
||
className="btn btn-sm btn-primary me-2"
|
||
onClick={() => openEditModal(category)}
|
||
>
|
||
编辑
|
||
</button>
|
||
<button
|
||
className="btn btn-sm btn-danger"
|
||
onClick={() => deleteCategory(category.id)}
|
||
>
|
||
删除
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
{/* 子分类，只有当父分类被展开时才渲染 */}
|
||
{hasChildren && isExpanded && renderCategoryList(category.children, false)}
|
||
</React.Fragment>
|
||
);
|
||
});
|
||
};
|
||
|
||
// 获取分类列表
|
||
const fetchCategories = async () => {
|
||
try {
|
||
setLoading(true);
|
||
// 添加hierarchical=true参数，获取层次化的分类数据
|
||
const res = await adminAPI.getCategories({hierarchical: true});
|
||
// 检查返回的数据结构
|
||
console.log('API返回的分类数据:', res.data);
|
||
// 确保categories是一个数组
|
||
let categoriesData = [];
|
||
|
||
if (res.data && res.data.categories) {
|
||
// 如果API返回的是 {categories: [...]} 格式
|
||
categoriesData = res.data.categories || [];
|
||
} else if (Array.isArray(res.data)) {
|
||
// 如果API直接返回数组
|
||
categoriesData = res.data;
|
||
} else {
|
||
console.error('API返回的分类数据格式不正确:', res.data);
|
||
categoriesData = [];
|
||
}
|
||
|
||
// 递归处理分类数据，确保每个分类都有必要的字段
|
||
const processCategories = (categories) => {
|
||
return categories.map(cat => ({
|
||
...cat,
|
||
id: cat.id || cat._id || cat.category_id || '',
|
||
name: cat.name || cat.category_name || '未命名分类',
|
||
level: cat.level || 1,
|
||
parent_id: cat.parent_id || null,
|
||
children: cat.children ? processCategories(cat.children) : []
|
||
}));
|
||
};
|
||
|
||
const formattedCategories = processCategories(categoriesData);
|
||
|
||
// 初始化展开状态 - 默认只展开顶级分类
|
||
const initialExpandedState = {};
|
||
formattedCategories.forEach(cat => {
|
||
// 只有顶级分类（parent_id为null或undefined的分类）默认展开
|
||
if (!cat.parent_id) {
|
||
initialExpandedState[cat.id] = true;
|
||
}
|
||
});
|
||
setExpandedCategories(initialExpandedState);
|
||
|
||
setCategories(formattedCategories);
|
||
} catch (err) {
|
||
toast.error('获取分类列表失败');
|
||
console.error(err);
|
||
setCategories([]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 获取分类模板列表
|
||
const fetchTemplates = async () => {
|
||
try {
|
||
const res = await axios.get('/api/admin/category-templates');
|
||
// 确保templates是一个数组
|
||
let templatesData = [];
|
||
|
||
if (res.data && res.data.templates) {
|
||
// 如果API返回的是 {templates: [...]} 格式
|
||
templatesData = res.data.templates || [];
|
||
} else if (Array.isArray(res.data)) {
|
||
// 如果API直接返回数组
|
||
templatesData = res.data;
|
||
} else {
|
||
console.error('API返回的模板数据格式不正确:', res.data);
|
||
templatesData = [];
|
||
}
|
||
|
||
// 确保每个模板对象都有id和name属性
|
||
const formattedTemplates = templatesData.map(template => {
|
||
return {
|
||
...template,
|
||
id: template.id || template._id || template.template_id || '',
|
||
name: template.name || template.template_name || '未命名模板'
|
||
};
|
||
});
|
||
|
||
setTemplates(formattedTemplates);
|
||
} catch (err) {
|
||
toast.error('获取分类模板列表失败');
|
||
console.error(err);
|
||
setTemplates([]);
|
||
}
|
||
};
|
||
|
||
// 应用分类模板
|
||
const applyTemplate = async () => {
|
||
if (!selectedTemplate) {
|
||
toast.error('请选择一个模板');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await axios.post(`/api/admin/category-templates/${selectedTemplate}/apply`);
|
||
toast.success('分类模板应用成功');
|
||
setShowTemplateModal(false);
|
||
setSelectedTemplate('');
|
||
fetchCategories();
|
||
} catch (err) {
|
||
toast.error('应用分类模板失败');
|
||
console.error(err);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchCategories();
|
||
fetchTemplates();
|
||
}, []);
|
||
|
||
// 检查是否存在重复的分类名称（在同一父级下）
|
||
const checkDuplicateCategoryName = (name, parentId, excludeId = null) => {
|
||
// 扁平化分类列表，便于检查
|
||
const flattenCategories = (cats) => {
|
||
let result = [];
|
||
cats.forEach(cat => {
|
||
result.push(cat);
|
||
if (cat.children && cat.children.length > 0) {
|
||
result = [...result, ...flattenCategories(cat.children)];
|
||
}
|
||
});
|
||
return result;
|
||
};
|
||
|
||
const allCategories = flattenCategories(categories);
|
||
|
||
// 检查是否存在同名分类（在相同父级下，排除自身）
|
||
return allCategories.some(cat =>
|
||
cat.name.toLowerCase() === name.toLowerCase() &&
|
||
cat.parent_id === parentId &&
|
||
cat.id !== excludeId
|
||
);
|
||
};
|
||
|
||
// 创建分类
|
||
const createCategory = async () => {
|
||
try {
|
||
// 检查分类名称是否为空
|
||
if (!categoryName.trim()) {
|
||
toast.error('分类名称不能为空');
|
||
return;
|
||
}
|
||
|
||
// 检查是否存在同名分类（在相同父级下）
|
||
const isCategoryNameExists = checkDuplicateCategoryName(categoryName.trim(), parentCategory);
|
||
if (isCategoryNameExists) {
|
||
toast.error('该父级下已存在同名分类，请使用其他名称');
|
||
return;
|
||
}
|
||
|
||
await adminAPI.createCategory({
|
||
name: categoryName,
|
||
description: categoryDescription,
|
||
parent_id: parentCategory || null // 如果没有选择父分类，则为null
|
||
});
|
||
toast.success('分类创建成功');
|
||
setShowCreateModal(false);
|
||
setCategoryName('');
|
||
setCategoryDescription('');
|
||
setParentCategory('');
|
||
fetchCategories();
|
||
} catch (err) {
|
||
toast.error('创建分类失败');
|
||
console.error(err);
|
||
}
|
||
};
|
||
|
||
// 更新分类
|
||
const updateCategory = async () => {
|
||
if (!currentCategory) return;
|
||
|
||
try {
|
||
// 检查分类名称是否为空
|
||
if (!categoryName.trim()) {
|
||
toast.error('分类名称不能为空');
|
||
return;
|
||
}
|
||
|
||
// 检查是否存在同名分类（在相同父级下，排除自身）
|
||
const isCategoryNameExists = checkDuplicateCategoryName(
|
||
categoryName.trim(),
|
||
currentCategory.parent_id,
|
||
currentCategory.id
|
||
);
|
||
|
||
if (isCategoryNameExists) {
|
||
toast.error('该父级下已存在同名分类，请使用其他名称');
|
||
return;
|
||
}
|
||
|
||
await adminAPI.updateCategory(currentCategory.id, {
|
||
name: categoryName,
|
||
description: categoryDescription
|
||
// parent_id 不允许直接修改，因为会影响路径，由后端处理
|
||
});
|
||
toast.success('分类更新成功');
|
||
setShowEditModal(false);
|
||
fetchCategories();
|
||
} catch (err) {
|
||
toast.error('更新分类失败');
|
||
console.error(err);
|
||
}
|
||
};
|
||
|
||
// 删除分类
|
||
const deleteCategory = async (categoryId) => {
|
||
if (window.confirm('确定要删除这个分类吗？')) {
|
||
try {
|
||
await adminAPI.deleteCategory(categoryId);
|
||
toast.success('分类已删除');
|
||
fetchCategories();
|
||
} catch (err) {
|
||
toast.error('删除分类失败');
|
||
console.error(err);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 打开创建分类模态框
|
||
const openCreateModal = () => {
|
||
setCategoryName('');
|
||
setCategoryDescription('');
|
||
setParentCategory('');
|
||
setShowCreateModal(true);
|
||
};
|
||
|
||
// 打开模板模态框
|
||
const openTemplateModal = () => {
|
||
setSelectedTemplate('');
|
||
setShowTemplateModal(true);
|
||
};
|
||
|
||
// 打开编辑分类模态框
|
||
const openEditModal = (category) => {
|
||
setCurrentCategory(category);
|
||
setCategoryName(category.name);
|
||
setCategoryDescription(category.description);
|
||
setParentCategory(category.parent_id || ''); // 设置当前父分类
|
||
setShowEditModal(true);
|
||
};
|
||
|
||
// 辅助函数：生成父分类选项（扁平化列表）
|
||
const getParentOptions = (cats, level = 0) => {
|
||
let options = [];
|
||
cats.forEach(cat => {
|
||
options.push({
|
||
id: cat.id,
|
||
name: '— '.repeat(level) + cat.name
|
||
});
|
||
if (cat.children && cat.children.length > 0) {
|
||
options = options.concat(getParentOptions(cat.children, level + 1));
|
||
}
|
||
});
|
||
return options;
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="d-flex justify-content-center align-items-center vh-100">
|
||
<div className="spinner-border text-primary" role="status">
|
||
<span className="visually-hidden">Loading...</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="category-management-container">
|
||
<div className="d-flex justify-content-between align-items-center mb-4">
|
||
<h1 className="category-title">分类管理</h1>
|
||
<div className="category-actions">
|
||
{/*<button */}
|
||
{/* className="btn btn-success me-2"*/}
|
||
{/* onClick={openTemplateModal}*/}
|
||
{/*>*/}
|
||
{/* 应用模板*/}
|
||
{/*</button>*/}
|
||
<button className="btn-admin-primary" onClick={openCreateModal}>
|
||
<i className="bi bi-plus-circle me-2"></i>添加分类
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card">
|
||
<div className="card-body">
|
||
<div className="table-responsive">
|
||
<table className="table table-hover">
|
||
<thead className="category-table-header">
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>名称</th>
|
||
<th>描述</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="category-table-body">
|
||
{categories && categories.length > 0 ? (
|
||
renderCategoryList(categories)
|
||
) : (
|
||
<tr>
|
||
<td colSpan="4" className="text-center">暂无分类数据</td>
|
||
</tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 创建分类模态框 */}
|
||
{showCreateModal && (
|
||
<div className="modal-overlay" onClick={() => setShowCreateModal(false)}>
|
||
<div className="admin-modal" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h5 className="modal-title">创建分类</h5>
|
||
<button className="modal-close" onClick={() => setShowCreateModal(false)}>×</button>
|
||
</div>
|
||
<div className="modal-body">
|
||
<div className="mb-3">
|
||
<label className="form-label">分类名称</label>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={categoryName}
|
||
onChange={(e) => setCategoryName(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="mb-3">
|
||
<label className="form-label">描述</label>
|
||
<textarea
|
||
className="form-control"
|
||
rows="3"
|
||
value={categoryDescription}
|
||
onChange={(e) => setCategoryDescription(e.target.value)}
|
||
></textarea>
|
||
</div>
|
||
<div className="mb-3">
|
||
<label className="form-label">父分类 (可选)</label>
|
||
<select
|
||
className="form-select"
|
||
value={parentCategory}
|
||
onChange={(e) => setParentCategory(e.target.value)}
|
||
>
|
||
<option value="">无</option>
|
||
{getParentOptions(categories).map(cat => (
|
||
<option key={cat.id} value={cat.id}>
|
||
{cat.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div className="modal-footer">
|
||
<button className="btn-admin-outline-secondary" onClick={() => setShowCreateModal(false)}>
|
||
取消
|
||
</button>
|
||
<button className="btn-admin-outline-primary" onClick={createCategory}>
|
||
创建
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 编辑分类模态框 */}
|
||
{showEditModal && (
|
||
<div className="modal show" style={{ display: 'block' }}>
|
||
<div className="modal-dialog">
|
||
<div className="modal-content">
|
||
<div className="modal-header">
|
||
<h5 className="modal-title">编辑分类</h5>
|
||
<button
|
||
type="button"
|
||
className="btn-close"
|
||
onClick={() => setShowEditModal(false)}
|
||
></button>
|
||
</div>
|
||
<div className="modal-body">
|
||
<div className="mb-3">
|
||
<label className="form-label">分类名称</label>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={categoryName}
|
||
onChange={(e) => setCategoryName(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="mb-3">
|
||
<label className="form-label">描述</label>
|
||
<textarea
|
||
className="form-control"
|
||
rows="3"
|
||
value={categoryDescription}
|
||
onChange={(e) => setCategoryDescription(e.target.value)}
|
||
></textarea>
|
||
</div>
|
||
{/* 父分类不允许直接修改，因为会影响路径，由后端处理 */}
|
||
{currentCategory && currentCategory.parent_id && (
|
||
<div className="mb-3">
|
||
<label className="form-label">父分类</label>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={getParentOptions(categories).find(cat => cat.id === currentCategory.parent_id)?.name || '无'}
|
||
disabled
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="modal-footer">
|
||
<button
|
||
type="button"
|
||
className="btn btn-secondary"
|
||
onClick={() => setShowEditModal(false)}
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn btn-primary"
|
||
onClick={updateCategory}
|
||
>
|
||
更新
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 分类模板模态框 */}
|
||
{showTemplateModal && (
|
||
<div className="modal show" style={{ display: 'block' }}>
|
||
<div className="modal-dialog">
|
||
<div className="modal-content">
|
||
<div className="modal-header">
|
||
<h5 className="modal-title">应用分类模板</h5>
|
||
<button
|
||
type="button"
|
||
className="btn-close"
|
||
onClick={() => setShowTemplateModal(false)}
|
||
></button>
|
||
</div>
|
||
<div className="modal-body">
|
||
<div className="mb-3">
|
||
<label className="form-label">选择模板</label>
|
||
<select
|
||
className="form-select"
|
||
value={selectedTemplate}
|
||
onChange={(e) => setSelectedTemplate(e.target.value)}
|
||
>
|
||
<option value="">请选择模板</option>
|
||
{templates.map(template => (
|
||
<option key={template.id} value={template.id}>
|
||
{template.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div className="alert alert-info">
|
||
<small>应用模板将创建预设的分类结构，不会影响现有分类。</small>
|
||
</div>
|
||
</div>
|
||
<div className="modal-footer">
|
||
<button
|
||
type="button"
|
||
className="btn btn-secondary"
|
||
onClick={() => setShowTemplateModal(false)}
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn btn-success"
|
||
onClick={applyTemplate}
|
||
>
|
||
应用模板
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default CategoryManagement; |