mirror of
https://gitlab.com/MoonTestUse1/AdministrationItDepartmens.git
synced 2025-08-14 00:25:46 +02:00
Переделка5
This commit is contained in:
MoonTestUse1
@@ -1,117 +1,131 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-100">
|
||||
<!-- Верхняя панель -->
|
||||
<nav class="bg-blue-800 shadow-lg">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 flex items-center">
|
||||
<h1 class="text-xl font-bold text-white">IT Support Admin</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<!-- Header -->
|
||||
<header class="bg-white shadow">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Панель администратора</h1>
|
||||
<button
|
||||
@click="handleLogout"
|
||||
class="ml-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-800 bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center gap-2"
|
||||
>
|
||||
Выйти
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="flex">
|
||||
<!-- Боковая панель -->
|
||||
<aside class="w-64 bg-white shadow-lg h-screen">
|
||||
<nav class="mt-5 px-2">
|
||||
<a
|
||||
href="#statistics"
|
||||
class="group flex items-center px-2 py-2 text-base font-medium rounded-md text-blue-800 hover:bg-blue-50"
|
||||
:class="{ 'bg-blue-50': activeTab === 'statistics' }"
|
||||
@click="activeTab = 'statistics'"
|
||||
>
|
||||
Статистика
|
||||
</a>
|
||||
<a
|
||||
href="#requests"
|
||||
class="mt-1 group flex items-center px-2 py-2 text-base font-medium rounded-md text-blue-800 hover:bg-blue-50"
|
||||
:class="{ 'bg-blue-50': activeTab === 'requests' }"
|
||||
@click="activeTab = 'requests'"
|
||||
>
|
||||
Заявки
|
||||
</a>
|
||||
<a
|
||||
href="#employees"
|
||||
class="mt-1 group flex items-center px-2 py-2 text-base font-medium rounded-md text-blue-800 hover:bg-blue-50"
|
||||
:class="{ 'bg-blue-50': activeTab === 'employees' }"
|
||||
@click="activeTab = 'employees'"
|
||||
>
|
||||
Сотрудники
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<main class="flex-1 p-8">
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Статистика -->
|
||||
<div v-if="activeTab === 'statistics'" class="bg-white shadow-lg rounded-lg p-6">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Статистика заявок</h2>
|
||||
<div class="mb-8">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Статистика заявок</h2>
|
||||
<div class="grid grid-cols-1 gap-5 sm:grid-cols-3">
|
||||
<div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-blue-400">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<!-- Новые заявки -->
|
||||
<div class="bg-white overflow-hidden shadow-lg rounded-lg">
|
||||
<div class="p-5">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="rounded-md bg-blue-500 p-3">
|
||||
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">Новые заявки</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-blue-600">{{ statistics.new || 0 }}</dd>
|
||||
<dd class="flex items-baseline">
|
||||
<div class="text-2xl font-semibold text-gray-900">{{ statistics.new || 0 }}</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-yellow-400">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- В работе -->
|
||||
<div class="bg-white overflow-hidden shadow-lg rounded-lg">
|
||||
<div class="p-5">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="rounded-md bg-yellow-500 p-3">
|
||||
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">В работе</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-yellow-600">{{ statistics.inProgress || 0 }}</dd>
|
||||
<dd class="flex items-baseline">
|
||||
<div class="text-2xl font-semibold text-gray-900">{{ statistics.inProgress || 0 }}</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-green-400">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Решенные -->
|
||||
<div class="bg-white overflow-hidden shadow-lg rounded-lg">
|
||||
<div class="p-5">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="rounded-md bg-green-500 p-3">
|
||||
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">Решенные</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-green-600">{{ statistics.resolved || 0 }}</dd>
|
||||
<dd class="flex items-baseline">
|
||||
<div class="text-2xl font-semibold text-gray-900">{{ statistics.resolved || 0 }}</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Заявки -->
|
||||
<div v-if="activeTab === 'requests'" class="bg-white shadow-lg rounded-lg p-6">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Список заявок</h2>
|
||||
<div class="mb-8">
|
||||
<div class="sm:flex sm:items-center sm:justify-between mb-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Список заявок</h2>
|
||||
<div class="mt-3 sm:mt-0 sm:ml-4">
|
||||
<button
|
||||
@click="activeTab = 'requests'"
|
||||
class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
Все заявки
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow-lg rounded-lg overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Сотрудник</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Отдел</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Кабинет</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Тип</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Описание</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Срочность</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Приоритет</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr v-for="request in requests" :key="request.id">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ request.id }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{{ request.employee.last_name }} {{ request.employee.first_name }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ request.employee.department }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ request.employee.office }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ request.request_type }}</td>
|
||||
<td class="px-6 py-4">
|
||||
<button
|
||||
@click="openRequestDetails(request)"
|
||||
class="text-blue-600 hover:text-blue-900"
|
||||
>
|
||||
Просмотр
|
||||
</button>
|
||||
<div class="text-sm text-gray-900">{{ request.employee?.last_name }}</div>
|
||||
<div class="text-sm text-gray-500">{{ request.employee?.first_name }}</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ request.department }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ request.request_type }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span :class="getPriorityClass(request.priority)">
|
||||
{{ request.priority }}
|
||||
@@ -122,12 +136,19 @@
|
||||
{{ request.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<button
|
||||
@click="updateRequestStatus(request)"
|
||||
class="text-blue-600 hover:text-blue-900"
|
||||
@click="openRequestDetails(request)"
|
||||
class="text-blue-600 hover:text-blue-900 mr-3"
|
||||
>
|
||||
Изменить статус
|
||||
Подробнее
|
||||
</button>
|
||||
<button
|
||||
v-if="request.status !== 'resolved'"
|
||||
@click="updateRequestStatus(request)"
|
||||
class="text-green-600 hover:text-green-900"
|
||||
>
|
||||
{{ request.status === 'new' ? 'Взять в работу' : 'Завершить' }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -135,38 +156,43 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Сотрудники -->
|
||||
<div v-if="activeTab === 'employees'" class="bg-white shadow-lg rounded-lg p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Список сотрудников</h2>
|
||||
<div>
|
||||
<div class="sm:flex sm:items-center sm:justify-between mb-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Список сотрудников</h2>
|
||||
<div class="mt-3 sm:mt-0 sm:ml-4">
|
||||
<button
|
||||
@click="openAddEmployeeModal"
|
||||
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
Добавить сотрудника
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow-lg rounded-lg overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Фамилия</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Имя</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Фамилия</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Отдел</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Кабинет</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Должность</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr v-for="employee in employees" :key="employee.id">
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ employee.last_name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ employee.first_name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ employee.department }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ employee.office }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ employee.position }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ employee.id }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ employee.first_name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ employee.last_name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ employee.department }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ employee.office }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<button
|
||||
@click="openEditEmployeeModal(employee)"
|
||||
class="text-blue-600 hover:text-blue-900"
|
||||
@@ -179,71 +205,76 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Модальное окно для просмотра заявки -->
|
||||
<!-- Модальное окно для заявки -->
|
||||
<div v-if="showRequestModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4">
|
||||
<div class="bg-white rounded-lg max-w-2xl w-full p-6">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 class="text-lg font-medium text-gray-900">Детали заявки</h3>
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-medium">Детали заявки #{{ selectedRequest?.id }}</h3>
|
||||
<button @click="showRequestModal = false" class="text-gray-400 hover:text-gray-500">
|
||||
<span class="sr-only">Закрыть</span>
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-4" v-if="selectedRequest">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-500">Сотрудник</h4>
|
||||
<p class="mt-1">{{ selectedRequest.employee.last_name }} {{ selectedRequest.employee.first_name }}</p>
|
||||
<label class="block text-sm font-medium text-gray-700">Описание</label>
|
||||
<p class="mt-1 text-sm text-gray-900">{{ selectedRequest?.description }}</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-500">Отдел</h4>
|
||||
<p class="mt-1">{{ selectedRequest.employee.department }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-500">Кабинет</h4>
|
||||
<p class="mt-1">{{ selectedRequest.employee.office }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-500">Тип проблемы</h4>
|
||||
<p class="mt-1">{{ selectedRequest.request_type }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-500">Описание</h4>
|
||||
<p class="mt-1">{{ selectedRequest.description }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-500">Срочность</h4>
|
||||
<p class="mt-1">
|
||||
<span :class="getPriorityClass(selectedRequest.priority)">
|
||||
{{ selectedRequest.priority }}
|
||||
</span>
|
||||
<label class="block text-sm font-medium text-gray-700">Сотрудник</label>
|
||||
<p class="mt-1 text-sm text-gray-900">
|
||||
{{ selectedRequest?.employee?.last_name }} {{ selectedRequest?.employee?.first_name }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-500">Статус</h4>
|
||||
<label class="block text-sm font-medium text-gray-700">Отдел</label>
|
||||
<p class="mt-1 text-sm text-gray-900">{{ selectedRequest?.department }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Тип заявки</label>
|
||||
<p class="mt-1 text-sm text-gray-900">{{ selectedRequest?.request_type }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Приоритет</label>
|
||||
<p class="mt-1">
|
||||
<span :class="getStatusClass(selectedRequest.status)">
|
||||
{{ selectedRequest.status }}
|
||||
<span :class="getPriorityClass(selectedRequest?.priority)">
|
||||
{{ selectedRequest?.priority }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex justify-end gap-3">
|
||||
<button
|
||||
@click="showRequestModal = false"
|
||||
class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Закрыть
|
||||
</button>
|
||||
<button
|
||||
v-if="selectedRequest?.status !== 'resolved'"
|
||||
@click="updateRequestStatus(selectedRequest)"
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"
|
||||
>
|
||||
{{ selectedRequest?.status === 'new' ? 'Взять в работу' : 'Завершить' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно для редактирования сотрудника -->
|
||||
<!-- Модальное окно для сотрудника -->
|
||||
<div v-if="showEmployeeModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4">
|
||||
<div class="bg-white rounded-lg max-w-md w-full p-6">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 class="text-lg font-medium text-gray-900">
|
||||
{{ isEditingEmployee ? 'Редактирование сотрудника' : 'Добавление сотрудника' }}
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-medium">
|
||||
{{ isEditingEmployee ? 'Редактировать сотрудника' : 'Добавить сотрудника' }}
|
||||
</h3>
|
||||
<button @click="showEmployeeModal = false" class="text-gray-400 hover:text-gray-500">
|
||||
<span class="sr-only">Закрыть</span>
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
@@ -251,69 +282,63 @@
|
||||
</div>
|
||||
<form @submit.prevent="handleEmployeeSubmit" class="space-y-4">
|
||||
<div>
|
||||
<label for="last_name" class="block text-sm font-medium text-gray-700">Фамилия</label>
|
||||
<label class="block text-sm font-medium text-gray-700">Имя</label>
|
||||
<input
|
||||
type="text"
|
||||
id="last_name"
|
||||
v-model="employeeForm.last_name"
|
||||
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="first_name" class="block text-sm font-medium text-gray-700">Имя</label>
|
||||
<input
|
||||
type="text"
|
||||
id="first_name"
|
||||
v-model="employeeForm.first_name"
|
||||
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
type="text"
|
||||
required
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="department" class="block text-sm font-medium text-gray-700">Отдел</label>
|
||||
<label class="block text-sm font-medium text-gray-700">Фамилия</label>
|
||||
<input
|
||||
v-model="employeeForm.last_name"
|
||||
type="text"
|
||||
id="department"
|
||||
required
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Отдел</label>
|
||||
<input
|
||||
v-model="employeeForm.department"
|
||||
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
type="text"
|
||||
required
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="office" class="block text-sm font-medium text-gray-700">Кабинет</label>
|
||||
<label class="block text-sm font-medium text-gray-700">Кабинет</label>
|
||||
<input
|
||||
type="text"
|
||||
id="office"
|
||||
v-model="employeeForm.office"
|
||||
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="position" class="block text-sm font-medium text-gray-700">Должность</label>
|
||||
<input
|
||||
type="text"
|
||||
id="position"
|
||||
v-model="employeeForm.position"
|
||||
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
required
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-700">Пароль</label>
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Пароль {{ isEditingEmployee ? '(оставьте пустым, чтобы не менять)' : '' }}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
v-model="employeeForm.password"
|
||||
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
type="password"
|
||||
:required="!isEditingEmployee"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
@click="showEmployeeModal = false"
|
||||
class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"
|
||||
>
|
||||
{{ isEditingEmployee ? 'Сохранить' : 'Добавить' }}
|
||||
</button>
|
||||
@@ -329,6 +354,41 @@ import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import axios from 'axios'
|
||||
|
||||
interface Statistics {
|
||||
new: number
|
||||
inProgress: number
|
||||
resolved: number
|
||||
}
|
||||
|
||||
interface Employee {
|
||||
id: number
|
||||
first_name: string
|
||||
last_name: string
|
||||
department: string
|
||||
office: string
|
||||
}
|
||||
|
||||
interface Request {
|
||||
id: number
|
||||
employee_id: number
|
||||
employee?: Employee
|
||||
department: string
|
||||
request_type: string
|
||||
priority: 'low' | 'medium' | 'high' | 'critical'
|
||||
description: string
|
||||
status: 'new' | 'in_progress' | 'resolved'
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface EmployeeForm {
|
||||
id: number | null
|
||||
first_name: string
|
||||
last_name: string
|
||||
department: string
|
||||
office: string
|
||||
password: string
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const activeTab = ref('statistics')
|
||||
const statistics = ref<Statistics>({ new: 0, inProgress: 0, resolved: 0 })
|
||||
@@ -344,7 +404,6 @@ const employeeForm = ref<EmployeeForm>({
|
||||
last_name: '',
|
||||
department: '',
|
||||
office: '',
|
||||
position: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
@@ -395,7 +454,6 @@ const openAddEmployeeModal = () => {
|
||||
last_name: '',
|
||||
department: '',
|
||||
office: '',
|
||||
position: '',
|
||||
password: ''
|
||||
}
|
||||
showEmployeeModal.value = true
|
||||
@@ -409,7 +467,6 @@ const openEditEmployeeModal = (employee: Employee) => {
|
||||
last_name: employee.last_name,
|
||||
department: employee.department,
|
||||
office: employee.office,
|
||||
position: employee.position,
|
||||
password: ''
|
||||
}
|
||||
showEmployeeModal.value = true
|
||||
@@ -437,7 +494,9 @@ const handleEmployeeSubmit = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const updateRequestStatus = async (request: Request) => {
|
||||
const updateRequestStatus = async (request: Request | null) => {
|
||||
if (!request) return;
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('admin_token')
|
||||
if (!token) {
|
||||
@@ -475,8 +534,9 @@ const statusClasses = {
|
||||
resolved: 'px-2 py-1 text-sm rounded-full bg-green-100 text-green-800'
|
||||
} as const
|
||||
|
||||
const getPriorityClass = (priority: Request['priority']) => {
|
||||
return priorityClasses[priority]
|
||||
const getPriorityClass = (priority: Request['priority'] | undefined) => {
|
||||
if (!priority) return priorityClasses.low;
|
||||
return priorityClasses[priority];
|
||||
}
|
||||
|
||||
const getStatusClass = (status: Request['status']) => {
|
||||
|
||||
Reference in New Issue
Block a user