Entry summary
This commit is contained in:
parent
627226d3cd
commit
f64ac5c70d
|
|
@ -274,6 +274,36 @@ export default {
|
|||
confirmed: 'Confirmed',
|
||||
ordered: 'Ordered',
|
||||
},
|
||||
summary: {
|
||||
commission: 'Commission',
|
||||
currency: 'Currency',
|
||||
company: 'Company',
|
||||
reference: 'Reference',
|
||||
invoiceNumber: 'Invoice number',
|
||||
ordered: 'Ordered',
|
||||
confirmed: 'Confirmed',
|
||||
booked: 'Booked',
|
||||
raid: 'Raid',
|
||||
excludedFromAvailable: 'Inventory',
|
||||
travelReference: 'Reference',
|
||||
travelAgency: 'Agency',
|
||||
travelShipped: 'Shipped',
|
||||
travelWarehouseOut: 'Warehouse Out',
|
||||
travelDelivered: 'Delivered',
|
||||
travelLanded: 'Landed',
|
||||
travelWarehouseIn: 'Warehouse In',
|
||||
travelReceived: 'Received',
|
||||
buys: 'Buys',
|
||||
quantity: 'Quantity',
|
||||
stickers: 'Stickers',
|
||||
package: 'Package',
|
||||
weight: 'Weight',
|
||||
packing: 'Packing',
|
||||
grouping: 'Grouping',
|
||||
buyingValue: 'Buying value',
|
||||
import: 'Import',
|
||||
pvp: 'PVP',
|
||||
},
|
||||
},
|
||||
ticket: {
|
||||
pageTitles: {
|
||||
|
|
|
|||
|
|
@ -272,6 +272,36 @@ export default {
|
|||
confirmed: 'Confirmado',
|
||||
ordered: 'Pedida',
|
||||
},
|
||||
summary: {
|
||||
commission: 'Comisión',
|
||||
currency: 'Moneda',
|
||||
company: 'Empresa',
|
||||
reference: 'Referencia',
|
||||
invoiceNumber: 'Núm. factura',
|
||||
ordered: 'Pedida',
|
||||
confirmed: 'Confirmado',
|
||||
booked: 'Asentado',
|
||||
raid: 'Redada',
|
||||
excludedFromAvailable: 'Inventario',
|
||||
travelReference: 'Referencia',
|
||||
travelAgency: 'Agencia',
|
||||
travelShipped: 'F. envio',
|
||||
travelWarehouseOut: 'Alm. salida',
|
||||
travelDelivered: 'Enviada',
|
||||
travelLanded: 'F. entrega',
|
||||
travelWarehouseIn: 'Alm. entrada',
|
||||
travelReceived: 'Recibida',
|
||||
buys: 'Compras',
|
||||
quantity: 'Cantidad',
|
||||
stickers: 'Etiquetas',
|
||||
package: 'Embalaje',
|
||||
weight: 'Peso',
|
||||
packing: 'Packing',
|
||||
grouping: 'Grouping',
|
||||
buyingValue: 'Coste',
|
||||
import: 'Importe',
|
||||
pvp: 'PVP',
|
||||
},
|
||||
},
|
||||
ticket: {
|
||||
pageTitles: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,373 @@
|
|||
<script setup>
|
||||
import { onMounted, ref, computed, onUpdated } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import CardSummary from 'components/ui/CardSummary.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
|
||||
import FetchedTags from 'components/ui/FetchedTags.vue';
|
||||
|
||||
import { toDate, toCurrency } from 'src/filters';
|
||||
import { getUrl } from 'src/composables/getUrl';
|
||||
import axios from 'axios';
|
||||
|
||||
onUpdated(() => summaryRef.value.fetch());
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const entityId = computed(() => $props.id || route.params.id);
|
||||
const summaryRef = ref();
|
||||
const entry = ref();
|
||||
const entryBuys = ref([]);
|
||||
const entryUrl = ref();
|
||||
|
||||
onMounted(async () => {
|
||||
entryUrl.value = (await getUrl('entry/')) + entityId.value;
|
||||
});
|
||||
|
||||
const tableColumnComponents = {
|
||||
quantity: {
|
||||
component: () => 'span',
|
||||
props: () => {},
|
||||
},
|
||||
stickers: {
|
||||
component: () => 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
packagingFk: {
|
||||
component: () => 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
weight: {
|
||||
component: () => 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
packing: {
|
||||
component: () => 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
grouping: {
|
||||
component: () => 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
buyingValue: {
|
||||
component: () => 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
amount: {
|
||||
component: () => 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
pvp: {
|
||||
component: () => 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
};
|
||||
|
||||
const entriesTableColumns = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: t('entry.summary.quantity'),
|
||||
field: 'quantity',
|
||||
name: 'quantity',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: t('entry.summary.stickers'),
|
||||
field: 'stickers',
|
||||
name: 'stickers',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: t('entry.summary.package'),
|
||||
field: 'packagingFk',
|
||||
name: 'packagingFk',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: t('entry.summary.weight'),
|
||||
field: 'weight',
|
||||
name: 'weight',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: t('entry.summary.packing'),
|
||||
field: 'packing',
|
||||
name: 'packing',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: t('entry.summary.grouping'),
|
||||
field: 'grouping',
|
||||
name: 'grouping',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: t('entry.summary.buyingValue'),
|
||||
field: 'buyingValue',
|
||||
name: 'buyingValue',
|
||||
align: 'left',
|
||||
format: (value) => toCurrency(value),
|
||||
},
|
||||
{
|
||||
label: t('entry.summary.import'),
|
||||
name: 'amount',
|
||||
align: 'left',
|
||||
format: (_, row) => toCurrency(row.buyingValue * row.quantity),
|
||||
},
|
||||
{
|
||||
label: t('entry.summary.pvp'),
|
||||
name: 'pvp',
|
||||
align: 'left',
|
||||
format: (_, row) => toCurrency(row.price2) + ' / ' + toCurrency(row.price3),
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
async function setEntryData(data) {
|
||||
if (data) entry.value = data;
|
||||
await fetchEntryBuys();
|
||||
}
|
||||
|
||||
const fetchEntryBuys = async () => {
|
||||
try {
|
||||
const { data } = await axios.get(`Entries/${entry.value.id}/getBuys`);
|
||||
if (data) entryBuys.value = data;
|
||||
} catch (err) {
|
||||
console.error('Error fetching entry buys');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardSummary
|
||||
ref="summaryRef"
|
||||
:url="`Entries/${entityId}/getEntry`"
|
||||
@on-fetch="(data) => setEntryData(data)"
|
||||
>
|
||||
<template #header-left>
|
||||
<a class="header link" :href="entryUrl">
|
||||
<QIcon name="open_in_new" color="white" size="sm" />
|
||||
</a>
|
||||
</template>
|
||||
<template #header>
|
||||
<span>{{ entry.id }} - {{ entry.supplier.nickname }}</span>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<QCard class="vn-one">
|
||||
<a class="header link" :href="entryUrl">
|
||||
{{ t('globals.summary.basicData') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<VnRow>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.commission')"
|
||||
:value="entry.commission"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.currency')"
|
||||
:value="entry.currency.name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.company')"
|
||||
:value="entry.company.code"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.reference')"
|
||||
:value="entry.reference"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.invoiceNumber')"
|
||||
:value="entry.invoiceNumber"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.ordered')"
|
||||
:value="entry.isOrdered"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.confirmed')"
|
||||
:value="entry.isConfirmed"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.booked')"
|
||||
:value="entry.isBooked"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv :label="t('entry.summary.raid')" :value="entry.isRaid" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.excludedFromAvailable')"
|
||||
:value="entry.isExcludedFromAvailable"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
</QCard>
|
||||
<QCard class="vn-one">
|
||||
<a class="header link" :href="entryUrl">
|
||||
{{ t('Travel data') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<VnRow>
|
||||
<div class="col">
|
||||
<VnLv :label="t('entry.summary.travelReference')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entry.travel.ref }}
|
||||
<TravelDescriptorProxy :id="entry.travel.id" />
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.travelAgency')"
|
||||
:value="entry.travel.agency.name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.travelShipped')"
|
||||
:value="toDate(entry.travel.shipped)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.travelWarehouseOut')"
|
||||
:value="entry.travel.warehouseOut.name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.travelDelivered')"
|
||||
:value="entry.travel.isDelivered"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.travelLanded')"
|
||||
:value="toDate(entry.travel.landed)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.travelWarehouseIn')"
|
||||
:value="entry.travel.warehouseIn.name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnLv
|
||||
:label="t('entry.summary.travelReceived')"
|
||||
:value="entry.travel.isReceived"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
</QCard>
|
||||
<QCard class="vn-two" style="min-width: 100%">
|
||||
<a class="header">
|
||||
{{ t('entry.summary.buys') }}
|
||||
</a>
|
||||
<QTable
|
||||
:rows="entryBuys"
|
||||
:columns="entriesTableColumns"
|
||||
hide-bottom
|
||||
row-key="index"
|
||||
class="full-width q-mt-md"
|
||||
>
|
||||
<template #body="{ cols, row, rowIndex }">
|
||||
<QTr no-hover>
|
||||
<QTd v-for="col in cols" :key="col.name">
|
||||
<component
|
||||
:is="tableColumnComponents[col.name].component(props)"
|
||||
v-bind="tableColumnComponents[col.name].props(props)"
|
||||
@click="tableColumnComponents[col.name].event(props)"
|
||||
class="col-content"
|
||||
>
|
||||
<template
|
||||
v-if="
|
||||
col.name !== 'observation' &&
|
||||
col.name !== 'isConfirmed'
|
||||
"
|
||||
>{{ col.value }}</template
|
||||
>
|
||||
<QTooltip v-if="col.toolTip">{{
|
||||
col.toolTip
|
||||
}}</QTooltip>
|
||||
</component>
|
||||
</QTd>
|
||||
</QTr>
|
||||
<QTr no-hover>
|
||||
<QTd>
|
||||
<span>{{ row.item.itemType.code }}</span>
|
||||
</QTd>
|
||||
<QTd>
|
||||
<span>{{ row.item.id }}</span>
|
||||
</QTd>
|
||||
<QTd>
|
||||
<span>{{ row.item.size }}</span>
|
||||
</QTd>
|
||||
<QTd>
|
||||
<span>{{ toCurrency(row.item.minPrice) }}</span>
|
||||
</QTd>
|
||||
<QTd colspan="6">
|
||||
<span>{{ row.item.concept }}</span>
|
||||
<span v-if="row.item.subName" class="subName">
|
||||
{{ row.item.subName }}
|
||||
</span>
|
||||
<fetched-tags :item="row.item" :max-length="5" />
|
||||
</QTd>
|
||||
</QTr>
|
||||
<!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
|
||||
<QTr
|
||||
v-if="rowIndex !== entryBuys.length - 1"
|
||||
style="height: 30px"
|
||||
>
|
||||
<QTd colspan="10" />
|
||||
</QTr>
|
||||
</template>
|
||||
</QTable>
|
||||
</QCard>
|
||||
</template>
|
||||
</CardSummary>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Travel data: 'Datos envío'
|
||||
</i18n>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<script setup>
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
import EntrySummary from './EntrySummary.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits([...useDialogPluginComponent.emits]);
|
||||
|
||||
const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QDialog ref="dialogRef" @hide="onDialogHide">
|
||||
<EntrySummary v-if="$props.id" :id="$props.id" />
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.q-dialog .summary .header {
|
||||
position: sticky;
|
||||
z-index: $z-max;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,6 +8,7 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
|||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import CardList from 'src/components/ui/CardList.vue';
|
||||
import EntrySummaryDialog from './Card/EntrySummaryDialog.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { toDate } from 'src/filters/index';
|
||||
|
|
@ -23,7 +24,7 @@ onMounted(async () => {
|
|||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
|
||||
function navigate(id) {
|
||||
router.push({ path: `/invoice-in/${id}` });
|
||||
router.push({ path: `/entry/${id}` });
|
||||
}
|
||||
|
||||
const redirectToCreateView = () => {
|
||||
|
|
@ -31,12 +32,12 @@ const redirectToCreateView = () => {
|
|||
};
|
||||
|
||||
function viewSummary(id) {
|
||||
// quasar.dialog({
|
||||
// component: EntrySummaryDialog,
|
||||
// componentProps: {
|
||||
// id,
|
||||
// },
|
||||
// });
|
||||
quasar.dialog({
|
||||
component: EntrySummaryDialog,
|
||||
componentProps: {
|
||||
id,
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -66,7 +67,7 @@ function viewSummary(id) {
|
|||
:title="row.reference"
|
||||
@click="navigate(row.id)"
|
||||
:id="row.id"
|
||||
:has-info-icons="row.isExcludedFromAvailable || row.isRaid"
|
||||
:has-info-icons="!!row.isExcludedFromAvailable || !!row.isRaid"
|
||||
>
|
||||
<template #info-icons>
|
||||
<QIcon
|
||||
|
|
|
|||
|
|
@ -182,4 +182,3 @@ const isAdministrative = computed(() => {
|
|||
</template>
|
||||
</CardSummary>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -39,23 +39,22 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// name: 'EntryCard',
|
||||
// path: ':id',
|
||||
// component: () => import('src/pages/Entry/Card/EntryCard.vue'),
|
||||
// redirect: { name: 'EntrySummary' },
|
||||
// children: [
|
||||
// {
|
||||
// name: 'EntrySummary',
|
||||
// path: 'summary',
|
||||
// meta: {
|
||||
// title: 'summary',
|
||||
// icon: 'launch',
|
||||
// },
|
||||
// component: () =>
|
||||
// import('src/pages/Entry/Card/EntrySummary.vue'),
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
name: 'EntryCard',
|
||||
path: ':id',
|
||||
component: () => import('src/pages/Entry/Card/EntryCard.vue'),
|
||||
redirect: { name: 'EntrySummary' },
|
||||
children: [
|
||||
{
|
||||
name: 'EntrySummary',
|
||||
path: 'summary',
|
||||
meta: {
|
||||
title: 'summary',
|
||||
icon: 'launch',
|
||||
},
|
||||
component: () => import('src/pages/Entry/Card/EntrySummary.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue