94 lines
3.8 KiB
Vue
94 lines
3.8 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
template: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
productos: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const formatCurrency = (value) => {
|
|
return new Intl.NumberFormat("es-MX", {
|
|
style: "currency",
|
|
currency: "MXN",
|
|
}).format(value);
|
|
};
|
|
|
|
const isRemision = computed(() => {
|
|
return props.template.documentType === 'REMISION';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<table v-if="isRemision">
|
|
<thead>
|
|
<tr class="text-white" :style="{ backgroundColor: template.primaryColor }">
|
|
<th class="border border-white px-1 py-0.5">CANT</th>
|
|
<th class="border border-white px-1 py-0.5">UNIDAD</th>
|
|
<th class="border border-white px-1 py-0.5">CODIGO</th>
|
|
<th class="border border-white px-1 py-0.5">DESCRIPCION</th>
|
|
<th class="border border-white px-1 py-0.5">CANTIDAD</th>
|
|
<th class="border border-white px-1 py-0.5">PRECIO UNIT.</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="producto in productos" :key="producto.lote" class="odd:bg-blue-100">
|
|
<td class="border border-gray-300 px-1 py-0.5 text-center">{{ producto.cantidad }}</td>
|
|
<td class="border border-gray-300 px-1 py-0.5 text-center">{{ producto.unidad || producto.unidadSAT }}</td>
|
|
<td class="border border-gray-300 px-1 py-0.5">{{ producto.codigo }}</td>
|
|
<td class="border border-gray-300 px-1 py-0.5">{{ producto.descripcion }}</td>
|
|
<td class="border border-gray-300 px-1 py-0.5">{{ formatCurrency(producto.precioUnitario) }}</td>
|
|
<td class="border border-gray-300 px-1 py-0.5">{{ formatCurrency(producto.cantidad * producto.precioUnitario) }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table v-else class="w-full border-collapse mb-3">
|
|
<thead>
|
|
<tr
|
|
class="text-white"
|
|
:style="{ backgroundColor: template.primaryColor }"
|
|
>
|
|
<th class="border border-white px-1 py-0.5">LOTE</th>
|
|
<th class="border border-white px-1 py-0.5">CANT</th>
|
|
<th class="border border-white px-1 py-0.5">UNIDAD</th>
|
|
<th class="border border-white px-1 py-0.5">CODIGO</th>
|
|
<th class="border border-white px-1 py-0.5">DESCRIPCION</th>
|
|
<th class="border border-white px-1 py-0.5">P. UNIT.</th>
|
|
<th class="border border-white px-1 py-0.5">IMPORTE</th>
|
|
<th class="border border-white px-1 py-0.5">DESC</th>
|
|
<th class="border border-white px-1 py-0.5">TOTAL</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="producto in productos"
|
|
:key="producto.lote"
|
|
class="odd:bg-blue-100"
|
|
>
|
|
<td class="border border-gray-300 px-1 py-0.5 text-center">{{ producto.lote }}</td>
|
|
<td class="border border-gray-300 px-1 py-0.5 text-center">{{ producto.cantidad }}</td>
|
|
<td class="border border-gray-300 px-1 py-0.5 text-center">{{ producto.unidad || producto.unidadSAT }}</td>
|
|
<td class="border border-gray-300 px-1 py-0.5">{{ producto.codigo }}</td>
|
|
<td class="border border-gray-300 px-1 py-0.5">{{ producto.descripcion }}</td>
|
|
<td class="border border-gray-300 px-1 py-0.5 text-right whitespace-nowrap">
|
|
{{ formatCurrency(producto.precioUnitario) }}
|
|
</td>
|
|
<td class="border border-gray-300 px-1 py-0.5 text-right whitespace-nowrap">
|
|
{{ formatCurrency(producto.cantidad * producto.precioUnitario) }}
|
|
</td>
|
|
<td class="border border-gray-300 px-1 py-0.5 text-right whitespace-nowrap">
|
|
{{ formatCurrency(producto.descuento || 0) }}
|
|
</td>
|
|
<td class="border border-gray-300 px-1 py-0.5 text-right font-semibold whitespace-nowrap">
|
|
{{ formatCurrency(producto.cantidad * producto.precioUnitario - (producto.descuento || 0)) }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|