256 lines
11 KiB
HTML
256 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<link rel="icon" href="icons/icon128.png" type="image/png" sizes="128x128">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Медодс. Расширенный поиск документов</title>
|
||
<!-- Bootstrap CSS -->
|
||
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
|
||
<!-- Bootstrap Icons -->
|
||
<link rel="stylesheet" href="bootstrap/bootstrap-icons.css">
|
||
<!-- Минимальные кастомные стили только для специфических случаев -->
|
||
<style>
|
||
/* Только критически необходимые стили, которые нельзя реализовать через Bootstrap */
|
||
.table-container {
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
thead.sticky-top {
|
||
z-index: 1020;
|
||
}
|
||
|
||
.document-item {
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.document-item:hover {
|
||
background-color: var(--bs-primary-bg-subtle) !important;
|
||
}
|
||
|
||
.status-badge {
|
||
cursor: pointer;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.status-badge:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Фикс для модального окна */
|
||
.modal.show {
|
||
display: block;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* Для пустого состояния */
|
||
.empty-state-icon {
|
||
font-size: 3rem;
|
||
color: var(--bs-gray-400);
|
||
}
|
||
|
||
/* Для лоадера */
|
||
.spinner-wrapper {
|
||
min-height: 200px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bg-light">
|
||
<div class="container py-4">
|
||
<!-- Header -->
|
||
<div class="card shadow-sm mb-4">
|
||
<div class="card-body d-flex justify-content-between align-items-center">
|
||
<h1 class="h4 mb-0">
|
||
Расширенный поиск документов
|
||
<small class="text-muted fs-6 ms-2">электронное подписание</small>
|
||
</h1>
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-outline-secondary" id="clearFiltersBtn">
|
||
<i class="bi bi-arrow-counterclockwise me-1"></i>
|
||
Сбросить фильтры
|
||
</button>
|
||
<button class="btn btn-primary" id="searchBtn">
|
||
<i class="bi bi-search me-1"></i>
|
||
Найти
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Filters Section -->
|
||
<div class="card shadow-sm mb-4">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center mb-3">
|
||
<i class="bi bi-sliders2 text-primary me-2"></i>
|
||
<h2 class="h6 mb-0">Фильтры поиска</h2>
|
||
</div>
|
||
|
||
<div class="row g-3">
|
||
<!-- Период -->
|
||
<div class="col-md-4">
|
||
<label class="form-label small text-uppercase text-muted fw-semibold">Период</label>
|
||
<select class="form-select" id="periodSelect">
|
||
<option value="today">Сегодня</option>
|
||
<option value="3days">За 3 дня</option>
|
||
<option value="7days">За неделю</option>
|
||
<option value="30days">За месяц</option>
|
||
<option value="90days">За квартал</option>
|
||
<option value="custom">Произвольный</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Статус -->
|
||
<div class="col-md-4">
|
||
<label class="form-label small text-uppercase text-muted fw-semibold">Статус подписания</label>
|
||
<select class="form-select" id="statusSelect">
|
||
<option value="all">Все статусы</option>
|
||
<option value="processing">В обработке</option>
|
||
<option value="completed">Завершено</option>
|
||
<option value="error">Ошибки (отмены)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Тип подписания -->
|
||
<div class="col-md-4">
|
||
<label class="form-label small text-uppercase text-muted fw-semibold">Тип подписания</label>
|
||
<select class="form-select" id="signatureTypeSelect">
|
||
<option value="all">Все типы</option>
|
||
<option value="esia">УКЭП для ЕСИА</option>
|
||
<option value="not_esia">МЧД для других</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Advanced Filters Toggle -->
|
||
<div class="mt-3">
|
||
<button class="btn btn-link text-decoration-none p-0" type="button" id="advancedToggle">
|
||
<i class="bi bi-chevron-down me-1" id="advancedIcon"></i>
|
||
Расширенные фильтры
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Advanced Filters -->
|
||
<div class="mt-3" id="advancedFilters" style="display: none;">
|
||
<div class="row g-3">
|
||
<!-- Отправитель -->
|
||
<div class="col-md-4">
|
||
<label class="form-label">Отправитель (фамилия)</label>
|
||
<input type="text" class="form-control" id="senderInput" placeholder="Фамилия отправителя">
|
||
</div>
|
||
|
||
<!-- Пациент -->
|
||
<div class="col-md-4">
|
||
<label class="form-label">Пациент (фамилия)</label>
|
||
<input type="text" class="form-control" id="patientInput" placeholder="Фамилия пациента">
|
||
</div>
|
||
|
||
<!-- Номер документа -->
|
||
<div class="col-md-4">
|
||
<label class="form-label">Номер документа</label>
|
||
<input type="number" class="form-control" id="documentNumberInput"
|
||
placeholder="Только цифры" min="1" step="1">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Date Range for Custom Period -->
|
||
<div class="mt-3" id="customDateRange" style="display: none;">
|
||
<hr class="my-3">
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label">С</label>
|
||
<input type="date" class="form-control" id="dateFrom">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label">По</label>
|
||
<input type="date" class="form-control" id="dateTo">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Results Section -->
|
||
<div class="card shadow-sm">
|
||
<div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
|
||
<div class="d-flex align-items-center">
|
||
<i class="bi bi-file-text text-primary me-2"></i>
|
||
<h2 class="h6 mb-0">Результаты поиска</h2>
|
||
</div>
|
||
<div class="text-muted small" id="resultsStats">
|
||
Найдено: 0
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Table -->
|
||
<div class="table-container">
|
||
<table class="table table-hover mb-0">
|
||
<thead class="sticky-top bg-white">
|
||
<tr>
|
||
<th style="width: 15%">Дата</th>
|
||
<th style="width: 15%">Пациент</th>
|
||
<th style="width: 35%">Документы</th>
|
||
<th style="width: 20%">Статус</th>
|
||
<th style="width: 15%">Отправитель</th>
|
||
<th style="width: 10%">Тип</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tableBody">
|
||
<!-- Данные будут загружаться динамически -->
|
||
</tbody>
|
||
</table>
|
||
|
||
<!-- Empty State -->
|
||
<div class="text-center py-5" id="emptyState">
|
||
<i class="bi bi-search empty-state-icon d-block mb-3"></i>
|
||
<p class="text-muted mb-1">Нет данных для отображения</p>
|
||
<p class="text-muted small">Используйте фильтры для поиска документов</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="card-footer bg-white py-3 d-flex justify-content-end align-items-center gap-3" id="pagination"
|
||
style="display: none;">
|
||
<div class="text-muted small" id="paginationInfo">
|
||
Страница 1 из 1
|
||
</div>
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-outline-secondary btn-sm" id="prevPage" disabled>
|
||
<i class="bi bi-chevron-left"></i>
|
||
</button>
|
||
<button class="btn btn-outline-secondary btn-sm" id="nextPage" disabled>
|
||
<i class="bi bi-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal for Status History -->
|
||
<div class="modal fade" id="statusHistoryModal" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">История статусов</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body" id="statusHistoryBody">
|
||
<!-- Динамическое содержимое -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bootstrap JS Bundle with Popper -->
|
||
<script src="bootstrap/bootstrap.bundle.min.js"></script>
|
||
<script src="search.js"></script>
|
||
</body>
|
||
|
||
</html> |