ContractHub/templates/user_list.html

{% extends "base.html" %}

{% block title %}逐鹿人才-证件合同管理系统-用户管理{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="fw-bold">用户管理</h2>
    <a href="{{ url_for('create_user') }}" class="btn btn-primary rounded-pill shadow-sm">
        <i class="bi bi-plus-circle me-1"></i> 新建用户
    </a>
</div>

<div class="card shadow-sm border-0">
    <div class="card-body p-3">
        <div class="table-responsive">
            <table id="users-table" class="table table-hover table-striped align-middle text-nowrap w-100">
                <thead class="table-light">
                    <tr>
                        <th>用户名</th>
                        <th>姓名</th>
                        <th>部门</th>
                        <th>邮箱</th>
                        <th>角色</th>
                        <th style="min-width:150px;">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>{{ user.username }}</td>
                        <td>{{ user.name }}</td>
                        <td>{{ user.department }}</td>
                        <td>{{ user.email }}</td>
                        <td>
                            {% if user.is_admin %}
                            <span class="badge bg-primary">管理员</span>
                            {% else %}
                            <span class="badge bg-secondary">普通用户</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="d-flex gap-1 flex-wrap">
                                <a href="{{ url_for('edit_user', user_id=user.id) }}" class="btn btn-sm btn-outline-secondary">编辑</a>
                                {% if current_user.is_admin and user.id != current_user.id %}
                                <form action="{{ url_for('delete_user', user_id=user.id) }}" method="POST" class="d-inline">
                                    <button type="submit" class="btn btn-sm btn-outline-danger"
                                            onclick="return confirm('确定要删除此用户吗？')">删除</button>
                                </form>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/dataTables.bootstrap5.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.5/js/dataTables.bootstrap5.min.js"></script>

<script>
$(document).ready(function() {
    $('#users-table').DataTable({
        paging: true,
        pageLength: 10,
        lengthMenu: [5,10,25,50],
        ordering: true,
        order: [[0, "asc"]],
        searching: true,
        columnDefs: [
            { orderable: false, targets: 5 } // 操作列不可排序
        ],
        scrollX: true,
        autoWidth: false,
        responsive: true,
        language: {
            emptyTable: "表格中没有数据",
            info: "显示第 _START_ 到 _END_ 条，共 _TOTAL_ 条",
            infoEmpty: "显示第 0 到 0 条，共 0 条",
            lengthMenu: "显示 _MENU_ 条记录",
            search: "搜索:",
            zeroRecords: "没有匹配记录",
            paginate: { first: "首页", last: "末页", next: "下一页", previous: "上一页" }
        }
    });
});
</script>

<style>
/* 表格条纹柔和 */
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

/* 操作按钮间距与换行 */
.d-flex .btn {
    min-width: 60px;
    margin-bottom: 4px;
}

/* 表格字体与行高 */
#users-table th, #users-table td {
    font-size: 0.95rem;
    vertical-align: middle;
}

/* 自适应列宽 */
#users-table th, #users-table td {
    white-space: nowrap;
}
</style>
{% endblock %}