feat: agregar componentes de gestión de almacenes y movimientos
- Implementar vistas CRUD para administración de almacenes (Index, Create, Edit, Delete). - Añadir para realizar traspasos de productos entre almacenes. - Configurar lógica de rutas y API (Module.js) para almacenes y movimientos.
This commit is contained in:
parent
7c27200290
commit
2c7d2f2001
@ -461,7 +461,9 @@ export default {
|
||||
returns: 'Devoluciones',
|
||||
clients: 'Clientes',
|
||||
clientTiers: 'Niveles de Clientes',
|
||||
billingRequests: 'Solicitudes de Facturación'
|
||||
billingRequests: 'Solicitudes de Facturación',
|
||||
warehouses: 'Almacenes',
|
||||
movements: 'Movimientos'
|
||||
},
|
||||
cashRegister: {
|
||||
title: 'Caja Registradora',
|
||||
@ -571,5 +573,13 @@ export default {
|
||||
clientTiers: {
|
||||
title: 'Niveles de Clientes',
|
||||
description: 'Gestión de niveles de clientes',
|
||||
},
|
||||
warehouses: {
|
||||
title: 'Almacenes',
|
||||
description: 'Gestión de almacenes',
|
||||
},
|
||||
movements: {
|
||||
title: 'Movimientos de Inventario',
|
||||
description: 'Historial de entradas, salidas y traspasos de productos',
|
||||
}
|
||||
}
|
||||
@ -47,6 +47,18 @@ onMounted(() => {
|
||||
name="pos.inventory"
|
||||
to="pos.inventory.index"
|
||||
/>
|
||||
<Link
|
||||
v-if="hasPermission('warehouses.index')"
|
||||
icon="warehouse"
|
||||
name="pos.warehouses"
|
||||
to="pos.warehouses.index"
|
||||
/>
|
||||
<Link
|
||||
v-if="hasPermission('movements.index')"
|
||||
icon="swap_horiz"
|
||||
name="pos.movements"
|
||||
to="pos.movements.index"
|
||||
/>
|
||||
<Link
|
||||
icon="point_of_sale"
|
||||
name="pos.cashRegister"
|
||||
|
||||
@ -23,7 +23,6 @@ const form = useForm({
|
||||
sku: '',
|
||||
barcode: '',
|
||||
category_id: '',
|
||||
stock: 0,
|
||||
cost: 0,
|
||||
retail_price: 0,
|
||||
tax: 16
|
||||
@ -158,21 +157,6 @@ watch(() => props.show, (newValue) => {
|
||||
<FormError :message="form.errors?.category_id" />
|
||||
</div>
|
||||
|
||||
<!-- Stock Inicial -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
STOCK INICIAL
|
||||
</label>
|
||||
<FormInput
|
||||
v-model.number="form.stock"
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
required
|
||||
/>
|
||||
<FormError :message="form.errors?.stock" />
|
||||
</div>
|
||||
|
||||
<!-- Costo -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
|
||||
@ -28,7 +28,6 @@ const form = useForm({
|
||||
sku: '',
|
||||
barcode: '',
|
||||
category_id: '',
|
||||
stock: 0,
|
||||
cost: 0,
|
||||
retail_price: 0,
|
||||
tax: 16
|
||||
@ -82,7 +81,6 @@ watch(() => props.product, (newProduct) => {
|
||||
form.sku = newProduct.sku || '';
|
||||
form.barcode = newProduct.barcode || '';
|
||||
form.category_id = newProduct.category_id || '';
|
||||
form.stock = newProduct.stock || 0;
|
||||
form.cost = parseFloat(newProduct.price?.cost || 0);
|
||||
form.retail_price = parseFloat(newProduct.price?.retail_price || 0);
|
||||
form.tax = parseFloat(newProduct.price?.tax || 16);
|
||||
@ -181,21 +179,6 @@ watch(() => props.show, (newValue) => {
|
||||
<FormError :message="form.errors?.category_id" />
|
||||
</div>
|
||||
|
||||
<!-- Stock -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
STOCK
|
||||
</label>
|
||||
<FormInput
|
||||
v-model.number="form.stock"
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
required
|
||||
/>
|
||||
<FormError :message="form.errors?.stock" />
|
||||
</div>
|
||||
|
||||
<!-- Costo -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
|
||||
184
src/pages/POS/Movements/DetailModal.vue
Normal file
184
src/pages/POS/Movements/DetailModal.vue
Normal file
@ -0,0 +1,184 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { useApi, apiURL } from '@Services/Api';
|
||||
import { formatDate } from '@/utils/formatters';
|
||||
|
||||
import Modal from '@Holos/Modal.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Loader from '@Shared/Loader.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
movementId: Number
|
||||
});
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
/** Estado */
|
||||
const movement = ref(null);
|
||||
const loading = ref(false);
|
||||
|
||||
const api = useApi();
|
||||
|
||||
/** Métodos */
|
||||
const fetchDetail = () => {
|
||||
if (!props.movementId) return;
|
||||
|
||||
loading.value = true;
|
||||
movement.value = null;
|
||||
|
||||
api.get(apiURL(`movimientos/${props.movementId}`), {
|
||||
onSuccess: (data) => {
|
||||
movement.value = data.movement || data;
|
||||
},
|
||||
onError: () => {
|
||||
window.Notify.error('Error al cargar el detalle del movimiento');
|
||||
},
|
||||
onFinish: () => {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const getTypeBadge = (type) => {
|
||||
const badges = {
|
||||
entry: { label: 'Entrada', class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300', icon: 'add_circle' },
|
||||
exit: { label: 'Salida', class: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300', icon: 'remove_circle' },
|
||||
transfer: { label: 'Traspaso', class: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300', icon: 'swap_horiz' },
|
||||
sale: { label: 'Venta', class: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300', icon: 'point_of_sale' },
|
||||
return: { label: 'Devolución', class: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300', icon: 'undo' },
|
||||
};
|
||||
return badges[type] || { label: type, class: 'bg-gray-100 text-gray-800', icon: 'help' };
|
||||
};
|
||||
|
||||
/** Watchers */
|
||||
watch(() => props.show, (isShown) => {
|
||||
if (isShown && props.movementId) {
|
||||
fetchDetail();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :show="show" max-width="lg" @close="handleClose">
|
||||
<div class="p-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
|
||||
Detalle del Movimiento
|
||||
</h3>
|
||||
<button
|
||||
@click="handleClose"
|
||||
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="flex justify-center py-12">
|
||||
<Loader />
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div v-else-if="movement" class="space-y-5">
|
||||
<!-- Tipo badge -->
|
||||
<div class="flex items-center gap-3">
|
||||
<span :class="['inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-semibold', getTypeBadge(movement.movement_type).class]">
|
||||
<GoogleIcon :name="getTypeBadge(movement.movement_type).icon" class="text-lg" />
|
||||
{{ getTypeBadge(movement.movement_type).label }}
|
||||
</span>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">
|
||||
#{{ movement.id }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Producto -->
|
||||
<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-xl p-5 border border-gray-200 dark:border-gray-700">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<GoogleIcon name="inventory_2" class="text-lg text-gray-600 dark:text-gray-400" />
|
||||
<h4 class="text-sm font-bold text-gray-700 dark:text-gray-300 uppercase">Producto</h4>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 text-sm">
|
||||
<div>
|
||||
<span class="text-gray-500 dark:text-gray-400">Nombre:</span>
|
||||
<p class="font-semibold text-gray-900 dark:text-gray-100">{{ movement.inventory?.name || 'N/A' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-500 dark:text-gray-400">SKU:</span>
|
||||
<p class="font-mono font-semibold text-gray-900 dark:text-gray-100">{{ movement.inventory?.sku || 'N/A' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-500 dark:text-gray-400">Cantidad:</span>
|
||||
<p class="font-bold text-lg text-gray-900 dark:text-gray-100">{{ movement.quantity }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Almacenes -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Origen -->
|
||||
<div v-if="movement.warehouse_from" class="bg-red-50 dark:bg-red-900/10 rounded-xl p-4 border border-red-200 dark:border-red-800">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<GoogleIcon name="logout" class="text-lg text-red-600 dark:text-red-400" />
|
||||
<h4 class="text-xs font-bold text-red-700 dark:text-red-300 uppercase">Origen</h4>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ movement.warehouse_from.name }}</p>
|
||||
<p class="text-xs font-mono text-gray-500 dark:text-gray-400">{{ movement.warehouse_from.code }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Destino -->
|
||||
<div v-if="movement.warehouse_to" class="bg-green-50 dark:bg-green-900/10 rounded-xl p-4 border border-green-200 dark:border-green-800">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<GoogleIcon name="login" class="text-lg text-green-600 dark:text-green-400" />
|
||||
<h4 class="text-xs font-bold text-green-700 dark:text-green-300 uppercase">Destino</h4>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ movement.warehouse_to.name }}</p>
|
||||
<p class="text-xs font-mono text-gray-500 dark:text-gray-400">{{ movement.warehouse_to.code }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info adicional -->
|
||||
<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-xl p-5 border border-gray-200 dark:border-gray-700">
|
||||
<div class="grid grid-cols-2 gap-3 text-sm">
|
||||
<div>
|
||||
<span class="text-gray-500 dark:text-gray-400">Usuario:</span>
|
||||
<p class="font-semibold text-gray-900 dark:text-gray-100">{{ movement.user?.name || 'N/A' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-500 dark:text-gray-400">Fecha:</span>
|
||||
<p class="font-semibold text-gray-900 dark:text-gray-100">{{ formatDate(movement.created_at) }}</p>
|
||||
</div>
|
||||
<div v-if="movement.invoice_reference" class="col-span-2">
|
||||
<span class="text-gray-500 dark:text-gray-400">Referencia factura:</span>
|
||||
<p class="font-mono font-semibold text-gray-900 dark:text-gray-100">{{ movement.invoice_reference }}</p>
|
||||
</div>
|
||||
<div v-if="movement.notes" class="col-span-2">
|
||||
<span class="text-gray-500 dark:text-gray-400">Notas:</span>
|
||||
<p class="text-gray-900 dark:text-gray-100 italic">{{ movement.notes }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="flex items-center justify-end mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
@click="handleClose"
|
||||
class="px-5 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
207
src/pages/POS/Movements/EntryModal.vue
Normal file
207
src/pages/POS/Movements/EntryModal.vue
Normal file
@ -0,0 +1,207 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { useForm, useApi, apiURL } from '@Services/Api';
|
||||
|
||||
import Modal from '@Holos/Modal.vue';
|
||||
import FormInput from '@Holos/Form/Input.vue';
|
||||
import FormError from '@Holos/Form/Elements/Error.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['close', 'created']);
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
show: Boolean
|
||||
});
|
||||
|
||||
/** Estado */
|
||||
const products = ref([]);
|
||||
const warehouses = ref([]);
|
||||
const loading = ref(false);
|
||||
|
||||
const api = useApi();
|
||||
|
||||
/** Formulario */
|
||||
const form = useForm({
|
||||
inventory_id: '',
|
||||
warehouse_id: '',
|
||||
quantity: '',
|
||||
invoice_reference: '',
|
||||
notes: '',
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
const loadData = () => {
|
||||
loading.value = true;
|
||||
|
||||
api.get(apiURL('inventario'), {
|
||||
onSuccess: (data) => {
|
||||
products.value = data.products?.data || data.products || [];
|
||||
}
|
||||
});
|
||||
|
||||
api.get(apiURL('almacenes'), {
|
||||
onSuccess: (data) => {
|
||||
warehouses.value = data.warehouses?.data || data.data || [];
|
||||
},
|
||||
onFinish: () => {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const createEntry = () => {
|
||||
form.post(apiURL('movimientos/entrada'), {
|
||||
onSuccess: () => {
|
||||
window.Notify.success('Entrada registrada correctamente');
|
||||
emit('created');
|
||||
closeModal();
|
||||
},
|
||||
onFail: (data) => {
|
||||
window.Notify.error(data.message || 'Error al registrar la entrada');
|
||||
},
|
||||
onError: () => {
|
||||
window.Notify.error('Error al registrar la entrada');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
form.reset();
|
||||
emit('close');
|
||||
};
|
||||
|
||||
/** Watchers */
|
||||
watch(() => props.show, (isShown) => {
|
||||
if (isShown) {
|
||||
loadData();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :show="show" max-width="lg" @close="closeModal">
|
||||
<div class="p-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-100 dark:bg-green-900/30">
|
||||
<GoogleIcon name="add_circle" class="text-xl text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
|
||||
Registrar Entrada
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
@click="closeModal"
|
||||
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Formulario -->
|
||||
<form @submit.prevent="createEntry" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Producto -->
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
PRODUCTO
|
||||
</label>
|
||||
<select
|
||||
v-model="form.inventory_id"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
||||
>
|
||||
<option value="">Seleccionar producto...</option>
|
||||
<option v-for="product in products" :key="product.id" :value="product.id">
|
||||
{{ product.name }} ({{ product.sku }})
|
||||
</option>
|
||||
</select>
|
||||
<FormError :message="form.errors?.inventory_id" />
|
||||
</div>
|
||||
|
||||
<!-- Almacén destino -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
ALMACÉN DESTINO
|
||||
</label>
|
||||
<select
|
||||
v-model="form.warehouse_id"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
||||
>
|
||||
<option value="">Seleccionar almacén...</option>
|
||||
<option v-for="wh in warehouses" :key="wh.id" :value="wh.id">
|
||||
{{ wh.name }} ({{ wh.code }})
|
||||
</option>
|
||||
</select>
|
||||
<FormError :message="form.errors?.warehouse_id" />
|
||||
</div>
|
||||
|
||||
<!-- Cantidad -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
CANTIDAD
|
||||
</label>
|
||||
<FormInput
|
||||
v-model="form.quantity"
|
||||
type="number"
|
||||
min="1"
|
||||
placeholder="0"
|
||||
/>
|
||||
<FormError :message="form.errors?.quantity" />
|
||||
</div>
|
||||
|
||||
<!-- Referencia de factura -->
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
REFERENCIA DE FACTURA <span class="text-gray-400 text-xs normal-case">(opcional)</span>
|
||||
</label>
|
||||
<FormInput
|
||||
v-model="form.invoice_reference"
|
||||
type="text"
|
||||
placeholder="Ej: FAC-2026-001"
|
||||
/>
|
||||
<FormError :message="form.errors?.invoice_reference" />
|
||||
</div>
|
||||
|
||||
<!-- Notas -->
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
NOTAS <span class="text-gray-400 text-xs normal-case">(opcional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="form.notes"
|
||||
rows="2"
|
||||
placeholder="Ej: Compra de proveedor X"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none"
|
||||
></textarea>
|
||||
<FormError :message="form.errors?.notes" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botones -->
|
||||
<div class="flex items-center justify-end gap-3 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
@click="closeModal"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-green-600 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<GoogleIcon name="add_circle" class="text-lg" />
|
||||
<span v-if="form.processing">Registrando...</span>
|
||||
<span v-else>Registrar Entrada</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
193
src/pages/POS/Movements/ExitModal.vue
Normal file
193
src/pages/POS/Movements/ExitModal.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { useForm, useApi, apiURL } from '@Services/Api';
|
||||
|
||||
import Modal from '@Holos/Modal.vue';
|
||||
import FormInput from '@Holos/Form/Input.vue';
|
||||
import FormError from '@Holos/Form/Elements/Error.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['close', 'created']);
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
show: Boolean
|
||||
});
|
||||
|
||||
/** Estado */
|
||||
const products = ref([]);
|
||||
const warehouses = ref([]);
|
||||
const loading = ref(false);
|
||||
|
||||
const api = useApi();
|
||||
|
||||
/** Formulario */
|
||||
const form = useForm({
|
||||
inventory_id: '',
|
||||
warehouse_id: '',
|
||||
quantity: '',
|
||||
notes: '',
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
const loadData = () => {
|
||||
loading.value = true;
|
||||
|
||||
api.get(apiURL('inventario'), {
|
||||
onSuccess: (data) => {
|
||||
products.value = data.products?.data || data.products || [];
|
||||
}
|
||||
});
|
||||
|
||||
api.get(apiURL('almacenes'), {
|
||||
onSuccess: (data) => {
|
||||
warehouses.value = data.warehouses?.data || data.data || [];
|
||||
},
|
||||
onFinish: () => {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const createExit = () => {
|
||||
form.post(apiURL('movimientos/salida'), {
|
||||
onSuccess: () => {
|
||||
window.Notify.success('Salida registrada correctamente');
|
||||
emit('created');
|
||||
closeModal();
|
||||
},
|
||||
onFail: (data) => {
|
||||
window.Notify.error(data.message || 'Error al registrar la salida');
|
||||
},
|
||||
onError: () => {
|
||||
window.Notify.error('Error al registrar la salida');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
form.reset();
|
||||
emit('close');
|
||||
};
|
||||
|
||||
/** Watchers */
|
||||
watch(() => props.show, (isShown) => {
|
||||
if (isShown) {
|
||||
loadData();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :show="show" max-width="lg" @close="closeModal">
|
||||
<div class="p-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/30">
|
||||
<GoogleIcon name="remove_circle" class="text-xl text-red-600 dark:text-red-400" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
|
||||
Registrar Salida
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
@click="closeModal"
|
||||
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Formulario -->
|
||||
<form @submit.prevent="createExit" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Producto -->
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
PRODUCTO
|
||||
</label>
|
||||
<select
|
||||
v-model="form.inventory_id"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
||||
>
|
||||
<option value="">Seleccionar producto...</option>
|
||||
<option v-for="product in products" :key="product.id" :value="product.id">
|
||||
{{ product.name }} ({{ product.sku }})
|
||||
</option>
|
||||
</select>
|
||||
<FormError :message="form.errors?.inventory_id" />
|
||||
</div>
|
||||
|
||||
<!-- Almacén origen -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
ALMACÉN ORIGEN
|
||||
</label>
|
||||
<select
|
||||
v-model="form.warehouse_id"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
||||
>
|
||||
<option value="">Seleccionar almacén...</option>
|
||||
<option v-for="wh in warehouses" :key="wh.id" :value="wh.id">
|
||||
{{ wh.name }} ({{ wh.code }})
|
||||
</option>
|
||||
</select>
|
||||
<FormError :message="form.errors?.warehouse_id" />
|
||||
</div>
|
||||
|
||||
<!-- Cantidad -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
CANTIDAD
|
||||
</label>
|
||||
<FormInput
|
||||
v-model="form.quantity"
|
||||
type="number"
|
||||
min="1"
|
||||
placeholder="0"
|
||||
/>
|
||||
<FormError :message="form.errors?.quantity" />
|
||||
</div>
|
||||
|
||||
<!-- Notas -->
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
NOTAS <span class="text-gray-400 text-xs normal-case">(opcional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="form.notes"
|
||||
rows="2"
|
||||
placeholder="Ej: Producto dañado"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none"
|
||||
></textarea>
|
||||
<FormError :message="form.errors?.notes" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botones -->
|
||||
<div class="flex items-center justify-end gap-3 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
@click="closeModal"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-red-600 rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<GoogleIcon name="remove_circle" class="text-lg" />
|
||||
<span v-if="form.processing">Registrando...</span>
|
||||
<span v-else>Registrar Salida</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
304
src/pages/POS/Movements/Index.vue
Normal file
304
src/pages/POS/Movements/Index.vue
Normal file
@ -0,0 +1,304 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { useSearcher, apiURL } from '@Services/Api';
|
||||
import { can } from './Module.js';
|
||||
import { formatDate } from '@/utils/formatters';
|
||||
|
||||
import SearcherHead from '@Holos/Searcher.vue';
|
||||
import Table from '@Holos/Table.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import EntryModal from './EntryModal.vue';
|
||||
import ExitModal from './ExitModal.vue';
|
||||
import TransferModal from './TransferModal.vue';
|
||||
import DetailModal from './DetailModal.vue';
|
||||
|
||||
/** Estado */
|
||||
const movements = ref({});
|
||||
const selectedType = ref('');
|
||||
const selectedWarehouse = ref('');
|
||||
const fromDate = ref('');
|
||||
const toDate = ref('');
|
||||
const warehouses = ref([]);
|
||||
|
||||
const showEntryModal = ref(false);
|
||||
const showExitModal = ref(false);
|
||||
const showTransferModal = ref(false);
|
||||
const showDetailModal = ref(false);
|
||||
const selectedMovementId = ref(null);
|
||||
|
||||
/** Filtros computados */
|
||||
const filters = computed(() => {
|
||||
const f = {};
|
||||
if (selectedType.value) f.movement_type = selectedType.value;
|
||||
if (selectedWarehouse.value) f.warehouse_id = selectedWarehouse.value;
|
||||
if (fromDate.value) f.from_date = fromDate.value;
|
||||
if (toDate.value) f.to_date = toDate.value;
|
||||
return f;
|
||||
});
|
||||
|
||||
/** Tipos de movimiento */
|
||||
const movementTypes = [
|
||||
{ value: '', label: 'Todos', icon: 'list', active: 'bg-gray-600 text-white shadow-sm', inactive: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-900/50' },
|
||||
{ value: 'entry', label: 'Entradas', icon: 'add_circle', active: 'bg-green-600 text-white shadow-sm', inactive: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 hover:bg-green-200 dark:hover:bg-green-900/50' },
|
||||
{ value: 'exit', label: 'Salidas', icon: 'remove_circle', active: 'bg-red-600 text-white shadow-sm', inactive: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300 hover:bg-red-200 dark:hover:bg-red-900/50' },
|
||||
{ value: 'transfer', label: 'Traspasos', icon: 'swap_horiz', active: 'bg-blue-600 text-white shadow-sm', inactive: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-900/50' },
|
||||
/* { value: 'sale', label: 'Ventas', icon: 'point_of_sale', active: 'bg-purple-600 text-white shadow-sm', inactive: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300 hover:bg-purple-200 dark:hover:bg-purple-900/50' },
|
||||
{ value: 'return', label: 'Devoluciones', icon: 'undo', active: 'bg-amber-600 text-white shadow-sm', inactive: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300 hover:bg-amber-200 dark:hover:bg-amber-900/50' },
|
||||
*/];
|
||||
|
||||
const getTypeBadge = (type) => {
|
||||
const badges = {
|
||||
entry: { label: 'Entrada', class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' },
|
||||
exit: { label: 'Salida', class: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300' },
|
||||
transfer: { label: 'Traspaso', class: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' },
|
||||
/* sale: { label: 'Venta', class: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300' },
|
||||
return: { label: 'Devolución', class: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300' }, */
|
||||
};
|
||||
return badges[type] || { label: type, class: 'bg-gray-100 text-gray-800' };
|
||||
};
|
||||
|
||||
/** Searcher */
|
||||
const searcher = useSearcher({
|
||||
url: apiURL('movimientos'),
|
||||
onSuccess: (r) => {
|
||||
movements.value = r.movements || r;
|
||||
},
|
||||
onError: () => movements.value = {}
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
const loadWarehouses = async () => {
|
||||
try {
|
||||
const response = await fetch(apiURL('almacenes'), {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${sessionStorage.token}`,
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
const result = await response.json();
|
||||
if (result.data) {
|
||||
warehouses.value = result.data.warehouses?.data || result.data.data || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading warehouses:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const applyFilters = () => {
|
||||
searcher.search('', filters.value);
|
||||
};
|
||||
|
||||
const selectType = (type) => {
|
||||
selectedType.value = type;
|
||||
applyFilters();
|
||||
};
|
||||
|
||||
const openDetail = (movement) => {
|
||||
selectedMovementId.value = movement.id;
|
||||
showDetailModal.value = true;
|
||||
};
|
||||
|
||||
const closeDetailModal = () => {
|
||||
showDetailModal.value = false;
|
||||
selectedMovementId.value = null;
|
||||
};
|
||||
|
||||
const onMovementCreated = () => {
|
||||
applyFilters();
|
||||
};
|
||||
|
||||
/** Ciclo de vida */
|
||||
onMounted(() => {
|
||||
searcher.search();
|
||||
loadWarehouses();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<SearcherHead
|
||||
:title="$t('movements.title')"
|
||||
placeholder="Buscar movimientos..."
|
||||
@search="(x) => searcher.search(x, filters)"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
v-if="can('create')"
|
||||
class="flex items-center gap-1.5 px-3 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
|
||||
@click="showEntryModal = true"
|
||||
>
|
||||
<GoogleIcon name="add_circle" class="text-lg" />
|
||||
Entrada
|
||||
</button>
|
||||
<button
|
||||
v-if="can('create')"
|
||||
class="flex items-center gap-1.5 px-3 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
|
||||
@click="showExitModal = true"
|
||||
>
|
||||
<GoogleIcon name="remove_circle" class="text-lg" />
|
||||
Salida
|
||||
</button>
|
||||
<button
|
||||
v-if="can('create')"
|
||||
class="flex items-center gap-1.5 px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
|
||||
@click="showTransferModal = true"
|
||||
>
|
||||
<GoogleIcon name="swap_horiz" class="text-lg" />
|
||||
Traspaso
|
||||
</button>
|
||||
</div>
|
||||
</SearcherHead>
|
||||
|
||||
<!-- Filtros -->
|
||||
<div class="mb-4 space-y-3">
|
||||
<!-- Chips de tipo -->
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="type in movementTypes"
|
||||
:key="type.value"
|
||||
@click="selectType(type.value)"
|
||||
:class="[
|
||||
'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold transition-all',
|
||||
selectedType === type.value ? type.active : type.inactive
|
||||
]"
|
||||
>
|
||||
<GoogleIcon :name="type.icon" class="text-sm" />
|
||||
{{ type.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filtros adicionales -->
|
||||
<div class="flex flex-wrap items-end gap-3">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">Almacén</label>
|
||||
<select
|
||||
v-model="selectedWarehouse"
|
||||
@change="applyFilters"
|
||||
class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500"
|
||||
>
|
||||
<option value="">Todos</option>
|
||||
<option v-for="wh in warehouses" :key="wh.id" :value="wh.id">
|
||||
{{ wh.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">Desde</label>
|
||||
<input
|
||||
v-model="fromDate"
|
||||
@change="applyFilters"
|
||||
type="date"
|
||||
class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">Hasta</label>
|
||||
<input
|
||||
v-model="toDate"
|
||||
@change="applyFilters"
|
||||
type="date"
|
||||
class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
v-if="selectedWarehouse || fromDate || toDate"
|
||||
@click="selectedWarehouse = ''; fromDate = ''; toDate = ''; selectedType = ''; applyFilters();"
|
||||
class="px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
|
||||
>
|
||||
Limpiar filtros
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabla -->
|
||||
<div class="pt-2 w-full">
|
||||
<Table
|
||||
:items="movements"
|
||||
@send-pagination="(page) => searcher.pagination(page, filters)"
|
||||
>
|
||||
<template #head>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">PRODUCTO</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">TIPO</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">CANTIDAD</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">ORIGEN</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">DESTINO</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">USUARIO</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">FECHA</th>
|
||||
</template>
|
||||
<template #body="{items}">
|
||||
<tr
|
||||
v-for="movement in items"
|
||||
:key="movement.id"
|
||||
class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer"
|
||||
@click="openDetail(movement)"
|
||||
>
|
||||
<td class="px-6 py-4 text-left">
|
||||
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ movement.inventory?.name || 'N/A' }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 font-mono">{{ movement.inventory?.sku || '' }}</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span :class="['inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium', getTypeBadge(movement.movement_type).class]">
|
||||
{{ getTypeBadge(movement.movement_type).label }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<p class="text-sm font-bold text-gray-900 dark:text-gray-100">{{ movement.quantity }}</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<p v-if="movement.warehouse_from" class="text-sm text-gray-700 dark:text-gray-300">{{ movement.warehouse_from.name }}</p>
|
||||
<span v-else class="text-sm text-gray-400 dark:text-gray-500">—</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<p v-if="movement.warehouse_to" class="text-sm text-gray-700 dark:text-gray-300">{{ movement.warehouse_to.name }}</p>
|
||||
<span v-else class="text-sm text-gray-400 dark:text-gray-500">—</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300">{{ movement.user?.name || 'N/A' }}</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300">{{ formatDate(movement.created_at) }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template #empty>
|
||||
<td colspan="7" class="table-cell text-center">
|
||||
<div class="flex flex-col items-center justify-center py-8 text-gray-500">
|
||||
<GoogleIcon
|
||||
name="swap_horiz"
|
||||
class="text-6xl mb-2 opacity-50"
|
||||
/>
|
||||
<p class="font-semibold">
|
||||
{{ $t('registers.empty') }}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<!-- Modales -->
|
||||
<EntryModal
|
||||
v-if="can('create')"
|
||||
:show="showEntryModal"
|
||||
@close="showEntryModal = false"
|
||||
@created="onMovementCreated"
|
||||
/>
|
||||
<ExitModal
|
||||
v-if="can('create')"
|
||||
:show="showExitModal"
|
||||
@close="showExitModal = false"
|
||||
@created="onMovementCreated"
|
||||
/>
|
||||
<TransferModal
|
||||
v-if="can('create')"
|
||||
:show="showTransferModal"
|
||||
@close="showTransferModal = false"
|
||||
@created="onMovementCreated"
|
||||
/>
|
||||
<DetailModal
|
||||
:show="showDetailModal"
|
||||
:movement-id="selectedMovementId"
|
||||
@close="closeDetailModal"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
16
src/pages/POS/Movements/Module.js
Normal file
16
src/pages/POS/Movements/Module.js
Normal file
@ -0,0 +1,16 @@
|
||||
import { hasPermission } from '@Plugins/RolePermission.js';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`movements.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => ({ name: `pos.movements.${name}`, params, query })
|
||||
|
||||
// Determina si un usuario puede hacer algo en base a los permisos
|
||||
const can = (permission) => hasPermission(`movements.${permission}`)
|
||||
|
||||
export {
|
||||
can,
|
||||
viewTo,
|
||||
apiTo
|
||||
}
|
||||
223
src/pages/POS/Movements/TransferModal.vue
Normal file
223
src/pages/POS/Movements/TransferModal.vue
Normal file
@ -0,0 +1,223 @@
|
||||
<script setup>
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import { useForm, useApi, apiURL } from '@Services/Api';
|
||||
|
||||
import Modal from '@Holos/Modal.vue';
|
||||
import FormInput from '@Holos/Form/Input.vue';
|
||||
import FormError from '@Holos/Form/Elements/Error.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['close', 'created']);
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
show: Boolean
|
||||
});
|
||||
|
||||
/** Estado */
|
||||
const products = ref([]);
|
||||
const warehouses = ref([]);
|
||||
const loading = ref(false);
|
||||
|
||||
const api = useApi();
|
||||
|
||||
/** Formulario */
|
||||
const form = useForm({
|
||||
inventory_id: '',
|
||||
warehouse_from_id: '',
|
||||
warehouse_to_id: '',
|
||||
quantity: '',
|
||||
notes: '',
|
||||
});
|
||||
|
||||
/** Computed */
|
||||
const availableDestinations = computed(() => {
|
||||
return warehouses.value.filter(wh => wh.id !== Number(form.warehouse_from_id));
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
const loadData = () => {
|
||||
loading.value = true;
|
||||
|
||||
api.get(apiURL('inventario'), {
|
||||
onSuccess: (data) => {
|
||||
products.value = data.products?.data || data.products || [];
|
||||
}
|
||||
});
|
||||
|
||||
api.get(apiURL('almacenes'), {
|
||||
onSuccess: (data) => {
|
||||
warehouses.value = data.warehouses?.data || data.data || [];
|
||||
},
|
||||
onFinish: () => {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const createTransfer = () => {
|
||||
form.post(apiURL('movimientos/traspaso'), {
|
||||
onSuccess: () => {
|
||||
window.Notify.success('Traspaso registrado correctamente');
|
||||
emit('created');
|
||||
closeModal();
|
||||
},
|
||||
onFail: (data) => {
|
||||
window.Notify.error(data.message || 'Error al registrar el traspaso');
|
||||
},
|
||||
onError: () => {
|
||||
window.Notify.error('Error al registrar el traspaso');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
form.reset();
|
||||
emit('close');
|
||||
};
|
||||
|
||||
/** Watchers */
|
||||
watch(() => props.show, (isShown) => {
|
||||
if (isShown) {
|
||||
loadData();
|
||||
}
|
||||
});
|
||||
|
||||
// Limpiar destino si cambia el origen
|
||||
watch(() => form.warehouse_from_id, () => {
|
||||
if (form.warehouse_to_id && Number(form.warehouse_to_id) === Number(form.warehouse_from_id)) {
|
||||
form.warehouse_to_id = '';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :show="show" max-width="lg" @close="closeModal">
|
||||
<div class="p-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/30">
|
||||
<GoogleIcon name="swap_horiz" class="text-xl text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
|
||||
Registrar Traspaso
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
@click="closeModal"
|
||||
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Formulario -->
|
||||
<form @submit.prevent="createTransfer" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Producto -->
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
PRODUCTO
|
||||
</label>
|
||||
<select
|
||||
v-model="form.inventory_id"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
||||
>
|
||||
<option value="">Seleccionar producto...</option>
|
||||
<option v-for="product in products" :key="product.id" :value="product.id">
|
||||
{{ product.name }} ({{ product.sku }})
|
||||
</option>
|
||||
</select>
|
||||
<FormError :message="form.errors?.inventory_id" />
|
||||
</div>
|
||||
|
||||
<!-- Almacén origen -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
ALMACÉN ORIGEN
|
||||
</label>
|
||||
<select
|
||||
v-model="form.warehouse_from_id"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
||||
>
|
||||
<option value="">Seleccionar origen...</option>
|
||||
<option v-for="wh in warehouses" :key="wh.id" :value="wh.id">
|
||||
{{ wh.name }} ({{ wh.code }})
|
||||
</option>
|
||||
</select>
|
||||
<FormError :message="form.errors?.warehouse_from_id" />
|
||||
</div>
|
||||
|
||||
<!-- Almacén destino -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
ALMACÉN DESTINO
|
||||
</label>
|
||||
<select
|
||||
v-model="form.warehouse_to_id"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
||||
>
|
||||
<option value="">Seleccionar destino...</option>
|
||||
<option v-for="wh in availableDestinations" :key="wh.id" :value="wh.id">
|
||||
{{ wh.name }} ({{ wh.code }})
|
||||
</option>
|
||||
</select>
|
||||
<FormError :message="form.errors?.warehouse_to_id" />
|
||||
</div>
|
||||
|
||||
<!-- Cantidad -->
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
CANTIDAD
|
||||
</label>
|
||||
<FormInput
|
||||
v-model="form.quantity"
|
||||
type="number"
|
||||
min="1"
|
||||
placeholder="0"
|
||||
/>
|
||||
<FormError :message="form.errors?.quantity" />
|
||||
</div>
|
||||
|
||||
<!-- Notas -->
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
NOTAS <span class="text-gray-400 text-xs normal-case">(opcional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="form.notes"
|
||||
rows="2"
|
||||
placeholder="Ej: Traspaso a bodega"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none"
|
||||
></textarea>
|
||||
<FormError :message="form.errors?.notes" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botones -->
|
||||
<div class="flex items-center justify-end gap-3 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
@click="closeModal"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<GoogleIcon name="swap_horiz" class="text-lg" />
|
||||
<span v-if="form.processing">Registrando...</span>
|
||||
<span v-else>Registrar Traspaso</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
144
src/pages/POS/Warehouses/Create.vue
Normal file
144
src/pages/POS/Warehouses/Create.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<script setup>
|
||||
import { useForm, apiURL } from '@Services/Api';
|
||||
|
||||
import Modal from '@Holos/Modal.vue';
|
||||
import FormInput from '@Holos/Form/Input.vue';
|
||||
import FormError from '@Holos/Form/Elements/Error.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['close', 'created']);
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
show: Boolean
|
||||
});
|
||||
|
||||
/** Formulario */
|
||||
const form = useForm({
|
||||
code: '',
|
||||
name: '',
|
||||
is_active: true,
|
||||
is_main: false,
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
const createWarehouse = () => {
|
||||
form.post(apiURL('almacenes'), {
|
||||
onSuccess: () => {
|
||||
window.Notify.success('Almacén creado exitosamente');
|
||||
emit('created');
|
||||
closeModal();
|
||||
},
|
||||
onError: () => {
|
||||
window.Notify.error('Error al crear el almacén');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
form.reset();
|
||||
emit('close');
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :show="show" max-width="md" @close="closeModal">
|
||||
<div class="p-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
|
||||
Crear Almacén
|
||||
</h3>
|
||||
<button
|
||||
@click="closeModal"
|
||||
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Formulario -->
|
||||
<form @submit.prevent="createWarehouse" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Código -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
CÓDIGO
|
||||
</label>
|
||||
<FormInput
|
||||
v-model="form.code"
|
||||
type="text"
|
||||
placeholder="Ej: TIENDA-01"
|
||||
/>
|
||||
<FormError :message="form.errors?.code" />
|
||||
</div>
|
||||
|
||||
<!-- Nombre -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
NOMBRE
|
||||
</label>
|
||||
<FormInput
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
placeholder="Nombre del almacén"
|
||||
/>
|
||||
<FormError :message="form.errors?.name" />
|
||||
</div>
|
||||
|
||||
<!-- Almacén Principal -->
|
||||
<div class="col-span-2">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
v-model="form.is_main"
|
||||
type="checkbox"
|
||||
class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Almacén principal
|
||||
</span>
|
||||
</label>
|
||||
<FormError :message="form.errors?.is_main" />
|
||||
</div>
|
||||
|
||||
<!-- Estado -->
|
||||
<div class="col-span-2">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
v-model="form.is_active"
|
||||
type="checkbox"
|
||||
class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Activar almacén inmediatamente
|
||||
</span>
|
||||
</label>
|
||||
<FormError :message="form.errors?.is_active" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botones -->
|
||||
<div class="flex items-center justify-end gap-3 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
@click="closeModal"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="px-4 py-2 text-sm font-semibold text-white bg-gray-900 rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<span v-if="form.processing">Guardando...</span>
|
||||
<span v-else>Guardar</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
104
src/pages/POS/Warehouses/Delete.vue
Normal file
104
src/pages/POS/Warehouses/Delete.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<script setup>
|
||||
import Modal from '@Holos/Modal.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Props */
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
warehouse: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
});
|
||||
|
||||
/** Emits */
|
||||
const emit = defineEmits(['close', 'confirm']);
|
||||
|
||||
/** Métodos */
|
||||
const handleConfirm = () => {
|
||||
emit('confirm', props.warehouse.id);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :show="show" max-width="md" @close="handleClose">
|
||||
<div class="p-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30">
|
||||
<GoogleIcon name="delete_forever" class="text-2xl text-red-600 dark:text-red-400" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
|
||||
Eliminar Almacén
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
@click="handleClose"
|
||||
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="space-y-5">
|
||||
<p class="text-gray-700 dark:text-gray-300 text-base">
|
||||
¿Estás seguro de que deseas eliminar este almacén?
|
||||
</p>
|
||||
|
||||
<div v-if="warehouse" class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl p-5 space-y-3">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-base font-bold text-gray-900 dark:text-gray-100 mb-1">
|
||||
{{ warehouse.name }}
|
||||
</p>
|
||||
<div class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
<p>Código: <span class="font-mono font-semibold">{{ warehouse.code }}</span></p>
|
||||
<p>Estado: {{ warehouse.is_active ? 'Activo' : 'Inactivo' }}</p>
|
||||
<p v-if="warehouse.is_main" class="font-semibold text-amber-600 dark:text-amber-400">
|
||||
Almacén principal
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
|
||||
<GoogleIcon name="info" class="text-red-600 dark:text-red-400 text-xl flex-shrink-0 mt-0.5" />
|
||||
<p class="text-sm text-red-800 dark:text-red-300 font-medium">
|
||||
Esta acción es permanente y no se puede deshacer. No se puede eliminar un almacén que tenga stock.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="flex items-center justify-end gap-3 mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
@click="handleClose"
|
||||
class="px-5 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="handleConfirm"
|
||||
class="flex items-center gap-2 px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600 shadow-lg shadow-red-600/30 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-600"
|
||||
>
|
||||
<GoogleIcon name="delete" class="text-xl" />
|
||||
Eliminar Almacén
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
155
src/pages/POS/Warehouses/Edit.vue
Normal file
155
src/pages/POS/Warehouses/Edit.vue
Normal file
@ -0,0 +1,155 @@
|
||||
<script setup>
|
||||
import { watch } from 'vue';
|
||||
import { useForm, apiURL } from '@Services/Api';
|
||||
|
||||
import Modal from '@Holos/Modal.vue';
|
||||
import FormInput from '@Holos/Form/Input.vue';
|
||||
import FormError from '@Holos/Form/Elements/Error.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['close', 'updated']);
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
warehouse: Object
|
||||
});
|
||||
|
||||
/** Formulario */
|
||||
const form = useForm({
|
||||
code: '',
|
||||
name: '',
|
||||
is_active: true,
|
||||
is_main: false,
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
const updateWarehouse = () => {
|
||||
form.put(apiURL(`almacenes/${props.warehouse.id}`), {
|
||||
onSuccess: () => {
|
||||
window.Notify.success('Almacén actualizado exitosamente');
|
||||
emit('updated');
|
||||
closeModal();
|
||||
},
|
||||
onError: () => {
|
||||
window.Notify.error('Error al actualizar el almacén');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
form.reset();
|
||||
emit('close');
|
||||
};
|
||||
|
||||
/** Observadores */
|
||||
watch(() => props.warehouse, (newWarehouse) => {
|
||||
if (newWarehouse) {
|
||||
form.code = newWarehouse.code || '';
|
||||
form.name = newWarehouse.name || '';
|
||||
form.is_active = newWarehouse.is_active ?? true;
|
||||
form.is_main = newWarehouse.is_main ?? false;
|
||||
}
|
||||
}, { immediate: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :show="show" max-width="md" @close="closeModal">
|
||||
<div class="p-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
|
||||
Editar Almacén
|
||||
</h3>
|
||||
<button
|
||||
@click="closeModal"
|
||||
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Formulario -->
|
||||
<form @submit.prevent="updateWarehouse" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Código -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
CÓDIGO
|
||||
</label>
|
||||
<FormInput
|
||||
v-model="form.code"
|
||||
type="text"
|
||||
placeholder="Ej: TIENDA-01"
|
||||
/>
|
||||
<FormError :message="form.errors?.code" />
|
||||
</div>
|
||||
|
||||
<!-- Nombre -->
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||
NOMBRE
|
||||
</label>
|
||||
<FormInput
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
placeholder="Nombre del almacén"
|
||||
/>
|
||||
<FormError :message="form.errors?.name" />
|
||||
</div>
|
||||
|
||||
<!-- Almacén Principal -->
|
||||
<div class="col-span-2">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
v-model="form.is_main"
|
||||
type="checkbox"
|
||||
class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Almacén principal
|
||||
</span>
|
||||
</label>
|
||||
<FormError :message="form.errors?.is_main" />
|
||||
</div>
|
||||
|
||||
<!-- Estado -->
|
||||
<div class="col-span-2">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
v-model="form.is_active"
|
||||
type="checkbox"
|
||||
class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Almacén activo
|
||||
</span>
|
||||
</label>
|
||||
<FormError :message="form.errors?.is_active" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botones -->
|
||||
<div class="flex items-center justify-end gap-3 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
@click="closeModal"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="px-4 py-2 text-sm font-semibold text-white bg-gray-900 rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<span v-if="form.processing">Actualizando...</span>
|
||||
<span v-else>Actualizar</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
211
src/pages/POS/Warehouses/Index.vue
Normal file
211
src/pages/POS/Warehouses/Index.vue
Normal file
@ -0,0 +1,211 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { api, useSearcher, apiURL } from '@Services/Api';
|
||||
import { can } from './Module.js';
|
||||
|
||||
import SearcherHead from '@Holos/Searcher.vue';
|
||||
import Table from '@Holos/Table.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import CreateModal from './Create.vue';
|
||||
import EditModal from './Edit.vue';
|
||||
import DeleteModal from './Delete.vue';
|
||||
|
||||
/** Estado */
|
||||
const warehouses = ref([]);
|
||||
const showCreateModal = ref(false);
|
||||
const showEditModal = ref(false);
|
||||
const showDeleteModal = ref(false);
|
||||
const editingWarehouse = ref(null);
|
||||
const deletingWarehouse = ref(null);
|
||||
|
||||
/** Métodos */
|
||||
const searcher = useSearcher({
|
||||
url: apiURL('almacenes'),
|
||||
onSuccess: (r) => {
|
||||
warehouses.value = r.data || r.warehouses || r;
|
||||
},
|
||||
onError: () => warehouses.value = []
|
||||
});
|
||||
|
||||
const confirmDelete = (id) => {
|
||||
api.delete(apiURL(`almacenes/${id}`), {
|
||||
onSuccess: () => {
|
||||
window.Notify.success('Almacén eliminado exitosamente');
|
||||
closeDeleteModal();
|
||||
searcher.search();
|
||||
},
|
||||
onFail: (data) => {
|
||||
window.Notify.error(data.message || 'No se puede eliminar el almacén porque tiene stock');
|
||||
},
|
||||
onError: () => {
|
||||
window.Notify.error('Error de conexión al eliminar el almacén');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const openCreateModal = () => {
|
||||
showCreateModal.value = true;
|
||||
};
|
||||
|
||||
const closeCreateModal = () => {
|
||||
showCreateModal.value = false;
|
||||
};
|
||||
|
||||
const openEditModal = (warehouse) => {
|
||||
editingWarehouse.value = warehouse;
|
||||
showEditModal.value = true;
|
||||
};
|
||||
|
||||
const closeEditModal = () => {
|
||||
showEditModal.value = false;
|
||||
editingWarehouse.value = null;
|
||||
};
|
||||
|
||||
const openDeleteModal = (warehouse) => {
|
||||
deletingWarehouse.value = warehouse;
|
||||
showDeleteModal.value = true;
|
||||
};
|
||||
|
||||
const closeDeleteModal = () => {
|
||||
showDeleteModal.value = false;
|
||||
deletingWarehouse.value = null;
|
||||
};
|
||||
|
||||
const onWarehouseSaved = () => {
|
||||
searcher.search();
|
||||
};
|
||||
|
||||
/** Ciclo de vida */
|
||||
onMounted(() => {
|
||||
searcher.search();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<SearcherHead
|
||||
:title="$t('warehouses.title')"
|
||||
placeholder="Buscar por nombre o código..."
|
||||
@search="(x) => searcher.search(x)"
|
||||
>
|
||||
<button
|
||||
v-if="can('create')"
|
||||
class="flex items-center gap-2 px-3 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
|
||||
@click="openCreateModal"
|
||||
>
|
||||
<GoogleIcon name="add" class="text-xl" />
|
||||
Nuevo Almacén
|
||||
</button>
|
||||
</SearcherHead>
|
||||
<div class="pt-2 w-full">
|
||||
|
||||
<Table
|
||||
:items="warehouses"
|
||||
@send-pagination="(page) => searcher.pagination(page)"
|
||||
>
|
||||
<template #head>
|
||||
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">CÓDIGO</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">NOMBRE</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">PRINCIPAL</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">ESTADO</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">ACCIONES</th>
|
||||
</template>
|
||||
<template #body="{items}">
|
||||
<tr
|
||||
v-for="warehouse in items"
|
||||
:key="warehouse.id"
|
||||
class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<p class="text-sm font-mono font-semibold text-gray-900 dark:text-gray-100">{{ warehouse.code }}</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ warehouse.name }}</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span
|
||||
v-if="warehouse.is_main"
|
||||
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"
|
||||
>
|
||||
<GoogleIcon name="star" class="text-sm mr-1" />
|
||||
Principal
|
||||
</span>
|
||||
<span v-else class="text-sm text-gray-400 dark:text-gray-500">—</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
|
||||
warehouse.is_active
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
|
||||
: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
|
||||
]"
|
||||
>
|
||||
{{ warehouse.is_active ? 'Activo' : 'Inactivo' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-center">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<button
|
||||
v-if="can('edit')"
|
||||
@click.stop="openEditModal(warehouse)"
|
||||
class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors"
|
||||
title="Editar almacén"
|
||||
>
|
||||
<GoogleIcon name="edit" class="text-xl" />
|
||||
</button>
|
||||
<button
|
||||
v-if="can('destroy')"
|
||||
@click.stop="openDeleteModal(warehouse)"
|
||||
class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 transition-colors"
|
||||
title="Eliminar almacén"
|
||||
>
|
||||
<GoogleIcon name="delete" class="text-xl" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template #empty>
|
||||
<td colspan="5" class="table-cell text-center">
|
||||
<div class="flex flex-col items-center justify-center py-8 text-gray-500">
|
||||
<GoogleIcon
|
||||
name="warehouse"
|
||||
class="text-6xl mb-2 opacity-50"
|
||||
/>
|
||||
<p class="font-semibold">
|
||||
{{ $t('registers.empty') }}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<!-- Modal de Crear Almacén -->
|
||||
<CreateModal
|
||||
v-if="can('create')"
|
||||
:show="showCreateModal"
|
||||
@close="closeCreateModal"
|
||||
@created="onWarehouseSaved"
|
||||
/>
|
||||
|
||||
<!-- Modal de Editar Almacén -->
|
||||
<EditModal
|
||||
v-if="can('edit')"
|
||||
:show="showEditModal"
|
||||
:warehouse="editingWarehouse"
|
||||
@close="closeEditModal"
|
||||
@updated="onWarehouseSaved"
|
||||
/>
|
||||
|
||||
<!-- Modal de Eliminar Almacén -->
|
||||
<DeleteModal
|
||||
v-if="can('destroy')"
|
||||
:show="showDeleteModal"
|
||||
:warehouse="deletingWarehouse"
|
||||
@close="closeDeleteModal"
|
||||
@confirm="confirmDelete"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
16
src/pages/POS/Warehouses/Module.js
Normal file
16
src/pages/POS/Warehouses/Module.js
Normal file
@ -0,0 +1,16 @@
|
||||
import { hasPermission } from '@Plugins/RolePermission.js';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`warehouses.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => ({ name: `pos.warehouses.${name}`, params, query })
|
||||
|
||||
// Determina si un usuario puede hacer algo en base a los permisos
|
||||
const can = (permission) => hasPermission(`warehouses.${permission}`)
|
||||
|
||||
export {
|
||||
can,
|
||||
viewTo,
|
||||
apiTo
|
||||
}
|
||||
@ -95,6 +95,18 @@ const router = createRouter({
|
||||
beforeEnter: (to, from, next) => can(next, 'client-tiers.index'),
|
||||
component: () => import('@Pages/POS/Tiers/Index.vue')
|
||||
},
|
||||
{
|
||||
path: 'warehouses',
|
||||
name: 'pos.warehouses.index',
|
||||
beforeEnter: (to, from, next) => can(next, 'warehouses.index'),
|
||||
component: () => import('@Pages/POS/Warehouses/Index.vue')
|
||||
},
|
||||
{
|
||||
path: 'movements',
|
||||
name: 'pos.movements.index',
|
||||
beforeEnter: (to, from, next) => can(next, 'movements.index'),
|
||||
component: () => import('@Pages/POS/Movements/Index.vue')
|
||||
},
|
||||
{
|
||||
path: 'billing-requests',
|
||||
name: 'pos.billingRequests.index',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user