mirror of
https://gitlab.com/MoonTestUse1/AdministrationItDepartmens.git
synced 2025-08-14 00:25:46 +02:00
Починка добавления сотрудника7
This commit is contained in:
MoonTestUse1
@@ -1,9 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex justify-between items-center mb-6">
|
||||||
|
<h2 class="text-lg font-semibold">Сотрудники</h2>
|
||||||
|
<button
|
||||||
|
@click="handleAddClick"
|
||||||
|
class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<UserPlusIcon :size="18" />
|
||||||
|
Добавить сотрудника
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-lg shadow overflow-hidden">
|
||||||
|
<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">Фамилия</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Имя</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Отдел</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Кабинет</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Действия</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 text-sm text-gray-900">
|
||||||
|
{{ employee.last_name }}
|
||||||
|
</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">
|
||||||
|
{{ getDepartmentLabel(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-sm text-gray-500">
|
||||||
|
<button
|
||||||
|
@click="editEmployee(employee)"
|
||||||
|
class="text-blue-600 hover:text-blue-900 mr-4 flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<PencilIcon :size="16" />
|
||||||
|
Редактировать
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="showAddForm || editingEmployee" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
|
||||||
|
<EmployeeForm
|
||||||
|
:employee="editingEmployee"
|
||||||
|
@close="closeForm"
|
||||||
|
@submit="handleSubmit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { UserPlusIcon, PencilIcon } from 'lucide-vue-next';
|
||||||
import { departments } from '@/utils/constants';
|
import { departments } from '@/utils/constants';
|
||||||
import type { Employee, EmployeeFormData } from '@/types/employee';
|
import type { Employee, EmployeeFormData } from '@/types/employee';
|
||||||
import EmployeeForm from './EmployeeForm.vue';
|
import EmployeeForm from './EmployeeForm.vue';
|
||||||
|
|
||||||
|
console.log('Initializing EmployeeList component');
|
||||||
|
|
||||||
const employees = ref<Employee[]>([]);
|
const employees = ref<Employee[]>([]);
|
||||||
const showAddForm = ref(false);
|
const showAddForm = ref(false);
|
||||||
const editingEmployee = ref<Employee | null>(null);
|
const editingEmployee = ref<Employee | null>(null);
|
||||||
@@ -13,16 +78,27 @@ function getDepartmentLabel(value: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function editEmployee(employee: Employee) {
|
function editEmployee(employee: Employee) {
|
||||||
|
console.log('Editing employee:', employee);
|
||||||
editingEmployee.value = employee;
|
editingEmployee.value = employee;
|
||||||
showAddForm.value = true;
|
showAddForm.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeForm() {
|
function closeForm() {
|
||||||
|
console.log('Closing form');
|
||||||
showAddForm.value = false;
|
showAddForm.value = false;
|
||||||
editingEmployee.value = null;
|
editingEmployee.value = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Добавляем отладочный вывод для кнопки
|
||||||
|
function handleAddClick() {
|
||||||
|
console.log('Add button clicked');
|
||||||
|
console.log('Previous showAddForm value:', showAddForm.value);
|
||||||
|
showAddForm.value = true;
|
||||||
|
console.log('New showAddForm value:', showAddForm.value);
|
||||||
|
}
|
||||||
|
|
||||||
async function handleSubmit(data: EmployeeFormData) {
|
async function handleSubmit(data: EmployeeFormData) {
|
||||||
|
console.log('Submitting form data:', data);
|
||||||
try {
|
try {
|
||||||
if (editingEmployee.value) {
|
if (editingEmployee.value) {
|
||||||
// Update existing employee
|
// Update existing employee
|
||||||
@@ -68,66 +144,8 @@ async function fetchEmployees() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(fetchEmployees);
|
onMounted(() => {
|
||||||
|
console.log('Component mounted');
|
||||||
|
fetchEmployees();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex justify-between items-center mb-6">
|
|
||||||
<h2 class="text-lg font-semibold">Сотрудники</h2>
|
|
||||||
<button
|
|
||||||
@click="showAddForm = true"
|
|
||||||
class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
|
|
||||||
>
|
|
||||||
Добавить сотрудника
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-white rounded-lg shadow overflow-hidden">
|
|
||||||
<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">Фамилия</th>
|
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Имя</th>
|
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Отдел</th>
|
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Кабинет</th>
|
|
||||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Действия</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 text-sm text-gray-900">
|
|
||||||
{{ employee.last_name }}
|
|
||||||
</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">
|
|
||||||
{{ getDepartmentLabel(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-sm text-gray-500">
|
|
||||||
<button
|
|
||||||
@click="editEmployee(employee)"
|
|
||||||
class="text-blue-600 hover:text-blue-900 mr-4"
|
|
||||||
>
|
|
||||||
Редактировать
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Teleport to="body">
|
|
||||||
<EmployeeForm
|
|
||||||
v-if="showAddForm || editingEmployee"
|
|
||||||
:employee="editingEmployee"
|
|
||||||
@close="closeForm"
|
|
||||||
@submit="handleSubmit"
|
|
||||||
/>
|
|
||||||
</Teleport>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
Reference in New Issue
Block a user