540 lines
25 KiB
HTML
540 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>车主信息查询系统 - 用户管理</title>
|
|
<!-- 引入Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- 引入Font Awesome -->
|
|
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
|
|
|
|
<!-- 配置Tailwind CSS -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#1890ff',
|
|
secondary: '#f0f2f5',
|
|
success: '#52c41a',
|
|
warning: '#faad14',
|
|
error: '#f5222d',
|
|
info: '#8c8c8c',
|
|
'primary-light': '#e6f7ff',
|
|
'table-header': '#fafafa'
|
|
},
|
|
fontFamily: {
|
|
sans: ['Microsoft YaHei', 'Arial', 'sans-serif']
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- 引入通用工具函数 -->
|
|
<script src="{{ url_for('static', filename='js/utils.js') }}"></script>
|
|
|
|
<!-- 自定义工具类 -->
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.card-shadow {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
|
}
|
|
.input-focus {
|
|
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
|
|
}
|
|
.table-hover {
|
|
@apply hover:bg-primary-light/30 transition-colors duration-150;
|
|
}
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.3s ease-out forwards;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-secondary min-h-screen font-sans">
|
|
{% include 'header.html' %}
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="container mx-auto px-4 pt-24 pb-12">
|
|
<!-- 返回按钮 -->
|
|
<div class="mb-6 flex justify-end">
|
|
<a href="{{ url_for('query') }}" class="inline-flex items-center text-primary hover:text-primary-dark transition-colors">
|
|
<i class="fa fa-arrow-left mr-2"></i> 返回主页面
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 页面标题 -->
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-bold text-gray-800">用户管理</h2>
|
|
<p class="text-gray-500 mt-1">管理系统用户、审核登录权限、修改部门信息和初始化密码</p>
|
|
</div>
|
|
|
|
<!-- 搜索框 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
|
|
<div class="flex flex-col md:flex-row gap-4">
|
|
<div class="flex-1">
|
|
<div class="relative">
|
|
<input type="text" id="searchUsername" placeholder="输入用户名搜索"
|
|
class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md input-focus">
|
|
<i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row gap-2">
|
|
<select id="filterDepartment" class="w-full md:w-auto px-4 py-2 border border-gray-300 rounded-md input-focus">
|
|
<option value="">所有部门</option>
|
|
{% for dept in departments %}
|
|
<option value="{{ dept }}">{{ dept }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<select id="filterStatus" class="w-full md:w-auto px-4 py-2 border border-gray-300 rounded-md input-focus">
|
|
<option value="">所有状态</option>
|
|
<option value="active">已启用</option>
|
|
<option value="inactive">已禁用</option>
|
|
</select>
|
|
<button onclick="searchUsers()" class="w-full md:w-auto bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
|
|
<i class="fa fa-search mr-1"></i> 搜索
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 消息提示区域 -->
|
|
<div id="messageContainer" class="mb-6 hidden">
|
|
<div id="successMessage" class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md flex items-center hidden">
|
|
<i class="fa fa-check-circle mr-2"></i>
|
|
<span></span>
|
|
</div>
|
|
<div id="errorMessage" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-center hidden">
|
|
<i class="fa fa-exclamation-circle mr-2"></i>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 用户列表表格 -->
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-table-header">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户名</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="usersTableBody" class="bg-white divide-y divide-gray-200">
|
|
<!-- 用户数据将通过JavaScript动态加载 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- 分页控制 -->
|
|
<div class="px-6 py-3 flex items-center justify-between border-t border-gray-200">
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-700">
|
|
显示 <span id="startItem">1</span> 至 <span id="endItem">10</span> 条，共 <span id="totalItems">0</span> 条记录
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
|
<button id="prevPage" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<span class="sr-only">上一页</span>
|
|
<i class="fa fa-chevron-left"></i>
|
|
</button>
|
|
<button id="nextPage" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<span class="sr-only">下一页</span>
|
|
<i class="fa fa-chevron-right"></i>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% include 'footer.html' %}
|
|
|
|
<!-- 修改部门信息弹窗 -->
|
|
<div id="editDepartmentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden transform transition-all animate-fade-in">
|
|
<div class="bg-primary text-white p-4 flex justify-between items-center">
|
|
<h3 class="text-lg font-medium">修改部门信息</h3>
|
|
<button onclick="closeEditDepartmentModal()" class="text-white hover:text-gray-200 transition-colors">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<input type="hidden" id="editUserId">
|
|
<input type="hidden" id="editUsername">
|
|
|
|
<div class="mb-4">
|
|
<label for="editUserName" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
|
|
<input type="text" id="editUserName" readonly class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 cursor-not-allowed">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="editUserRealName" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
|
|
<input type="text" id="editUserRealName" readonly class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 cursor-not-allowed">
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label for="editUserDepartment" class="block text-sm font-medium text-gray-700 mb-1">部门</label>
|
|
<select id="editUserDepartment" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus">
|
|
{% for dept in departments %}
|
|
<option value="{{ dept }}">{{ dept }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex space-x-4">
|
|
<button onclick="saveDepartmentChanges()" class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow">
|
|
保存修改
|
|
</button>
|
|
<button onclick="closeEditDepartmentModal()" class="flex-1 border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors">
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 初始化密码弹窗 -->
|
|
<div id="resetPasswordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden transform transition-all animate-fade-in">
|
|
<div class="bg-primary text-white p-4 flex justify-between items-center">
|
|
<h3 class="text-lg font-medium">初始化密码</h3>
|
|
<button onclick="closeResetPasswordModal()" class="text-white hover:text-gray-200 transition-colors">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<input type="hidden" id="resetUserId">
|
|
<input type="hidden" id="resetUsername">
|
|
|
|
<div class="mb-6">
|
|
<p class="text-gray-700 mb-2">确定要初始化用户 <span id="resetUserNameDisplay" class="font-medium"></span> 的密码吗？</p>
|
|
<p class="text-gray-500 text-sm">初始化后，密码将重置为默认值：<code class="bg-gray-100 px-1 py-0.5 rounded">default123</code></p>
|
|
</div>
|
|
|
|
<div class="flex space-x-4">
|
|
<button onclick="confirmResetPassword()" class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow">
|
|
确定初始化
|
|
</button>
|
|
<button onclick="closeResetPasswordModal()" class="flex-1 border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors">
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 用户管理相关JavaScript -->
|
|
<script>
|
|
// 当前页码和每页显示数量
|
|
let currentPage = 1;
|
|
const pageSize = 10;
|
|
let totalUsers = 0;
|
|
let usersData = [];
|
|
|
|
// 页面加载完成后初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadUsers();
|
|
|
|
// 绑定搜索按钮点击事件
|
|
document.getElementById('searchUsername').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
searchUsers();
|
|
}
|
|
});
|
|
|
|
// 绑定分页按钮点击事件
|
|
document.getElementById('prevPage').addEventListener('click', function() {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
renderUsersTable();
|
|
}
|
|
});
|
|
|
|
document.getElementById('nextPage').addEventListener('click', function() {
|
|
if (currentPage < Math.ceil(totalUsers / pageSize)) {
|
|
currentPage++;
|
|
renderUsersTable();
|
|
}
|
|
});
|
|
|
|
// 绑定模态框点击外部关闭事件
|
|
bindModalOutsideClick('editDepartmentModal');
|
|
bindModalOutsideClick('resetPasswordModal');
|
|
});
|
|
|
|
// 加载用户列表
|
|
function loadUsers() {
|
|
apiRequest('/api/users')
|
|
.then(data => {
|
|
if (data.success) {
|
|
usersData = data.data;
|
|
totalUsers = data.total;
|
|
renderUsersTable();
|
|
} else {
|
|
showMessage('加载用户列表失败：' + (data.error || '未知错误'), false);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('加载用户列表时发生错误:', error);
|
|
showMessage('网络错误，请稍后重试', false);
|
|
});
|
|
}
|
|
|
|
// 渲染用户表格
|
|
function renderUsersTable() {
|
|
const tableBody = document.getElementById('usersTableBody');
|
|
tableBody.innerHTML = '';
|
|
|
|
// 计算当前页的用户数据
|
|
const startIndex = (currentPage - 1) * pageSize;
|
|
const endIndex = Math.min(startIndex + pageSize, totalUsers);
|
|
const currentUsers = usersData.slice(startIndex, endIndex);
|
|
|
|
// 更新分页信息
|
|
document.getElementById('startItem').textContent = startIndex + 1;
|
|
document.getElementById('endItem').textContent = endIndex;
|
|
document.getElementById('totalItems').textContent = totalUsers;
|
|
|
|
// 更新分页按钮状态
|
|
document.getElementById('prevPage').disabled = currentPage === 1;
|
|
document.getElementById('nextPage').disabled = currentPage === Math.ceil(totalUsers / pageSize);
|
|
|
|
// 渲染用户行
|
|
currentUsers.forEach(user => {
|
|
const row = document.createElement('tr');
|
|
row.className = 'table-hover';
|
|
|
|
// 状态样式
|
|
const statusClass = user.status === 'active' ? 'bg-success/10 text-success' : 'bg-error/10 text-error';
|
|
const statusText = user.status === 'active' ? '已启用' : '已禁用';
|
|
|
|
row.innerHTML = `
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${user.username}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${user.name}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${user.department}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusClass}">
|
|
${statusText}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<button onclick="toggleUserStatus(${user.id}, '${user.username}', '${user.status}')"
|
|
class="text-primary hover:text-primary/80 mr-3">
|
|
${user.status === 'active' ? '禁用' : '启用'}
|
|
</button>
|
|
<button onclick="showEditDepartmentModal(${user.id}, '${user.username}', '${user.name}', '${user.department}')"
|
|
class="text-primary hover:text-primary/80 mr-3">
|
|
修改部门
|
|
</button>
|
|
<button onclick="showResetPasswordModal(${user.id}, '${user.username}')"
|
|
class="text-primary hover:text-primary/80">
|
|
初始化密码
|
|
</button>
|
|
</td>
|
|
`;
|
|
|
|
tableBody.appendChild(row);
|
|
});
|
|
|
|
// 如果没有数据，显示空状态
|
|
if (totalUsers === 0) {
|
|
const emptyRow = document.createElement('tr');
|
|
emptyRow.innerHTML = `
|
|
<td colspan="5" class="px-6 py-10 text-center text-gray-500">
|
|
<i class="fa fa-user-circle-o text-4xl mb-2 opacity-30"></i>
|
|
<p>暂无用户数据</p>
|
|
</td>
|
|
`;
|
|
tableBody.appendChild(emptyRow);
|
|
}
|
|
}
|
|
|
|
// 搜索用户
|
|
function searchUsers() {
|
|
const searchUsername = document.getElementById('searchUsername').value.toLowerCase().trim();
|
|
const filterDepartment = document.getElementById('filterDepartment').value;
|
|
const filterStatus = document.getElementById('filterStatus').value;
|
|
|
|
apiRequest('/api/users')
|
|
.then(data => {
|
|
if (data.success) {
|
|
// 应用过滤条件
|
|
usersData = data.data.filter(user => {
|
|
const matchesUsername = user.username.toLowerCase().includes(searchUsername);
|
|
const matchesDepartment = !filterDepartment || user.department === filterDepartment;
|
|
const matchesStatus = !filterStatus || user.status === filterStatus;
|
|
return matchesUsername && matchesDepartment && matchesStatus;
|
|
});
|
|
|
|
totalUsers = data.total;
|
|
currentPage = 1; // 重置到第一页
|
|
renderUsersTable();
|
|
} else {
|
|
showMessage('搜索用户失败：' + (data.error || '未知错误'), false);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('搜索用户时发生错误:', error);
|
|
showMessage('网络错误，请稍后重试', false);
|
|
});
|
|
}
|
|
|
|
// 切换用户状态
|
|
function toggleUserStatus(userId, username, currentStatus) {
|
|
const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
|
|
const confirmMessage = `确定要${newStatus === 'active' ? '启用' : '禁用'}用户 ${username} 吗？`;
|
|
|
|
if (confirm(confirmMessage)) {
|
|
apiRequest('{{ url_for('user.update_user_status') }}', 'POST', {
|
|
user_id: userId,
|
|
status: newStatus
|
|
}, {
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
.then(data => {
|
|
if (data.success) {
|
|
showMessage(data.message || '用户状态更新成功', true);
|
|
loadUsers(); // 重新加载用户列表
|
|
} else {
|
|
showMessage(data.error || '用户状态更新失败', false);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('更新用户状态时发生错误:', error);
|
|
showMessage('网络错误，请稍后重试', false);
|
|
});
|
|
}
|
|
}
|
|
|
|
// 显示修改部门弹窗
|
|
function showEditDepartmentModal(userId, username, name, department) {
|
|
document.getElementById('editUserId').value = userId;
|
|
document.getElementById('editUsername').value = username;
|
|
document.getElementById('editUserName').value = username;
|
|
document.getElementById('editUserRealName').value = name;
|
|
|
|
// 设置当前部门
|
|
const departmentSelect = document.getElementById('editUserDepartment');
|
|
for (let i = 0; i < departmentSelect.options.length; i++) {
|
|
if (departmentSelect.options[i].value === department) {
|
|
departmentSelect.selectedIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
showModal('editDepartmentModal');
|
|
}
|
|
|
|
// 关闭修改部门弹窗
|
|
function closeEditDepartmentModal() {
|
|
document.getElementById('editDepartmentModal').classList.add('hidden');
|
|
}
|
|
|
|
// 保存部门修改
|
|
function saveDepartmentChanges() {
|
|
const userId = document.getElementById('editUserId').value;
|
|
const username = document.getElementById('editUsername').value;
|
|
const newDepartment = document.getElementById('editUserDepartment').value;
|
|
|
|
fetch('{{ url_for('user.update_user_department') }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
user_id: userId,
|
|
department: newDepartment
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showMessage(data.message || '部门信息更新成功', true);
|
|
closeModal('editDepartmentModal');
|
|
loadUsers(); // 重新加载用户列表
|
|
} else {
|
|
showMessage(data.error || '部门信息更新失败', false);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('更新部门信息时发生错误:', error);
|
|
showMessage('网络错误，请稍后重试', false);
|
|
});
|
|
}
|
|
|
|
// 显示初始化密码弹窗
|
|
function showResetPasswordModal(userId, username) {
|
|
document.getElementById('resetUserId').value = userId;
|
|
document.getElementById('resetUsername').value = username;
|
|
document.getElementById('resetUserNameDisplay').textContent = username;
|
|
|
|
document.getElementById('resetPasswordModal').classList.remove('hidden');
|
|
}
|
|
|
|
// 关闭初始化密码弹窗
|
|
function closeResetPasswordModal() {
|
|
document.getElementById('resetPasswordModal').classList.add('hidden');
|
|
}
|
|
|
|
// 确认初始化密码
|
|
function confirmResetPassword() {
|
|
const userId = document.getElementById('resetUserId').value;
|
|
const username = document.getElementById('resetUsername').value;
|
|
|
|
fetch('{{ url_for('user.reset_user_password') }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
user_id: userId,
|
|
username: username
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showMessage(data.message || '密码初始化成功', true);
|
|
closeModal('resetPasswordModal');
|
|
} else {
|
|
showMessage(data.error || '密码初始化失败', false);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('初始化密码时发生错误:', error);
|
|
showMessage('网络错误，请稍后重试', false);
|
|
});
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html> |