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

Починка админки полностью1д

This commit is contained in:
MoonTestUse1
2025-01-01 22:53:45 +06:00
parent 57cefa8d6c
commit 00a035653f
4 changed files with 220 additions and 37 deletions

View File

@@ -0,0 +1,81 @@
<template>
<div class="space-y-6">
<div class="flex justify-between items-center">
<h1 class="text-2xl font-bold">Сотрудники</h1>
<router-link
to="/admin/employees/add"
class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 inline-flex items-center gap-2"
>
<PlusCircle class="w-5 h-5" />
Добавить сотрудника
</router-link>
</div>
<!-- Employees table -->
<div class="bg-white rounded-lg shadow">
<div class="overflow-x-auto">
<table class="w-full">
<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">Имя</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">
<button
@click="editEmployee(employee)"
class="text-blue-600 hover:text-blue-900"
>
Редактировать
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { PlusCircle } from 'lucide-vue-next';
interface Employee {
id: number;
first_name: string;
last_name: string;
department: string;
office: string;
}
const employees = ref<Employee[]>([]);
const fetchEmployees = async () => {
try {
const response = await fetch('/api/employees/');
if (!response.ok) throw new Error('Failed to fetch employees');
employees.value = await response.json();
} catch (error) {
console.error('Error fetching employees:', error);
}
};
const editEmployee = (employee: Employee) => {
// Implement edit functionality
console.log('Edit employee:', employee);
};
onMounted(() => {
fetchEmployees();
});
</script>

View File

@@ -0,0 +1,47 @@
<template>
<div class="space-y-6">
<h1 class="text-2xl font-bold">Заявки</h1>
<!-- Requests table -->
<div class="bg-white rounded-lg shadow">
<div class="overflow-x-auto">
<table class="w-full">
<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>
</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">{{ request.id }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ request.employee_last_name }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ getRequestTypeLabel(request.request_type) }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ getStatusLabel(request.status) }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ formatDate(request.created_at) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { useRequests } from '@/composables/useRequests';
import { getRequestTypeLabel, getStatusLabel } from '@/utils/labels';
const { requests, fetchRequests } = useRequests();
const formatDate = (date: string) => {
return new Date(date).toLocaleString('ru-RU');
};
onMounted(() => {
fetchRequests();
});
</script>