Add: Feature warehouse
This commit is contained in:
parent
efcad3fe1d
commit
6b7f80d53a
@ -23,6 +23,7 @@ interface Props {
|
|||||||
loading?: boolean;
|
loading?: boolean;
|
||||||
fullWidth?: boolean;
|
fullWidth?: boolean;
|
||||||
iconOnly?: boolean;
|
iconOnly?: boolean;
|
||||||
|
asLink?: boolean; // Nueva prop para comportamiento de link
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
@ -34,6 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|||||||
loading: false,
|
loading: false,
|
||||||
fullWidth: false,
|
fullWidth: false,
|
||||||
iconOnly: false,
|
iconOnly: false,
|
||||||
|
asLink: true, // Por defecto no es link
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
@ -42,8 +44,15 @@ const emit = defineEmits<{
|
|||||||
}>();
|
}>();
|
||||||
|
|
||||||
function handleClick(event: MouseEvent) {
|
function handleClick(event: MouseEvent) {
|
||||||
|
// Si es usado como link, no bloquear la navegación
|
||||||
|
if (props.asLink) {
|
||||||
|
emit('click', event);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Para botones normales, validar estados
|
||||||
if (props.disabled || props.loading) return;
|
if (props.disabled || props.loading) return;
|
||||||
emit('click', event);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const buttonClasses = computed(() => {
|
const buttonClasses = computed(() => {
|
||||||
|
|||||||
@ -93,6 +93,11 @@ onMounted(() => {
|
|||||||
name="Clasificaciones de almacenes"
|
name="Clasificaciones de almacenes"
|
||||||
to="admin.warehouse-classifications.index"
|
to="admin.warehouse-classifications.index"
|
||||||
/>
|
/>
|
||||||
|
<Link
|
||||||
|
icon="straighten"
|
||||||
|
name="Unidades de medida"
|
||||||
|
to="admin.units-measure.index"
|
||||||
|
/>
|
||||||
</Section>
|
</Section>
|
||||||
<Section name="Capacitaciones">
|
<Section name="Capacitaciones">
|
||||||
<DropDown
|
<DropDown
|
||||||
|
|||||||
63
src/pages/UnitsMeasure/Create.vue
Normal file
63
src/pages/UnitsMeasure/Create.vue
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { useRouter, useRoute, RouterLink } from 'vue-router';
|
||||||
|
import { api, useForm } from '@Services/Api';
|
||||||
|
import { apiTo, transl, viewTo } from './Module';
|
||||||
|
|
||||||
|
import IconButton from '@Holos/Button/Icon.vue'
|
||||||
|
import PageHeader from '@Holos/PageHeader.vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
import Form from './Form.vue'
|
||||||
|
|
||||||
|
/** Definidores */
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
const form = useForm({
|
||||||
|
code: '',
|
||||||
|
name: '',
|
||||||
|
abbreviation: '',
|
||||||
|
type: 4, // Unidad por defecto
|
||||||
|
is_active: true
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
function submit() {
|
||||||
|
form.transform(data => ({
|
||||||
|
...data,
|
||||||
|
type: data.type?.value || data.type, // Extraer solo el value si es objeto, sino usar tal como está
|
||||||
|
is_active: data.is_active ? 1 : 0 // Convertir boolean a número
|
||||||
|
})).post(apiTo('store'), {
|
||||||
|
onSuccess: () => {
|
||||||
|
Notify.success('Unidad de medida creada con éxito')
|
||||||
|
router.push(viewTo({ name: 'index' }));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Ciclos */
|
||||||
|
onMounted(() => {
|
||||||
|
// Inicialización si es necesaria
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<PageHeader
|
||||||
|
:title="transl('create.title')"
|
||||||
|
>
|
||||||
|
<RouterLink :to="viewTo({ name: 'index' })">
|
||||||
|
<IconButton
|
||||||
|
class="text-white"
|
||||||
|
icon="arrow_back"
|
||||||
|
:title="$t('return')"
|
||||||
|
filled
|
||||||
|
/>
|
||||||
|
</RouterLink>
|
||||||
|
</PageHeader>
|
||||||
|
|
||||||
|
<Form
|
||||||
|
action="create"
|
||||||
|
:form="form"
|
||||||
|
@submit="submit"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
104
src/pages/UnitsMeasure/Edit.vue
Normal file
104
src/pages/UnitsMeasure/Edit.vue
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||||
|
import { api, useForm } from '@Services/Api';
|
||||||
|
import { viewTo, apiTo, transl } from './Module';
|
||||||
|
import UnitsMeasureService from './services/UnitsMeasureService';
|
||||||
|
|
||||||
|
import IconButton from '@Holos/Button/Icon.vue'
|
||||||
|
import PageHeader from '@Holos/PageHeader.vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
import Form from './Form.vue'
|
||||||
|
|
||||||
|
/** Definiciones */
|
||||||
|
const vroute = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const unitsService = new UnitsMeasureService();
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
const form = useForm({
|
||||||
|
id: null,
|
||||||
|
code: '',
|
||||||
|
name: '',
|
||||||
|
abbreviation: '',
|
||||||
|
type: 4,
|
||||||
|
is_active: true
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
function submit() {
|
||||||
|
form.transform(data => ({
|
||||||
|
...data,
|
||||||
|
type: data.type?.value || data.type, // Extraer solo el value si es objeto, sino usar tal como está
|
||||||
|
is_active: data.is_active ? 1 : 0 // Convertir boolean a número
|
||||||
|
})).put(apiTo('update', { units_of_measure: form.id }), {
|
||||||
|
onSuccess: () => {
|
||||||
|
Notify.success(lang('register.edit.onSuccess'))
|
||||||
|
router.push(viewTo({ name: 'index' }));
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadData() {
|
||||||
|
api.get(apiTo('show', { units_of_measure: vroute.params.id }), {
|
||||||
|
onSuccess: async (r) => {
|
||||||
|
const data = r.data || r.units_of_measure || r;
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
|
||||||
|
// Cargar los tipos para convertir el número a objeto
|
||||||
|
try {
|
||||||
|
const typeOptions = await unitsService.getUnitTypes();
|
||||||
|
const selectedType = typeOptions.find(option => option.id == data.type) || { value: data.type, label: data.name };
|
||||||
|
console.log('Tipos disponibles:', selectedType);
|
||||||
|
|
||||||
|
form.fill({
|
||||||
|
id: data.units.id,
|
||||||
|
code: data.units.code,
|
||||||
|
name: data.units.name,
|
||||||
|
abbreviation: data.units.abbreviation,
|
||||||
|
type: selectedType, // Convertir a objeto {value, label}
|
||||||
|
is_active: Boolean(data.is_active)
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error cargando tipos:', error);
|
||||||
|
// Fallback: usar solo el valor numérico
|
||||||
|
form.fill({
|
||||||
|
id: data.units.id,
|
||||||
|
code: data.units.code,
|
||||||
|
name: data.units.name,
|
||||||
|
abbreviation: data.units.abbreviation,
|
||||||
|
type: data.type,
|
||||||
|
is_active: Boolean(data.is_active)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Ciclos */
|
||||||
|
onMounted(() => {
|
||||||
|
loadData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<PageHeader
|
||||||
|
:title="transl('update.title')"
|
||||||
|
>
|
||||||
|
<RouterLink :to="viewTo({ name: 'index' })">
|
||||||
|
<IconButton
|
||||||
|
class="text-white"
|
||||||
|
icon="arrow_back"
|
||||||
|
:title="$t('return')"
|
||||||
|
filled
|
||||||
|
/>
|
||||||
|
</RouterLink>
|
||||||
|
</PageHeader>
|
||||||
|
|
||||||
|
<Form
|
||||||
|
action="update"
|
||||||
|
:form="form"
|
||||||
|
@submit="submit"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
108
src/pages/UnitsMeasure/Form.vue
Normal file
108
src/pages/UnitsMeasure/Form.vue
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { transl } from './Module';
|
||||||
|
import UnitsMeasureService from './services/UnitsMeasureService';
|
||||||
|
|
||||||
|
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||||
|
import Input from '@Holos/Form/Input.vue';
|
||||||
|
import Selectable from '@Holos/Form/Selectable.vue';
|
||||||
|
import Checkbox from '@Holos/Checkbox.vue';
|
||||||
|
|
||||||
|
/** Eventos */
|
||||||
|
const emit = defineEmits([
|
||||||
|
'submit'
|
||||||
|
])
|
||||||
|
|
||||||
|
/** Servicios */
|
||||||
|
const unitsService = new UnitsMeasureService();
|
||||||
|
|
||||||
|
/** Propiedades reactivas */
|
||||||
|
const typeOptions = ref([]);
|
||||||
|
const loadingTypes = ref(true);
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
defineProps({
|
||||||
|
action: {
|
||||||
|
default: 'create',
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
form: Object
|
||||||
|
})
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
function submit() {
|
||||||
|
emit('submit')
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Cargar tipos de medida desde la API */
|
||||||
|
async function loadUnitTypes() {
|
||||||
|
try {
|
||||||
|
loadingTypes.value = true;
|
||||||
|
typeOptions.value = await unitsService.getUnitTypes();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error cargando tipos de medida:', error);
|
||||||
|
// Usar tipos por defecto en caso de error
|
||||||
|
const fallbackTypes = unitsService.getTypes().map(type => ({
|
||||||
|
value: type.id,
|
||||||
|
label: type.name
|
||||||
|
}));
|
||||||
|
typeOptions.value = fallbackTypes;
|
||||||
|
} finally {
|
||||||
|
loadingTypes.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Ciclo de vida */
|
||||||
|
onMounted(() => {
|
||||||
|
loadUnitTypes();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="w-full pb-2">
|
||||||
|
<p class="text-justify text-sm" v-text="transl(`form.${action}.description`)" />
|
||||||
|
</div>
|
||||||
|
<div class="w-full">
|
||||||
|
<form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||||
|
<Input
|
||||||
|
v-model="form.code"
|
||||||
|
id="code"
|
||||||
|
:onError="form.errors.code"
|
||||||
|
autofocus
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
v-model="form.name"
|
||||||
|
id="name"
|
||||||
|
:onError="form.errors.name"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
v-model="form.abbreviation"
|
||||||
|
id="Abreviación"
|
||||||
|
:onError="form.errors.abbreviation"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Selectable
|
||||||
|
v-model="form.type"
|
||||||
|
id="type"
|
||||||
|
title="Tipo de medida"
|
||||||
|
label="label"
|
||||||
|
:onError="form.errors.type"
|
||||||
|
:options="typeOptions"
|
||||||
|
:disabled="loadingTypes"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="md:col-span-2 lg:col-span-3 xl:col-span-4">
|
||||||
|
<PrimaryButton
|
||||||
|
:loading="form.processing"
|
||||||
|
:disabled="form.processing"
|
||||||
|
>
|
||||||
|
Crear unidad de medida
|
||||||
|
</PrimaryButton>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
124
src/pages/UnitsMeasure/Index.vue
Normal file
124
src/pages/UnitsMeasure/Index.vue
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { useRouter, RouterLink } from 'vue-router';
|
||||||
|
import { useSearcher } from '@Services/Api';
|
||||||
|
import { hasPermission } from '@Plugins/RolePermission';
|
||||||
|
import { can, apiTo, viewTo, transl } from './Module'
|
||||||
|
|
||||||
|
import IconButton from '@Holos/Button/Icon.vue'
|
||||||
|
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||||
|
import SearcherHead from '@Holos/Searcher.vue';
|
||||||
|
import Table from '@Holos/Table.vue';
|
||||||
|
import ShowView from './Modals/Show.vue';
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
const models = ref([]);
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
/** Referencias */
|
||||||
|
const showModal = ref(null);
|
||||||
|
const destroyModal = ref(null);
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
const searcher = useSearcher({
|
||||||
|
url: apiTo('index'),
|
||||||
|
onSuccess: (r) => models.value = r.units_of_measure,
|
||||||
|
onError: () => models.value = []
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Función para eliminar */
|
||||||
|
const deleteItem = (item) => {
|
||||||
|
destroyModal.value.open(item);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Ciclos */
|
||||||
|
onMounted(() => {
|
||||||
|
searcher.search();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<SearcherHead :title="transl('name')" @search="(x) => searcher.search(x)">
|
||||||
|
<RouterLink :to="viewTo({ name: 'create' })">
|
||||||
|
<!-- v-if="can('create')" -->
|
||||||
|
<IconButton class="text-white" icon="add" :title="$t('crud.create')" filled />
|
||||||
|
</RouterLink>
|
||||||
|
<IconButton icon="refresh" :title="$t('refresh')" @click="searcher.search()" />
|
||||||
|
</SearcherHead>
|
||||||
|
<div class="pt-2 w-full">
|
||||||
|
<Table :items="models" :processing="searcher.processing"
|
||||||
|
@send-pagination="(page) => searcher.pagination(page)">
|
||||||
|
<template #head>
|
||||||
|
<th v-text="$t('code')" />
|
||||||
|
<th v-text="$t('Abreviatura')" />
|
||||||
|
<th v-text="$t('Unidad de medida')" />
|
||||||
|
|
||||||
|
<th v-text="$t('Tipo de unidad')" />
|
||||||
|
<th v-text="$t('Estado')" class="w-20 text-center" />
|
||||||
|
<th v-text="$t('Acciones')" class="w-64 text-center" />
|
||||||
|
</template>
|
||||||
|
<template #body="{ items }">
|
||||||
|
<tr v-for="model in items" :key="model.id" class="table-row">
|
||||||
|
<td class="table-cell">
|
||||||
|
<code class="font-mono text-sm text-gray-900 dark:text-gray-100">
|
||||||
|
{{ model.code }}
|
||||||
|
</code>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="table-cell">
|
||||||
|
<span
|
||||||
|
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
|
||||||
|
{{ model.abbreviation }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="table-cell">
|
||||||
|
<span class="font-semibold">{{ model.name }}</span>
|
||||||
|
</td>
|
||||||
|
<td class="table-cell">
|
||||||
|
<span class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
{{ model.type_name || '-' }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="table-cell">
|
||||||
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium" :class="model.is_active
|
||||||
|
? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100'
|
||||||
|
: 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100'">
|
||||||
|
{{ model.is_active ? $t('active') : $t('inactive') }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="table-cell">
|
||||||
|
<div class="table-actions">
|
||||||
|
<IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
|
||||||
|
outline />
|
||||||
|
<RouterLink class="h-fit" :to="viewTo({ name: 'edit', params: { id: model.id } })">
|
||||||
|
<IconButton icon="edit" :title="$t('crud.edit')" outline />
|
||||||
|
</RouterLink>
|
||||||
|
<IconButton icon="delete" :title="$t('crud.destroy')" @click="deleteItem(model)"
|
||||||
|
outline />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<template #empty>
|
||||||
|
<td class="table-cell">
|
||||||
|
<div class="flex items-center text-sm">
|
||||||
|
<p class="font-semibold">
|
||||||
|
{{ $t('registers.empty') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="table-cell">-</td>
|
||||||
|
<td class="table-cell">-</td>
|
||||||
|
<td class="table-cell">-</td>
|
||||||
|
<td class="table-cell">-</td>
|
||||||
|
</template>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ShowView ref="showModal" @reload="searcher.search()" />
|
||||||
|
|
||||||
|
<DestroyView ref="destroyModal" subtitle="name" :to="(id) => apiTo('destroy', { units_of_measure: id })"
|
||||||
|
@update="searcher.search()" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
210
src/pages/UnitsMeasure/Modals/Show.vue
Normal file
210
src/pages/UnitsMeasure/Modals/Show.vue
Normal file
@ -0,0 +1,210 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { getDateTime } from '@Controllers/DateController';
|
||||||
|
import { viewTo, apiTo, transl } from '../Module';
|
||||||
|
import UnitsMeasureService from '../services/UnitsMeasureService';
|
||||||
|
import Notify from '@Plugins/Notify';
|
||||||
|
|
||||||
|
import Header from '@Holos/Modal/Elements/Header.vue';
|
||||||
|
import ShowModal from '@Holos/Modal/Show.vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
import Button from '@Holos/Button/Button.vue';
|
||||||
|
|
||||||
|
/** Eventos */
|
||||||
|
const emit = defineEmits([
|
||||||
|
'close',
|
||||||
|
'reload'
|
||||||
|
]);
|
||||||
|
|
||||||
|
/** Servicios */
|
||||||
|
const unitsService = new UnitsMeasureService();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
const model = ref(null);
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
/** Referencias */
|
||||||
|
const modalRef = ref(null);
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
function close() {
|
||||||
|
model.value = null;
|
||||||
|
emit('close');
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Función para alternar estado */
|
||||||
|
async function toggleStatus(item) {
|
||||||
|
if (loading.value) return;
|
||||||
|
|
||||||
|
const newStatus = !item.is_active;
|
||||||
|
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
|
// Usar el servicio para actualizar el estado
|
||||||
|
await unitsService.updateStatus(item.id, newStatus);
|
||||||
|
|
||||||
|
// Actualizar el modelo local
|
||||||
|
item.is_active = newStatus;
|
||||||
|
|
||||||
|
// Notificación de éxito
|
||||||
|
const statusText = newStatus ? 'activada' : 'desactivada';
|
||||||
|
Notify.success(
|
||||||
|
`Unidad "${item.code}" ${statusText} exitosamente`,
|
||||||
|
'Estado actualizado'
|
||||||
|
);
|
||||||
|
|
||||||
|
// Emitir evento para recargar la lista principal si es necesario
|
||||||
|
emit('reload');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error actualizando estado:', error);
|
||||||
|
|
||||||
|
// Manejo de errores
|
||||||
|
let errorMessage = 'Error al actualizar el estado de la unidad de medida';
|
||||||
|
let errorTitle = 'Error';
|
||||||
|
|
||||||
|
if (error?.response?.data) {
|
||||||
|
const errorData = error.response.data;
|
||||||
|
|
||||||
|
if (errorData.status === 'error') {
|
||||||
|
if (errorData.errors) {
|
||||||
|
const firstField = Object.keys(errorData.errors)[0];
|
||||||
|
const firstError = errorData.errors[firstField];
|
||||||
|
errorMessage = Array.isArray(firstError) ? firstError[0] : firstError;
|
||||||
|
errorTitle = 'Error de validación';
|
||||||
|
} else if (errorData.message) {
|
||||||
|
errorMessage = errorData.message;
|
||||||
|
errorTitle = 'Error del servidor';
|
||||||
|
}
|
||||||
|
} else if (errorData.message) {
|
||||||
|
errorMessage = errorData.message;
|
||||||
|
}
|
||||||
|
} else if (error?.message) {
|
||||||
|
errorMessage = `Error de conexión: ${error.message}`;
|
||||||
|
errorTitle = 'Error de red';
|
||||||
|
}
|
||||||
|
|
||||||
|
Notify.error(errorMessage, errorTitle);
|
||||||
|
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Exposer métodos públicos */
|
||||||
|
defineExpose({
|
||||||
|
open: (data) => {
|
||||||
|
model.value = data;
|
||||||
|
modalRef.value.open();
|
||||||
|
},
|
||||||
|
close
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ShowModal ref="modalRef" @close="close">
|
||||||
|
<div v-if="model">
|
||||||
|
<Header :title="model.code" :subtitle="model.name">
|
||||||
|
<div class="flex w-full flex-col">
|
||||||
|
<div class="flex w-full justify-center items-center">
|
||||||
|
<div
|
||||||
|
class="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
|
||||||
|
<GoogleIcon class="text-white text-3xl" name="straighten" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Header>
|
||||||
|
|
||||||
|
<div class="flex w-full p-4 space-y-6">
|
||||||
|
<div class="w-full space-y-6">
|
||||||
|
<!-- Información Principal -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<!-- Código y Estado -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
{{ $t('code') }}
|
||||||
|
</label>
|
||||||
|
<div class="mt-1">
|
||||||
|
<code
|
||||||
|
class="font-mono text-lg bg-gray-100 dark:bg-gray-700 px-3 py-2 rounded-lg block">
|
||||||
|
{{ model.code }}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
{{ $t('Estado') }}
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<Button :variant="'smooth'" :color="model.is_active ? 'success' : 'danger'"
|
||||||
|
:size="'sm'" :loading="loading" @click="toggleStatus(model)">
|
||||||
|
{{ model.is_active ? $t('Activo') : $t('Inactivo') }}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nombre y Abreviación -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
{{ $t('Unidad de medida') }}
|
||||||
|
</label>
|
||||||
|
<p class="mt-1 text-lg font-semibold">{{ model.name }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
{{ $t('Abreviación') }}
|
||||||
|
</label>
|
||||||
|
<div class="mt-1">
|
||||||
|
<span
|
||||||
|
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
|
||||||
|
{{ model.abbreviation }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tipo de Medida -->
|
||||||
|
<div>
|
||||||
|
<label class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
{{ $t('Tipo de unidad') }}
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<GoogleIcon class="text-2xl mr-3 text-indigo-500" name="straighten" />
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold">{{ model.type_name }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Información de Fechas -->
|
||||||
|
<div class="border-t pt-6">
|
||||||
|
<h4 class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-4">
|
||||||
|
Información del Sistema
|
||||||
|
</h4>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<span class="font-medium text-gray-600 dark:text-gray-400">Creado:</span>
|
||||||
|
<p class="mt-1">{{ getDateTime(model.created_at) }}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="font-medium text-gray-600 dark:text-gray-400">Actualizado:</span>
|
||||||
|
<p class="mt-1">{{ getDateTime(model.updated_at) }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ShowModal>
|
||||||
|
</template>
|
||||||
23
src/pages/UnitsMeasure/Module.js
Normal file
23
src/pages/UnitsMeasure/Module.js
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { lang } from '@Lang/i18n';
|
||||||
|
import { hasPermission } from '@Plugins/RolePermission.js';
|
||||||
|
|
||||||
|
// Ruta API
|
||||||
|
const apiTo = (name, params = {}) => route(`units-of-measure.${name}`, params)
|
||||||
|
|
||||||
|
// Ruta visual
|
||||||
|
const viewTo = ({ name = '', params = {}, query = {} }) => view({
|
||||||
|
name: `admin.units-measure.${name}`, params, query
|
||||||
|
})
|
||||||
|
|
||||||
|
// Obtener traducción del componente
|
||||||
|
const transl = (str) => lang(`admin.units_measure.${str}`)
|
||||||
|
|
||||||
|
// Control de permisos
|
||||||
|
const can = (permission) => hasPermission(`admin.units-measure.${permission}`)
|
||||||
|
|
||||||
|
export {
|
||||||
|
can,
|
||||||
|
viewTo,
|
||||||
|
apiTo,
|
||||||
|
transl
|
||||||
|
}
|
||||||
227
src/pages/UnitsMeasure/services/UnitsMeasureService.js
Normal file
227
src/pages/UnitsMeasure/services/UnitsMeasureService.js
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
/**
|
||||||
|
* Servicio para Units of Measure
|
||||||
|
*
|
||||||
|
* @author Sistema
|
||||||
|
* @version 1.0.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { api, apiURL } from '@Services/Api';
|
||||||
|
|
||||||
|
export default class UnitsMeasureService {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtener todas las unidades de medida
|
||||||
|
* @param {Object} params - Parámetros de la consulta
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async getAll(params = {}) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.get(apiURL('catalogs/units-of-measure'), {
|
||||||
|
params,
|
||||||
|
onSuccess: (response) => resolve(response),
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtener una unidad de medida por ID
|
||||||
|
* @param {number} id - ID de la unidad de medida
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async getById(id) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.get(apiURL(`catalogs/units-of-measure/${id}`), {
|
||||||
|
onSuccess: (response) => resolve(response),
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Crear una nueva unidad de medida
|
||||||
|
* @param {Object} data - Datos de la unidad de medida
|
||||||
|
* @param {string} data.code - Código de la unidad
|
||||||
|
* @param {string} data.name - Nombre de la unidad
|
||||||
|
* @param {string} data.abbreviation - Abreviación de la unidad
|
||||||
|
* @param {number} data.type - Tipo de medida (1-7)
|
||||||
|
* @param {boolean} data.is_active - Estado activo/inactivo
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async create(data) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.post(apiURL('catalogs/units-of-measure'), data, {
|
||||||
|
onSuccess: (response) => resolve(response),
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Actualizar una unidad de medida existente
|
||||||
|
* @param {number} id - ID de la unidad de medida
|
||||||
|
* @param {Object} data - Datos actualizados
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async update(id, data) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.put(apiURL(`catalogs/units-of-measure/${id}`), data, {
|
||||||
|
onSuccess: (response) => resolve(response),
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Eliminar una unidad de medida
|
||||||
|
* @param {number} id - ID de la unidad de medida
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async delete(id) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.delete(apiURL(`catalogs/units-of-measure/${id}`), {
|
||||||
|
onSuccess: (response) => resolve(response),
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Actualizar el estado de una unidad de medida
|
||||||
|
* @param {number} id - ID de la unidad de medida
|
||||||
|
* @param {boolean} isActive - Nuevo estado
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async updateStatus(id, isActive) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.put(apiURL(`catalogs/units-of-measure/${id}`), {
|
||||||
|
data: { is_active: isActive },
|
||||||
|
onSuccess: (response) => {
|
||||||
|
resolve(response);
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
// Mejorar el manejo de errores
|
||||||
|
const enhancedError = {
|
||||||
|
...error,
|
||||||
|
timestamp: new Date().toISOString(),
|
||||||
|
action: 'updateStatus',
|
||||||
|
id: id,
|
||||||
|
is_active: isActive
|
||||||
|
};
|
||||||
|
reject(enhancedError);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtener tipos de medida disponibles desde la API
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async getUnitTypes() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.get(apiURL('catalogs/unit-types'), {
|
||||||
|
onSuccess: (response) => {
|
||||||
|
// Extraer los tipos de la respuesta y formatearlos para el Selectable
|
||||||
|
const unitTypes = response.data?.unit_types || response.unit_types || [];
|
||||||
|
const formattedTypes = unitTypes.map(type => ({
|
||||||
|
value: type.id,
|
||||||
|
label: type.name
|
||||||
|
}));
|
||||||
|
resolve(formattedTypes);
|
||||||
|
},
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtener tipos de medida como objetos completos (para mapping)
|
||||||
|
* @returns {Promise} Promesa con los tipos completos
|
||||||
|
*/
|
||||||
|
async getUnitTypesMap() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.get(apiURL('catalogs/unit-types'), {
|
||||||
|
onSuccess: (response) => {
|
||||||
|
const unitTypes = response.data?.unit_types || response.unit_types || [];
|
||||||
|
// Crear un mapa para acceso rápido por ID
|
||||||
|
const typesMap = {};
|
||||||
|
unitTypes.forEach(type => {
|
||||||
|
typesMap[type.id] = type;
|
||||||
|
});
|
||||||
|
resolve(typesMap);
|
||||||
|
},
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtener tipos de medida disponibles (método legacy - mantener por compatibilidad)
|
||||||
|
* @returns {Array} Array con los tipos de medida
|
||||||
|
*/
|
||||||
|
getTypes() {
|
||||||
|
return [
|
||||||
|
{ id: 1, name: 'Distancia', description: 'Medidas de longitud (metros, kilómetros, etc.)' },
|
||||||
|
{ id: 2, name: 'Peso', description: 'Medidas de masa (kilogramos, gramos, etc.)' },
|
||||||
|
{ id: 3, name: 'Temperatura', description: 'Medidas de temperatura (grados Celsius, etc.)' },
|
||||||
|
{ id: 4, name: 'Unidad', description: 'Unidades discretas (piezas, unidades, etc.)' },
|
||||||
|
{ id: 5, name: 'Volumen', description: 'Medidas de volumen (litros, mililitros, etc.)' }
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtener unidades de medida activas
|
||||||
|
* @returns {Promise} Promesa con las unidades activas
|
||||||
|
*/
|
||||||
|
async getActive() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.getAll({ is_active: true })
|
||||||
|
.then(response => {
|
||||||
|
const activeUnits = response.data?.units_of_measure?.data || [];
|
||||||
|
resolve(activeUnits.filter(unit => unit.is_active));
|
||||||
|
})
|
||||||
|
.catch(error => reject(error));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Buscar unidades de medida por término
|
||||||
|
* @param {string} term - Término de búsqueda
|
||||||
|
* @returns {Promise} Promesa con los resultados
|
||||||
|
*/
|
||||||
|
async search(term) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.getAll({ search: term })
|
||||||
|
.then(response => resolve(response))
|
||||||
|
.catch(error => reject(error));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validar datos antes de enviar
|
||||||
|
* @param {Object} data - Datos a validar
|
||||||
|
* @returns {Object} Objeto con errores si los hay
|
||||||
|
*/
|
||||||
|
validate(data) {
|
||||||
|
const errors = {};
|
||||||
|
|
||||||
|
if (!data.code || data.code.trim() === '') {
|
||||||
|
errors.code = 'El código es requerido';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.name || data.name.trim() === '') {
|
||||||
|
errors.name = 'El nombre es requerido';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.abbreviation || data.abbreviation.trim() === '') {
|
||||||
|
errors.abbreviation = 'La abreviación es requerida';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.type || ![1, 2, 3, 4, 5, 6, 7].includes(data.type)) {
|
||||||
|
errors.type = 'El tipo de medida es requerido y debe ser válido';
|
||||||
|
}
|
||||||
|
|
||||||
|
return errors;
|
||||||
|
}
|
||||||
|
}
|
||||||
66
src/pages/Warehouses/Create.vue
Normal file
66
src/pages/Warehouses/Create.vue
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { useRouter, useRoute, RouterLink } from 'vue-router';
|
||||||
|
import { api, useForm } from '@Services/Api';
|
||||||
|
import { apiTo, transl, viewTo } from './Module';
|
||||||
|
import WarehouseService from './services/WarehouseService';
|
||||||
|
|
||||||
|
import IconButton from '@Holos/Button/Icon.vue'
|
||||||
|
import PageHeader from '@Holos/PageHeader.vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
import Form from './Form.vue'
|
||||||
|
|
||||||
|
/** Definidores */
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const warehouseService = new WarehouseService();
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
const form = useForm({
|
||||||
|
code: '',
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
address: '',
|
||||||
|
classifications: [], // Array de objetos {value, label}
|
||||||
|
is_active: true
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
function submit() {
|
||||||
|
form.transform(data => ({
|
||||||
|
...data,
|
||||||
|
classifications: warehouseService.processClassificationsForSubmit(data.classifications)
|
||||||
|
})).post(apiTo('store'), {
|
||||||
|
onSuccess: () => {
|
||||||
|
Notify.success('Almacén creado con éxito')
|
||||||
|
router.push(viewTo({ name: 'index' }));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Ciclos */
|
||||||
|
onMounted(() => {
|
||||||
|
// Inicialización si es necesaria
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<PageHeader
|
||||||
|
:title="transl('create.title')"
|
||||||
|
>
|
||||||
|
<RouterLink :to="viewTo({ name: 'index' })">
|
||||||
|
<IconButton
|
||||||
|
class="text-white"
|
||||||
|
icon="arrow_back"
|
||||||
|
:title="$t('return')"
|
||||||
|
filled
|
||||||
|
/>
|
||||||
|
</RouterLink>
|
||||||
|
</PageHeader>
|
||||||
|
|
||||||
|
<Form
|
||||||
|
action="create"
|
||||||
|
:form="form"
|
||||||
|
@submit="submit"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
457
src/pages/Warehouses/Details.vue
Normal file
457
src/pages/Warehouses/Details.vue
Normal file
@ -0,0 +1,457 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { useRoute, useRouter, RouterLink } from 'vue-router';
|
||||||
|
import { api } from '@Services/Api';
|
||||||
|
import { apiTo, viewTo, transl } from './Module';
|
||||||
|
import WarehouseService from './services/WarehouseService';
|
||||||
|
|
||||||
|
import Card from '@Holos/Card/Card.vue';
|
||||||
|
import CardHeader from '@Holos/Card/CardHeader.vue';
|
||||||
|
import CardTitle from '@Holos/Card/CardTitle.vue';
|
||||||
|
import CardDescription from '@Holos/Card/CardDescription.vue';
|
||||||
|
import CardContent from '@Holos/Card/CardContent.vue';
|
||||||
|
import PageHeader from '@Holos/PageHeader.vue';
|
||||||
|
import IconButton from '@Holos/Button/Icon.vue';
|
||||||
|
import Button from '@Holos/Button/Button.vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
|
||||||
|
/** Definiciones */
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const warehouseService = new WarehouseService();
|
||||||
|
|
||||||
|
/** Estado reactivo */
|
||||||
|
const warehouse = ref(null);
|
||||||
|
const loading = ref(true);
|
||||||
|
const error = ref(null);
|
||||||
|
|
||||||
|
// Mock data para el dashboard (adaptado del JSX)
|
||||||
|
const totalInventoryValue = ref(2400000);
|
||||||
|
const totalProducts = ref(145);
|
||||||
|
const inventoryMovements = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
date: "2024-01-15T10:30:00",
|
||||||
|
type: "entrada",
|
||||||
|
product: "Laptop Dell Inspiron 15",
|
||||||
|
code: "PROD-001",
|
||||||
|
quantity: 10,
|
||||||
|
warehouse: "Almacén Principal",
|
||||||
|
reference: "PO-2024-001",
|
||||||
|
user: "Ana García",
|
||||||
|
status: "completed"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
date: "2024-01-15T09:15:00",
|
||||||
|
type: "salida",
|
||||||
|
product: "Mouse Inalámbrico Logitech",
|
||||||
|
code: "PROD-002",
|
||||||
|
quantity: 25,
|
||||||
|
warehouse: "Almacén Norte",
|
||||||
|
reference: "SO-2024-045",
|
||||||
|
user: "Carlos López",
|
||||||
|
status: "completed"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const stockByWarehouse = ref([
|
||||||
|
{
|
||||||
|
warehouse: "Almacén Principal",
|
||||||
|
products: [
|
||||||
|
{ code: "PROD-001", name: "Laptop Dell Inspiron 15", stock: 45, value: 719955 },
|
||||||
|
{ code: "PROD-002", name: "Mouse Inalámbrico Logitech", stock: 85, value: 50915 },
|
||||||
|
{ code: "PROD-003", name: "Monitor LG 24 pulgadas", stock: 8, value: 26392 },
|
||||||
|
{ code: "PROD-004", name: "Teclado Mecánico RGB", stock: 15, value: 32985 },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
async function loadWarehouse() {
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
error.value = null;
|
||||||
|
|
||||||
|
const response = await api.get(apiTo('show', { warehouse: route.params.id }), {
|
||||||
|
onSuccess: (r) => {
|
||||||
|
warehouse.value = r.warehouse;
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
error.value = 'Error cargando el almacén';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
error.value = 'Error de conexión';
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Función para navegar a editar */
|
||||||
|
const editWarehouse = () => {
|
||||||
|
router.push(viewTo({ name: 'edit', params: { id: warehouse.value.id } }));
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Función para formatear fecha */
|
||||||
|
const formatDate = (dateString) => {
|
||||||
|
if (!dateString) return 'N/A';
|
||||||
|
return new Date(dateString).toLocaleDateString('es-ES', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Función para formatear moneda */
|
||||||
|
const formatCurrency = (amount) => {
|
||||||
|
return new Intl.NumberFormat('es-MX', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'MXN'
|
||||||
|
}).format(amount);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Función para obtener icono de movimiento */
|
||||||
|
const getMovementIcon = (type) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'entrada': return 'arrow_downward';
|
||||||
|
case 'salida': return 'arrow_upward';
|
||||||
|
case 'transferencia': return 'swap_horiz';
|
||||||
|
case 'ajuste': return 'tune';
|
||||||
|
default: return 'inventory';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Función para obtener clase de badge de movimiento */
|
||||||
|
const getMovementBadgeClass = (type) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'entrada':
|
||||||
|
return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
|
||||||
|
case 'salida':
|
||||||
|
return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
|
||||||
|
case 'transferencia':
|
||||||
|
return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
|
||||||
|
case 'ajuste':
|
||||||
|
return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getAllChildren = (classifications) => {
|
||||||
|
let children = [];
|
||||||
|
const extractChildren = (items) => {
|
||||||
|
items.forEach(item => {
|
||||||
|
if (item.children && item.children.length > 0) {
|
||||||
|
children = children.concat(item.children);
|
||||||
|
extractChildren(item.children);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
extractChildren(classifications);
|
||||||
|
return children;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Función para obtener clase de estado */
|
||||||
|
const getStatusBadgeClass = (status) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'completed':
|
||||||
|
return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
|
||||||
|
case 'pending':
|
||||||
|
return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
|
||||||
|
case 'cancelled':
|
||||||
|
return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Ciclo de vida */
|
||||||
|
onMounted(() => {
|
||||||
|
loadWarehouse();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- Header con navegación -->
|
||||||
|
<PageHeader :title="warehouse?.name || 'Cargando...'" :subtitle="`Código: ${warehouse?.code || 'N/A'}`">
|
||||||
|
<RouterLink :to="viewTo({ name: 'index' })">
|
||||||
|
<IconButton class="text-white" icon="arrow_back" :title="$t('return')" filled />
|
||||||
|
</RouterLink>
|
||||||
|
</PageHeader>
|
||||||
|
|
||||||
|
<!-- Estado de carga -->
|
||||||
|
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
|
||||||
|
<p class="text-gray-600">Cargando información del almacén...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Estado de error -->
|
||||||
|
<div v-else-if="error" class="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
|
||||||
|
<GoogleIcon class="w-12 h-12 text-red-400 mx-auto mb-4" name="error" />
|
||||||
|
<h3 class="text-lg font-medium text-red-800 mb-2">Error al cargar</h3>
|
||||||
|
<p class="text-red-600 mb-4">{{ error }}</p>
|
||||||
|
<Button @click="loadWarehouse()" color="danger" variant="outline">
|
||||||
|
Reintentar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contenido principal -->
|
||||||
|
<div v-else-if="warehouse" class="space-y-6">
|
||||||
|
|
||||||
|
<!-- Información básica -->
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center space-x-3">
|
||||||
|
<GoogleIcon class="w-6 h-6" name="warehouse" />
|
||||||
|
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">{{ warehouse.name
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between gap-3">
|
||||||
|
<Button @click="editWarehouse" color="warning" variant="smooth" size="sm">
|
||||||
|
<GoogleIcon class="w-4 h-4 mr-2" name="edit" />
|
||||||
|
Editar Almacén
|
||||||
|
</Button>
|
||||||
|
<Button variant="smooth" color="info" size="sm">
|
||||||
|
<GoogleIcon class="w-4 h-4 mr-2" name="settings" />
|
||||||
|
Configuración
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
|
||||||
|
|
||||||
|
<!-- Columna Izquierda -->
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- Código -->
|
||||||
|
<div class="space-y-1">
|
||||||
|
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Código</p>
|
||||||
|
<p class="font-mono text-base font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{{ warehouse.code }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Ubicación -->
|
||||||
|
<div class="space-y-1">
|
||||||
|
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Ubicación</p>
|
||||||
|
<p class="text-base text-gray-900 dark:text-gray-100">
|
||||||
|
{{ warehouse.address || 'Guadalajara, Zona Industrial' }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Categoría -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Clasificaciones</p>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<span v-for="classification in warehouse.classifications" :key="classification.id"
|
||||||
|
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
|
||||||
|
{{ classification.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Subclasificaciones</p>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<span v-for="child in getAllChildren(warehouse.classifications)" :key="child.id"
|
||||||
|
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
|
||||||
|
{{ child.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Estado -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Estado</p>
|
||||||
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium"
|
||||||
|
:class="warehouse.is_active
|
||||||
|
? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
|
||||||
|
: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'">
|
||||||
|
{{ warehouse.is_active ? 'Activo' : 'Inactivo' }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Columna Derecha -->
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- Responsable -->
|
||||||
|
<div class="space-y-1">
|
||||||
|
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Responsable</p>
|
||||||
|
<p class="text-base text-gray-900 dark:text-gray-100">
|
||||||
|
{{ warehouse.manager || 'Sin usuario responsable' }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Teléfono -->
|
||||||
|
<div class="space-y-1">
|
||||||
|
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Teléfono</p>
|
||||||
|
<p class="text-base text-gray-900 dark:text-gray-100">
|
||||||
|
{{ warehouse.phone || 'Sin número de teléfono' }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="space-y-1">
|
||||||
|
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Fecha de creación</p>
|
||||||
|
<p class="text-base text-gray-900 dark:text-gray-100">
|
||||||
|
{{ formatDate(warehouse.created_at) }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="space-y-1">
|
||||||
|
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Ultima actualización</p>
|
||||||
|
<p class="text-base text-gray-900 dark:text-gray-100">
|
||||||
|
{{ formatDate(warehouse.updated_at) }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<!-- Recent Movements -->
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle class="flex items-center space-x-2">
|
||||||
|
<GoogleIcon class="w-6 h-6 text-primary" name="history" />
|
||||||
|
<span>Movimientos Recientes</span>
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Últimos movimientos de inventario en este almacén
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div v-for="movement in inventoryMovements" :key="movement.id"
|
||||||
|
class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
|
||||||
|
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<div class="h-10 w-10 rounded-lg flex items-center justify-center" :class="movement.type === 'entrada' ? 'bg-green-100 dark:bg-green-900' :
|
||||||
|
movement.type === 'salida' ? 'bg-red-100 dark:bg-red-900' :
|
||||||
|
movement.type === 'transferencia' ? 'bg-blue-100 dark:bg-blue-900' :
|
||||||
|
'bg-yellow-100 dark:bg-yellow-900'">
|
||||||
|
<GoogleIcon class="w-5 h-5" :class="movement.type === 'entrada' ? 'text-green-600 dark:text-green-400' :
|
||||||
|
movement.type === 'salida' ? 'text-red-600 dark:text-red-400' :
|
||||||
|
movement.type === 'transferencia' ? 'text-blue-600 dark:text-blue-400' :
|
||||||
|
'text-yellow-600 dark:text-yellow-400'"
|
||||||
|
:name="getMovementIcon(movement.type)" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="font-medium text-gray-900 dark:text-gray-100">{{ movement.product }}</p>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
{{ movement.code }} • {{ movement.reference }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<div class="text-right">
|
||||||
|
<span
|
||||||
|
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize"
|
||||||
|
:class="getMovementBadgeClass(movement.type)">
|
||||||
|
{{ movement.type }}
|
||||||
|
</span>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||||
|
Cantidad: {{ movement.quantity }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ movement.user }}
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-gray-500">{{ formatDate(movement.date) }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium capitalize"
|
||||||
|
:class="getStatusBadgeClass(movement.status)">
|
||||||
|
{{ movement.status === 'completed' ? 'Completado' :
|
||||||
|
movement.status === 'pending' ? 'Pendiente' : 'Cancelado' }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<!-- Stock by Products -->
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle class="flex items-center space-x-2">
|
||||||
|
<GoogleIcon class="w-6 h-6 text-primary" name="inventory" />
|
||||||
|
<span>Stock por Productos</span>
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Inventario actual de productos en este almacén
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div v-for="warehouseStock in stockByWarehouse" :key="warehouseStock.warehouse" class="space-y-4">
|
||||||
|
<h4
|
||||||
|
class="font-semibold text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-gray-700 pb-2">
|
||||||
|
{{ warehouseStock.warehouse }}
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
<div v-for="product in warehouseStock.products" :key="product.code"
|
||||||
|
class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<span
|
||||||
|
class="text-xs font-mono text-gray-500 bg-white dark:bg-gray-900 px-2 py-1 rounded">
|
||||||
|
{{ product.code }}
|
||||||
|
</span>
|
||||||
|
<span class="text-sm font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
{{ product.stock }} unidades
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5 class="font-medium text-gray-900 dark:text-gray-100 mb-2 text-sm">
|
||||||
|
{{ product.name }}
|
||||||
|
</h5>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-xs text-gray-600 dark:text-gray-400">Valor total:</span>
|
||||||
|
<span class="text-sm font-semibold text-green-600 dark:text-green-400">
|
||||||
|
{{ formatCurrency(product.value) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Progress bar for stock level -->
|
||||||
|
<div class="mt-3">
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400 mb-1">
|
||||||
|
<span>Stock</span>
|
||||||
|
<span>{{ Math.round((product.stock / 100) * 100) }}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||||
|
<div class="h-2 rounded-full transition-all duration-300" :class="product.stock > 50 ? 'bg-green-500' :
|
||||||
|
product.stock > 20 ? 'bg-yellow-500' : 'bg-red-500'"
|
||||||
|
:style="`width: ${Math.min(100, (product.stock / 100) * 100)}%`">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
129
src/pages/Warehouses/Edit.vue
Normal file
129
src/pages/Warehouses/Edit.vue
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||||
|
import { api, useForm } from '@Services/Api';
|
||||||
|
import { viewTo, apiTo, transl } from './Module';
|
||||||
|
import WarehouseService from './services/WarehouseService';
|
||||||
|
|
||||||
|
|
||||||
|
import IconButton from '@Holos/Button/Icon.vue'
|
||||||
|
import PageHeader from '@Holos/PageHeader.vue';
|
||||||
|
import Form from './Form.vue'
|
||||||
|
|
||||||
|
/** Definiciones */
|
||||||
|
const vroute = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const warehouseService = new WarehouseService();
|
||||||
|
/** Propiedades */
|
||||||
|
const form = useForm({
|
||||||
|
id: null,
|
||||||
|
code: '',
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
address: '',
|
||||||
|
classifications: [], // Array de objetos {value, label}
|
||||||
|
is_active: true
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
function submit() {
|
||||||
|
form.transform(data => ({
|
||||||
|
...data,
|
||||||
|
classifications: warehouseService.processClassificationsForSubmit(data.classifications)
|
||||||
|
})).put(apiTo('update', { warehouse: form.id }), {
|
||||||
|
onSuccess: () => {
|
||||||
|
Notify.success(transl('update.success'))
|
||||||
|
router.push(viewTo({ name: 'index' }));
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadData() {
|
||||||
|
api.get(apiTo('show', { warehouse: vroute.params.id }), {
|
||||||
|
onSuccess: async (r) => {
|
||||||
|
const data = r.warehouse;
|
||||||
|
console.log('Datos del warehouse:', data);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Cargar las clasificaciones disponibles
|
||||||
|
const availableClassifications = await warehouseService.getAvailableClassifications();
|
||||||
|
|
||||||
|
// Procesar las clasificaciones del warehouse para el formulario
|
||||||
|
const warehouseClassifications = data.classifications || [];
|
||||||
|
const formattedClassifications = [];
|
||||||
|
|
||||||
|
warehouseClassifications.forEach(classification => {
|
||||||
|
// Agregar la clasificación padre
|
||||||
|
formattedClassifications.push({
|
||||||
|
value: classification.id,
|
||||||
|
label: classification.name,
|
||||||
|
id: classification.id,
|
||||||
|
name: classification.name
|
||||||
|
});
|
||||||
|
|
||||||
|
// Agregar los hijos si existen
|
||||||
|
if (classification.children && classification.children.length > 0) {
|
||||||
|
classification.children.forEach(child => {
|
||||||
|
formattedClassifications.push({
|
||||||
|
value: child.id,
|
||||||
|
label: child.name,
|
||||||
|
id: child.id,
|
||||||
|
name: child.name
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
form.fill({
|
||||||
|
id: data.id,
|
||||||
|
code: data.code,
|
||||||
|
name: data.name,
|
||||||
|
description: data.description || '',
|
||||||
|
address: data.address || '',
|
||||||
|
classifications: formattedClassifications,
|
||||||
|
is_active: Boolean(data.is_active)
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error cargando clasificaciones:', error);
|
||||||
|
// Fallback: llenar sin formatear las clasificaciones
|
||||||
|
form.fill({
|
||||||
|
id: data.id,
|
||||||
|
code: data.code,
|
||||||
|
name: data.name,
|
||||||
|
description: data.description || '',
|
||||||
|
address: data.address || '',
|
||||||
|
classifications: [],
|
||||||
|
is_active: Boolean(data.is_active)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Ciclos */
|
||||||
|
onMounted(() => {
|
||||||
|
loadData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<PageHeader
|
||||||
|
:title="transl('update.title')"
|
||||||
|
>
|
||||||
|
<RouterLink :to="viewTo({ name: 'index' })">
|
||||||
|
<IconButton
|
||||||
|
class="text-white"
|
||||||
|
icon="arrow_back"
|
||||||
|
:title="$t('return')"
|
||||||
|
filled
|
||||||
|
/>
|
||||||
|
</RouterLink>
|
||||||
|
</PageHeader>
|
||||||
|
|
||||||
|
<Form
|
||||||
|
action="update"
|
||||||
|
:form="form"
|
||||||
|
@submit="submit"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
338
src/pages/Warehouses/Form.vue
Normal file
338
src/pages/Warehouses/Form.vue
Normal file
@ -0,0 +1,338 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, computed, watch } from 'vue';
|
||||||
|
import { transl } from './Module';
|
||||||
|
import WarehouseService from './services/WarehouseService';
|
||||||
|
|
||||||
|
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||||
|
import Input from '@Holos/Form/Input.vue';
|
||||||
|
import Textarea from '@Holos/Form/Textarea.vue';
|
||||||
|
import Selectable from '@Holos/Form/Selectable.vue';
|
||||||
|
import Checkbox from '@Holos/Checkbox.vue';
|
||||||
|
|
||||||
|
/** Eventos */
|
||||||
|
const emit = defineEmits([
|
||||||
|
'submit'
|
||||||
|
])
|
||||||
|
|
||||||
|
/** Servicios */
|
||||||
|
const warehouseService = new WarehouseService();
|
||||||
|
|
||||||
|
/** Propiedades reactivas */
|
||||||
|
const allClassifications = ref([]);
|
||||||
|
const loadingClassifications = ref(true);
|
||||||
|
const selectedParentClassifications = ref([]);
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
const props = defineProps({
|
||||||
|
action: {
|
||||||
|
default: 'create',
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
form: Object
|
||||||
|
})
|
||||||
|
|
||||||
|
/** Computadas */
|
||||||
|
// Obtener solo las clasificaciones padre (sin parent_id)
|
||||||
|
const parentClassifications = computed(() => {
|
||||||
|
return allClassifications.value.filter(classification => !classification.parent_id);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Obtener subclasificaciones de los padres seleccionados
|
||||||
|
const availableSubclassifications = computed(() => {
|
||||||
|
if (selectedParentClassifications.value.length === 0) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return allClassifications.value.filter(classification =>
|
||||||
|
classification.parent_id &&
|
||||||
|
selectedParentClassifications.value.includes(classification.parent_id)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
function submit() {
|
||||||
|
emit('submit')
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Manejar selección de clasificación padre */
|
||||||
|
function handleParentClassificationChange(parentId, isSelected) {
|
||||||
|
if (isSelected) {
|
||||||
|
if (!selectedParentClassifications.value.includes(parentId)) {
|
||||||
|
selectedParentClassifications.value.push(parentId);
|
||||||
|
// Agregar la clasificación padre al form.classifications
|
||||||
|
const parentClassification = allClassifications.value.find(c => c.id === parentId);
|
||||||
|
if (parentClassification) {
|
||||||
|
props.form.classifications.push({
|
||||||
|
value: parentClassification.id,
|
||||||
|
label: parentClassification.name,
|
||||||
|
id: parentClassification.id,
|
||||||
|
name: parentClassification.name
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
selectedParentClassifications.value = selectedParentClassifications.value.filter(id => id !== parentId);
|
||||||
|
|
||||||
|
// Remover la clasificación padre del form.classifications
|
||||||
|
props.form.classifications = props.form.classifications.filter(classification => {
|
||||||
|
const classificationId = classification.value || classification.id || classification;
|
||||||
|
return classificationId !== parentId;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remover también las subclasificaciones de este padre
|
||||||
|
if (props.form.classifications) {
|
||||||
|
props.form.classifications = props.form.classifications.filter(classification => {
|
||||||
|
const classificationId = classification.value || classification.id || classification;
|
||||||
|
const subClass = allClassifications.value.find(c => c.id === classificationId);
|
||||||
|
return !subClass || subClass.parent_id !== parentId;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Cargar clasificaciones desde la API */
|
||||||
|
async function loadClassifications() {
|
||||||
|
try {
|
||||||
|
loadingClassifications.value = true;
|
||||||
|
const response = await warehouseService.getAvailableClassifications();
|
||||||
|
|
||||||
|
// La respuesta viene en el formato { data: { warehouse_classifications: { data: [...] } } }
|
||||||
|
const classificationsData = response.data?.warehouse_classifications?.data || response.warehouse_classifications?.data || response.data || [];
|
||||||
|
|
||||||
|
// Aplanar la estructura jerárquica para tener todos los elementos en un solo array
|
||||||
|
const flattenClassifications = (items) => {
|
||||||
|
let flattened = [];
|
||||||
|
items.forEach(item => {
|
||||||
|
// Agregar el item padre
|
||||||
|
flattened.push(item);
|
||||||
|
// Agregar los hijos si existen
|
||||||
|
if (item.children && item.children.length > 0) {
|
||||||
|
flattened.push(...item.children);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return flattened;
|
||||||
|
};
|
||||||
|
|
||||||
|
allClassifications.value = flattenClassifications(classificationsData);
|
||||||
|
console.log('Clasificaciones cargadas:', allClassifications.value);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error cargando clasificaciones:', error);
|
||||||
|
allClassifications.value = [];
|
||||||
|
} finally {
|
||||||
|
loadingClassifications.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Watch para sincronizar con form.classifications existentes */
|
||||||
|
watch(() => props.form?.classifications, (newClassifications) => {
|
||||||
|
console.log('Watch form.classifications triggered:', newClassifications);
|
||||||
|
if (newClassifications && newClassifications.length > 0 && allClassifications.value.length > 0) {
|
||||||
|
// Extraer padres de las clasificaciones ya seleccionadas
|
||||||
|
const parentIds = new Set();
|
||||||
|
newClassifications.forEach(classification => {
|
||||||
|
const classificationId = classification.value || classification.id || classification;
|
||||||
|
console.log('Processing classification ID:', classificationId);
|
||||||
|
const fullClassification = allClassifications.value.find(c => c.id === classificationId);
|
||||||
|
console.log('Found full classification:', fullClassification);
|
||||||
|
|
||||||
|
if (fullClassification) {
|
||||||
|
if (fullClassification.parent_id) {
|
||||||
|
// Es una subclasificación, agregar su padre
|
||||||
|
console.log('Adding parent ID:', fullClassification.parent_id);
|
||||||
|
parentIds.add(fullClassification.parent_id);
|
||||||
|
} else {
|
||||||
|
// Es una clasificación padre, agregarla directamente
|
||||||
|
console.log('Adding parent classification ID:', fullClassification.id);
|
||||||
|
parentIds.add(fullClassification.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log('Final parent IDs:', Array.from(parentIds));
|
||||||
|
selectedParentClassifications.value = Array.from(parentIds);
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
|
||||||
|
/** Watch adicional para cuando se cargan las clasificaciones */
|
||||||
|
watch(() => allClassifications.value, () => {
|
||||||
|
console.log('Watch allClassifications triggered, length:', allClassifications.value.length);
|
||||||
|
if (props.form?.classifications && allClassifications.value.length > 0) {
|
||||||
|
console.log('Re-processing form.classifications:', props.form.classifications);
|
||||||
|
// Re-ejecutar la lógica de sincronización cuando se cargan las clasificaciones
|
||||||
|
const parentIds = new Set();
|
||||||
|
props.form.classifications.forEach(classification => {
|
||||||
|
const classificationId = classification.value || classification.id || classification;
|
||||||
|
console.log('Re-processing classification ID:', classificationId);
|
||||||
|
const fullClassification = allClassifications.value.find(c => c.id === classificationId);
|
||||||
|
|
||||||
|
if (fullClassification) {
|
||||||
|
if (fullClassification.parent_id) {
|
||||||
|
// Es una subclasificación, agregar su padre
|
||||||
|
console.log('Re-adding parent ID:', fullClassification.parent_id);
|
||||||
|
parentIds.add(fullClassification.parent_id);
|
||||||
|
} else {
|
||||||
|
// Es una clasificación padre, agregarla directamente
|
||||||
|
console.log('Re-adding parent classification ID:', fullClassification.id);
|
||||||
|
parentIds.add(fullClassification.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log('Re-processed parent IDs:', Array.from(parentIds));
|
||||||
|
selectedParentClassifications.value = Array.from(parentIds);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Ciclo de vida */
|
||||||
|
onMounted(() => {
|
||||||
|
loadClassifications();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="w-full pb-2">
|
||||||
|
<p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
|
||||||
|
</div>
|
||||||
|
<div class="w-full">
|
||||||
|
<form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||||
|
<!-- Código del almacén -->
|
||||||
|
<Input
|
||||||
|
v-model="props.form.code"
|
||||||
|
id="code"
|
||||||
|
title="Código"
|
||||||
|
:onError="props.form.errors.code"
|
||||||
|
placeholder="Ej: WH001"
|
||||||
|
autofocus
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Nombre del almacén -->
|
||||||
|
<Input
|
||||||
|
v-model="props.form.name"
|
||||||
|
id="name"
|
||||||
|
title="Nombre"
|
||||||
|
:onError="props.form.errors.name"
|
||||||
|
placeholder="Ej: Almacén Central"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Descripción -->
|
||||||
|
<Textarea
|
||||||
|
v-model="props.form.description"
|
||||||
|
id="description"
|
||||||
|
title="Descripción"
|
||||||
|
:onError="props.form.errors.description"
|
||||||
|
placeholder="Descripción del almacén..."
|
||||||
|
class="md:col-span-2"
|
||||||
|
rows="3"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Dirección -->
|
||||||
|
<Textarea
|
||||||
|
v-model="props.form.address"
|
||||||
|
id="address"
|
||||||
|
title="Dirección"
|
||||||
|
:onError="props.form.errors.address"
|
||||||
|
placeholder="Dirección física del almacén..."
|
||||||
|
class="md:col-span-2"
|
||||||
|
rows="2"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Clasificaciones Jerárquicas -->
|
||||||
|
<div class="md:col-span-2 lg:col-span-3 xl:col-span-4">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- Titulo de Clasificaciones -->
|
||||||
|
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
|
Clasificaciones
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<!-- Mensaje de carga -->
|
||||||
|
<div v-if="loadingClassifications" class="text-sm text-gray-500">
|
||||||
|
Cargando clasificaciones...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Clasificaciones Padre -->
|
||||||
|
<div v-if="parentClassifications.length > 0" class="space-y-3">
|
||||||
|
<h4 class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
Clasificaciones
|
||||||
|
</h4>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||||
|
<div
|
||||||
|
v-for="parent in parentClassifications"
|
||||||
|
:key="parent.id"
|
||||||
|
class="flex items-center space-x-2"
|
||||||
|
>
|
||||||
|
|
||||||
|
<Checkbox
|
||||||
|
:id="`parent-${parent.id}`"
|
||||||
|
:checked="selectedParentClassifications.includes(parent.id)"
|
||||||
|
@update:checked="(value) => handleParentClassificationChange(parent.id, value)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<label
|
||||||
|
:for="`parent-${parent.id}`"
|
||||||
|
class="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer"
|
||||||
|
>
|
||||||
|
{{ parent.name }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tags de clasificaciones seleccionadas -->
|
||||||
|
<div v-if="selectedParentClassifications.length > 0" class="flex flex-wrap gap-2 mt-2">
|
||||||
|
<span
|
||||||
|
v-for="parentId in selectedParentClassifications"
|
||||||
|
:key="parentId"
|
||||||
|
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
|
||||||
|
>
|
||||||
|
{{ parentClassifications.find(p => p.id === parentId)?.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Subclasificaciones -->
|
||||||
|
<div v-if="availableSubclassifications.length > 0" class="space-y-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||||
|
<h4 class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
Subclasificaciones
|
||||||
|
</h4>
|
||||||
|
<Selectable
|
||||||
|
v-model="props.form.classifications"
|
||||||
|
id="subclassifications"
|
||||||
|
label="name"
|
||||||
|
value="id"
|
||||||
|
:onError="props.form.errors.classifications"
|
||||||
|
:options="availableSubclassifications.map(sub => ({
|
||||||
|
value: sub.id,
|
||||||
|
label: sub.name,
|
||||||
|
name: sub.name,
|
||||||
|
id: sub.id
|
||||||
|
}))"
|
||||||
|
placeholder="Seleccionar subclasificaciones"
|
||||||
|
multiple
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mensaje cuando no hay clasificaciones padre seleccionadas -->
|
||||||
|
<div v-else-if="!loadingClassifications && selectedParentClassifications.length === 0" class="text-sm text-gray-500 italic">
|
||||||
|
Selecciona al menos una clasificación para ver las subclasificaciones disponibles
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Error de clasificaciones -->
|
||||||
|
<div v-if="props.form.errors.classifications" class="text-sm text-red-600 dark:text-red-400">
|
||||||
|
{{ props.form.errors.classifications }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Botón de envío -->
|
||||||
|
<div class="md:col-span-2 lg:col-span-3 xl:col-span-4">
|
||||||
|
<PrimaryButton
|
||||||
|
:loading="props.form.processing"
|
||||||
|
:disabled="props.form.processing"
|
||||||
|
>
|
||||||
|
{{ transl(`${props.action}.button`) }}
|
||||||
|
</PrimaryButton>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -1,133 +1,162 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, computed } from 'vue'
|
import { onMounted, ref } from 'vue';
|
||||||
import Table from '@/components/Holos/Table.vue'
|
import { useRouter, RouterLink } from 'vue-router';
|
||||||
import SectionTitle from '@/components/Holos/SectionTitle.vue'
|
import { useSearcher } from '@Services/Api';
|
||||||
import Button from '@/components/Holos/Button/Button.vue'
|
import { hasPermission } from '@Plugins/RolePermission';
|
||||||
import Card from '@/components/Holos/Card/Card.vue'
|
import { can, apiTo, viewTo, transl } from './Module'
|
||||||
import CardHeader from '@/components/Holos/Card/CardHeader.vue'
|
|
||||||
import CardTitle from '@/components/Holos/Card/CardTitle.vue'
|
|
||||||
import CardDescription from '@/components/Holos/Card/CardDescription.vue'
|
|
||||||
import Searcher from '@/components/Holos/Searcher.vue'
|
|
||||||
import SimpleCard from '@/components/Holos/Card/Simple.vue'
|
|
||||||
import Selectable from '@/components/Holos/Form/Selectable.vue'
|
|
||||||
import { api } from '@Services/Api'
|
|
||||||
import { apiTo } from './Module'
|
|
||||||
import CardContent from '../../components/Holos/Card/CardContent.vue'
|
|
||||||
|
|
||||||
const warehouses = ref({});
|
import IconButton from '@Holos/Button/Icon.vue'
|
||||||
const processing = ref(false);
|
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||||
const selectedStatus = ref('');
|
import SearcherHead from '@Holos/Searcher.vue';
|
||||||
|
import Table from '@Holos/Table.vue';
|
||||||
|
import ShowView from './Modals/Show.vue';
|
||||||
|
|
||||||
const statusOptions = [
|
import Card from '@Holos/Card/Card.vue';
|
||||||
{ id: '', name: 'Todos los estados' },
|
import CardHeader from '@Holos/Card/CardHeader.vue';
|
||||||
{ id: 'active', name: 'Activos' },
|
import CardTitle from '@Holos/Card/CardTitle.vue';
|
||||||
{ id: 'inactive', name: 'Inactivos' }
|
import CardDescription from '@Holos/Card/CardDescription.vue';
|
||||||
];
|
import CardContent from '@Holos/Card/CardContent.vue';
|
||||||
|
import Button from '@Holos/Button/Button.vue';
|
||||||
|
|
||||||
const filteredWarehouses = computed(() => {
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
if (!selectedStatus.value || selectedStatus.value === '') {
|
|
||||||
return warehouses.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
const filtered = {
|
/** Propiedades */
|
||||||
...warehouses.value,
|
const models = ref([]);
|
||||||
data: warehouses.value.data?.filter(warehouse => {
|
const router = useRouter();
|
||||||
if (selectedStatus.value === 'active') return warehouse.is_active;
|
|
||||||
if (selectedStatus.value === 'inactive') return !warehouse.is_active;
|
|
||||||
return true;
|
|
||||||
}) || []
|
|
||||||
};
|
|
||||||
|
|
||||||
return filtered;
|
/** Referencias */
|
||||||
|
const showModal = ref(null);
|
||||||
|
const destroyModal = ref(null);
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
const searcher = useSearcher({
|
||||||
|
url: apiTo('index'),
|
||||||
|
onSuccess: (r) => {
|
||||||
|
console.log('Datos recibidos:', r);
|
||||||
|
console.log('Warehouses:', r.warehouses);
|
||||||
|
if (r.warehouses && r.warehouses.length > 0) {
|
||||||
|
console.log('Primer warehouse:', r.warehouses[0]);
|
||||||
|
}
|
||||||
|
models.value = r.warehouses;
|
||||||
|
},
|
||||||
|
onError: () => models.value = []
|
||||||
});
|
});
|
||||||
|
|
||||||
function fetchWarehouses(url = null) {
|
/** Función para eliminar */
|
||||||
processing.value = true;
|
const deleteItem = (item) => {
|
||||||
api.get(url || apiTo('index'), {
|
destroyModal.value.open(item);
|
||||||
onSuccess: (r) => {
|
};
|
||||||
warehouses.value = r.warehouses;
|
|
||||||
processing.value = false;
|
|
||||||
},
|
|
||||||
onError: () => {
|
|
||||||
processing.value = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
/** Función de debug para navegación */
|
||||||
|
const debugNavigation = (warehouse) => {
|
||||||
|
console.log('Debug navigation:', warehouse);
|
||||||
|
console.log('viewTo result:', viewTo({ name: 'edit', params: { id: warehouse.id } }));
|
||||||
|
router.push(viewTo({ name: 'edit', params: { id: warehouse.id } }));
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Ciclos */
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchWarehouses();
|
searcher.search();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="space-y-6">
|
<div>
|
||||||
<SectionTitle>
|
<div className="flex items-center justify-between">
|
||||||
<template #title>Almacenes</template>
|
<div>
|
||||||
<template #description>Listado de almacenes registrados en el sistema.</template>
|
<h1 className="text-3xl font-bold text-foreground">Inventario</h1>
|
||||||
<template #aside>
|
<p className="text-muted-foreground">
|
||||||
<Button color="success" variant="smooth" size="md">
|
Control de stock y movimientos por almacén
|
||||||
Nuevo almacén
|
</p>
|
||||||
</Button>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</SectionTitle>
|
<SearcherHead :title="transl('name')" @search="(x) => searcher.search(x)">
|
||||||
|
<RouterLink :to="viewTo({ name: 'create' })">
|
||||||
|
<IconButton class="text-white" icon="add" :title="$t('crud.create')" filled />
|
||||||
|
</RouterLink>
|
||||||
|
<IconButton icon="refresh" :title="$t('refresh')" @click="searcher.search()" />
|
||||||
|
</SearcherHead>
|
||||||
|
|
||||||
<!-- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
<div>
|
||||||
<SimpleCard icon="warehouse" :title="`Total: ${filteredWarehouses.total || 0}`" />
|
|
||||||
<SimpleCard icon="check_circle"
|
|
||||||
:title="`Activos: ${filteredWarehouses.data?.filter(w => w.is_active)?.length || 0}`" />
|
|
||||||
<SimpleCard icon="cancel"
|
|
||||||
:title="`Inactivos: ${filteredWarehouses.data?.filter(w => !w.is_active)?.length || 0}`" />
|
|
||||||
<SimpleCard icon="category"
|
|
||||||
:title="`Con clasificaciones: ${filteredWarehouses.data?.filter(w => w.classifications?.length > 0)?.length || 0}`" />
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle class="flex items-center justify-between">
|
<CardTitle>Gestión de Almacenes</CardTitle>
|
||||||
<span>Almacenes</span>
|
<CardDescription>
|
||||||
<div class="flex items-center space-x-2">
|
Gestiona los almacenes donde se almacenan los productos. Puedes crear, editar y eliminar almacenes
|
||||||
<span class="text-sm text-muted-foreground">Total de almacenes: {{
|
según sea necesario.
|
||||||
filteredWarehouses.data?.length || 0
|
</CardDescription>
|
||||||
}}</span>
|
|
||||||
</div>
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
<Selectable v-model="selectedStatus" :options="statusOptions" title="Filtrar por estado"
|
|
||||||
placeholder="Seleccionar estado..." label="name" trackBy="id" />
|
<Card v-for="warehouse in models.data" :key="warehouse.id" class="relative overflow-hidden">
|
||||||
</div>
|
<CardContent class="pt-4 pb-4 px-4">
|
||||||
<Table :items="filteredWarehouses" :processing="processing" @send-pagination="fetchWarehouses">
|
<div class="flex items-start justify-between mb-3">
|
||||||
<template #head>
|
<div class="flex items-center space-x-2">
|
||||||
<th class="text-left">Código</th>
|
<GoogleIcon class="w-6 h-6 text-primary" name="warehouse" />
|
||||||
<th class="text-left">Nombre</th>
|
<div>
|
||||||
<th class="text-left">Descripción</th>
|
<h3 class="font-semibold text-sm">{{ warehouse.name }}</h3>
|
||||||
<th class="text-left">Estado</th>
|
<p class="text-xs text-muted-foreground font-mono">
|
||||||
</template>
|
{{ warehouse.code }}
|
||||||
<template #body="{ items }">
|
</p>
|
||||||
<tr v-for="warehouse in items" :key="warehouse.id">
|
</div>
|
||||||
<td>{{ warehouse.code }}</td>
|
</div>
|
||||||
<td>{{ warehouse.name }}</td>
|
<div class="flex items-center space-x-2">
|
||||||
<td>{{ warehouse.description }}</td>
|
|
||||||
<td>
|
|
||||||
<span :class="warehouse.is_active ? 'text-green-600' : 'text-red-600'">
|
|
||||||
{{ warehouse.is_active ? 'Activo' : 'Inactivo' }}
|
{{ warehouse.is_active ? 'Activo' : 'Inactivo' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center space-x-1 text-xs text-muted-foreground mb-2">
|
||||||
|
<GoogleIcon class="w-6 h-6" name="distance" />
|
||||||
|
<p>{{ warehouse.address ? warehouse.address : 'Sin dirección' }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-1 text-xs text-muted-foreground mb-3">
|
||||||
|
|
||||||
|
<span v-for="classification in warehouse.classifications" :key="classification.id"
|
||||||
|
class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">
|
||||||
|
{{ classification.code }}
|
||||||
|
</span>
|
||||||
|
<span v-if="warehouse.classifications.length > 3"
|
||||||
|
class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
|
||||||
|
+{{ warehouse.classifications.length - 3 }}
|
||||||
|
</span>
|
||||||
|
<span v-if="warehouse.classifications.length === 0" class="text-xs text-gray-400">
|
||||||
|
Sin clasificaciones
|
||||||
</span>
|
</span>
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end mt-3 pt-2 border-t border-border gap-3">
|
||||||
|
|
||||||
|
<RouterLink class="h-fit" :to="viewTo({ name: 'details', params: { id: warehouse.id } })">
|
||||||
|
<Button size="sm" variant="solid" color="info" asLink>
|
||||||
|
Ver Detalles
|
||||||
|
</Button>
|
||||||
|
</RouterLink>
|
||||||
|
|
||||||
|
<!-- Opción 1: RouterLink + asLink -->
|
||||||
|
<RouterLink class="h-fit" :to="viewTo({ name: 'edit', params: { id: warehouse.id } })">
|
||||||
|
<Button size="sm" variant="solid" color="warning" asLink>
|
||||||
|
Editar
|
||||||
|
</Button>
|
||||||
|
</RouterLink>
|
||||||
|
|
||||||
|
<Button size="sm" variant="solid" @click="deleteItem(warehouse)" color="danger">
|
||||||
|
Eliminar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</template>
|
|
||||||
<template #empty>
|
|
||||||
<td colspan="4" class="text-center py-4">No hay almacenes registrados.</td>
|
|
||||||
</template>
|
|
||||||
</Table>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
</Card>
|
<ShowView ref="showModal" @reload="searcher.search()" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<DestroyView ref="destroyModal" subtitle="name" :to="(id) => apiTo('destroy', { warehouse: id })"
|
||||||
|
@update="searcher.search()" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
311
src/pages/Warehouses/Modals/Show.vue
Normal file
311
src/pages/Warehouses/Modals/Show.vue
Normal file
@ -0,0 +1,311 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { getDateTime } from '@Controllers/DateController';
|
||||||
|
import { viewTo, apiTo, transl } from '../Module';
|
||||||
|
import WarehouseService from '../services/WarehouseService';
|
||||||
|
import Notify from '@Plugins/Notify';
|
||||||
|
|
||||||
|
import Header from '@Holos/Modal/Elements/Header.vue';
|
||||||
|
import ShowModal from '@Holos/Modal/Show.vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
import Button from '@Holos/Button/Button.vue';
|
||||||
|
import IconButton from '@Holos/Button/Icon.vue';
|
||||||
|
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||||
|
|
||||||
|
/** Eventos */
|
||||||
|
const emit = defineEmits([
|
||||||
|
'close',
|
||||||
|
'reload'
|
||||||
|
]);
|
||||||
|
|
||||||
|
/** Servicios */
|
||||||
|
const warehouseService = new WarehouseService();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
const model = ref(null);
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
/** Referencias */
|
||||||
|
const modalRef = ref(null);
|
||||||
|
const destroyModal = ref(null);
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
function close() {
|
||||||
|
model.value = null;
|
||||||
|
emit('close');
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Función para actualizar el estado del almacén */
|
||||||
|
async function toggleStatus(item) {
|
||||||
|
if (loading.value) return;
|
||||||
|
|
||||||
|
const newStatus = !item.is_active;
|
||||||
|
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
|
// Usar el servicio para actualizar el estado
|
||||||
|
await warehouseService.updateStatus(item.id, newStatus);
|
||||||
|
|
||||||
|
// Actualizar el modelo local
|
||||||
|
item.is_active = newStatus;
|
||||||
|
|
||||||
|
// Notificación de éxito
|
||||||
|
const statusText = newStatus ? 'activado' : 'desactivado';
|
||||||
|
Notify.success(
|
||||||
|
`Almacén "${item.code}" ${statusText} exitosamente`,
|
||||||
|
'Estado actualizado'
|
||||||
|
);
|
||||||
|
|
||||||
|
// Emitir evento para recargar la lista principal si es necesario
|
||||||
|
emit('reload');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error actualizando estado:', error);
|
||||||
|
|
||||||
|
// Manejo específico de errores según la estructura de tu API
|
||||||
|
let errorMessage = 'Error al actualizar el estado del almacén';
|
||||||
|
let errorTitle = 'Error';
|
||||||
|
|
||||||
|
if (error?.response?.data) {
|
||||||
|
const errorData = error.response.data;
|
||||||
|
|
||||||
|
// Caso 1: Error con estructura específica de tu API
|
||||||
|
if (errorData.status === 'error') {
|
||||||
|
if (errorData.errors) {
|
||||||
|
// Errores de validación - extraer el primer error
|
||||||
|
const firstField = Object.keys(errorData.errors)[0];
|
||||||
|
const firstError = errorData.errors[firstField];
|
||||||
|
errorMessage = Array.isArray(firstError) ? firstError[0] : firstError;
|
||||||
|
errorTitle = 'Error de validación';
|
||||||
|
} else if (errorData.message) {
|
||||||
|
// Mensaje general del error
|
||||||
|
errorMessage = errorData.message;
|
||||||
|
errorTitle = 'Error del servidor';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Caso 2: Otros formatos de error
|
||||||
|
else if (errorData.message) {
|
||||||
|
errorMessage = errorData.message;
|
||||||
|
}
|
||||||
|
} else if (error?.message) {
|
||||||
|
// Error genérico de la petición (red, timeout, etc.)
|
||||||
|
errorMessage = `Error de conexión: ${error.message}`;
|
||||||
|
errorTitle = 'Error de red';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Notificación de error
|
||||||
|
Notify.error(errorMessage, errorTitle);
|
||||||
|
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Función para editar almacén */
|
||||||
|
function editWarehouse() {
|
||||||
|
// Navegar a la vista de edición del almacén
|
||||||
|
const editUrl = viewTo({ name: 'edit', params: { id: model.value.id } });
|
||||||
|
router.push(editUrl);
|
||||||
|
// Cerrar el modal actual
|
||||||
|
close();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Función para eliminar almacén */
|
||||||
|
function deleteWarehouse() {
|
||||||
|
destroyModal.value.open(model.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Función para recargar después de eliminar */
|
||||||
|
function onWarehouseDeleted() {
|
||||||
|
close();
|
||||||
|
emit('reload');
|
||||||
|
|
||||||
|
Notify.success(
|
||||||
|
'Almacén eliminado exitosamente',
|
||||||
|
'Eliminación exitosa'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Función para cancelar eliminación */
|
||||||
|
function onDeleteCancelled() {
|
||||||
|
// No es necesario hacer nada especial
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Exposer métodos públicos */
|
||||||
|
defineExpose({
|
||||||
|
open: (data) => {
|
||||||
|
model.value = data;
|
||||||
|
modalRef.value.open();
|
||||||
|
},
|
||||||
|
close
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ShowModal
|
||||||
|
ref="modalRef"
|
||||||
|
@close="close"
|
||||||
|
>
|
||||||
|
<div v-if="model">
|
||||||
|
<Header
|
||||||
|
:title="model.code"
|
||||||
|
:subtitle="model.name"
|
||||||
|
>
|
||||||
|
<div class="flex w-full flex-col">
|
||||||
|
<div class="flex w-full justify-center items-center">
|
||||||
|
<div class="w-24 h-24 rounded-full bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center">
|
||||||
|
<GoogleIcon
|
||||||
|
class="text-white text-3xl"
|
||||||
|
name="warehouse"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Header>
|
||||||
|
|
||||||
|
<div class="flex w-full p-4 space-y-6">
|
||||||
|
<div class="w-full space-y-6">
|
||||||
|
<!-- Información Principal -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<!-- Código y Estado -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
{{ transl('code') }}
|
||||||
|
</label>
|
||||||
|
<div class="mt-1">
|
||||||
|
<code class="font-mono text-lg bg-gray-100 dark:bg-gray-700 px-3 py-2 rounded-lg block">
|
||||||
|
{{ model.code }}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
{{ transl('is_active') }}
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<Button
|
||||||
|
:variant="'smooth'"
|
||||||
|
:color="model.is_active ? 'success' : 'danger'"
|
||||||
|
:size="'sm'"
|
||||||
|
:loading="loading"
|
||||||
|
@click="toggleStatus(model)"
|
||||||
|
>
|
||||||
|
{{ model.is_active ? $t('Activo') : $t('Inactivo') }}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nombre y Dirección -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
{{ transl('name') }}
|
||||||
|
</label>
|
||||||
|
<p class="mt-1 text-lg font-semibold">{{ model.name }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="model.address">
|
||||||
|
<label class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
{{ transl('address') }}
|
||||||
|
</label>
|
||||||
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ model.address }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Descripción -->
|
||||||
|
<div v-if="model.description">
|
||||||
|
<label class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
{{ transl('description') }}
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||||
|
<p class="text-sm">{{ model.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Clasificaciones -->
|
||||||
|
<div>
|
||||||
|
<label class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
{{ transl('classifications') }}
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<div v-if="model.classifications && model.classifications.length > 0" class="flex flex-wrap gap-2">
|
||||||
|
<span
|
||||||
|
v-for="classification in model.classifications"
|
||||||
|
:key="classification.id"
|
||||||
|
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200"
|
||||||
|
>
|
||||||
|
<GoogleIcon class="w-4 h-4 mr-2" name="category" />
|
||||||
|
{{ classification.code }} - {{ classification.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div v-else class="flex items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||||
|
<GoogleIcon class="w-5 h-5 mr-2 text-gray-400" name="info" />
|
||||||
|
<p class="text-sm text-gray-500">Sin clasificaciones asignadas</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Información de Fechas -->
|
||||||
|
<div class="border-t pt-6">
|
||||||
|
<h4 class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-4">
|
||||||
|
Información del Sistema
|
||||||
|
</h4>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<span class="font-medium text-gray-600 dark:text-gray-400">Creado:</span>
|
||||||
|
<p class="mt-1">{{ getDateTime(model.created_at) }}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="font-medium text-gray-600 dark:text-gray-400">Actualizado:</span>
|
||||||
|
<p class="mt-1">{{ getDateTime(model.updated_at) }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Botones de acción -->
|
||||||
|
<div class="flex justify-between space-x-3 pt-4 border-t">
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
@click="editWarehouse"
|
||||||
|
>
|
||||||
|
<GoogleIcon class="w-4 h-4 mr-2" name="edit" />
|
||||||
|
{{ $t('crud.edit') }}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
color="danger"
|
||||||
|
@click="deleteWarehouse"
|
||||||
|
>
|
||||||
|
<GoogleIcon class="w-4 h-4 mr-2" name="delete" />
|
||||||
|
{{ $t('crud.destroy') }}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
@click="close"
|
||||||
|
>
|
||||||
|
{{ $t('crud.close') }}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ShowModal>
|
||||||
|
|
||||||
|
<!-- Modal de confirmación para eliminar -->
|
||||||
|
<DestroyView
|
||||||
|
ref="destroyModal"
|
||||||
|
subtitle="name"
|
||||||
|
:to="(id) => apiTo('destroy', { warehouse: id })"
|
||||||
|
@update="onWarehouseDeleted"
|
||||||
|
@cancel="onDeleteCancelled"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
@ -1,15 +1,22 @@
|
|||||||
import { lang } from '@Lang/i18n';
|
import { lang } from '@Lang/i18n';
|
||||||
|
import { hasPermission } from '@Plugins/RolePermission.js';
|
||||||
|
|
||||||
// Ruta API
|
// Ruta API
|
||||||
const apiTo = (name, params = {}) => route(`warehouses.${name}`, params)
|
const apiTo = (name, params = {}) => route(`warehouses.${name}`, params)
|
||||||
|
|
||||||
// Ruta visual
|
// Ruta visual
|
||||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `warehouses.${name}`, params, query })
|
const viewTo = ({ name = '', params = {}, query = {} }) => view({
|
||||||
|
name: `admin.warehouses.${name}`, params, query
|
||||||
|
})
|
||||||
|
|
||||||
// Obtener traducción del componente
|
// Obtener traducción del componente
|
||||||
const transl = (str) => lang(`warehouses.${str}`)
|
const transl = (str) => lang(`admin.warehouses.${str}`)
|
||||||
|
|
||||||
|
// Control de permisos
|
||||||
|
const can = (permission) => hasPermission(`admin.warehouses.${permission}`)
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
can,
|
||||||
viewTo,
|
viewTo,
|
||||||
apiTo,
|
apiTo,
|
||||||
transl
|
transl
|
||||||
|
|||||||
1125
src/pages/Warehouses/e.jsx
Normal file
1125
src/pages/Warehouses/e.jsx
Normal file
File diff suppressed because it is too large
Load Diff
125
src/pages/Warehouses/interfaces/warehouses.interfaces.js
Normal file
125
src/pages/Warehouses/interfaces/warehouses.interfaces.js
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
/**
|
||||||
|
* Interfaces para Warehouses
|
||||||
|
*
|
||||||
|
* @author Sistema
|
||||||
|
* @version 1.0.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} WarehouseClassification
|
||||||
|
* @property {number} id - ID de la clasificación
|
||||||
|
* @property {string} code - Código de la clasificación
|
||||||
|
* @property {string} name - Nombre de la clasificación
|
||||||
|
* @property {string|null} description - Descripción de la clasificación
|
||||||
|
* @property {boolean} is_active - Estado activo/inactivo
|
||||||
|
* @property {number|null} parent_id - ID del padre
|
||||||
|
* @property {string} created_at - Fecha de creación
|
||||||
|
* @property {string} updated_at - Fecha de actualización
|
||||||
|
* @property {string|null} deleted_at - Fecha de eliminación
|
||||||
|
* @property {Object} pivot - Relación many-to-many
|
||||||
|
* @property {number} pivot.warehouse_id - ID del almacén
|
||||||
|
* @property {number} pivot.classification_id - ID de la clasificación
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} Warehouse
|
||||||
|
* @property {number} id - ID del almacén
|
||||||
|
* @property {string} code - Código del almacén
|
||||||
|
* @property {string} name - Nombre del almacén
|
||||||
|
* @property {string|null} description - Descripción del almacén
|
||||||
|
* @property {string|null} address - Dirección del almacén
|
||||||
|
* @property {boolean} is_active - Estado activo/inactivo
|
||||||
|
* @property {string} created_at - Fecha de creación
|
||||||
|
* @property {string} updated_at - Fecha de actualización
|
||||||
|
* @property {string|null} deleted_at - Fecha de eliminación
|
||||||
|
* @property {WarehouseClassification[]} classifications - Clasificaciones asociadas
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} WarehousePaginatedResponse
|
||||||
|
* @property {number} current_page - Página actual
|
||||||
|
* @property {Warehouse[]} data - Array de almacenes
|
||||||
|
* @property {string} first_page_url - URL de la primera página
|
||||||
|
* @property {number} from - Registro inicial
|
||||||
|
* @property {number} last_page - Última página
|
||||||
|
* @property {string} last_page_url - URL de la última página
|
||||||
|
* @property {Object[]} links - Enlaces de paginación
|
||||||
|
* @property {string|null} next_page_url - URL de la siguiente página
|
||||||
|
* @property {string} path - Path base de la API
|
||||||
|
* @property {number} per_page - Registros por página
|
||||||
|
* @property {string|null} prev_page_url - URL de la página anterior
|
||||||
|
* @property {number} to - Registro final
|
||||||
|
* @property {number} total - Total de registros
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} WarehouseResponse
|
||||||
|
* @property {string} status - Estado de la respuesta
|
||||||
|
* @property {Object} data - Datos de la respuesta
|
||||||
|
* @property {WarehousePaginatedResponse} data.warehouses - Datos paginados de almacenes
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} SingleWarehouseResponse
|
||||||
|
* @property {string} status - Estado de la respuesta
|
||||||
|
* @property {Object} data - Datos de la respuesta
|
||||||
|
* @property {string} data.message - Mensaje de la respuesta
|
||||||
|
* @property {Warehouse} data.warehouse - Almacén individual
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} WarehouseCreateRequest
|
||||||
|
* @property {string} code - Código del almacén
|
||||||
|
* @property {string} name - Nombre del almacén
|
||||||
|
* @property {string|null} description - Descripción del almacén
|
||||||
|
* @property {string|null} address - Dirección del almacén
|
||||||
|
* @property {boolean} is_active - Estado activo/inactivo
|
||||||
|
* @property {number[]} classifications - Array de IDs de clasificaciones
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} WarehouseUpdateRequest
|
||||||
|
* @property {string} code - Código del almacén
|
||||||
|
* @property {string} name - Nombre del almacén
|
||||||
|
* @property {string|null} description - Descripción del almacén
|
||||||
|
* @property {string|null} address - Dirección del almacén
|
||||||
|
* @property {boolean} is_active - Estado activo/inactivo
|
||||||
|
* @property {number[]} classifications - Array de IDs de clasificaciones
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} WarehouseFormData
|
||||||
|
* @property {number|null} id - ID del almacén (para edición)
|
||||||
|
* @property {string} code - Código del almacén
|
||||||
|
* @property {string} name - Nombre del almacén
|
||||||
|
* @property {string} description - Descripción del almacén
|
||||||
|
* @property {string} address - Dirección del almacén
|
||||||
|
* @property {boolean} is_active - Estado activo/inactivo
|
||||||
|
* @property {Object[]} classifications - Clasificaciones seleccionadas en formato {value, label}
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} ClassificationSelectOption
|
||||||
|
* @property {number} value - ID de la clasificación
|
||||||
|
* @property {string} label - Nombre de la clasificación con indentación
|
||||||
|
* @property {string} code - Código de la clasificación
|
||||||
|
* @property {string|null} description - Descripción de la clasificación
|
||||||
|
* @property {number} level - Nivel jerárquico (para indentación)
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} WarehouseSearchFilters
|
||||||
|
* @property {string|null} search - Término de búsqueda
|
||||||
|
* @property {string|null} status - Estado del filtro (active/inactive)
|
||||||
|
* @property {number} page - Número de página
|
||||||
|
* @property {number} per_page - Elementos por página
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} WarehouseValidationErrors
|
||||||
|
* @property {string[]} code - Errores del campo código
|
||||||
|
* @property {string[]} name - Errores del campo nombre
|
||||||
|
* @property {string[]} description - Errores del campo descripción
|
||||||
|
* @property {string[]} address - Errores del campo dirección
|
||||||
|
* @property {string[]} classifications - Errores del campo clasificaciones
|
||||||
|
*/
|
||||||
239
src/pages/Warehouses/services/WarehouseService.js
Normal file
239
src/pages/Warehouses/services/WarehouseService.js
Normal file
@ -0,0 +1,239 @@
|
|||||||
|
/**
|
||||||
|
* Servicio para Warehouses
|
||||||
|
*
|
||||||
|
* @author Sistema
|
||||||
|
* @version 1.0.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { api, apiURL } from '@Services/Api';
|
||||||
|
|
||||||
|
export default class WarehouseService {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtener todos los almacenes
|
||||||
|
* @param {Object} params - Parámetros de la consulta
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async getAll(params = {}) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.get(apiURL('warehouses'), {
|
||||||
|
params,
|
||||||
|
onSuccess: (response) => resolve(response),
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtener un almacén por ID
|
||||||
|
* @param {number} id - ID del almacén
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async getById(id) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.get(apiURL(`warehouses/${id}`), {
|
||||||
|
onSuccess: (response) => resolve(response),
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Crear un nuevo almacén
|
||||||
|
* @param {Object} data - Datos del almacén
|
||||||
|
* @param {string} data.code - Código del almacén
|
||||||
|
* @param {string} data.name - Nombre del almacén
|
||||||
|
* @param {string|null} data.description - Descripción del almacén
|
||||||
|
* @param {string|null} data.address - Dirección del almacén
|
||||||
|
* @param {boolean} data.is_active - Estado activo/inactivo
|
||||||
|
* @param {number[]} data.classifications - Array de IDs de clasificaciones
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async create(data) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.post(apiURL('warehouses'), data, {
|
||||||
|
onSuccess: (response) => resolve(response),
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Actualizar un almacén existente
|
||||||
|
* @param {number} id - ID del almacén
|
||||||
|
* @param {Object} data - Datos actualizados
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async update(id, data) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.put(apiURL(`warehouses/${id}`), data, {
|
||||||
|
onSuccess: (response) => resolve(response),
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Eliminar un almacén
|
||||||
|
* @param {number} id - ID del almacén
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async delete(id) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.delete(apiURL(`warehouses/${id}`), {
|
||||||
|
onSuccess: (response) => resolve(response),
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Actualizar el estado de un almacén
|
||||||
|
* @param {number} id - ID del almacén
|
||||||
|
* @param {boolean} isActive - Nuevo estado
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async updateStatus(id, isActive) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.put(apiURL(`warehouses/${id}`), {
|
||||||
|
data: { is_active: isActive },
|
||||||
|
onSuccess: (response) => {
|
||||||
|
resolve(response);
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
// Mejorar el manejo de errores
|
||||||
|
const enhancedError = {
|
||||||
|
...error,
|
||||||
|
timestamp: new Date().toISOString(),
|
||||||
|
action: 'updateStatus',
|
||||||
|
id: id,
|
||||||
|
is_active: isActive
|
||||||
|
};
|
||||||
|
reject(enhancedError);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Buscar almacenes con filtros
|
||||||
|
* @param {Object} filters - Filtros de búsqueda
|
||||||
|
* @param {string} filters.search - Término de búsqueda
|
||||||
|
* @param {string} filters.status - Estado (active/inactive)
|
||||||
|
* @param {number} filters.page - Página
|
||||||
|
* @returns {Promise} Promesa con la respuesta
|
||||||
|
*/
|
||||||
|
async search(filters = {}) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.get(apiURL('warehouses'), {
|
||||||
|
params: filters,
|
||||||
|
onSuccess: (response) => resolve(response),
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validar datos del almacén
|
||||||
|
* @param {Object} data - Datos a validar
|
||||||
|
* @returns {Object} Objeto con errores de validación si los hay
|
||||||
|
*/
|
||||||
|
validate(data) {
|
||||||
|
const errors = {};
|
||||||
|
|
||||||
|
if (!data.code || data.code.trim() === '') {
|
||||||
|
errors.code = 'El código es requerido';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.name || data.name.trim() === '') {
|
||||||
|
errors.name = 'El nombre es requerido';
|
||||||
|
}
|
||||||
|
|
||||||
|
return errors;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtener clasificaciones disponibles para asignar a almacenes
|
||||||
|
* @returns {Promise} Promesa con las clasificaciones
|
||||||
|
*/
|
||||||
|
async getAvailableClassifications() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
api.get(apiURL('catalogs/warehouse-classifications'), {
|
||||||
|
onSuccess: (response) => {
|
||||||
|
// Retornar la respuesta completa tal como viene de la API
|
||||||
|
resolve(response);
|
||||||
|
},
|
||||||
|
onError: (error) => reject(error)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formatear clasificaciones jerárquicas para uso en Selectable
|
||||||
|
* @param {Array} classifications - Array de clasificaciones
|
||||||
|
* @param {number} level - Nivel de indentación
|
||||||
|
* @returns {Array} Clasificaciones formateadas
|
||||||
|
*/
|
||||||
|
formatClassificationsForSelect(classifications, level = 0) {
|
||||||
|
const formatted = [];
|
||||||
|
|
||||||
|
classifications.forEach(classification => {
|
||||||
|
formatted.push({
|
||||||
|
value: classification.id,
|
||||||
|
label: ' '.repeat(level) + classification.name,
|
||||||
|
code: classification.code,
|
||||||
|
description: classification.description,
|
||||||
|
level: level
|
||||||
|
});
|
||||||
|
|
||||||
|
// Agregar hijos recursivamente
|
||||||
|
if (classification.children && classification.children.length > 0) {
|
||||||
|
formatted.push(...this.formatClassificationsForSelect(classification.children, level + 1));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return formatted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Procesar clasificaciones seleccionadas para envío al backend
|
||||||
|
* Incluye tanto clasificaciones padre como subclasificaciones
|
||||||
|
* @param {Array} selectedClassifications - Clasificaciones seleccionadas del formulario
|
||||||
|
* @returns {Array} Array de IDs de clasificaciones (padres + hijos)
|
||||||
|
*/
|
||||||
|
processClassificationsForSubmit(selectedClassifications) {
|
||||||
|
if (!Array.isArray(selectedClassifications)) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const classificationIds = selectedClassifications.map(classification => {
|
||||||
|
return typeof classification === 'object' ?
|
||||||
|
(classification.value || classification.id) :
|
||||||
|
classification;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remover duplicados y retornar
|
||||||
|
return [...new Set(classificationIds)];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Procesar clasificaciones del backend para mostrar en formulario
|
||||||
|
* @param {Array} classifications - Clasificaciones del backend
|
||||||
|
* @param {Array} availableClassifications - Todas las clasificaciones disponibles
|
||||||
|
* @returns {Array} Clasificaciones formateadas para el formulario
|
||||||
|
*/
|
||||||
|
processClassificationsForForm(classifications, availableClassifications) {
|
||||||
|
if (!Array.isArray(classifications) || !Array.isArray(availableClassifications)) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return classifications.map(classification => {
|
||||||
|
const found = availableClassifications.find(available => available.value === classification.id);
|
||||||
|
return found || {
|
||||||
|
value: classification.id,
|
||||||
|
label: classification.name,
|
||||||
|
code: classification.code
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -315,17 +315,26 @@ const router = createRouter({
|
|||||||
},
|
},
|
||||||
redirect: '/admin/warehouses',
|
redirect: '/admin/warehouses',
|
||||||
children: [
|
children: [
|
||||||
|
{
|
||||||
|
path: ':id',
|
||||||
|
name: 'admin.warehouses.details',
|
||||||
|
component: () => import('@Pages/Warehouses/Details.vue'),
|
||||||
|
meta: {
|
||||||
|
title: 'Detalles',
|
||||||
|
icon: 'info',
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
name: 'admin.warehouses.index',
|
name: 'admin.warehouses.index',
|
||||||
component: () => import('@Pages/Warehouses/Index.vue'),
|
component: () => import('@Pages/Warehouses/Index.vue'),
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'create',
|
path: 'create',
|
||||||
name: 'admin.warehouses.create',
|
name: 'admin.warehouses.create',
|
||||||
component: () => import('@Pages/Admin/Roles/Index.vue'),
|
component: () => import('@Pages/Warehouses/Create.vue'),
|
||||||
|
|
||||||
meta: {
|
meta: {
|
||||||
title: 'Crear',
|
title: 'Crear',
|
||||||
icon: 'add',
|
icon: 'add',
|
||||||
@ -334,8 +343,8 @@ const router = createRouter({
|
|||||||
{
|
{
|
||||||
path: ':id/edit',
|
path: ':id/edit',
|
||||||
name: 'admin.warehouses.edit',
|
name: 'admin.warehouses.edit',
|
||||||
component: () => import('@Pages/Admin/Roles/Index.vue'),
|
component: () => import('@Pages/Warehouses/Edit.vue'),
|
||||||
|
|
||||||
meta: {
|
meta: {
|
||||||
title: 'Editar',
|
title: 'Editar',
|
||||||
icon: 'edit',
|
icon: 'edit',
|
||||||
@ -343,6 +352,22 @@ const router = createRouter({
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'units-measure',
|
||||||
|
name: 'admin.units-measure',
|
||||||
|
meta: {
|
||||||
|
title: 'Unidades de Medida',
|
||||||
|
icon: 'straighten',
|
||||||
|
},
|
||||||
|
redirect: '/admin/units-measure',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'admin.units-measure.index',
|
||||||
|
component: () => import('@Pages/UnitsMeasure/Index.vue'),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'warehouse-classifications',
|
path: 'warehouse-classifications',
|
||||||
name: 'admin.warehouse-classifications',
|
name: 'admin.warehouse-classifications',
|
||||||
@ -377,6 +402,40 @@ const router = createRouter({
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'units-measure',
|
||||||
|
name: 'admin.units-measure',
|
||||||
|
meta: {
|
||||||
|
title: 'Unidades de Medida',
|
||||||
|
icon: 'straighten',
|
||||||
|
},
|
||||||
|
redirect: '/admin/units-measure',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'admin.units-measure.index',
|
||||||
|
component: () => import('@Pages/UnitsMeasure/Index.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'create',
|
||||||
|
name: 'admin.units-measure.create',
|
||||||
|
component: () => import('@Pages/UnitsMeasure/Create.vue'),
|
||||||
|
meta: {
|
||||||
|
title: 'Crear',
|
||||||
|
icon: 'add',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: ':id/edit',
|
||||||
|
name: 'admin.units-measure.edit',
|
||||||
|
component: () => import('@Pages/UnitsMeasure/Edit.vue'),
|
||||||
|
meta: {
|
||||||
|
title: 'Editar',
|
||||||
|
icon: 'edit',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'roles',
|
path: 'roles',
|
||||||
name: 'admin.roles',
|
name: 'admin.roles',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user