item diary
This commit is contained in:
parent
8f064e3338
commit
322ad816b9
|
|
@ -1 +1,290 @@
|
||||||
<template>Item diary (CREAR CUANDO SE DESARROLLE EL MODULO DE ITEMS)</template>
|
<script setup>
|
||||||
|
import { onMounted, computed, onUnmounted, reactive, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
|
||||||
|
import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
|
||||||
|
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||||
|
|
||||||
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
|
import { toDateFormat } from 'src/filters/date.js';
|
||||||
|
import { dashIfEmpty } from 'src/filters';
|
||||||
|
import { date } from 'quasar';
|
||||||
|
import { useState } from 'src/composables/useState';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const route = useRoute();
|
||||||
|
const stateStore = useStateStore();
|
||||||
|
const state = useState();
|
||||||
|
|
||||||
|
const user = state.getUser();
|
||||||
|
const today = ref(Date.vnNew());
|
||||||
|
const warehousesOptions = ref([]);
|
||||||
|
const itemBalancesRef = ref(null);
|
||||||
|
const itemsBalanceFilter = reactive({
|
||||||
|
where: { itemFk: route.params.id, warehouseFk: null, date: null },
|
||||||
|
});
|
||||||
|
const itemBalances = ref([]);
|
||||||
|
const warehouseFk = ref(null);
|
||||||
|
const _showWhatsBeforeInventory = ref(false);
|
||||||
|
|
||||||
|
const columns = computed(() => [
|
||||||
|
{
|
||||||
|
name: 'claim',
|
||||||
|
align: 'left',
|
||||||
|
field: 'itemFk',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('Date'),
|
||||||
|
name: 'date',
|
||||||
|
field: 'shipped',
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('Id'),
|
||||||
|
name: 'id',
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('State'),
|
||||||
|
field: 'stateName',
|
||||||
|
name: 'state',
|
||||||
|
align: 'left',
|
||||||
|
format: (val) => dashIfEmpty(val),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('Reference'),
|
||||||
|
field: 'reference',
|
||||||
|
name: 'reference',
|
||||||
|
align: 'left',
|
||||||
|
format: (val) => dashIfEmpty(val),
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: t('Client'),
|
||||||
|
name: 'client',
|
||||||
|
align: 'left',
|
||||||
|
format: (val) => dashIfEmpty(val),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('In'),
|
||||||
|
field: 'invalue',
|
||||||
|
name: 'in',
|
||||||
|
align: 'left',
|
||||||
|
format: (val) => dashIfEmpty(val),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('Out'),
|
||||||
|
field: 'out',
|
||||||
|
name: 'out',
|
||||||
|
align: 'left',
|
||||||
|
format: (val) => dashIfEmpty(val),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('Balance'),
|
||||||
|
name: 'balance',
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const showWhatsBeforeInventory = computed({
|
||||||
|
get: () => _showWhatsBeforeInventory.value,
|
||||||
|
set: (val) => {
|
||||||
|
_showWhatsBeforeInventory.value = val;
|
||||||
|
if (!val) itemsBalanceFilter.where.date = null;
|
||||||
|
else itemsBalanceFilter.where.date = new Date();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchItemBalances = async () => await itemBalancesRef.value.fetch();
|
||||||
|
|
||||||
|
const getBadgeAttrs = (_date) => {
|
||||||
|
const isSameDate = date.isSameDate(today.value, _date);
|
||||||
|
const attrs = {
|
||||||
|
'text-color': isSameDate ? 'black' : 'white',
|
||||||
|
color: isSameDate ? 'warning' : 'transparent',
|
||||||
|
};
|
||||||
|
return attrs;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getIdDescriptor = (row) => {
|
||||||
|
let descriptor = EntryDescriptorProxy;
|
||||||
|
if (row.isTicket) descriptor = TicketDescriptorProxy;
|
||||||
|
return descriptor;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
today.value.setHours(0, 0, 0, 0);
|
||||||
|
if (route.query.warehouseFk) warehouseFk.value = route.query.warehouseFk;
|
||||||
|
else if (user.value) warehouseFk.value = user.value.warehouseFk;
|
||||||
|
itemsBalanceFilter.where.warehouseFk = warehouseFk.value;
|
||||||
|
await fetchItemBalances();
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
ref="itemBalancesRef"
|
||||||
|
url="Items/getBalance"
|
||||||
|
:filter="itemsBalanceFilter"
|
||||||
|
@on-fetch="(data) => (itemBalances = data)"
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="Warehouses"
|
||||||
|
:filter="{ fields: ['id', 'name'], order: 'name ASC' }"
|
||||||
|
auto-load
|
||||||
|
@on-fetch="(data) => (warehousesOptions = data)"
|
||||||
|
/>
|
||||||
|
<QToolbar class="justify-end">
|
||||||
|
<div id="st-data" class="row">
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Warehouse')"
|
||||||
|
:options="warehousesOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
dense
|
||||||
|
v-model="itemsBalanceFilter.where.warehouseFk"
|
||||||
|
@update:model-value="fetchItemBalances"
|
||||||
|
class="q-mr-lg"
|
||||||
|
/>
|
||||||
|
<QCheckbox
|
||||||
|
:label="t(`Show what's before the inventory`)"
|
||||||
|
v-model="showWhatsBeforeInventory"
|
||||||
|
@update:model-value="fetchItemBalances"
|
||||||
|
class="q-mr-lg"
|
||||||
|
/>
|
||||||
|
<VnInputDate
|
||||||
|
v-if="showWhatsBeforeInventory"
|
||||||
|
:label="t('Since')"
|
||||||
|
dense
|
||||||
|
v-model="itemsBalanceFilter.where.date"
|
||||||
|
@update:model-value="fetchItemBalances"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<QSpace />
|
||||||
|
<div id="st-actions"></div>
|
||||||
|
</QToolbar>
|
||||||
|
<QPage class="column items-center q-pa-md">
|
||||||
|
<QTable
|
||||||
|
:rows="itemBalances"
|
||||||
|
:columns="columns"
|
||||||
|
class="full-width q-mt-md"
|
||||||
|
:no-data-label="t('globals.noResults')"
|
||||||
|
>
|
||||||
|
<template #body-cell-claim="{ row }">
|
||||||
|
<QTd @click.stop>
|
||||||
|
<QBtn
|
||||||
|
v-show="row.claimFk"
|
||||||
|
flat
|
||||||
|
color="primary"
|
||||||
|
:to="{ name: 'ClaimSummary', params: { id: row.claimFk } }"
|
||||||
|
icon="vn:claims"
|
||||||
|
dense
|
||||||
|
>
|
||||||
|
<QTooltip> {{ t('Claim') }}: {{ row.claimFk }} </QTooltip>
|
||||||
|
</QBtn>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #body-cell-date="{ row }">
|
||||||
|
<QTd @click.stop>
|
||||||
|
<QBadge
|
||||||
|
v-bind="getBadgeAttrs(row.shipped)"
|
||||||
|
class="q-ma-none"
|
||||||
|
dense
|
||||||
|
style="font-size: 14px"
|
||||||
|
>
|
||||||
|
{{ toDateFormat(row.shipped) }}
|
||||||
|
</QBadge>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #body-cell-id="{ row }">
|
||||||
|
<QTd @click.stop>
|
||||||
|
<component
|
||||||
|
:is="getIdDescriptor(row)"
|
||||||
|
:id="row.origin"
|
||||||
|
class="q-ma-none"
|
||||||
|
dense
|
||||||
|
style="font-size: 14px"
|
||||||
|
>
|
||||||
|
{{ row.origin }}
|
||||||
|
</component>
|
||||||
|
<span class="link">{{ row.origin }}</span>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #body-cell-client="{ row }">
|
||||||
|
<QTd @click.stop>
|
||||||
|
<QBadge
|
||||||
|
:color="row.highlighted ? 'warning' : 'transparent'"
|
||||||
|
:text-color="row.highlighted ? 'black' : 'white'"
|
||||||
|
dense
|
||||||
|
style="font-size: 14px"
|
||||||
|
>
|
||||||
|
<span v-if="row.isTicket" class="link">
|
||||||
|
{{ dashIfEmpty(row.name) }}
|
||||||
|
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||||
|
</span>
|
||||||
|
<span v-else>{{ dashIfEmpty(row.name) }}</span>
|
||||||
|
</QBadge>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #body-cell-in="{ row }">
|
||||||
|
<QTd @click.stop>
|
||||||
|
<span :class="{ 'is-in': row.invalue }">
|
||||||
|
{{ dashIfEmpty(row.invalue) }}
|
||||||
|
</span>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #body-cell-balance="{ row }">
|
||||||
|
<QTd @click.stop>
|
||||||
|
<QBadge
|
||||||
|
class="balance-negative"
|
||||||
|
:color="
|
||||||
|
row.lineFk == row.lastPreparedLineFk
|
||||||
|
? 'grey-13'
|
||||||
|
: 'transparent'
|
||||||
|
"
|
||||||
|
:text-color="
|
||||||
|
row.lineFk == row.lastPreparedLineFk
|
||||||
|
? 'black'
|
||||||
|
: row.balance < 0
|
||||||
|
? 'negative'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
dense
|
||||||
|
style="font-size: 14px"
|
||||||
|
>
|
||||||
|
<span>{{ dashIfEmpty(row.balance) }}</span>
|
||||||
|
</QBadge>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
</QTable>
|
||||||
|
</QPage>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.is-in {
|
||||||
|
color: $positive;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Date: Fecha
|
||||||
|
Id: Id
|
||||||
|
State: Estado
|
||||||
|
Reference: Referencia
|
||||||
|
Client: Cliente
|
||||||
|
In: Entrada
|
||||||
|
Out: Salida
|
||||||
|
Balance: Balance
|
||||||
|
Claim: Reclamación
|
||||||
|
Show what's before the inventory: Mostrar lo anterior al inventario
|
||||||
|
Since: Desde
|
||||||
|
</i18n>
|
||||||
|
|
|
||||||
|
|
@ -134,8 +134,8 @@ export default {
|
||||||
path: 'diary',
|
path: 'diary',
|
||||||
name: 'ItemDiary',
|
name: 'ItemDiary',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'basicData',
|
title: 'diary',
|
||||||
icon: 'vn:settings',
|
icon: 'vn:transaction',
|
||||||
},
|
},
|
||||||
component: () => import('src/pages/Item/Card/ItemDiary.vue'),
|
component: () => import('src/pages/Item/Card/ItemDiary.vue'),
|
||||||
},
|
},
|
||||||
|
|
@ -144,7 +144,7 @@ export default {
|
||||||
name: 'ItemLog',
|
name: 'ItemLog',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'log',
|
title: 'log',
|
||||||
icon: 'history',
|
icon: 'vn:History',
|
||||||
},
|
},
|
||||||
component: () => import('src/pages/Item/Card/ItemLog.vue'),
|
component: () => import('src/pages/Item/Card/ItemLog.vue'),
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue