mirror of
https://gitlab.com/MoonTestUse1/AdministrationItDepartmens.git
synced 2025-08-14 00:25:46 +02:00
Починка админки полностью1д
This commit is contained in:
MoonTestUse1
62
frontend/src/layouts/AdminLayout.vue
Normal file
62
frontend/src/layouts/AdminLayout.vue
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gray-100">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="fixed inset-y-0 left-0 w-64 bg-slate-800 text-white">
|
||||||
|
<div class="p-4">
|
||||||
|
<h1 class="text-xl font-bold">Админ-панель</h1>
|
||||||
|
</div>
|
||||||
|
<nav class="mt-4">
|
||||||
|
<router-link
|
||||||
|
v-for="item in menuItems"
|
||||||
|
:key="item.path"
|
||||||
|
:to="item.path"
|
||||||
|
class="flex items-center px-4 py-2 text-gray-300 hover:bg-slate-700 hover:text-white"
|
||||||
|
:class="{ 'bg-slate-700 text-white': isCurrentRoute(item.path) }"
|
||||||
|
>
|
||||||
|
<component :is="item.icon" class="w-5 h-5 mr-2" />
|
||||||
|
{{ item.name }}
|
||||||
|
</router-link>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main content -->
|
||||||
|
<main class="pl-64">
|
||||||
|
<div class="p-8">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import {
|
||||||
|
LayoutDashboard,
|
||||||
|
ClipboardList,
|
||||||
|
Users
|
||||||
|
} from 'lucide-vue-next';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const menuItems = [
|
||||||
|
{
|
||||||
|
name: 'Дашборд',
|
||||||
|
path: '/admin/dashboard',
|
||||||
|
icon: LayoutDashboard
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Заявки',
|
||||||
|
path: '/admin/requests',
|
||||||
|
icon: ClipboardList
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Сотрудники',
|
||||||
|
path: '/admin/employees',
|
||||||
|
icon: Users
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const isCurrentRoute = (path: string) => {
|
||||||
|
return route.path.startsWith(path);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -1,51 +1,44 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router';
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
import { useAuthStore } from '@/stores/auth';
|
|
||||||
import LoginView from '../views/LoginView.vue';
|
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(),
|
history: createWebHistory(),
|
||||||
routes: [
|
routes: [
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
name: 'login',
|
|
||||||
component: LoginView
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/support',
|
|
||||||
name: 'support',
|
|
||||||
component: () => import('../views/SupportView.vue'),
|
|
||||||
meta: { requiresAuth: true }
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/admin',
|
path: '/admin',
|
||||||
name: 'admin-login',
|
component: () => import('@/layouts/AdminLayout.vue'),
|
||||||
component: () => import('../views/admin/AdminLoginView.vue')
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
redirect: '/admin/dashboard'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'dashboard',
|
||||||
|
name: 'AdminDashboard',
|
||||||
|
component: () => import('@/views/admin/DashboardView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'requests',
|
||||||
|
name: 'AdminRequests',
|
||||||
|
component: () => import('@/views/admin/RequestsView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'employees',
|
||||||
|
name: 'AdminEmployees',
|
||||||
|
component: () => import('@/views/admin/EmployeesView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'employees/add',
|
||||||
|
name: 'AdminEmployeeAdd',
|
||||||
|
component: () => import('@/views/admin/AddEmployeeView.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/admin/dashboard',
|
path: '/admin/login',
|
||||||
name: 'admin-dashboard',
|
name: 'AdminLogin',
|
||||||
component: () => import('../views/admin/DashboardView.vue'),
|
component: () => import('@/views/admin/AdminLoginView.vue')
|
||||||
meta: { requiresAdmin: true }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/admin/employees/add',
|
|
||||||
name: 'add-employee',
|
|
||||||
component: () => import('../views/admin/AddEmployeeView.vue'),
|
|
||||||
meta: { requiresAdmin: true }
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
router.beforeEach((to, _, next) => {
|
|
||||||
const authStore = useAuthStore();
|
|
||||||
|
|
||||||
if (to.meta.requiresAuth && !authStore.isAuthenticated) {
|
|
||||||
next({ name: 'login' });
|
|
||||||
} else if (to.meta.requiresAdmin && !authStore.isAdmin) {
|
|
||||||
next({ name: 'admin-login' });
|
|
||||||
} else {
|
|
||||||
next();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default router;
|
export default router;
|
||||||
81
frontend/src/views/admin/EmployeesView.vue
Normal file
81
frontend/src/views/admin/EmployeesView.vue
Normal 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>
|
||||||
47
frontend/src/views/admin/RequestsView.vue
Normal file
47
frontend/src/views/admin/RequestsView.vue
Normal 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>
|
||||||
Reference in New Issue
Block a user