This commit is contained in:
2026-01-27 15:12:27 +05:00
parent d2c530bb3a
commit 9714ac5004
6 changed files with 2499 additions and 20 deletions

856
public/admin-doc.html Normal file
View File

@@ -0,0 +1,856 @@
<!-- public/admin-doc.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Управление группами пользователей | CRM</title>
<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--admin-color: #e74c3c;
--secretary-color: #3498db;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.header h1 {
margin: 0;
color: #333;
display: flex;
align-items: center;
gap: 10px;
}
.header-actions {
display: flex;
gap: 10px;
margin-top: 15px;
}
.tabs {
display: flex;
gap: 5px;
margin-bottom: 20px;
background: white;
padding: 5px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.tab {
padding: 12px 24px;
border: none;
background: none;
cursor: pointer;
font-size: 16px;
border-radius: 6px;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 8px;
}
.tab:hover {
background: #f5f5f5;
}
.tab.active {
background: #3498db;
color: white;
}
.content-section {
display: none;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.content-section.active {
display: block;
}
.group-info {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
padding: 15px;
background: #f9f9f9;
border-radius: 6px;
}
.group-color {
width: 20px;
height: 20px;
border-radius: 50%;
}
.group-color.admin {
background: var(--admin-color);
}
.group-color.secretary {
background: var(--secretary-color);
}
.users-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 15px;
margin-top: 20px;
}
.user-card {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
transition: all 0.3s;
}
.user-card:hover {
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.user-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.user-avatar {
width: 40px;
height: 40px;
background: #3498db;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.user-name {
font-weight: bold;
color: #333;
}
.user-role {
font-size: 12px;
color: #666;
margin-top: 2px;
}
.user-details {
font-size: 14px;
color: #666;
margin-bottom: 10px;
}
.group-badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 10px 0;
}
.group-badge {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
color: white;
display: flex;
align-items: center;
gap: 4px;
}
.group-badge.admin {
background: var(--admin-color);
}
.group-badge.secretary {
background: var(--secretary-color);
}
.user-actions {
display: flex;
gap: 10px;
margin-top: 10px;
}
.btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 5px;
}
.btn-primary {
background: #3498db;
color: white;
}
.btn-primary:hover {
background: #2980b9;
}
.btn-danger {
background: #e74c3c;
color: white;
}
.btn-danger:hover {
background: #c0392b;
}
.btn-success {
background: #27ae60;
color: white;
}
.btn-success:hover {
background: #229954;
}
.loading {
text-align: center;
padding: 40px;
color: #666;
}
.loading i {
font-size: 24px;
margin-bottom: 10px;
color: #3498db;
}
.search-box {
margin-bottom: 20px;
}
.search-input {
width: 100%;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
}
.stats {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.stat-card {
flex: 1;
background: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: center;
}
.stat-number {
font-size: 24px;
font-weight: bold;
color: #3498db;
margin: 10px 0;
}
.stat-label {
color: #666;
font-size: 14px;
}
.no-users {
text-align: center;
padding: 40px;
color: #666;
}
@media (max-width: 768px) {
.users-container {
grid-template-columns: 1fr;
}
.stats {
flex-direction: column;
}
.user-actions {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1><i class="fas fa-users-cog"></i> Управление группами пользователей</h1>
<div class="header-actions">
<button class="btn btn-primary" onclick="refreshAllData()">
<i class="fas fa-sync-alt"></i> Обновить
</button>
<button class="btn btn-success" onclick="goBack()">
<i class="fas fa-arrow-left"></i> Назад в CRM
</button>
</div>
</div>
<div class="tabs">
<button class="tab active" onclick="showTab('secretary')">
<i class="fas fa-file-signature"></i> Секретари
</button>
<button class="tab" onclick="showTab('administration')">
<i class="fas fa-user-shield"></i> Администрация
</button>
<button class="tab" onclick="showTab('all-users')">
<i class="fas fa-users"></i> Все пользователи
</button>
</div>
<!-- Секретари -->
<div id="secretary-section" class="content-section active">
<div class="group-info">
<div class="group-color secretary"></div>
<div>
<h3>Группа "Секретарь"</h3>
<p>Пользователи этой группы могут согласовывать документы в системе</p>
</div>
</div>
<div class="search-box">
<input type="text" id="secretary-search" class="search-input"
placeholder="Поиск пользователей..." onkeyup="filterUsers('secretary')">
</div>
<div class="stats">
<div class="stat-card">
<div class="stat-number" id="secretary-count">0</div>
<div class="stat-label">Всего пользователей</div>
</div>
<div class="stat-card">
<div class="stat-number" id="secretary-in-group">0</div>
<div class="stat-label">В группе "Секретарь"</div>
</div>
</div>
<div id="secretary-users" class="users-container">
<div class="loading">
<i class="fas fa-spinner fa-spin"></i>
<p>Загрузка пользователей...</p>
</div>
</div>
</div>
<!-- Администрация -->
<div id="administration-section" class="content-section">
<div class="group-info">
<div class="group-color admin"></div>
<div>
<h3>Группа "Администрация"</h3>
<p>Пользователи этой группы имеют права администратора в системе</p>
</div>
</div>
<div class="search-box">
<input type="text" id="admin-search" class="search-input"
placeholder="Поиск пользователей..." onkeyup="filterUsers('admin')">
</div>
<div class="stats">
<div class="stat-card">
<div class="stat-number" id="admin-count">0</div>
<div class="stat-label">Всего пользователей</div>
</div>
<div class="stat-card">
<div class="stat-number" id="admin-in-group">0</div>
<div class="stat-label">В группе "Администрация"</div>
</div>
</div>
<div id="admin-users" class="users-container">
<div class="loading">
<i class="fas fa-spinner fa-spin"></i>
<p>Загрузка пользователей...</p>
</div>
</div>
</div>
<!-- Все пользователи -->
<div id="all-users-section" class="content-section">
<div class="search-box">
<input type="text" id="all-search" class="search-input"
placeholder="Поиск пользователей..." onkeyup="filterUsers('all')">
</div>
<div class="stats">
<div class="stat-card">
<div class="stat-number" id="total-users">0</div>
<div class="stat-label">Всего пользователей</div>
</div>
<div class="stat-card">
<div class="stat-number" id="admins-count">0</div>
<div class="stat-label">Администраторы</div>
</div>
<div class="stat-card">
<div class="stat-number" id="secretaries-count">0</div>
<div class="stat-label">Секретари</div>
</div>
</div>
<div id="all-users" class="users-container">
<div class="loading">
<i class="fas fa-spinner fa-spin"></i>
<p>Загрузка пользователей...</p>
</div>
</div>
</div>
</div>
<script>
let currentTab = 'secretary';
let allUsers = [];
let secretaryGroupId = null;
let adminGroupId = null;
// Проверка авторизации
async function checkAuth() {
try {
const response = await fetch('/api/user');
if (response.status === 401) {
window.location.href = '/';
return false;
}
const data = await response.json();
if (data.user.role !== 'admin') {
alert('Доступ запрещен. Требуются права администратора.');
window.location.href = '/';
return false;
}
return true;
} catch (error) {
console.error('Ошибка проверки авторизации:', error);
window.location.href = '/';
return false;
}
}
// Загрузка данных
async function loadData() {
if (!await checkAuth()) return;
try {
// Загружаем группы
const groupsResponse = await fetch('/api/groups');
const groups = await groupsResponse.json();
// Находим ID групп
secretaryGroupId = groups.find(g => g.name === 'Секретарь')?.id;
adminGroupId = groups.find(g => g.name === 'Администрация')?.id;
if (!secretaryGroupId) {
console.warn('Группа "Секретарь" не найдена');
}
if (!adminGroupId) {
console.warn('Группа "Администрация" не найдена');
}
// Загружаем всех пользователей
const usersResponse = await fetch('/api/users/all');
const users = await usersResponse.json();
allUsers = users;
// Обновляем статистику
updateStats();
// Отображаем пользователей
renderUsers();
} catch (error) {
console.error('Ошибка загрузки данных:', error);
showError('Не удалось загрузить данные');
}
}
// Обновление статистики
function updateStats() {
// Статистика для секретарей
const secretaryUsers = allUsers.filter(u => u.groups?.some(g => g.group_name === 'Секретарь'));
document.getElementById('secretary-count').textContent = allUsers.length;
document.getElementById('secretary-in-group').textContent = secretaryUsers.length;
// Статистика для администрации
const adminUsers = allUsers.filter(u => u.groups?.some(g => g.group_name === 'Администрация'));
document.getElementById('admin-count').textContent = allUsers.length;
document.getElementById('admin-in-group').textContent = adminUsers.length;
// Общая статистика
document.getElementById('total-users').textContent = allUsers.length;
document.getElementById('admins-count').textContent = adminUsers.length;
document.getElementById('secretaries-count').textContent = secretaryUsers.length;
}
// Отображение пользователей
function renderUsers() {
renderSecretaryUsers();
renderAdminUsers();
renderAllUsers();
}
// Отображение пользователей для секретарей
function renderSecretaryUsers() {
const container = document.getElementById('secretary-users');
const searchTerm = document.getElementById('secretary-search').value.toLowerCase();
const filteredUsers = allUsers.filter(user =>
user.name.toLowerCase().includes(searchTerm) ||
user.login.toLowerCase().includes(searchTerm) ||
user.email.toLowerCase().includes(searchTerm)
);
if (filteredUsers.length === 0) {
container.innerHTML = `
<div class="no-users">
<i class="fas fa-users-slash" style="font-size: 48px; color: #ccc; margin-bottom: 15px;"></i>
<p>Пользователи не найдены</p>
</div>
`;
return;
}
container.innerHTML = filteredUsers.map(user => {
const isSecretary = user.groups?.some(g => g.group_name === 'Секретарь');
const isAdmin = user.groups?.some(g => g.group_name === 'Администрация');
return `
<div class="user-card">
<div class="user-header">
<div class="user-avatar">${user.name.charAt(0).toUpperCase()}</div>
<div>
<div class="user-name">${user.name}</div>
<div class="user-role">${user.role === 'admin' ? 'Администратор' : 'Учитель'}</div>
</div>
</div>
<div class="user-details">
<div><i class="fas fa-user"></i> ${user.login}</div>
<div><i class="fas fa-envelope"></i> ${user.email}</div>
</div>
<div class="group-badges">
${isSecretary ? '<span class="group-badge secretary"><i class="fas fa-file-signature"></i> Секретарь</span>' : ''}
${isAdmin ? '<span class="group-badge admin"><i class="fas fa-user-shield"></i> Администрация</span>' : ''}
</div>
<div class="user-actions">
${isSecretary ?
`<button class="btn btn-danger" onclick="removeFromGroup(${user.id}, 'secretary')">
<i class="fas fa-user-minus"></i> Убрать из секретарей
</button>` :
`<button class="btn btn-success" onclick="addToGroup(${user.id}, 'secretary')">
<i class="fas fa-user-plus"></i> Добавить в секретари
</button>`
}
</div>
</div>
`;
}).join('');
}
// Отображение пользователей для администрации
function renderAdminUsers() {
const container = document.getElementById('admin-users');
const searchTerm = document.getElementById('admin-search').value.toLowerCase();
const filteredUsers = allUsers.filter(user =>
user.name.toLowerCase().includes(searchTerm) ||
user.login.toLowerCase().includes(searchTerm) ||
user.email.toLowerCase().includes(searchTerm)
);
if (filteredUsers.length === 0) {
container.innerHTML = `
<div class="no-users">
<i class="fas fa-users-slash" style="font-size: 48px; color: #ccc; margin-bottom: 15px;"></i>
<p>Пользователи не найдены</p>
</div>
`;
return;
}
container.innerHTML = filteredUsers.map(user => {
const isSecretary = user.groups?.some(g => g.group_name === 'Секретарь');
const isAdmin = user.groups?.some(g => g.group_name === 'Администрация');
return `
<div class="user-card">
<div class="user-header">
<div class="user-avatar">${user.name.charAt(0).toUpperCase()}</div>
<div>
<div class="user-name">${user.name}</div>
<div class="user-role">${user.role === 'admin' ? 'Администратор' : 'Учитель'}</div>
</div>
</div>
<div class="user-details">
<div><i class="fas fa-user"></i> ${user.login}</div>
<div><i class="fas fa-envelope"></i> ${user.email}</div>
</div>
<div class="group-badges">
${isSecretary ? '<span class="group-badge secretary"><i class="fas fa-file-signature"></i> Секретарь</span>' : ''}
${isAdmin ? '<span class="group-badge admin"><i class="fas fa-user-shield"></i> Администрация</span>' : ''}
</div>
<div class="user-actions">
${isAdmin ?
`<button class="btn btn-danger" onclick="removeFromGroup(${user.id}, 'admin')">
<i class="fas fa-user-minus"></i> Убрать из администрации
</button>` :
`<button class="btn btn-success" onclick="addToGroup(${user.id}, 'admin')">
<i class="fas fa-user-plus"></i> Добавить в администрацию
</button>`
}
</div>
</div>
`;
}).join('');
}
// Отображение всех пользователей
function renderAllUsers() {
const container = document.getElementById('all-users');
const searchTerm = document.getElementById('all-search').value.toLowerCase();
const filteredUsers = allUsers.filter(user =>
user.name.toLowerCase().includes(searchTerm) ||
user.login.toLowerCase().includes(searchTerm) ||
user.email.toLowerCase().includes(searchTerm)
);
if (filteredUsers.length === 0) {
container.innerHTML = `
<div class="no-users">
<i class="fas fa-users-slash" style="font-size: 48px; color: #ccc; margin-bottom: 15px;"></i>
<p>Пользователи не найдены</p>
</div>
`;
return;
}
container.innerHTML = filteredUsers.map(user => {
const isSecretary = user.groups?.some(g => g.group_name === 'Секретарь');
const isAdmin = user.groups?.some(g => g.group_name === 'Администрация');
return `
<div class="user-card">
<div class="user-header">
<div class="user-avatar">${user.name.charAt(0).toUpperCase()}</div>
<div>
<div class="user-name">${user.name}</div>
<div class="user-role">${user.role === 'admin' ? 'Администратор' : 'Учитель'}</div>
</div>
</div>
<div class="user-details">
<div><i class="fas fa-user"></i> ${user.login}</div>
<div><i class="fas fa-envelope"></i> ${user.email}</div>
</div>
<div class="group-badges">
${isSecretary ? '<span class="group-badge secretary"><i class="fas fa-file-signature"></i> Секретарь</span>' : ''}
${isAdmin ? '<span class="group-badge admin"><i class="fas fa-user-shield"></i> Администрация</span>' : ''}
</div>
<div class="user-actions">
${isSecretary ?
`<button class="btn btn-danger" onclick="removeFromGroup(${user.id}, 'secretary')">
<i class="fas fa-user-minus"></i> Убрать из секретарей
</button>` :
`<button class="btn btn-success" onclick="addToGroup(${user.id}, 'secretary')">
<i class="fas fa-user-plus"></i> В секретари
</button>`
}
${isAdmin ?
`<button class="btn btn-danger" onclick="removeFromGroup(${user.id}, 'admin')">
<i class="fas fa-user-minus"></i> Убрать из администрации
</button>` :
`<button class="btn btn-primary" onclick="addToGroup(${user.id}, 'admin')">
<i class="fas fa-user-plus"></i> В администрацию
</button>`
}
</div>
</div>
`;
}).join('');
}
// Фильтрация пользователей
function filterUsers(section) {
switch(section) {
case 'secretary':
renderSecretaryUsers();
break;
case 'admin':
renderAdminUsers();
break;
case 'all':
renderAllUsers();
break;
}
}
// Показать вкладку
function showTab(tabName) {
currentTab = tabName;
// Обновляем активные вкладки
document.querySelectorAll('.tab').forEach(tab => {
tab.classList.remove('active');
});
document.querySelectorAll('.tab').forEach(tab => {
if (tab.onclick.toString().includes(tabName)) {
tab.classList.add('active');
}
});
// Обновляем активные секции
document.querySelectorAll('.content-section').forEach(section => {
section.classList.remove('active');
});
switch(tabName) {
case 'secretary':
document.getElementById('secretary-section').classList.add('active');
break;
case 'administration':
document.getElementById('administration-section').classList.add('active');
break;
case 'all-users':
document.getElementById('all-users-section').classList.add('active');
break;
}
}
// Добавить пользователя в группу
async function addToGroup(userId, groupType) {
if (!await checkAuth()) return;
const groupName = groupType === 'secretary' ? 'Секретарь' : 'Администрация';
const groupId = groupType === 'secretary' ? secretaryGroupId : adminGroupId;
if (!groupId) {
showError(`Группа "${groupName}" не найдена`);
return;
}
if (!confirm(`Добавить пользователя в группу "${groupName}"?`)) return;
try {
const response = await fetch(`/api/groups/${groupId}/users/${userId}`, {
method: 'POST'
});
if (response.ok) {
showSuccess(`Пользователь добавлен в группу "${groupName}"`);
await refreshAllData();
} else {
const error = await response.text();
showError(error);
}
} catch (error) {
console.error('Ошибка добавления в группу:', error);
showError('Не удалось добавить пользователя в группу');
}
}
// Удалить пользователя из группы
async function removeFromGroup(userId, groupType) {
if (!await checkAuth()) return;
const groupName = groupType === 'secretary' ? 'Секретарь' : 'Администрация';
const groupId = groupType === 'secretary' ? secretaryGroupId : adminGroupId;
if (!groupId) {
showError(`Группа "${groupName}" не найдена`);
return;
}
if (!confirm(`Убрать пользователя из группы "${groupName}"?`)) return;
try {
const response = await fetch(`/api/groups/${groupId}/users/${userId}`, {
method: 'DELETE'
});
if (response.ok) {
showSuccess(`Пользователь убран из группы "${groupName}"`);
await refreshAllData();
} else {
const error = await response.text();
showError(error);
}
} catch (error) {
console.error('Ошибка удаления из группы:', error);
showError('Не удалось убрать пользователя из группы');
}
}
// Обновить все данные
async function refreshAllData() {
await loadData();
showSuccess('Данные обновлены');
}
// Показать сообщение об ошибке
function showError(message) {
alert('Ошибка: ' + message);
}
// Показать сообщение об успехе
function showSuccess(message) {
// Можно заменить на более красивый toast
alert('Успех: ' + message);
}
// Вернуться в CRM
function goBack() {
window.location.href = '/admin';
}
// Инициализация
document.addEventListener('DOMContentLoaded', async () => {
if (await checkAuth()) {
await loadData();
}
});
</script>
</body>
</html>

433
public/doc.html Normal file
View File

@@ -0,0 +1,433 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Согласование документов - School CRM</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.doc-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.doc-header {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 1.5rem;
margin-bottom: 25px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.doc-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
border-bottom: 2px solid #e9ecef;
padding-bottom: 10px;
flex-wrap: wrap;
}
.doc-tab {
padding: 10px 20px;
background: #f8f9fa;
border: none;
border-radius: 8px 8px 0 0;
cursor: pointer;
font-weight: 600;
color: #495057;
transition: all 0.3s ease;
}
.doc-tab:hover {
background: #e9ecef;
}
.doc-tab.active {
background: #3498db;
color: white;
}
.document-section {
display: none;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 25px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.document-card {
border: 1px solid #e1e5e9;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
background: white;
transition: all 0.3s ease;
}
.document-card:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.document-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #e9ecef;
}
.document-title {
flex: 1;
}
.document-number {
display: block;
color: #3498db;
font-weight: bold;
margin-bottom: 5px;
}
.document-status {
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-left: 10px;
}
.status-assigned { background: #e74c3c; color: white; }
.status-in-progress { background: #f39c12; color: white; }
.status-approved { background: #27ae60; color: white; }
.status-received { background: #3498db; color: white; }
.status-signed { background: #9b59b6; color: white; }
.status-refused { background: #c0392b; color: white; }
.status-cancelled { background: #95a5a6; color: white; }
.urgency-badge {
padding: 3px 8px;
border-radius: 12px;
font-size: 0.75rem;
margin-left: 8px;
font-weight: 600;
}
.urgent { background: #f39c12; color: white; }
.very-urgent { background: #e74c3c; color: white; }
.document-details {
margin-top: 15px;
}
.document-info p {
margin: 5px 0;
padding: 5px 0;
border-bottom: 1px solid #f0f0f0;
}
.document-info p:last-child {
border-bottom: none;
}
.document-files {
margin: 15px 0;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
}
.refusal-reason {
margin: 15px 0;
padding: 15px;
background: #f8d7da;
border-radius: 8px;
border-left: 4px solid #dc3545;
}
.document-actions {
margin-top: 20px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.secretary-actions {
margin-top: 20px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.status-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.empty-state {
text-align: center;
padding: 40px 20px;
color: #6c757d;
font-style: italic;
background: #f8f9fa;
border-radius: 8px;
border: 2px dashed #dee2e6;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.back-link {
display: inline-block;
margin-bottom: 20px;
color: #3498db;
text-decoration: none;
}
.back-link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="login-modal" class="modal">
<!-- Существующая форма входа -->
</div>
<div class="doc-container">
<header class="doc-header">
<div class="header-top">
<h1><i class="fas fa-file-contract"></i> Согласование документов</h1>
<div class="user-info">
<span id="current-user"></span>
<button onclick="window.location.href = '/'" class="btn-logout">
<i class="fas fa-arrow-left"></i> Назад к задачам
</button>
<button onclick="logout()" class="btn-logout">
<i class="fas fa-sign-out-alt"></i> Выйти
</button>
</div>
</div>
<nav class="doc-tabs">
<button onclick="showDocumentSection('create-document')" class="doc-tab">
<i class="fas fa-plus-circle"></i> Новый документ
</button>
<button onclick="showDocumentSection('my-documents')" class="doc-tab">
<i class="fas fa-list"></i> Мои документы
</button>
<button id="secretary-tab" onclick="showDocumentSection('secretary-documents')" class="doc-tab" style="display: none;">
<i class="fas fa-user-tie"></i> Для согласования
</button>
</nav>
</header>
<main>
<!-- Секция создания документа -->
<section id="create-document-section" class="document-section">
<h2><i class="fas fa-plus-circle"></i> Создание документа для согласования</h2>
<form id="create-document-form" enctype="multipart/form-data">
<div class="form-grid">
<div class="form-group">
<label for="document-title"><i class="fas fa-heading"></i> Название документа:*</label>
<input type="text" id="document-title" name="title" required placeholder="Например: Приказ №123 от 01.01.2024">
</div>
<div class="form-group">
<label for="document-type"><i class="fas fa-file-alt"></i> Тип документа:*</label>
<select id="document-type" name="documentType" required>
<option value="">Выберите тип документа...</option>
<!-- Типы будут загружены через JavaScript -->
</select>
</div>
<div class="form-group">
<label for="document-number"><i class="fas fa-hashtag"></i> Номер документа:</label>
<input type="text" id="document-number" name="documentNumber" placeholder="Номер документа (если есть)">
</div>
<div class="form-group">
<label for="document-date"><i class="fas fa-calendar-alt"></i> Дата документа:*</label>
<input type="date" id="document-date" name="documentDate" required>
</div>
<div class="form-group">
<label for="pages-count"><i class="fas fa-file"></i> Количество страниц:</label>
<input type="number" id="pages-count" name="pagesCount" min="1" placeholder="Например: 5">
</div>
<div class="form-group">
<label for="urgency-level"><i class="fas fa-exclamation-triangle"></i> Срочность:</label>
<select id="urgency-level" name="urgencyLevel">
<option value="normal">Обычная</option>
<option value="urgent">Срочно</option>
<option value="very_urgent">Очень срочно</option>
</select>
</div>
<div class="form-group">
<label for="due-date"><i class="fas fa-clock"></i> Срок согласования:</label>
<input type="datetime-local" id="due-date" name="dueDate">
</div>
</div>
<div class="form-group full-width">
<label for="document-description"><i class="fas fa-align-left"></i> Описание документа:*</label>
<textarea id="document-description" name="description" rows="4" required placeholder="Опишите содержание документа..."></textarea>
</div>
<div class="form-group full-width">
<label for="document-comment"><i class="fas fa-comment"></i> Комментарий для секретаря:</label>
<textarea id="document-comment" name="comment" rows="3" placeholder="Дополнительная информация для согласования..."></textarea>
</div>
<div class="form-group full-width">
<label for="document-files"><i class="fas fa-paperclip"></i> Прикрепить файлы (до 15 файлов, максимум 300MB):</label>
<div class="file-upload">
<input type="file" id="document-files" name="files" multiple onchange="updateDocumentFileList()">
<label for="document-files" class="file-upload-label">
<i class="fas fa-cloud-upload-alt"></i> Выберите файлы
</label>
</div>
<div id="document-file-list"></div>
</div>
<button type="submit" class="btn-primary">
<i class="fas fa-paper-plane"></i> Отправить на согласование
</button>
</form>
</section>
<!-- Секция моих документов -->
<section id="my-documents-section" class="document-section">
<h2><i class="fas fa-list"></i> Мои документы на согласование</h2>
<div id="my-documents-list" class="documents-list">
<!-- Документы будут загружены через JavaScript -->
</div>
</section>
<!-- Секция документов для секретаря -->
<section id="secretary-documents-section" class="document-section">
<h2><i class="fas fa-user-tie"></i> Документы для согласования</h2>
<div id="secretary-documents-list" class="documents-list">
<!-- Документы будут загружены через JavaScript -->
</div>
</section>
</main>
</div>
<!-- Модальные окна для секретаря -->
<div id="approve-document-modal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeApproveModal()">&times;</span>
<h3><i class="fas fa-check-circle"></i> Согласовать документ</h3>
<form id="approve-document-form" onsubmit="event.preventDefault(); updateDocumentStatus(currentDocumentId, 'approved', document.getElementById('approve-comment').value);">
<div class="form-group">
<label for="approve-comment">Комментарий к согласованию:</label>
<textarea id="approve-comment" rows="4" placeholder="Добавьте комментарий при необходимости..."></textarea>
</div>
<button type="submit" class="btn-success">
<i class="fas fa-check"></i> Согласовать
</button>
</form>
</div>
</div>
<div id="receive-document-modal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeReceiveModal()">&times;</span>
<h3><i class="fas fa-inbox"></i> Получение оригинала документа</h3>
<form id="receive-document-form" onsubmit="event.preventDefault(); updateDocumentStatus(currentDocumentId, 'received', document.getElementById('receive-comment').value);">
<div class="form-group">
<label for="receive-comment">Комментарий к получению:</label>
<textarea id="receive-comment" rows="4" placeholder="Укажите детали получения оригинала..."></textarea>
</div>
<button type="submit" class="btn-primary">
<i class="fas fa-check"></i> Подтвердить получение
</button>
</form>
</div>
</div>
<div id="refuse-document-modal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeRefuseModal()">&times;</span>
<h3><i class="fas fa-times-circle"></i> Отказ в согласовании</h3>
<form id="refuse-document-form" onsubmit="event.preventDefault(); updateDocumentStatus(currentDocumentId, 'refused', '', document.getElementById('refuse-reason').value);">
<div class="form-group">
<label for="refuse-reason">Причина отказа:*</label>
<textarea id="refuse-reason" rows="4" required placeholder="Укажите причину отказа в согласовании..."></textarea>
</div>
<button type="submit" class="btn-warning">
<i class="fas fa-times"></i> Отказать в согласовании
</button>
</form>
</div>
</div>
<script src="auth.js"></script>
<script src="files.js"></script>
<script src="documents.js"></script>
<script>
// Проверка авторизации для страницы документов
document.addEventListener('DOMContentLoaded', function() {
if (window.location.pathname === '/doc') {
checkAuth();
}
});
function checkAuth() {
fetch('/api/user')
.then(response => {
if (response.ok) {
return response.json();
} else {
window.location.href = '/';
}
})
.then(data => {
currentUser = data.user;
document.getElementById('current-user').textContent = `Вы вошли как: ${currentUser.name}`;
// Инициализация страницы документов
if (typeof initializeDocumentForm === 'function') {
initializeDocumentForm();
}
// Показываем вкладку секретаря если пользователь секретарь
if (currentUser && currentUser.groups && currentUser.groups.includes('Секретарь')) {
const secretaryTab = document.getElementById('secretary-tab');
if (secretaryTab) {
secretaryTab.style.display = 'block';
}
}
})
.catch(error => {
console.error('Ошибка проверки авторизации:', error);
window.location.href = '/';
});
}
function logout() {
fetch('/api/logout', { method: 'POST' })
.then(() => {
window.location.href = '/';
});
}
</script>
</body>
</html>

495
public/documents.js Normal file
View File

@@ -0,0 +1,495 @@
// documents.js - Работа с документами для согласования
let documentTypes = [];
async function loadDocumentTypes() {
try {
const response = await fetch('/api/document-types');
documentTypes = await response.json();
populateDocumentTypeSelect();
} catch (error) {
console.error('Ошибка загрузки типов документов:', error);
}
}
function populateDocumentTypeSelect() {
const select = document.getElementById('document-type');
if (!select) return;
select.innerHTML = '<option value="">Выберите тип документа...</option>';
documentTypes.forEach(type => {
const option = document.createElement('option');
option.value = type.id;
option.textContent = type.name;
select.appendChild(option);
});
}
function initializeDocumentForm() {
const form = document.getElementById('create-document-form');
if (form) {
form.addEventListener('submit', createDocumentTask);
}
// Инициализация даты по умолчанию
const today = new Date();
const todayStr = today.toISOString().split('T')[0];
const dateInput = document.getElementById('document-date');
if (dateInput) {
dateInput.value = todayStr;
}
loadDocumentTypes();
}
async function createDocumentTask(event) {
event.preventDefault();
if (!currentUser) {
alert('Требуется аутентификация');
return;
}
const formData = new FormData();
// Основные данные задачи
formData.append('title', document.getElementById('document-title').value);
formData.append('description', document.getElementById('document-description').value);
// Даты
const dueDateInput = document.getElementById('due-date');
if (dueDateInput.value) {
formData.append('dueDate', dueDateInput.value);
}
// Данные документа
formData.append('documentTypeId', document.getElementById('document-type').value);
formData.append('documentNumber', document.getElementById('document-number').value);
formData.append('documentDate', document.getElementById('document-date').value);
formData.append('pagesCount', document.getElementById('pages-count').value);
formData.append('urgencyLevel', document.getElementById('urgency-level').value);
formData.append('comment', document.getElementById('document-comment').value);
// Загружаем файлы
const filesInput = document.getElementById('document-files');
if (filesInput.files) {
for (let i = 0; i < filesInput.files.length; i++) {
formData.append('files', filesInput.files[i]);
}
}
try {
const response = await fetch('/api/documents', {
method: 'POST',
body: formData
});
if (response.ok) {
alert('Задача на согласование документа создана!');
document.getElementById('create-document-form').reset();
document.getElementById('document-file-list').innerHTML = '';
// Сброс даты
const today = new Date();
const todayStr = today.toISOString().split('T')[0];
const dateInput = document.getElementById('document-date');
if (dateInput) {
dateInput.value = todayStr;
}
// Перенаправление на список документов
showDocumentSection('my-documents');
} else {
const error = await response.json();
alert(error.error || 'Ошибка создания задачи');
}
} catch (error) {
console.error('Ошибка:', error);
alert('Ошибка создания задачи');
}
}
function updateDocumentFileList() {
const fileInput = document.getElementById('document-files');
const fileList = document.getElementById('document-file-list');
const files = fileInput.files;
if (files.length === 0) {
fileList.innerHTML = '';
return;
}
let html = '<ul>';
let totalSize = 0;
for (let i = 0; i < files.length; i++) {
const file = files[i];
totalSize += file.size;
html += `<li>${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)</li>`;
}
html += '</ul>';
html += `<p><strong>Общий размер: ${(totalSize / 1024 / 1024).toFixed(2)} MB / 300 MB</strong></p>`;
fileList.innerHTML = html;
}
// Функции для работы с документами
async function loadMyDocuments() {
try {
const response = await fetch('/api/documents/my');
const documents = await response.json();
renderMyDocuments(documents);
} catch (error) {
console.error('Ошибка загрузки документов:', error);
}
}
async function loadSecretaryDocuments() {
try {
const response = await fetch('/api/documents/secretary');
const documents = await response.json();
renderSecretaryDocuments(documents);
} catch (error) {
console.error('Ошибка загрузки документов секретаря:', error);
}
}
function renderMyDocuments(documents) {
const container = document.getElementById('my-documents-list');
if (!container) return;
if (documents.length === 0) {
container.innerHTML = '<div class="empty-state">У вас нет документов на согласование</div>';
return;
}
container.innerHTML = documents.map(doc => `
<div class="document-card" data-document-id="${doc.id}">
<div class="document-header">
<div class="document-title">
<span class="document-number">Документ №${doc.document_number || doc.id}</span>
<strong>${doc.title}</strong>
<span class="document-status ${getDocumentStatusClass(doc.status)}">${getDocumentStatusText(doc.status)}</span>
${doc.urgency_level === 'urgent' ? '<span class="urgency-badge urgent">Срочно</span>' : ''}
${doc.urgency_level === 'very_urgent' ? '<span class="urgency-badge very-urgent">Очень срочно</span>' : ''}
</div>
<div class="document-meta">
<small>Создан: ${formatDateTime(doc.created_at)}</small>
${doc.due_date ? `<small>Срок: ${formatDateTime(doc.due_date)}</small>` : ''}
</div>
</div>
<div class="document-details">
<div class="document-info">
<p><strong>Тип:</strong> ${doc.document_type_name || 'Не указан'}</p>
<p><strong>Дата документа:</strong> ${doc.document_date ? formatDate(doc.document_date) : 'Не указана'}</p>
<p><strong>Количество страниц:</strong> ${doc.pages_count || 'Не указано'}</p>
${doc.comment ? `<p><strong>Комментарий:</strong> ${doc.comment}</p>` : ''}
</div>
<div class="document-files">
${doc.files && doc.files.length > 0 ? `
<strong>Файлы:</strong>
<div class="file-icons-container">
${doc.files.map(file => renderFileIcon(file)).join('')}
</div>
` : '<strong>Файлы:</strong> <span class="no-files">нет файлов</span>'}
</div>
${doc.refusal_reason ? `
<div class="refusal-reason">
<strong>Причина отказа:</strong> ${doc.refusal_reason}
</div>
` : ''}
<div class="document-actions">
${doc.status === 'assigned' || doc.status === 'in_progress' ? `
<button onclick="cancelDocument(${doc.id})" class="btn-warning">Отозвать</button>
` : ''}
${doc.status === 'refused' ? `
<button onclick="reworkDocument(${doc.id})" class="btn-primary">Исправить и отправить повторно</button>
` : ''}
${doc.status === 'approved' || doc.status === 'received' || doc.status === 'signed' ? `
<button onclick="downloadDocumentPackage(${doc.id})" class="btn-primary">Скачать пакет документов</button>
` : ''}
</div>
</div>
</div>
`).join('');
}
function renderSecretaryDocuments(documents) {
const container = document.getElementById('secretary-documents-list');
if (!container) return;
if (documents.length === 0) {
container.innerHTML = '<div class="empty-state">Нет документов для согласования</div>';
return;
}
container.innerHTML = documents.map(doc => `
<div class="document-card" data-document-id="${doc.id}">
<div class="document-header">
<div class="document-title">
<span class="document-number">Документ №${doc.document_number || doc.id}</span>
<strong>${doc.title}</strong>
<span class="document-status ${getDocumentStatusClass(doc.status)}">${getDocumentStatusText(doc.status)}</span>
${doc.urgency_level === 'urgent' ? '<span class="urgency-badge urgent">Срочно</span>' : ''}
${doc.urgency_level === 'very_urgent' ? '<span class="urgency-badge very-urgent">Очень срочно</span>' : ''}
</div>
<div class="document-meta">
<small>От: ${doc.creator_name}</small>
<small>Создан: ${formatDateTime(doc.created_at)}</small>
${doc.due_date ? `<small>Срок: ${formatDateTime(doc.due_date)}</small>` : ''}
</div>
</div>
<div class="document-details">
<div class="document-info">
<p><strong>Тип:</strong> ${doc.document_type_name || 'Не указан'}</p>
<p><strong>Номер:</strong> ${doc.document_number || 'Не указан'}</p>
<p><strong>Дата документа:</strong> ${doc.document_date ? formatDate(doc.document_date) : 'Не указана'}</p>
<p><strong>Количество страниц:</strong> ${doc.pages_count || 'Не указано'}</p>
${doc.comment ? `<p><strong>Комментарий автора:</strong> ${doc.comment}</p>` : ''}
</div>
<div class="document-files">
${doc.files && doc.files.length > 0 ? `
<strong>Файлы:</strong>
<div class="file-icons-container">
${doc.files.map(file => renderFileIcon(file)).join('')}
</div>
` : '<strong>Файлы:</strong> <span class="no-files">нет файлов</span>'}
</div>
<div class="secretary-actions" id="secretary-actions-${doc.id}">
${doc.status === 'assigned' ? `
<button onclick="updateDocumentStatus(${doc.id}, 'in_progress')" class="btn-primary">Взять в работу</button>
` : ''}
${doc.status === 'in_progress' ? `
<div class="status-buttons">
<button onclick="showApproveModal(${doc.id})" class="btn-success">Согласовать</button>
<button onclick="showReceiveModal(${doc.id})" class="btn-primary">Получен (оригинал)</button>
<button onclick="showRefuseModal(${doc.id})" class="btn-warning">Отказать</button>
</div>
` : ''}
${doc.status === 'approved' ? `
<div class="status-buttons">
<button onclick="showReceiveModal(${doc.id})" class="btn-primary">Получен (оригинал)</button>
<button onclick="updateDocumentStatus(${doc.id}, 'refused')" class="btn-warning">Отказать</button>
</div>
` : ''}
${doc.status === 'received' ? `
<div class="status-buttons">
<button onclick="updateDocumentStatus(${doc.id}, 'signed')" class="btn-success">Подписан</button>
<button onclick="updateDocumentStatus(${doc.id}, 'refused')" class="btn-warning">Отказать</button>
</div>
` : ''}
${doc.status === 'refused' ? `
<p class="refusal-info"><strong>Причина отказа:</strong> ${doc.refusal_reason}</p>
` : ''}
</div>
</div>
</div>
`).join('');
}
function getDocumentStatusClass(status) {
switch(status) {
case 'assigned': return 'status-assigned';
case 'in_progress': return 'status-in-progress';
case 'approved': return 'status-approved';
case 'received': return 'status-received';
case 'signed': return 'status-signed';
case 'refused': return 'status-refused';
case 'cancelled': return 'status-cancelled';
default: return 'status-assigned';
}
}
function getDocumentStatusText(status) {
switch(status) {
case 'assigned': return 'Назначена';
case 'in_progress': return 'В работе';
case 'approved': return 'Согласован';
case 'received': return 'Получен';
case 'signed': return 'Подписан';
case 'refused': return 'Отказано';
case 'cancelled': return 'Отозвано';
default: return status;
}
}
function formatDate(dateString) {
if (!dateString) return '';
return new Date(dateString).toLocaleDateString('ru-RU');
}
// Модальные окна для секретаря
function showApproveModal(documentId) {
currentDocumentId = documentId;
document.getElementById('approve-document-modal').style.display = 'block';
}
function closeApproveModal() {
document.getElementById('approve-document-modal').style.display = 'none';
document.getElementById('approve-comment').value = '';
}
function showReceiveModal(documentId) {
currentDocumentId = documentId;
document.getElementById('receive-document-modal').style.display = 'block';
}
function closeReceiveModal() {
document.getElementById('receive-document-modal').style.display = 'none';
document.getElementById('receive-comment').value = '';
}
function showRefuseModal(documentId) {
currentDocumentId = documentId;
document.getElementById('refuse-document-modal').style.display = 'block';
}
function closeRefuseModal() {
document.getElementById('refuse-document-modal').style.display = 'none';
document.getElementById('refuse-reason').value = '';
}
let currentDocumentId = null;
// Функции для работы с API
async function updateDocumentStatus(documentId, status, comment = '', refusalReason = '') {
try {
const response = await fetch(`/api/documents/${documentId}/status`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
status: status,
comment: comment,
refusalReason: refusalReason
})
});
if (response.ok) {
alert('Статус документа обновлен!');
// Закрываем модальные окна
closeApproveModal();
closeReceiveModal();
closeRefuseModal();
// Обновляем список документов
if (isSecretary()) {
loadSecretaryDocuments();
}
loadMyDocuments();
} else {
const error = await response.json();
alert(error.error || 'Ошибка обновления статуса');
}
} catch (error) {
console.error('Ошибка:', error);
alert('Ошибка обновления статуса');
}
}
async function cancelDocument(documentId) {
if (!confirm('Вы уверены, что хотите отозвать документ?')) {
return;
}
try {
const response = await fetch(`/api/documents/${documentId}/cancel`, {
method: 'POST'
});
if (response.ok) {
alert('Документ отозван!');
loadMyDocuments();
} else {
const error = await response.json();
alert(error.error || 'Ошибка отзыва документа');
}
} catch (error) {
console.error('Ошибка:', error);
alert('Ошибка отзыва документа');
}
}
async function reworkDocument(documentId) {
// Здесь можно открыть форму для повторной отправки
alert('Функция исправления и повторной отправки будет реализована в следующей версии');
}
async function downloadDocumentPackage(documentId) {
try {
const response = await fetch(`/api/documents/${documentId}/package`);
if (response.ok) {
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `document_${documentId}_package.zip`;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
} else {
const error = await response.json();
alert(error.error || 'Ошибка скачивания пакета документов');
}
} catch (error) {
console.error('Ошибка:', error);
alert('Ошибка скачивания пакета документов');
}
}
function isSecretary() {
return currentUser && currentUser.groups && currentUser.groups.includes('Секретарь');
}
function showDocumentSection(sectionName) {
// Скрываем все секции
document.querySelectorAll('.document-section').forEach(section => {
section.style.display = 'none';
});
// Показываем выбранную секцию
const targetSection = document.getElementById(`${sectionName}-section`);
if (targetSection) {
targetSection.style.display = 'block';
}
// Загружаем данные для секции
if (sectionName === 'my-documents') {
loadMyDocuments();
} else if (sectionName === 'secretary-documents' && isSecretary()) {
loadSecretaryDocuments();
}
}
// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
if (window.location.pathname === '/doc') {
initializeDocumentForm();
// Показываем соответствующие секции
if (isSecretary()) {
document.getElementById('secretary-tab').style.display = 'block';
}
// По умолчанию показываем создание документа
showDocumentSection('create-document');
}
});