edgar.mendez
983c3265bc
- Deleted the index.html file from the RH components. - Created new DepartmentForm.vue and Departments.vue components for managing departments. - Updated the router to reflect the new path for Departments component. - Added DepartmentsService for API interactions related to departments. - Introduced types for departments in departments.interface.ts. - Updated WarehouseAddInventory.vue to change background color classes. - Configured TypeScript paths in tsconfig.app.json for easier imports. - Enhanced Vite configuration to support aliasing for src directory.
113 lines
3.8 KiB
Vue
113 lines
3.8 KiB
Vue
<template>
|
|
<Dialog
|
|
:visible="visible"
|
|
@update:visible="$emit('update:visible', $event)"
|
|
:modal="true"
|
|
:style="{ width: '800px' }"
|
|
:closable="true"
|
|
class="p-0"
|
|
>
|
|
<template #header>
|
|
<div class="flex flex-col gap-1 w-full">
|
|
<h2 class="text-gray-900 dark:text-white text-2xl font-bold tracking-tight">
|
|
{{ mode === 'create' ? 'Crear Nuevo Departamento' : 'Editar Departamento' }}
|
|
</h2>
|
|
<p class="text-gray-500 dark:text-gray-400 text-base font-normal leading-normal">
|
|
Configure los detalles básicos para habilitar el nuevo departamento en la estructura organizacional.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="p-6 pt-0 space-y-6">
|
|
<!-- Department Name Field -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-gray-900 dark:text-gray-200 text-base font-semibold leading-normal">
|
|
Nombre del Departamento
|
|
</label>
|
|
<InputText
|
|
v-model="localFormData.name"
|
|
placeholder="Ej. Logística, Producción o Calidad"
|
|
class="w-full h-14"
|
|
/>
|
|
<p class="text-gray-500 dark:text-gray-400 text-xs font-normal">
|
|
Este nombre será visible en todos los reportes de RH.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Department Description Field -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-gray-900 dark:text-gray-200 text-base font-semibold leading-normal">
|
|
Descripción del Departamento
|
|
</label>
|
|
<Textarea
|
|
v-model="localFormData.description"
|
|
rows="5"
|
|
placeholder="Describa las funciones, responsabilidades y objetivos principales de este departamento..."
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="flex items-center justify-end gap-4 pt-4 border-t border-gray-200 dark:border-gray-800">
|
|
<Button
|
|
label="Cancelar"
|
|
severity="secondary"
|
|
text
|
|
@click="handleCancel"
|
|
class="px-6"
|
|
/>
|
|
<Button
|
|
:label="mode === 'create' ? 'Guardar Departamento' : 'Actualizar Departamento'"
|
|
icon="pi pi-save"
|
|
@click="handleSave"
|
|
class="px-8"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import Dialog from 'primevue/dialog';
|
|
import Button from 'primevue/button';
|
|
import InputText from 'primevue/inputtext';
|
|
import Textarea from 'primevue/textarea';
|
|
import type { Department } from '../../types/departments.interface';
|
|
|
|
interface Props {
|
|
visible: boolean;
|
|
mode: 'create' | 'edit';
|
|
formData: Partial<Department>;
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:visible', value: boolean): void;
|
|
(e: 'save', data: Partial<Department>): void;
|
|
(e: 'cancel'): void;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const localFormData = ref<Partial<Department>>({ ...props.formData });
|
|
|
|
// Watch for external formData changes
|
|
watch(() => props.formData, (newData) => {
|
|
localFormData.value = { ...newData };
|
|
}, { deep: true });
|
|
|
|
const handleSave = () => {
|
|
emit('save', localFormData.value);
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
emit('update:visible', false);
|
|
emit('cancel');
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Estilos adicionales si son necesarios */
|
|
</style> |