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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/layouts/AdminLayout.vue Normal file
View 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>

63
frontend/src/router/index.ts
View File

@@ -1,51 +1,44 @@
import { createRouter, createWebHistory } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import LoginView from '../views/LoginView.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'login',
component: LoginView
},
{
path: '/support',
name: 'support',
component: () => import('../views/SupportView.vue'),
meta: { requiresAuth: true }
},
{
path: '/admin',
name: 'admin-login',
component: () => import('../views/admin/AdminLoginView.vue')
component: () => import('@/layouts/AdminLayout.vue'),
children: [
{
path: '',
redirect: '/admin/dashboard'
},
{
path: '/admin/dashboard',
name: 'admin-dashboard',
component: () => import('../views/admin/DashboardView.vue'),
meta: { requiresAdmin: true }
path: 'dashboard',
name: 'AdminDashboard',
component: () => import('@/views/admin/DashboardView.vue')
},
{
path: '/admin/employees/add',
name: 'add-employee',
component: () => import('../views/admin/AddEmployeeView.vue'),
meta: { requiresAdmin: true }
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/login',
name: 'AdminLogin',
component: () => import('@/views/admin/AdminLoginView.vue')
}
]
});
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;

81
frontend/src/views/admin/EmployeesView.vue Normal file
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>

47
frontend/src/views/admin/RequestsView.vue Normal file
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>