ContractHub/templates/contract_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>
    {% if current_user.can_create %}
    <a href="{{ url_for('create_contract') }}" class="btn btn-primary rounded-pill shadow-sm">
        <i class="bi bi-plus-circle me-1"></i> 新建合同
    </a>
    {% endif %}
</div>

<div class="table-responsive shadow-sm rounded">
    <table id="contracts-table" class="table table-hover table-striped align-middle text-nowrap w-100 mb-0">
        <thead class="table-light">
            <tr>
                <th>合同编号</th>
                <th>合同名称</th>
                <th>合同类型</th>
                <th>我方主体</th>
                <th>对方主体</th>
                <th>开始日期</th>
                <th>结束日期</th>
                <th>状态</th>
                <th style="min-width:180px;">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for item in contracts %}
            <tr>
                <td>{{ item.contract.contract_number }}</td>
                <td>{{ item.contract.name }}</td>
                <td>{{ item.contract.type.name }}</td>
                <td>{{ item.contract.company_entity.name }}</td>
                <td>
                    {% if item.contract.counterparties %}
                        {% for cp in item.contract.counterparties %}
                            {{ cp.name }}{% if not loop.last %}, {% endif %}
                        {% endfor %}
                    {% else %}-{% endif %}
                </td>
                <td>{{ item.contract.start_date.strftime('%Y-%m-%d') }}</td>
                <td>{{ item.contract.end_date.strftime('%Y-%m-%d') }}</td>
                <td>
                    {% if item.contract.is_active %}
                    <span class="badge bg-success">有效</span>
                    {% else %}
                    <span class="badge bg-secondary">终止</span>
                    {% endif %}
                </td>
                <td>
                    <!-- 宽屏按钮组 -->
                    <div class="d-none d-md-flex flex-wrap gap-1">
                        <a href="{{ url_for('view_contract', contract_id=item.contract.id) }}" class="btn btn-sm btn-outline-primary">
                            查看
                        </a>
                        {% if current_user.can_edit %}
                        <a href="{{ url_for('edit_contract', contract_id=item.contract.id) }}" class="btn btn-sm btn-outline-secondary">
                            编辑
                        </a>
                        {% endif %}
                        {% if current_user.can_create and item.contract.is_active %}
                        <a href="{{ url_for('renew_contract', contract_id=item.contract.id) }}" class="btn btn-sm btn-outline-info">
                            续签
                        </a>
                        {% endif %}
                        {% if item.attachments %}
                        <button type="button" class="btn btn-sm btn-outline-warning preview-btn" data-attachments='{{ item.attachments|tojson }}'>
                            附件
                        </button>
                        {% endif %}
                    </div>
                    <!-- 窄屏下拉操作 -->
                    <div class="d-md-none dropdown">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
                                id="actionDropdown{{ loop.index }}" data-bs-toggle="dropdown" aria-expanded="false">
                            操作
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ url_for('view_contract', contract_id=item.contract.id) }}">查看</a></li>
                            {% if current_user.can_edit %}
                            <li><a class="dropdown-item" href="{{ url_for('edit_contract', contract_id=item.contract.id) }}">编辑</a></li>
                            {% endif %}
                            {% if current_user.can_create and item.contract.is_active %}
                            <li><a class="dropdown-item" href="{{ url_for('renew_contract', contract_id=item.contract.id) }}">续签</a></li>
                            {% endif %}
                            {% if item.attachments %}
                            <li><a class="dropdown-item preview-btn-mobile" href="#"
                                   data-attachments='{{ item.attachments|tojson }}'>附件</a></li>
                            {% endif %}
                        </ul>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- 预览弹窗 -->
<div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header bg-light">
        <h5 class="modal-title">附件</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" id="previewBody"></div>
    </div>
  </div>
</div>

<!-- DataTables & jQuery -->
<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() {
    $('#contracts-table').DataTable({
        paging: true,
        pageLength: 10,
        lengthMenu: [5,10,25,50],
        ordering: true,
        order: [[6,"desc"]],
        searching: true,
        columnDefs: [{ orderable: false, targets: 8 }],
        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: "上一页" }
        }
    });

    function showPreview(attachments) {
        let html = '';
        attachments.forEach(att => {
            if(att.filename.toLowerCase().endsWith('.pdf')) {
                html += `<iframe src="${att.url}" width="100%" height="600px" class="border rounded mb-2"></iframe>`;
            } else if(att.filename.toLowerCase().match(/\.(jpg|jpeg|png|gif)$/)) {
                html += `<img src="${att.url}" class="img-fluid rounded mb-2"><hr>`;
            } else {
                html += `<p><a href="${att.download_url}" target="_blank">${att.filename}</a></p>`;
            }
        });
        $('#previewBody').html(html);
        new bootstrap.Modal(document.getElementById('previewModal')).show();
    }

    $('.preview-btn').click(function(){ showPreview($(this).data('attachments')); });
    $('.preview-btn-mobile').click(function(e){ e.preventDefault(); showPreview($(this).data('attachments')); });
});
</script>

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

/* 表格字体和行高稍小 */
#contracts-table th, #contracts-table td {
    font-size: 0.85rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* 状态 badge 美化 */
.badge {
    font-size: 0.8rem;
    padding: 0.3em 0.5em;
}

/* 操作按钮样式 */
.btn-sm {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.25rem;
}
.d-md-flex .btn {
    min-width: auto;
    margin-bottom: 4px;
}
</style>
{% endblock %}