20250922
This commit is contained in:
+372
-310
@@ -4,247 +4,155 @@
|
||||
<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>
|
||||
<!-- 引入Layui CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
|
||||
<!-- 引入Font Awesome -->
|
||||
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
|
||||
<!-- 引入自定义CSS -->
|
||||
<link href="{{ url_for('static', filename='css/custom.css') }}" rel="stylesheet">
|
||||
|
||||
<!-- 配置Tailwind CSS -->
|
||||
<!-- 引入Layui JS -->
|
||||
<script src="{{ url_for('static', filename='layui.js') }}"></script>
|
||||
|
||||
<!-- 初始化Layui组件 -->
|
||||
<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']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
layui.use(['layer', 'form', 'table'], function(){
|
||||
var layer = layui.layer;
|
||||
var form = layui.form;
|
||||
var table = layui.table;
|
||||
|
||||
// 渲染所有表单元素
|
||||
form.render();
|
||||
});
|
||||
</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">
|
||||
<body>
|
||||
<!-- 引入统一的顶部导航栏 -->
|
||||
{% 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 class="content-container">
|
||||
<div class="content-wrapper">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-users"></i> 用户管理
|
||||
<a href="{{ url_for('query') }}" class="layui-btn layui-btn-xs layui-btn-primary" style="float: right;">
|
||||
<i class="fa fa-arrow-left"></i> 返回主页面
|
||||
</a>
|
||||
</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 class="card-body">
|
||||
<!-- 消息提示区域 -->
|
||||
<div id="messageContainer" class="mb-6 hidden">
|
||||
|
||||
<!-- 消息提示区域 -->
|
||||
<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>
|
||||
|
||||
<div class="layui-text" style="text-align: center; margin-bottom: 20px;">
|
||||
<div style="width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
|
||||
<i class="fa fa-users" style="font-size: 40px; color: #009688;"></i>
|
||||
</div>
|
||||
<p style="color: #666;">管理系统用户、审核登录权限、修改部门信息和初始化密码</p>
|
||||
</div>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="mb-6">
|
||||
<div class="layui-form" style="margin-bottom: 15px;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-inline" style="width: 180px;">
|
||||
<input type="text" id="searchUsername" placeholder="输入用户名搜索" class="layui-input">
|
||||
</div>
|
||||
<label class="layui-form-label">部门</label>
|
||||
<div class="layui-input-inline" style="width: 120px;">
|
||||
<select id="filterDepartment" class="layui-select" lay-search>
|
||||
<option value="">所有部门</option>
|
||||
{% for dept in departments %}
|
||||
<option value="{{ dept }}">{{ dept }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<label class="layui-form-label">状态</label>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<select id="filterStatus" class="layui-select">
|
||||
<option value="">所有状态</option>
|
||||
<option value="active">已启用</option>
|
||||
<option value="inactive">已禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<button id="searchButton" onclick="searchUsers()" class="layui-btn layui-btn-normal">
|
||||
<i class="fa fa-search mr-1"></i> 搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户列表表格 -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="layui-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户名</th>
|
||||
<th>姓名</th>
|
||||
<th>部门</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="usersTableBody">
|
||||
<!-- 用户数据将通过JavaScript动态加载 -->
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页控制 -->
|
||||
<div class="layui-form-item" style="text-align: center; margin-top: 20px;">
|
||||
<div class="layui-input-block">
|
||||
<span id="paginationInfo" class="layui-btn layui-btn-primary layui-btn-radius" style="margin-right: 20px;">
|
||||
显示 <span id="startItem" style="color: #1E9FFF;">1</span> 至 <span id="endItem" style="color: #1E9FFF;">10</span> 条，共 <span id="totalItems" style="color: #1E9FFF;">0</span> 条记录
|
||||
</span>
|
||||
<button id="prevPage" class="layui-btn layui-btn-radius" disabled>
|
||||
<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 id="nextPage" class="layui-btn layui-btn-radius">
|
||||
下一页 <i class="fa fa-chevron-right"></i>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 页脚 -->
|
||||
{% 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>
|
||||
<!-- 用于存储弹窗数据的隐藏字段 -->
|
||||
<input type="hidden" id="editUserId">
|
||||
<input type="hidden" id="editUsername">
|
||||
<input type="hidden" id="resetUserId">
|
||||
<input type="hidden" id="resetUsername">
|
||||
|
||||
<!-- 部门选项数据 -->
|
||||
<script id="departmentOptions" type="application/json">
|
||||
[{% for dept in departments %}{{ dept | tojson }}{% if not loop.last %},{% endif %}{% endfor %}]
|
||||
</script>
|
||||
|
||||
<!-- 安全转义函数 -->
|
||||
<script>
|
||||
// HTML转义函数，防止XSS攻击
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 用户管理相关JavaScript -->
|
||||
<script>
|
||||
// 当前页码和每页显示数量
|
||||
@@ -252,6 +160,7 @@
|
||||
const pageSize = 10;
|
||||
let totalUsers = 0;
|
||||
let usersData = [];
|
||||
let isLoading = false; // 添加加载状态标志
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
@@ -279,13 +188,32 @@
|
||||
}
|
||||
});
|
||||
|
||||
// 绑定模态框点击外部关闭事件
|
||||
bindModalOutsideClick('editDepartmentModal');
|
||||
bindModalOutsideClick('resetPasswordModal');
|
||||
// 使用layui弹窗，不再需要绑定模态框点击外部关闭事件
|
||||
});
|
||||
|
||||
// 加载用户列表
|
||||
function loadUsers() {
|
||||
if (isLoading) return;
|
||||
|
||||
isLoading = true;
|
||||
// 显示加载状态
|
||||
const loadingRow = document.getElementById('loadingRow');
|
||||
if (loadingRow) {
|
||||
loadingRow.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// 清空表格内容
|
||||
const tableBody = document.getElementById('usersTableBody');
|
||||
if (tableBody) {
|
||||
// 只保留loadingRow元素
|
||||
const children = Array.from(tableBody.children);
|
||||
children.forEach(child => {
|
||||
if (child.id !== 'loadingRow') {
|
||||
tableBody.removeChild(child);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
apiRequest('/api/users')
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
@@ -299,13 +227,28 @@
|
||||
.catch(error => {
|
||||
console.error('加载用户列表时发生错误:', error);
|
||||
showMessage('网络错误，请稍后重试', false);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading = false;
|
||||
// 隐藏加载状态
|
||||
if (loadingRow) {
|
||||
loadingRow.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 渲染用户表格
|
||||
function renderUsersTable() {
|
||||
const tableBody = document.getElementById('usersTableBody');
|
||||
tableBody.innerHTML = '';
|
||||
if (!tableBody) return;
|
||||
|
||||
// 清空表格内容，但保留loadingRow
|
||||
const children = Array.from(tableBody.children);
|
||||
children.forEach(child => {
|
||||
if (child.id !== 'loadingRow') {
|
||||
tableBody.removeChild(child);
|
||||
}
|
||||
});
|
||||
|
||||
// 计算当前页的用户数据
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
@@ -313,43 +256,56 @@
|
||||
const currentUsers = usersData.slice(startIndex, endIndex);
|
||||
|
||||
// 更新分页信息
|
||||
document.getElementById('startItem').textContent = startIndex + 1;
|
||||
document.getElementById('endItem').textContent = endIndex;
|
||||
document.getElementById('totalItems').textContent = totalUsers;
|
||||
const startItemEl = document.getElementById('startItem');
|
||||
const endItemEl = document.getElementById('endItem');
|
||||
const totalItemsEl = document.getElementById('totalItems');
|
||||
if (startItemEl) startItemEl.textContent = startIndex + 1;
|
||||
if (endItemEl) endItemEl.textContent = endIndex;
|
||||
if (totalItemsEl) totalItemsEl.textContent = totalUsers;
|
||||
|
||||
// 更新分页按钮状态
|
||||
document.getElementById('prevPage').disabled = currentPage === 1;
|
||||
document.getElementById('nextPage').disabled = currentPage === Math.ceil(totalUsers / pageSize);
|
||||
const prevPageBtn = document.getElementById('prevPage');
|
||||
const nextPageBtn = document.getElementById('nextPage');
|
||||
if (prevPageBtn) prevPageBtn.disabled = currentPage === 1;
|
||||
if (nextPageBtn) nextPageBtn.disabled = currentPage === Math.ceil(totalUsers / pageSize);
|
||||
|
||||
// 渲染用户行
|
||||
currentUsers.forEach(user => {
|
||||
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';
|
||||
// 状态样式 - 使用layui风格
|
||||
const statusClass = user.status === 'active' ? 'layui-bg-green' : 'layui-bg-red';
|
||||
const statusText = user.status === 'active' ? '已启用' : '已禁用';
|
||||
|
||||
// 转义用户输入以防止XSS
|
||||
const safeUsername = escapeHtml(user.username);
|
||||
const safeName = escapeHtml(user.name);
|
||||
const safeDepartment = escapeHtml(user.department);
|
||||
|
||||
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}">
|
||||
<td>${safeUsername}</td>
|
||||
<td>${safeName}</td>
|
||||
<td>${safeDepartment}</td>
|
||||
<td>
|
||||
<span class="layui-badge ${statusClass}" style="padding: 0 10px;">
|
||||
<i class="fa ${user.status === 'active' ? 'fa-check-circle mr-1' : 'fa-times-circle mr-1'}"></i>
|
||||
${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">
|
||||
<td>
|
||||
<button onclick="toggleUserStatus(${user.id}, '${safeUsername}', '${user.status}')"
|
||||
class="layui-btn layui-btn-xs layui-btn-primary">
|
||||
<i class="fa ${user.status === 'active' ? 'fa-lock mr-1' : 'fa-unlock mr-1'}"></i>
|
||||
${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 onclick="showEditDepartmentModal(${user.id}, '${safeUsername}', '${safeName}', '${safeDepartment}')"
|
||||
class="layui-btn layui-btn-xs layui-btn-normal">
|
||||
<i class="fa fa-building mr-1"></i>
|
||||
修改部门
|
||||
</button>
|
||||
<button onclick="showResetPasswordModal(${user.id}, '${user.username}')"
|
||||
class="text-primary hover:text-primary/80">
|
||||
<button onclick="showResetPasswordModal(${user.id}, '${safeUsername}')"
|
||||
class="layui-btn layui-btn-xs layui-btn-warm">
|
||||
<i class="fa fa-key mr-1"></i>
|
||||
初始化密码
|
||||
</button>
|
||||
</td>
|
||||
@@ -358,13 +314,16 @@
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
|
||||
// 如果没有数据，显示空状态
|
||||
// 如果没有数据，显示空状态 - 使用layUI风格
|
||||
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 colspan="5" style="text-align: center; padding: 40px 0; color: #999;">
|
||||
<div class="layui-none">
|
||||
<i class="fa fa-user-circle-o text-5xl mb-4" style="opacity: 0.3;"></i>
|
||||
<p class="layui-text" style="font-size: 16px;">暂无用户数据</p>
|
||||
<p style="color: #ccc; margin-top: 10px;">请添加新用户或等待其他用户注册</p>
|
||||
</div>
|
||||
</td>
|
||||
`;
|
||||
tableBody.appendChild(emptyRow);
|
||||
@@ -373,6 +332,15 @@
|
||||
|
||||
// 搜索用户
|
||||
function searchUsers() {
|
||||
if (isLoading) return;
|
||||
|
||||
const searchButton = document.getElementById('searchButton');
|
||||
const originalText = searchButton.innerHTML;
|
||||
|
||||
isLoading = true;
|
||||
searchButton.disabled = true;
|
||||
searchButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 搜索中...';
|
||||
|
||||
const searchUsername = document.getElementById('searchUsername').value.toLowerCase().trim();
|
||||
const filterDepartment = document.getElementById('filterDepartment').value;
|
||||
const filterStatus = document.getElementById('filterStatus').value;
|
||||
@@ -388,7 +356,7 @@
|
||||
return matchesUsername && matchesDepartment && matchesStatus;
|
||||
});
|
||||
|
||||
totalUsers = data.total;
|
||||
totalUsers = usersData.length;
|
||||
currentPage = 1; // 重置到第一页
|
||||
renderUsersTable();
|
||||
} else {
|
||||
@@ -398,15 +366,24 @@
|
||||
.catch(error => {
|
||||
console.error('搜索用户时发生错误:', error);
|
||||
showMessage('网络错误，请稍后重试', false);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading = false;
|
||||
searchButton.disabled = false;
|
||||
searchButton.innerHTML = originalText;
|
||||
});
|
||||
}
|
||||
|
||||
// 切换用户状态
|
||||
function toggleUserStatus(userId, username, currentStatus) {
|
||||
if (isLoading) return;
|
||||
|
||||
const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
|
||||
const confirmMessage = `确定要${newStatus === 'active' ? '启用' : '禁用'}用户 ${username} 吗？`;
|
||||
|
||||
if (confirm(confirmMessage)) {
|
||||
isLoading = true;
|
||||
|
||||
apiRequest('{{ url_for('user.update_user_status') }}', 'POST', {
|
||||
user_id: userId,
|
||||
status: newStatus
|
||||
@@ -426,40 +403,102 @@
|
||||
.catch(error => {
|
||||
console.error('更新用户状态时发生错误:', error);
|
||||
showMessage('网络错误，请稍后重试', false);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 显示修改部门弹窗
|
||||
// 显示修改部门弹窗（使用layui）
|
||||
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;
|
||||
// 获取部门选项
|
||||
const departments = JSON.parse(document.getElementById('departmentOptions').textContent);
|
||||
let departmentOptionsHtml = '';
|
||||
departments.forEach(dept => {
|
||||
const selected = dept === department ? 'selected' : '';
|
||||
departmentOptionsHtml += `<option value="${dept}" ${selected}>${dept}</option>`;
|
||||
});
|
||||
|
||||
// 创建美化后的弹窗内容 - 参照初始化密码弹窗样式
|
||||
const content = `
|
||||
<div class="layui-text">
|
||||
<!-- 表单主体 - 使用layUI风格 -->
|
||||
<form class="layui-form" style="padding: 20px;">
|
||||
<!-- 用户名列 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-block" style="max-width: 300px;">
|
||||
<input type="text" value="${username}" readonly class="layui-input layui-disabled">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 姓名列 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">姓名</label>
|
||||
<div class="layui-input-block" style="max-width: 300px;">
|
||||
<input type="text" id="layuiEditName" value="${name}" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 部门选择 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">部门</label>
|
||||
<div class="layui-input-block" style="max-width: 300px;">
|
||||
<input type="text" id="layuiEditDepartment" value="${department}" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux" style="color: #666; margin-top: 5px;">输入新的部门名称后点击保存</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 打开美化后的layui弹窗 - 参照初始化密码弹窗样式
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '<i class="fa fa-building-o"></i> 修改部门信息',
|
||||
area: ['500px', '380px'],
|
||||
offset: '10%',
|
||||
shade: 0.3,
|
||||
shadeClose: false,
|
||||
anim: 2,
|
||||
content: content,
|
||||
btn: ['保存修改', '取消'],
|
||||
btnAlign: 'c',
|
||||
btnClass: ['layui-btn layui-btn-normal', 'layui-btn layui-btn-primary'],
|
||||
skin: 'layui-layer-molv',
|
||||
success: function(layero, index) {
|
||||
// 确保部门输入框在弹窗中可以正常交互
|
||||
const inputElement = layero.find('#layuiEditDepartment')[0];
|
||||
if (inputElement) {
|
||||
// 移除可能阻止交互的属性
|
||||
inputElement.removeAttribute('disabled');
|
||||
inputElement.style.pointerEvents = 'auto';
|
||||
// 聚焦到输入框
|
||||
inputElement.focus();
|
||||
}
|
||||
},
|
||||
btn1: function(index, layero) {
|
||||
const newDepartment = document.getElementById('layuiEditDepartment').value;
|
||||
// 获取修改后的姓名值
|
||||
const newName = layero.find('input[type="text"]')[1].value;
|
||||
saveDepartmentChanges(userId, username, newName, newDepartment, index);
|
||||
},
|
||||
btn2: function(index, layero) {
|
||||
layer.close(index);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
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;
|
||||
|
||||
// 保存部门和姓名修改
|
||||
function saveDepartmentChanges(userId, username, newName, newDepartment, layerIndex) {
|
||||
fetch('{{ url_for('user.update_user_department') }}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -467,44 +506,73 @@
|
||||
},
|
||||
body: JSON.stringify({
|
||||
user_id: userId,
|
||||
name: newName,
|
||||
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);
|
||||
if (data.success) {
|
||||
// 关闭弹窗
|
||||
layer.close(layerIndex);
|
||||
|
||||
// 显示成功消息，带图标和动画效果
|
||||
layer.msg(data.message || '部门信息更新成功', {
|
||||
icon: 1,
|
||||
anim: 0,
|
||||
time: 2000,
|
||||
end: function() {
|
||||
// 重新加载用户列表
|
||||
loadUsers();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 显示错误消息，带图标和动画效果
|
||||
layer.msg(data.error || '部门信息更新失败', {
|
||||
icon: 5,
|
||||
anim: 6,
|
||||
time: 2000
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('更新部门信息时发生错误:', error);
|
||||
|
||||
// 显示网络错误消息，带图标和动画效果
|
||||
layer.msg('网络错误，请稍后重试', {
|
||||
icon: 5,
|
||||
anim: 6,
|
||||
time: 2000
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 显示初始化密码弹窗
|
||||
// 显示初始化密码弹窗（使用layui）
|
||||
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');
|
||||
// 打开layui确认弹窗
|
||||
layer.confirm(
|
||||
`<div class="layui-text">
|
||||
<p>确定要初始化用户 <span style="font-weight: 500;">${username}</span> 的密码吗？</p>
|
||||
<p style="color: #666; margin-top: 10px;">初始化后，密码将重置为默认值：<code class="layui-code">default123</code></p>
|
||||
</div>`,
|
||||
{
|
||||
title: '初始化密码',
|
||||
btn: ['确定初始化', '取消'],
|
||||
area: ['450px', '200px'],
|
||||
btn1: function(index) {
|
||||
confirmResetPassword(userId, username, index);
|
||||
},
|
||||
skin: 'layui-layer-molv'
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// 确认初始化密码
|
||||
function confirmResetPassword() {
|
||||
const userId = document.getElementById('resetUserId').value;
|
||||
const username = document.getElementById('resetUsername').value;
|
||||
|
||||
function confirmResetPassword(userId, username, layerIndex) {
|
||||
fetch('{{ url_for('user.reset_user_password') }}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -517,24 +585,18 @@
|
||||
})
|
||||
.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);
|
||||
});
|
||||
if (data.success) {
|
||||
showMessage(data.message || '密码初始化成功', true);
|
||||
layer.close(layerIndex); // 关闭弹窗
|
||||
} else {
|
||||
showMessage(data.error || '密码初始化失败', false);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('初始化密码时发生错误:', error);
|
||||
showMessage('网络错误，请稍后重试', false);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user