240 lines
10 KiB
HTML
240 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}角色管理 - 图书管理系统{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/user-roles.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="roles-container">
|
|
<!-- 页面标题 -->
|
|
<div class="page-header">
|
|
<h1>角色管理</h1>
|
|
<div class="actions">
|
|
<button class="btn btn-primary" id="addRoleBtn">
|
|
<i class="fas fa-plus"></i> 添加角色
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 角色列表卡片 -->
|
|
<div class="role-list">
|
|
{% for role in roles %}
|
|
<div class="role-card" data-id="{{ role.id }}">
|
|
<div class="role-header">
|
|
<h3 class="role-name">{{ role.role_name }}</h3>
|
|
<div class="role-actions">
|
|
<button class="btn btn-sm btn-edit-role" title="编辑角色">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
{% if role.id not in [1, 2] %}
|
|
<button class="btn btn-sm btn-delete-role" title="删除角色">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="role-description">
|
|
{% if role.description %}
|
|
{{ role.description }}
|
|
{% else %}
|
|
<span class="text-muted">暂无描述</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="role-stats">
|
|
<div class="stat-item">
|
|
<i class="fas fa-users"></i> <span id="userCount-{{ role.id }}">--</span> 用户
|
|
</div>
|
|
{% if role.id == 1 %}
|
|
<div class="role-badge admin">管理员</div>
|
|
{% elif role.id == 2 %}
|
|
<div class="role-badge user">普通用户</div>
|
|
{% else %}
|
|
<div class="role-badge custom">自定义</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="no-data-message">
|
|
<i class="fas fa-users-slash"></i>
|
|
<p>暂无角色数据</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- 权限描述 -->
|
|
<div class="permissions-info">
|
|
<h3>角色权限说明</h3>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<table class="table permission-table">
|
|
<thead>
|
|
<tr>
|
|
<th>功能模块</th>
|
|
<th>管理员</th>
|
|
<th>普通用户</th>
|
|
<th>自定义角色</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>图书浏览</td>
|
|
<td><i class="fas fa-check text-success"></i></td>
|
|
<td><i class="fas fa-check text-success"></i></td>
|
|
<td><i class="fas fa-check text-success"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>借阅图书</td>
|
|
<td><i class="fas fa-check text-success"></i></td>
|
|
<td><i class="fas fa-check text-success"></i></td>
|
|
<td><i class="fas fa-check text-success"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>图书管理</td>
|
|
<td><i class="fas fa-check text-success"></i></td>
|
|
<td><i class="fas fa-times text-danger"></i></td>
|
|
<td>可配置</td>
|
|
</tr>
|
|
<tr>
|
|
<td>用户管理</td>
|
|
<td><i class="fas fa-check text-success"></i></td>
|
|
<td><i class="fas fa-times text-danger"></i></td>
|
|
<td>可配置</td>
|
|
</tr>
|
|
<tr>
|
|
<td>借阅管理</td>
|
|
<td><i class="fas fa-check text-success"></i></td>
|
|
<td><i class="fas fa-times text-danger"></i></td>
|
|
<td>可配置</td>
|
|
</tr>
|
|
<tr>
|
|
<td>库存管理</td>
|
|
<td><i class="fas fa-check text-success"></i></td>
|
|
<td><i class="fas fa-times text-danger"></i></td>
|
|
<td>可配置</td>
|
|
</tr>
|
|
<tr>
|
|
<td>统计分析</td>
|
|
<td><i class="fas fa-check text-success"></i></td>
|
|
<td><i class="fas fa-times text-danger"></i></td>
|
|
<td>可配置</td>
|
|
</tr>
|
|
<tr>
|
|
<td>系统设置</td>
|
|
<td><i class="fas fa-check text-success"></i></td>
|
|
<td><i class="fas fa-times text-danger"></i></td>
|
|
<td>可配置</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 角色编辑模态框 -->
|
|
<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="roleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="roleModalLabel">添加角色</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="roleForm">
|
|
<input type="hidden" id="roleId" value="">
|
|
|
|
<div class="form-group">
|
|
<label for="roleName">角色名称</label>
|
|
<input type="text" class="form-control" id="roleName" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="roleDescription">角色描述</label>
|
|
<textarea class="form-control" id="roleDescription" rows="3"></textarea>
|
|
</div>
|
|
|
|
<!-- 权限选择部分 -->
|
|
<div class="form-group" id="permissionsSection">
|
|
<label>角色权限</label>
|
|
<div class="alert alert-info" id="systemRoleAlert" style="display: none;">
|
|
<i class="fas fa-info-circle"></i> 系统内置角色的权限配置受到限制。
|
|
</div>
|
|
|
|
<div class="permissions-container">
|
|
<!-- 权限分组：图书管理 -->
|
|
<div class="permission-group">
|
|
<h6 class="permission-group-title">图书管理</h6>
|
|
<div class="permission-items" id="book-permissions">
|
|
<!-- 权限项将通过JS动态加载 -->
|
|
<div class="loading-permissions">
|
|
<i class="fas fa-spinner fa-spin"></i> 加载权限中...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 权限分组：用户管理 -->
|
|
<div class="permission-group">
|
|
<h6 class="permission-group-title">用户管理</h6>
|
|
<div class="permission-items" id="user-permissions">
|
|
<!-- 权限项将通过JS动态加载 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 权限分组：借阅管理 -->
|
|
<div class="permission-group">
|
|
<h6 class="permission-group-title">借阅管理</h6>
|
|
<div class="permission-items" id="borrow-permissions">
|
|
<!-- 权限项将通过JS动态加载 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 权限分组：系统管理 -->
|
|
<div class="permission-group">
|
|
<h6 class="permission-group-title">系统管理</h6>
|
|
<div class="permission-items" id="system-permissions">
|
|
<!-- 权限项将通过JS动态加载 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" id="saveRoleBtn">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 确认删除模态框 -->
|
|
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
您确定要删除这个角色吗？此操作不可逆。
|
|
<p class="text-danger mt-3">注意：删除角色将会影响所有使用此角色的用户。</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/user-roles.js') }}"></script>
|
|
{% endblock %}
|