mirror of
https://gitlab.com/MoonTestUse1/AdministrationItDepartmens.git
synced 2025-08-14 00:25:46 +02:00
Переделка8
This commit is contained in:
MoonTestUse1
@@ -1,139 +1,181 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="min-h-screen bg-gray-900">
|
<div class="min-h-screen bg-gray-900 flex">
|
||||||
<!-- Верхняя панель -->
|
<!-- Основной контент -->
|
||||||
<header class="bg-navy-900 border-b border-navy-700">
|
<div class="flex-1">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<!-- Верхняя панель -->
|
||||||
<div class="flex justify-between items-center h-16">
|
<header class="bg-navy-900 border-b border-navy-700">
|
||||||
<h1 class="text-xl font-medium text-white">Панель администратора</h1>
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<button
|
<div class="flex justify-between items-center h-16">
|
||||||
@click="handleLogout"
|
<h1 class="text-xl font-medium text-white">Панель администратора</h1>
|
||||||
class="text-gray-300 hover:text-white font-medium transition-colors"
|
<button
|
||||||
>
|
@click="handleLogout"
|
||||||
Выйти
|
class="text-gray-300 hover:text-white font-medium transition-colors"
|
||||||
</button>
|
>
|
||||||
</div>
|
Выйти
|
||||||
</div>
|
</button>
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
||||||
<!-- Статистика -->
|
|
||||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3 mb-8">
|
|
||||||
<div class="bg-navy-800 p-6 rounded-lg border border-navy-700">
|
|
||||||
<div class="text-sm font-medium text-gray-400 mb-1">Новые заявки</div>
|
|
||||||
<div class="text-2xl font-medium text-white">{{ statistics.new || 0 }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-navy-800 p-6 rounded-lg border border-navy-700">
|
|
||||||
<div class="text-sm font-medium text-gray-400 mb-1">В работе</div>
|
|
||||||
<div class="text-2xl font-medium text-white">{{ statistics.inProgress || 0 }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-navy-800 p-6 rounded-lg border border-navy-700">
|
|
||||||
<div class="text-sm font-medium text-gray-400 mb-1">Решенные</div>
|
|
||||||
<div class="text-2xl font-medium text-white">{{ statistics.resolved || 0 }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Заявки -->
|
|
||||||
<div class="mb-8">
|
|
||||||
<div class="flex justify-between items-center mb-4">
|
|
||||||
<h2 class="text-lg font-medium text-white">Заявки</h2>
|
|
||||||
</div>
|
|
||||||
<div class="bg-navy-800 rounded-lg overflow-hidden border border-navy-700">
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="min-w-full divide-y divide-navy-700">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">ID</th>
|
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Сотрудник</th>
|
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Отдел</th>
|
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Тип</th>
|
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Приоритет</th>
|
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Статус</th>
|
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Действия</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-navy-700">
|
|
||||||
<tr v-for="request in requests" :key="request.id" class="hover:bg-navy-700">
|
|
||||||
<td class="px-6 py-4 text-sm text-gray-300">{{ request.id }}</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="text-sm text-gray-300">{{ request.employee?.last_name }}</div>
|
|
||||||
<div class="text-sm text-gray-400">{{ request.employee?.first_name }}</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-sm text-gray-300">{{ request.department }}</td>
|
|
||||||
<td class="px-6 py-4 text-sm text-gray-300">{{ request.request_type }}</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<span :class="getPriorityClass(request.priority)">{{ request.priority }}</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<span :class="getStatusClass(request.status)">{{ request.status }}</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-sm">
|
|
||||||
<button
|
|
||||||
@click="openRequestDetails(request)"
|
|
||||||
class="text-blue-400 hover:text-blue-300 mr-3"
|
|
||||||
>
|
|
||||||
Подробнее
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="request.status !== 'resolved'"
|
|
||||||
@click="updateRequestStatus(request)"
|
|
||||||
class="text-blue-400 hover:text-blue-300"
|
|
||||||
>
|
|
||||||
{{ request.status === 'new' ? 'Взять в работу' : 'Завершить' }}
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
|
|
||||||
<!-- Сотрудники -->
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
<div>
|
<!-- Статистика -->
|
||||||
<div class="flex justify-between items-center mb-4">
|
<div v-if="activeSection === 'statistics'" class="space-y-8">
|
||||||
<h2 class="text-lg font-medium text-white">Сотрудники</h2>
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||||
|
<div class="bg-navy-800 p-6 rounded-lg border border-navy-700">
|
||||||
|
<div class="text-sm font-medium text-gray-400 mb-1">Новые заявки</div>
|
||||||
|
<div class="text-2xl font-medium text-white">{{ statistics.new || 0 }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-navy-800 p-6 rounded-lg border border-navy-700">
|
||||||
|
<div class="text-sm font-medium text-gray-400 mb-1">В работе</div>
|
||||||
|
<div class="text-2xl font-medium text-white">{{ statistics.inProgress || 0 }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-navy-800 p-6 rounded-lg border border-navy-700">
|
||||||
|
<div class="text-sm font-medium text-gray-400 mb-1">Решенные</div>
|
||||||
|
<div class="text-2xl font-medium text-white">{{ statistics.resolved || 0 }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Заявки -->
|
||||||
|
<div v-if="activeSection === 'requests'" class="space-y-8">
|
||||||
|
<div class="bg-navy-800 rounded-lg overflow-hidden border border-navy-700">
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="min-w-full divide-y divide-navy-700">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">ID</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Сотрудник</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Отдел</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Тип</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Приоритет</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Статус</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Действия</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-navy-700">
|
||||||
|
<tr v-for="request in requests" :key="request.id" class="hover:bg-navy-700">
|
||||||
|
<td class="px-6 py-4 text-sm text-gray-300">{{ request.id }}</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="text-sm text-gray-300">{{ request.employee?.last_name }}</div>
|
||||||
|
<div class="text-sm text-gray-400">{{ request.employee?.first_name }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-sm text-gray-300">{{ request.department }}</td>
|
||||||
|
<td class="px-6 py-4 text-sm text-gray-300">{{ request.request_type }}</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span :class="getPriorityClass(request.priority)">{{ request.priority }}</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span :class="getStatusClass(request.status)">{{ request.status }}</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-sm">
|
||||||
|
<button
|
||||||
|
@click="openRequestDetails(request)"
|
||||||
|
class="text-blue-400 hover:text-blue-300 mr-3"
|
||||||
|
>
|
||||||
|
Подробнее
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="request.status !== 'resolved'"
|
||||||
|
@click="updateRequestStatus(request)"
|
||||||
|
class="text-blue-400 hover:text-blue-300"
|
||||||
|
>
|
||||||
|
{{ request.status === 'new' ? 'Взять в работу' : 'Завершить' }}
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Сотрудники -->
|
||||||
|
<div v-if="activeSection === 'employees'" class="space-y-8">
|
||||||
|
<div class="flex justify-end mb-4">
|
||||||
|
<button
|
||||||
|
@click="openAddEmployeeModal"
|
||||||
|
class="inline-flex items-center px-4 py-2 text-sm font-medium text-blue-400 hover:text-blue-300 transition-colors"
|
||||||
|
>
|
||||||
|
+ Добавить сотрудника
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="bg-navy-800 rounded-lg overflow-hidden border border-navy-700">
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="min-w-full divide-y divide-navy-700">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">ID</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Имя</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Фамилия</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Отдел</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Кабинет</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Действия</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-navy-700">
|
||||||
|
<tr v-for="employee in employees" :key="employee.id" class="hover:bg-navy-700">
|
||||||
|
<td class="px-6 py-4 text-sm text-gray-300">{{ employee.id }}</td>
|
||||||
|
<td class="px-6 py-4 text-sm text-gray-300">{{ employee.first_name }}</td>
|
||||||
|
<td class="px-6 py-4 text-sm text-gray-300">{{ employee.last_name }}</td>
|
||||||
|
<td class="px-6 py-4 text-sm text-gray-300">{{ employee.department }}</td>
|
||||||
|
<td class="px-6 py-4 text-sm text-gray-300">{{ employee.office }}</td>
|
||||||
|
<td class="px-6 py-4 text-sm">
|
||||||
|
<button
|
||||||
|
@click="openEditEmployeeModal(employee)"
|
||||||
|
class="text-blue-400 hover:text-blue-300"
|
||||||
|
>
|
||||||
|
Редактировать
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Боковое меню -->
|
||||||
|
<div class="w-64 bg-navy-900 border-l border-navy-700">
|
||||||
|
<div class="p-4">
|
||||||
|
<nav class="space-y-2">
|
||||||
<button
|
<button
|
||||||
@click="openAddEmployeeModal"
|
@click="activeSection = 'statistics'"
|
||||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-blue-400 hover:text-blue-300 transition-colors"
|
:class="[
|
||||||
|
'w-full px-4 py-2 text-left rounded-lg text-sm font-medium transition-colors',
|
||||||
|
activeSection === 'statistics'
|
||||||
|
? 'bg-blue-500 text-white'
|
||||||
|
: 'text-gray-300 hover:bg-navy-800'
|
||||||
|
]"
|
||||||
>
|
>
|
||||||
+ Добавить сотрудника
|
Статистика
|
||||||
</button>
|
</button>
|
||||||
</div>
|
<button
|
||||||
<div class="bg-navy-800 rounded-lg overflow-hidden border border-navy-700">
|
@click="activeSection = 'requests'"
|
||||||
<div class="overflow-x-auto">
|
:class="[
|
||||||
<table class="min-w-full divide-y divide-navy-700">
|
'w-full px-4 py-2 text-left rounded-lg text-sm font-medium transition-colors',
|
||||||
<thead>
|
activeSection === 'requests'
|
||||||
<tr>
|
? 'bg-blue-500 text-white'
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">ID</th>
|
: 'text-gray-300 hover:bg-navy-800'
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Имя</th>
|
]"
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Фамилия</th>
|
>
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Отдел</th>
|
Заявки
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Кабинет</th>
|
</button>
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Действия</th>
|
<button
|
||||||
</tr>
|
@click="activeSection = 'employees'"
|
||||||
</thead>
|
:class="[
|
||||||
<tbody class="divide-y divide-navy-700">
|
'w-full px-4 py-2 text-left rounded-lg text-sm font-medium transition-colors',
|
||||||
<tr v-for="employee in employees" :key="employee.id" class="hover:bg-navy-700">
|
activeSection === 'employees'
|
||||||
<td class="px-6 py-4 text-sm text-gray-300">{{ employee.id }}</td>
|
? 'bg-blue-500 text-white'
|
||||||
<td class="px-6 py-4 text-sm text-gray-300">{{ employee.first_name }}</td>
|
: 'text-gray-300 hover:bg-navy-800'
|
||||||
<td class="px-6 py-4 text-sm text-gray-300">{{ employee.last_name }}</td>
|
]"
|
||||||
<td class="px-6 py-4 text-sm text-gray-300">{{ employee.department }}</td>
|
>
|
||||||
<td class="px-6 py-4 text-sm text-gray-300">{{ employee.office }}</td>
|
Сотрудники
|
||||||
<td class="px-6 py-4 text-sm">
|
</button>
|
||||||
<button
|
</nav>
|
||||||
@click="openEditEmployeeModal(employee)"
|
|
||||||
class="text-blue-400 hover:text-blue-300"
|
|
||||||
>
|
|
||||||
Редактировать
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
|
|
||||||
<!-- Модальное окно для заявки -->
|
<!-- Модальное окно для заявки -->
|
||||||
<div v-if="showRequestModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4">
|
<div v-if="showRequestModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4">
|
||||||
@@ -321,6 +363,7 @@ interface EmployeeForm {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const activeSection = ref('statistics')
|
||||||
const statistics = ref<Statistics>({ new: 0, inProgress: 0, resolved: 0 })
|
const statistics = ref<Statistics>({ new: 0, inProgress: 0, resolved: 0 })
|
||||||
const requests = ref<Request[]>([])
|
const requests = ref<Request[]>([])
|
||||||
const employees = ref<Employee[]>([])
|
const employees = ref<Employee[]>([])
|
||||||
|
|||||||
Reference in New Issue
Block a user