507 lines
17 KiB
JavaScript
507 lines
17 KiB
JavaScript
|
import React, { useState, useEffect, useRef } from 'react';
|
|||
|
|
import axios from '../../services/axios';
|
|||
|
|
import { toast } from 'react-toastify';
|
|||
|
|
|
|||
|
|
// 添加全局样式
|
|||
|
|
const globalStyles = {
|
|||
|
|
modalOpen: {
|
|||
|
|
overflow: 'hidden',
|
|||
|
|
},
|
|||
|
|
cursorPointer: {
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
},
|
|||
|
|
pageContainer: {
|
|||
|
|
padding: '20px',
|
|||
|
|
backgroundColor: '#f8f9fa',
|
|||
|
|
minHeight: 'calc(100vh - 56px)',
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const CategoryPermissionManagement = () => {
|
|||
|
|
const [users, setUsers] = useState([]);
|
|||
|
|
const [categories, setCategories] = useState([]);
|
|||
|
|
const [permissions, setPermissions] = useState([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [selectedUser, setSelectedUser] = useState(null);
|
|||
|
|
const [selectedCategories, setSelectedCategories] = useState([]);
|
|||
|
|
const [inheritToChildren, setInheritToChildren] = useState(true);
|
|||
|
|
const [showPermissionModal, setShowPermissionModal] = useState(false);
|
|||
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|||
|
|
const [searchResults, setSearchResults] = useState([]);
|
|||
|
|
const [isSearching, setIsSearching] = useState(false);
|
|||
|
|
const searchTimeoutRef = useRef(null);
|
|||
|
|
|
|||
|
|
// 获取用户列表
|
|||
|
|
const fetchUsers = async (search = '') => {
|
|||
|
|
try {
|
|||
|
|
const params = {};
|
|||
|
|
if (search) {
|
|||
|
|
params.search = search;
|
|||
|
|
}
|
|||
|
|
const res = await axios.get('/api/admin/users', { params });
|
|||
|
|
if (search) {
|
|||
|
|
setSearchResults(res.data.users);
|
|||
|
|
} else {
|
|||
|
|
setUsers(res.data.users);
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error('获取用户列表失败');
|
|||
|
|
console.error(err);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取分类列表
|
|||
|
|
const fetchCategories = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await axios.get('/api/admin/categories');
|
|||
|
|
// 检查返回的数据结构
|
|||
|
|
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 = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 确保每个分类对象都有id和name属性
|
|||
|
|
const formattedCategories = categoriesData.map(cat => {
|
|||
|
|
return {
|
|||
|
|
...cat,
|
|||
|
|
id: cat.id || cat._id || cat.category_id || '',
|
|||
|
|
name: cat.name || cat.category_name || '未命名分类',
|
|||
|
|
children: cat.children || []
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
setCategories(formattedCategories);
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error('获取分类列表失败');
|
|||
|
|
console.error(err);
|
|||
|
|
setCategories([]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取权限列表
|
|||
|
|
const fetchPermissions = async (userId = null) => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
const params = {};
|
|||
|
|
if (userId) {
|
|||
|
|
params.user_id = userId;
|
|||
|
|
}
|
|||
|
|
const res = await axios.get('/api/admin/category-permissions', { params });
|
|||
|
|
setPermissions(res.data.permissions);
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error('获取权限列表失败');
|
|||
|
|
console.error(err);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchUsers();
|
|||
|
|
fetchCategories();
|
|||
|
|
fetchPermissions();
|
|||
|
|
|
|||
|
|
return () => {
|
|||
|
|
if (searchTimeoutRef.current) {
|
|||
|
|
clearTimeout(searchTimeoutRef.current);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
// 处理搜索输入变化
|
|||
|
|
const handleSearchChange = (e) => {
|
|||
|
|
const query = e.target.value;
|
|||
|
|
setSearchQuery(query);
|
|||
|
|
|
|||
|
|
// 清除之前的定时器
|
|||
|
|
if (searchTimeoutRef.current) {
|
|||
|
|
clearTimeout(searchTimeoutRef.current);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (query.trim()) {
|
|||
|
|
searchTimeoutRef.current = setTimeout(() => {
|
|||
|
|
setIsSearching(true);
|
|||
|
|
fetchUsers(query);
|
|||
|
|
}, 300);
|
|||
|
|
} else {
|
|||
|
|
setIsSearching(false);
|
|||
|
|
setSearchResults([]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 清除搜索
|
|||
|
|
const clearSearch = () => {
|
|||
|
|
setSearchQuery('');
|
|||
|
|
setIsSearching(false);
|
|||
|
|
setSearchResults([]);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 选择用户时获取该用户的权限
|
|||
|
|
const handleUserSelect = (userId) => {
|
|||
|
|
setSelectedUser(userId);
|
|||
|
|
fetchPermissions(userId);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 打开权限分配模态框
|
|||
|
|
const handleOpenPermissionModal = (userId) => {
|
|||
|
|
setSelectedUser(userId);
|
|||
|
|
setSelectedCategories([]);
|
|||
|
|
setInheritToChildren(true);
|
|||
|
|
setShowPermissionModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 处理分类选择
|
|||
|
|
const handleCategorySelect = (categoryId) => {
|
|||
|
|
if (selectedCategories.includes(categoryId)) {
|
|||
|
|
setSelectedCategories(selectedCategories.filter(id => id !== categoryId));
|
|||
|
|
} else {
|
|||
|
|
setSelectedCategories([...selectedCategories, categoryId]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 批量分配权限
|
|||
|
|
const handleBatchAssignPermissions = async () => {
|
|||
|
|
if (!selectedUser || selectedCategories.length === 0) {
|
|||
|
|
toast.error('请选择用户和至少一个分类');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await axios.post(`/api/admin/users/${selectedUser}/category-permissions/batch`, {
|
|||
|
|
category_ids: selectedCategories,
|
|||
|
|
inherit_to_children: inheritToChildren
|
|||
|
|
});
|
|||
|
|
toast.success(res.data.message);
|
|||
|
|
setShowPermissionModal(false);
|
|||
|
|
fetchPermissions(selectedUser);
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error('分配权限失败: ' + (err.response?.data?.message || err.message));
|
|||
|
|
console.error(err);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 删除权限
|
|||
|
|
const handleDeletePermission = async (permissionId) => {
|
|||
|
|
if (!window.confirm('确定要删除此权限吗？')) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await axios.delete(`/api/admin/category-permissions/${permissionId}`);
|
|||
|
|
toast.success('权限删除成功');
|
|||
|
|
fetchPermissions(selectedUser);
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error('删除权限失败');
|
|||
|
|
console.error(err);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 更新权限继承设置
|
|||
|
|
const handleUpdatePermission = async (permissionId, inheritToChildren) => {
|
|||
|
|
try {
|
|||
|
|
await axios.put(`/api/admin/category-permissions/${permissionId}`, {
|
|||
|
|
inherit_to_children: inheritToChildren
|
|||
|
|
});
|
|||
|
|
toast.success('权限更新成功');
|
|||
|
|
fetchPermissions(selectedUser);
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error('更新权限失败');
|
|||
|
|
console.error(err);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 递归渲染分类树
|
|||
|
|
const renderCategoryTree = (categories, level = 0) => {
|
|||
|
|
return categories.map(category => (
|
|||
|
|
<div key={category.id}>
|
|||
|
|
<div
|
|||
|
|
className="category-item d-flex align-items-center py-1"
|
|||
|
|
style={{ paddingLeft: `${level * 20}px` }}
|
|||
|
|
>
|
|||
|
|
<div className="form-check mb-0">
|
|||
|
|
<input
|
|||
|
|
className="form-check-input"
|
|||
|
|
type="checkbox"
|
|||
|
|
id={`category-${category.id}`}
|
|||
|
|
checked={selectedCategories.includes(category.id)}
|
|||
|
|
onChange={() => handleCategorySelect(category.id)}
|
|||
|
|
/>
|
|||
|
|
<label
|
|||
|
|
className="form-check-label"
|
|||
|
|
htmlFor={`category-${category.id}`}
|
|||
|
|
style={{ cursor: 'pointer' }}
|
|||
|
|
>
|
|||
|
|
{category.name}
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{category.children && category.children.length > 0 && (
|
|||
|
|
renderCategoryTree(category.children, level + 1)
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取分类名称
|
|||
|
|
const getCategoryName = (categoryId) => {
|
|||
|
|
const findCategory = (categories, id) => {
|
|||
|
|
for (const category of categories) {
|
|||
|
|
if (category.id === id) {
|
|||
|
|
return category.name;
|
|||
|
|
}
|
|||
|
|
if (category.children && category.children.length > 0) {
|
|||
|
|
const found = findCategory(category.children, id);
|
|||
|
|
if (found) return found;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return '未知分类';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return findCategory(categories, categoryId);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取用户名称
|
|||
|
|
const getUserName = (userId) => {
|
|||
|
|
const user = users.find(u => u.id === userId);
|
|||
|
|
return user ? user.username : '未知用户';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 当模态框打开时应用全局样式
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (showPermissionModal) {
|
|||
|
|
document.body.style.overflow = 'hidden';
|
|||
|
|
} else {
|
|||
|
|
document.body.style.overflow = '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return () => {
|
|||
|
|
document.body.style.overflow = '';
|
|||
|
|
};
|
|||
|
|
}, [showPermissionModal]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="container-fluid" style={globalStyles.pageContainer}>
|
|||
|
|
<div className="card shadow-sm mb-4">
|
|||
|
|
<div className="card-header bg-primary text-white">
|
|||
|
|
<h2 className="mb-0">分类权限管理</h2>
|
|||
|
|
</div>
|
|||
|
|
<div className="card-body">
|
|||
|
|
<div className="row mb-4">
|
|||
|
|
<div className="col-md-6">
|
|||
|
|
<div className="card shadow-sm">
|
|||
|
|
<div className="card-header bg-light">
|
|||
|
|
<h3 className="h5 mb-0">用户列表</h3>
|
|||
|
|
</div>
|
|||
|
|
<div className="card-body">
|
|||
|
|
<div className="mb-3">
|
|||
|
|
<div className="input-group">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
className="form-control"
|
|||
|
|
placeholder="搜索用户名或邮箱..."
|
|||
|
|
value={searchQuery}
|
|||
|
|
onChange={handleSearchChange}
|
|||
|
|
/>
|
|||
|
|
{searchQuery && (
|
|||
|
|
<button
|
|||
|
|
className="btn btn-outline-secondary"
|
|||
|
|
type="button"
|
|||
|
|
onClick={clearSearch}
|
|||
|
|
>
|
|||
|
|
<i className="bi bi-x"></i>
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="list-group" style={{ maxHeight: '400px', overflowY: 'auto' }}>
|
|||
|
|
{(isSearching ? searchResults : users).map(user => (
|
|||
|
|
<div
|
|||
|
|
key={user.id}
|
|||
|
|
className={`list-group-item list-group-item-action d-flex justify-content-between align-items-center ${selectedUser === user.id ? 'active' : ''}`}
|
|||
|
|
onClick={() => handleUserSelect(user.id)}
|
|||
|
|
style={{ cursor: 'pointer' }}
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<div>{user.username}</div>
|
|||
|
|
<small className="text-muted">{user.email}</small>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
className="btn btn-sm btn-primary"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
handleOpenPermissionModal(user.id);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
分配权限
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
{(isSearching ? searchResults : users).length === 0 && (
|
|||
|
|
<div className="list-group-item text-center text-muted">
|
|||
|
|
{isSearching ? '未找到匹配的用户' : '暂无用户数据'}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="col-md-6">
|
|||
|
|
<div className="card">
|
|||
|
|
<div className="card-header bg-primary text-white">权限列表</div>
|
|||
|
|
<div className="card-body">
|
|||
|
|
{loading ? (
|
|||
|
|
<div className="d-flex justify-content-center">
|
|||
|
|
<div className="spinner-border text-primary" role="status">
|
|||
|
|
<span className="visually-hidden">加载中...</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : permissions.length > 0 ? (
|
|||
|
|
<div className="table-responsive">
|
|||
|
|
<table className="table table-striped table-hover">
|
|||
|
|
<thead className="thead-light">
|
|||
|
|
<tr>
|
|||
|
|
<th>用户</th>
|
|||
|
|
<th>分类</th>
|
|||
|
|
<th>继承子分类</th>
|
|||
|
|
<th>操作</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{permissions.map(permission => (
|
|||
|
|
<tr key={permission.id}>
|
|||
|
|
<td>{getUserName(permission.user_id)}</td>
|
|||
|
|
<td>{getCategoryName(permission.category_id)}</td>
|
|||
|
|
<td>
|
|||
|
|
<div className="form-check form-switch">
|
|||
|
|
<input
|
|||
|
|
className="form-check-input"
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={permission.inherit_to_children}
|
|||
|
|
onChange={() => handleUpdatePermission(permission.id, !permission.inherit_to_children)}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
<button
|
|||
|
|
className="btn btn-sm btn-danger"
|
|||
|
|
onClick={() => handleDeletePermission(permission.id)}
|
|||
|
|
title="删除权限"
|
|||
|
|
>
|
|||
|
|
<i className="bi bi-trash"></i> 删除
|
|||
|
|
</button>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="alert alert-info">暂无权限数据</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 权限分配模态框 */}
|
|||
|
|
{showPermissionModal && (
|
|||
|
|
<>
|
|||
|
|
<div className="modal show d-block" tabIndex="-1" style={{ zIndex: 1050 }}>
|
|||
|
|
<div className="modal-dialog modal-lg">
|
|||
|
|
<div className="modal-content">
|
|||
|
|
<div className="modal-header bg-primary text-white">
|
|||
|
|
<h5 className="modal-title">为 {getUserName(selectedUser)} 分配分类权限</h5>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn-close btn-close-white"
|
|||
|
|
onClick={() => setShowPermissionModal(false)}
|
|||
|
|
></button>
|
|||
|
|
</div>
|
|||
|
|
<div className="modal-body">
|
|||
|
|
<div className="row">
|
|||
|
|
<div className="col-md-12 mb-3">
|
|||
|
|
<div className="form-check form-switch">
|
|||
|
|
<input
|
|||
|
|
className="form-check-input"
|
|||
|
|
type="checkbox"
|
|||
|
|
id="inheritToChildren"
|
|||
|
|
checked={inheritToChildren}
|
|||
|
|
onChange={() => setInheritToChildren(!inheritToChildren)}
|
|||
|
|
/>
|
|||
|
|
<label className="form-check-label" htmlFor="inheritToChildren">
|
|||
|
|
权限继承到子分类
|
|||
|
|
</label>
|
|||
|
|
<small className="form-text text-muted d-block">
|
|||
|
|
启用后，授予父分类权限将自动继承所有子分类权限
|
|||
|
|
</small>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="col-md-12">
|
|||
|
|
<div className="card">
|
|||
|
|
<div className="card-header bg-light">选择分类</div>
|
|||
|
|
<div className="card-body p-0">
|
|||
|
|
<div className="category-tree p-3" style={{ maxHeight: '300px', overflowY: 'auto' }}>
|
|||
|
|
{renderCategoryTree(categories)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="modal-footer">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn btn-secondary"
|
|||
|
|
onClick={() => setShowPermissionModal(false)}
|
|||
|
|
>
|
|||
|
|
<i className="bi bi-x-circle"></i> 取消
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn btn-primary"
|
|||
|
|
onClick={handleBatchAssignPermissions}
|
|||
|
|
disabled={selectedCategories.length === 0}
|
|||
|
|
>
|
|||
|
|
<i className="bi bi-check-circle"></i> 确认分配
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
className="modal-backdrop fade show"
|
|||
|
|
style={{ zIndex: 1040 }}
|
|||
|
|
onClick={() => setShowPermissionModal(false)}
|
|||
|
|
></div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 添加全局样式，防止模态框打开时页面滚动 */}
|
|||
|
|
{showPermissionModal && (
|
|||
|
|
<style>{`
|
|||
|
|
body {
|
|||
|
|
overflow: hidden !important;
|
|||
|
|
padding-right: 15px; /* 防止滚动条消失导致页面抖动 */
|
|||
|
|
}
|
|||
|
|
`}</style>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default CategoryPermissionManagement;
|