josedario87
039bf47d21
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m4s
109 lines
2.8 KiB
Vue
109 lines
2.8 KiB
Vue
<template>
|
|
<UCard>
|
|
<template #header>
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h3 class="text-xl font-bold">{{ lote.codigo || 'Sin código' }}</h3>
|
|
<UBadge :color="getTipoColor(lote.tipo)" variant="subtle" class="mt-1">
|
|
{{ getTipoLabel(lote.tipo) }}
|
|
</UBadge>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<UButton
|
|
icon="i-heroicons-pencil"
|
|
variant="outline"
|
|
size="sm"
|
|
label="Editar"
|
|
@click="$emit('edit')"
|
|
/>
|
|
<UButton
|
|
icon="i-heroicons-chart-bar"
|
|
variant="outline"
|
|
size="sm"
|
|
color="green"
|
|
label="Ver Trazabilidad"
|
|
@click="$emit('trazabilidad')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<p class="text-sm text-gray-500">ID</p>
|
|
<p class="font-mono text-xs">{{ lote.id }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-sm text-gray-500">Fecha de Creación</p>
|
|
<p class="font-medium">{{ formatDate(lote.fecha_creado) }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-sm text-gray-500">Cantidad</p>
|
|
<p class="font-medium text-lg">
|
|
{{ lote.cantidad_kg ? `${lote.cantidad_kg.toLocaleString('es-AR')} kg` : '-' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-sm text-gray-500">Lugar ID</p>
|
|
<p class="font-medium">{{ lote.lugar_id || '-' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="lote.meta" class="pt-4 border-t">
|
|
<p class="text-sm text-gray-500 mb-2">Información Adicional</p>
|
|
<UCard class="bg-gray-50">
|
|
<pre class="text-xs overflow-x-auto">{{ JSON.stringify(lote.meta, null, 2) }}</pre>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Lote } from '~/composables/useLotes'
|
|
|
|
const props = defineProps<{
|
|
lote: Lote
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
edit: []
|
|
trazabilidad: []
|
|
}>()
|
|
|
|
const { TIPOS_LOTE } = useLotes()
|
|
|
|
const getTipoLabel = (tipo: string) => {
|
|
const found = TIPOS_LOTE.find((t) => t.value === tipo)
|
|
return found?.label || tipo
|
|
}
|
|
|
|
const getTipoColor = (tipo: string): string => {
|
|
const colorMap: Record<string, string> = {
|
|
uva: 'purple',
|
|
despulpado_primera: 'green',
|
|
despulpado_segunda: 'yellow',
|
|
despulpado_rechazos: 'red',
|
|
oreado: 'orange',
|
|
presecado: 'amber',
|
|
reposo: 'blue',
|
|
secado: 'emerald',
|
|
}
|
|
return colorMap[tipo] || 'gray'
|
|
}
|
|
|
|
const formatDate = (dateString: string) => {
|
|
return new Date(dateString).toLocaleDateString('es-AR', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})
|
|
}
|
|
</script>
|