mirror of
https://gitlab.com/MoonTestUse1/AdministrationItDepartmens.git
synced 2025-08-14 00:25:46 +02:00
Починка добавления сотрудника11
This commit is contained in:
MoonTestUse1
@@ -3,7 +3,8 @@
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-lg font-semibold">Сотрудники</h2>
|
||||
<button
|
||||
@click="openAddForm"
|
||||
type="button"
|
||||
@click="showAddForm = true"
|
||||
class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 flex items-center gap-2"
|
||||
>
|
||||
<UserPlusIcon :size="18" />
|
||||
@@ -51,106 +52,94 @@
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно -->
|
||||
<div v-if="showAddForm || editingEmployee" class="fixed inset-0 overflow-y-auto" style="z-index: 100;">
|
||||
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true" @click="closeForm">
|
||||
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
|
||||
{{ editingEmployee ? 'Редактировать сотрудника' : 'Добавить сотрудника' }}
|
||||
</h3>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="space-y-4">
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Фамилия</label>
|
||||
<input
|
||||
v-model="formData.last_name"
|
||||
type="text"
|
||||
required
|
||||
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Имя</label>
|
||||
<input
|
||||
v-model="formData.first_name"
|
||||
type="text"
|
||||
required
|
||||
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Отдел</label>
|
||||
<select
|
||||
v-model="formData.department"
|
||||
required
|
||||
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
<option value="">Выберите отдел</option>
|
||||
<option v-for="dept in departments" :key="dept.value" :value="dept.value">
|
||||
{{ dept.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Кабинет</label>
|
||||
<input
|
||||
v-model="formData.office"
|
||||
type="text"
|
||||
required
|
||||
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Пароль {{ !editingEmployee ? '(обязательно)' : '(оставьте пустым, чтобы не менять)' }}
|
||||
</label>
|
||||
<input
|
||||
v-model="formData.password"
|
||||
type="password"
|
||||
:required="!editingEmployee"
|
||||
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
{{ editingEmployee ? 'Сохранить' : 'Добавить' }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="closeForm"
|
||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<Teleport to="body">
|
||||
<div v-if="showAddForm" class="modal-overlay">
|
||||
<div class="modal-wrapper">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3 class="text-lg font-medium">{{ editingEmployee ? 'Редактировать сотрудника' : 'Добавить сотрудника' }}</h3>
|
||||
<button @click="closeForm" class="text-gray-400 hover:text-gray-500">
|
||||
<span class="sr-only">Закрыть</span>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<form @submit.prevent="handleSubmit" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Фамилия</label>
|
||||
<input
|
||||
v-model="formData.last_name"
|
||||
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 class="block text-sm font-medium text-gray-700">Имя</label>
|
||||
<input
|
||||
v-model="formData.first_name"
|
||||
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 class="block text-sm font-medium text-gray-700">Отдел</label>
|
||||
<select
|
||||
v-model="formData.department"
|
||||
required
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Выберите отдел</option>
|
||||
<option v-for="dept in departments" :key="dept.value" :value="dept.value">
|
||||
{{ dept.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Кабинет</label>
|
||||
<input
|
||||
v-model="formData.office"
|
||||
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 class="block text-sm font-medium text-gray-700">
|
||||
Пароль {{ !editingEmployee ? '(обязательно)' : '(оставьте пустым, чтобы не менять)' }}
|
||||
</label>
|
||||
<input
|
||||
v-model="formData.password"
|
||||
type="password"
|
||||
:required="!editingEmployee"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:col-start-2 sm:text-sm"
|
||||
>
|
||||
{{ editingEmployee ? 'Сохранить' : 'Добавить' }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="closeForm"
|
||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:col-start-1 sm:text-sm"
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { UserPlusIcon, PencilIcon } from 'lucide-vue-next';
|
||||
import { departments } from '@/utils/constants';
|
||||
import type { Employee, EmployeeFormData } from '@/types/employee';
|
||||
@@ -167,13 +156,6 @@ const formData = ref<EmployeeFormData>({
|
||||
password: ''
|
||||
});
|
||||
|
||||
function openAddForm() {
|
||||
console.log('Opening add form');
|
||||
showAddForm.value = true;
|
||||
console.log('showAddForm value:', showAddForm.value);
|
||||
}
|
||||
|
||||
// Сброс формы при закрытии
|
||||
function resetForm() {
|
||||
formData.value = {
|
||||
first_name: '',
|
||||
@@ -184,46 +166,29 @@ function resetForm() {
|
||||
};
|
||||
}
|
||||
|
||||
// Наблюдаем за изменением showAddForm
|
||||
watch(showAddForm, (newValue) => {
|
||||
console.log('showAddForm changed:', newValue);
|
||||
});
|
||||
|
||||
// Наблюдаем за изменением editingEmployee
|
||||
watch(editingEmployee, (newEmployee) => {
|
||||
console.log('editingEmployee changed:', newEmployee);
|
||||
if (newEmployee) {
|
||||
formData.value = {
|
||||
first_name: newEmployee.first_name,
|
||||
last_name: newEmployee.last_name,
|
||||
department: newEmployee.department,
|
||||
office: newEmployee.office,
|
||||
password: ''
|
||||
};
|
||||
} else {
|
||||
resetForm();
|
||||
}
|
||||
});
|
||||
|
||||
function getDepartmentLabel(value: string) {
|
||||
return departments.find(d => d.value === value)?.label || value;
|
||||
}
|
||||
|
||||
function editEmployee(employee: Employee) {
|
||||
console.log('Editing employee:', employee);
|
||||
editingEmployee.value = employee;
|
||||
formData.value = {
|
||||
first_name: employee.first_name,
|
||||
last_name: employee.last_name,
|
||||
department: employee.department,
|
||||
office: employee.office,
|
||||
password: ''
|
||||
};
|
||||
showAddForm.value = true;
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
console.log('Closing form');
|
||||
showAddForm.value = false;
|
||||
editingEmployee.value = null;
|
||||
resetForm();
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
console.log('Submitting form:', formData.value);
|
||||
try {
|
||||
const data = { ...formData.value };
|
||||
if (editingEmployee.value && !data.password) {
|
||||
@@ -231,7 +196,6 @@ async function handleSubmit() {
|
||||
}
|
||||
|
||||
if (editingEmployee.value) {
|
||||
// Update existing employee
|
||||
const response = await fetch(`/api/employees/${editingEmployee.value.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
@@ -243,7 +207,6 @@ async function handleSubmit() {
|
||||
throw new Error(error.detail || 'Failed to update employee');
|
||||
}
|
||||
} else {
|
||||
// Create new employee
|
||||
const response = await fetch('/api/employees/', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
@@ -274,18 +237,45 @@ async function fetchEmployees() {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log('Component mounted');
|
||||
fetchEmployees();
|
||||
});
|
||||
onMounted(fetchEmployees);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fixed {
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
background-color: white;
|
||||
border-radius: 0.5rem;
|
||||
width: 100%;
|
||||
max-width: 28rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.modal {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.modal-header button {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user