Remnants/AdministrationItDepartmens
1
0
Fork 0
mirror of https://gitlab.com/MoonTestUse1/AdministrationItDepartmens.git synced 2025-08-14 00:25:46 +02:00
Code Activity

доработка модального окна в управлении сотрудника2

Browse Source
This commit is contained in:
MoonTestUse1
2025-01-03 03:34:44 +06:00
parent 3bfa28b84c
commit 45604abddd
1 changed files with 84 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
frontend/src/components/admin/RequestsModal.vue
View File

@@ -6,61 +6,72 @@
<button class="close-button" @click.stop="closeModal">&times;</button> <button class="close-button" @click.stop="closeModal">&times;</button>
</div> </div>
<div class="filters"> <div v-if="isLoading" class="loading-state">
<div class="filter-group"> <p>Загрузка заявок...</p>
<label>Статус:</label>
<select v-model="statusFilter" class="filter-select" @click.stop>
<option value="">Все статусы</option>
<option value="new">Новая</option>
<option value="in_progress">В работе</option>
<option value="completed">Завершена</option>
</select>
</div>
<div class="filter-group">
<label>Приоритет:</label>
<select v-model="priorityFilter" class="filter-select" @click.stop>
<option value="">Все приоритеты</option>
<option value="low">Низкий</option>
<option value="medium">Средний</option>
<option value="high">Высокий</option>
</select>
</div>
</div> </div>
<div class="requests-list"> <div v-else-if="error" class="error-state">
<div v-for="request in filteredRequests" :key="request.id" class="request-card" @click.stop> <p>{{ error }}</p>
<div class="request-header"> <button @click="fetchRequests" class="retry-button">Повторить</button>
<h3>{{ request.title }}</h3> </div>
<div class="request-meta">
<span class="status" :class="request.status">{{ getStatusText(request.status) }}</span>
<span class="priority" :class="request.priority">{{ getPriorityText(request.priority) }}</span>
</div>
</div>
<div class="request-body">
<p class="description">{{ request.description }}</p>
<p class="employee">Сотрудник: {{ request.employee_name }}</p>
<p class="date">Создано: {{ formatDate(request.created_at) }}</p>
</div>
<div class="request-actions"> <template v-else>
<select <div class="filters">
v-model="request.status" <div class="filter-group">
class="status-select" <label>Статус:</label>
@change.stop="updateRequestStatus(request)" <select v-model="statusFilter" class="filter-select" @click.stop>
> <option value="">Все статусы</option>
<option value="new">Новая</option> <option value="new">Новая</option>
<option value="in_progress">В работе</option> <option value="in_progress">В работе</option>
<option value="completed">Завершена</option> <option value="completed">Завершена</option>
</select> </select>
</div> </div>
<div class="filter-group">
<label>Приоритет:</label>
<select v-model="priorityFilter" class="filter-select" @click.stop>
<option value="">Все приоритеты</option>
<option value="low">Низкий</option>
<option value="medium">Средний</option>
<option value="high">Высокий</option>
</select>
</div>
</div> </div>
<div v-if="filteredRequests.length === 0" class="no-requests"> <div class="requests-list">
<p>Заявки не найдены</p> <div v-for="request in filteredRequests" :key="request.id" class="request-card" @click.stop>
<div class="request-header">
<h3>{{ request.title }}</h3>
<div class="request-meta">
<span class="status" :class="request.status">{{ getStatusText(request.status) }}</span>
<span class="priority" :class="request.priority">{{ getPriorityText(request.priority) }}</span>
</div>
</div>
<div class="request-body">
<p class="description">{{ request.description }}</p>
<p class="employee">Сотрудник: {{ request.employee_name }}</p>
<p class="date">Создано: {{ formatDate(request.created_at) }}</p>
</div>
<div class="request-actions">
<select
v-model="request.status"
class="status-select"
@change.stop="updateRequestStatus(request)"
>
<option value="new">Новая</option>
<option value="in_progress">В работе</option>
<option value="completed">Завершена</option>
</select>
</div>
</div>
<div v-if="filteredRequests.length === 0" class="no-requests">
<p>Заявки не найдены</p>
</div>
</div> </div>
</div> </template>
</div> </div>
</div> </div>
</template> </template>
@@ -102,11 +113,13 @@ export default {
async fetchRequests() { async fetchRequests() {
this.isLoading = true this.isLoading = true
try { try {
const response = await axios.get('/api/requests', { console.log('Fetching requests...') // Для отладки
const response = await axios.get('/api/requests/all', {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem('admin_token')}` Authorization: `Bearer ${localStorage.getItem('admin_token')}`
} }
}) })
console.log('Requests response:', response.data) // Для отладки
this.requests = response.data this.requests = response.data
// Получаем информацию о сотрудниках для отображения имен // Получаем информацию о сотрудниках для отображения имен
@@ -115,6 +128,7 @@ export default {
Authorization: `Bearer ${localStorage.getItem('admin_token')}` Authorization: `Bearer ${localStorage.getItem('admin_token')}`
} }
}) })
console.log('Employees response:', employeesResponse.data) // Для отладки
const employees = employeesResponse.data const employees = employeesResponse.data
// Добавляем имена сотрудников к заявкам // Добавляем имена сотрудников к заявкам
@@ -125,9 +139,11 @@ export default {
employee_name: employee ? `${employee.last_name} ${employee.first_name}` : 'Неизвестный сотрудник' employee_name: employee ? `${employee.last_name} ${employee.first_name}` : 'Неизвестный сотрудник'
} }
}) })
console.log('Processed requests:', this.requests) // Для отладки
} catch (error) { } catch (error) {
console.error('Error fetching requests:', error) console.error('Error fetching requests:', error)
this.error = 'Ошибка при загрузке заявок' this.error = 'Ошибка при загрузке заявок'
this.requests = []
} finally { } finally {
this.isLoading = false this.isLoading = false
} }
@@ -370,6 +386,29 @@ export default {
color: #666; color: #666;
} }
.loading-state,
.error-state {
text-align: center;
padding: 2rem;
color: #666;
}
.retry-button {
background-color: #1a237e;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
margin-top: 1rem;
transition: background-color 0.3s;
}
.retry-button:hover {
background-color: #283593;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.modal-content { .modal-content {
padding: 1rem; padding: 1rem;