forked from verdnatura/salix-front
refactor: refs #7553 rollback ticket advance due to slot problems
This commit is contained in:
parent
94ae74ca7f
commit
0b961050a0
|
|
@ -408,7 +408,8 @@ defineExpose({
|
|||
@click="stateStore.toggleRightDrawer()"
|
||||
/>
|
||||
</template>
|
||||
<!--TODO: este slot se carga los botones de mostrar tabla/card y columnas visibles-->
|
||||
<!--TODO: este slot se carga los botones de mostrar tabla/card y columnas visibles
|
||||
por lo que no es viable para el uso que se le quiere dar-->
|
||||
<!-- <template #top>
|
||||
<div class="full-width-slot">
|
||||
<slot name="before-header" />
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import { onMounted, ref, computed, reactive } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
// import VnInput from 'src/components/common/VnInput.vue';
|
||||
// import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
|
|
@ -19,14 +19,13 @@ import useNotify from 'src/composables/useNotify.js';
|
|||
import { useState } from 'src/composables/useState';
|
||||
import { toDateFormat } from 'src/filters/date.js';
|
||||
import axios from 'axios';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
|
||||
const state = useState();
|
||||
const { t } = useI18n();
|
||||
const { openConfirmationModal } = useVnConfirm();
|
||||
const { notify } = useNotify();
|
||||
const user = state.getUser();
|
||||
const tableRef = ref();
|
||||
|
||||
const itemPackingTypesOptions = ref([]);
|
||||
const zonesOptions = ref([]);
|
||||
const selectedTickets = ref([]);
|
||||
|
|
@ -45,14 +44,15 @@ const exprBuilder = (param, value) => {
|
|||
case 'notMovableLines':
|
||||
case 'futureZoneFk':
|
||||
return { [param]: value };
|
||||
case 'ipt':
|
||||
return { [param]: { like: `%${value}%` } };
|
||||
case 'futureIpt':
|
||||
return { [param]: { like: `%${value}%` } };
|
||||
case 'iptColFilter':
|
||||
return { ipt: { like: `%${value}%` } };
|
||||
case 'futureIptColFilter':
|
||||
return { futureIpt: { like: `%${value}%` } };
|
||||
}
|
||||
};
|
||||
|
||||
const userParams = reactive({});
|
||||
|
||||
const arrayData = useArrayData('AdvanceTickets', {
|
||||
url: 'Tickets/getTicketsAdvance',
|
||||
userParams: userParams,
|
||||
|
|
@ -82,123 +82,220 @@ const getInputEvents = (col) => {
|
|||
};
|
||||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
const ticketColumns = computed(() => [
|
||||
{
|
||||
label: '',
|
||||
name: 'icons',
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
label: t('advanceTickets.ticketId'),
|
||||
name: 'id',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
columnFilter: null,
|
||||
},
|
||||
{
|
||||
label: t('advanceTickets.ticketId'),
|
||||
name: 'ticketId',
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
filterParamKey: 'id',
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('advanceTickets.ipt'),
|
||||
name: 'ipt',
|
||||
field: 'ipt',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
component: VnSelect,
|
||||
filterParamKey: 'iptColFilter',
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
url: 'itemPackingTypes',
|
||||
fields: ['code', 'description'],
|
||||
where: { isActive: true },
|
||||
optionValue: 'code',
|
||||
optionLabel: 'description',
|
||||
options: itemPackingTypesOptions.value,
|
||||
'option-value': 'code',
|
||||
'option-label': 'description',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (row, dashIfEmpty) => dashIfEmpty(row.ipt),
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('advanceTickets.state'),
|
||||
name: 'state',
|
||||
hidden: true,
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: null,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('advanceTickets.liters'),
|
||||
name: 'liters',
|
||||
field: 'liters',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('advanceTickets.lines'),
|
||||
name: 'lines',
|
||||
format: (row, dashIfEmpty) => dashIfEmpty(row.lines),
|
||||
field: 'lines',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('advanceTickets.import'),
|
||||
name: 'totalWithVat',
|
||||
hidden: true,
|
||||
format: (row) => toCurrency(row.totalWithVat),
|
||||
field: 'import',
|
||||
name: 'import',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('advanceTickets.futureId'),
|
||||
name: 'futureId',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
filterParamKey: 'futureId',
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('advanceTickets.futureIpt'),
|
||||
name: 'futureIpt',
|
||||
field: 'futureIpt',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
component: VnSelect,
|
||||
filterParamKey: 'futureIptColFilter',
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
url: 'itemPackingTypes',
|
||||
fields: ['code', 'description'],
|
||||
where: { isActive: true },
|
||||
optionValue: 'code',
|
||||
optionLabel: 'description',
|
||||
options: itemPackingTypesOptions.value,
|
||||
'option-value': 'code',
|
||||
'option-label': 'description',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (row, dashIfEmpty) => dashIfEmpty(row.futureIpt),
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('advanceTickets.futureState'),
|
||||
name: 'futureState',
|
||||
hidden: true,
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: null,
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('advanceTickets.futureLiters'),
|
||||
name: 'futureLiters',
|
||||
},
|
||||
{
|
||||
field: 'futureLiters',
|
||||
align: 'left',
|
||||
label: t('advanceTickets.futureZone'),
|
||||
name: 'futureZoneFk',
|
||||
columnClass: 'expand',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
inWhere: true,
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
url: 'Zones',
|
||||
fields: ['id', 'name'],
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
format: (row, dashIfEmpty) => dashIfEmpty(row.futureZoneName),
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
label: t('advanceTickets.futureZone'),
|
||||
name: 'futureZoneName',
|
||||
field: 'futureZoneName',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelect,
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
filterParamKey: 'futureZoneFk',
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
options: zonesOptions.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
label: t('advanceTickets.notMovableLines'),
|
||||
name: 'notMovableLines',
|
||||
field: 'notMovableLines',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('advanceTickets.futureLines'),
|
||||
name: 'futureLines',
|
||||
field: 'futureLines',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('advanceTickets.futureImport'),
|
||||
name: 'futureTotalWithVat',
|
||||
hidden: true,
|
||||
format: (row) => toCurrency(row.futureTotalWithVat),
|
||||
name: 'futureImport',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: null,
|
||||
},
|
||||
]);
|
||||
|
||||
|
|
@ -351,7 +448,7 @@ const handleCloseProgressDialog = () => {
|
|||
const handleCancelProgress = () => (cancelProgress.value = true);
|
||||
|
||||
onMounted(async () => {
|
||||
let today = Date.vnNew().toISOString();
|
||||
let today = Date.vnNew();
|
||||
const tomorrow = new Date(today);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
userParams.dateFuture = tomorrow;
|
||||
|
|
@ -360,13 +457,6 @@ onMounted(async () => {
|
|||
const filter = { limit: 0 };
|
||||
await arrayData.addFilter({ filter, userParams });
|
||||
});
|
||||
|
||||
const getColor = (row) => {
|
||||
return row?.classColor ? `bg-${row.classColor}` : 'bg-orange';
|
||||
};
|
||||
const getFutureColor = (row) => {
|
||||
return row?.futureClassColor ? `bg-${row.futureClassColor}` : 'bg-orange';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -390,9 +480,9 @@ const getFutureColor = (row) => {
|
|||
@on-fetch="(data) => (zonesOptions = data)"
|
||||
/>
|
||||
<VnSearchbar
|
||||
data-key="AdvanceTickets"
|
||||
:label="t('advanceTickets.search')"
|
||||
:info="t('advanceTickets.searchInfo')"
|
||||
data-key="WeeklyTickets"
|
||||
:label="t('weeklyTickets.search')"
|
||||
:info="t('weeklyTickets.searchInfo')"
|
||||
/>
|
||||
<VnSubToolbar>
|
||||
<template #st-data>
|
||||
|
|
@ -441,32 +531,73 @@ const getFutureColor = (row) => {
|
|||
</template>
|
||||
</RightMenu>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="AdvanceTickets"
|
||||
url="TicketWeeklies/filter"
|
||||
:columns="columns"
|
||||
auto-load
|
||||
:right-search="false"
|
||||
:disable-option="{ card: true }"
|
||||
<QTable
|
||||
:rows="tickets"
|
||||
:columns="ticketColumns"
|
||||
row-key="index"
|
||||
selection="multiple"
|
||||
v-model:selected="selectedTickets"
|
||||
:table="{
|
||||
'row-key': 'id',
|
||||
selection: 'multiple',
|
||||
}"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
style="max-width: 99%"
|
||||
>
|
||||
<!--TODO: arreglar estilos-->
|
||||
<template #before-header>
|
||||
<span class="horizontal-separator" translate>
|
||||
{{ t('advanceTickets.destination') }}
|
||||
{{ toDateFormat(userParams.dateToAdvance) }}
|
||||
</span>
|
||||
<span class="horizontal-separator" translate>
|
||||
{{ t('advanceTickets.origin') }}
|
||||
{{ toDateFormat(userParams.dateFuture) }}
|
||||
</span>
|
||||
<template #header="props">
|
||||
<QTr :props="props">
|
||||
<QTh
|
||||
class="horizontal-separator text-uppercase color-vn-label"
|
||||
colspan="7"
|
||||
translate
|
||||
>
|
||||
{{ t('advanceTickets.destination') }}
|
||||
{{ toDateFormat(userParams.dateToAdvance) }}
|
||||
</QTh>
|
||||
<QTh
|
||||
class="horizontal-separator text-uppercase color-vn-label"
|
||||
colspan="9"
|
||||
translate
|
||||
>
|
||||
{{ t('advanceTickets.origin') }}
|
||||
{{ toDateFormat(userParams.dateFuture) }}
|
||||
</QTh>
|
||||
</QTr>
|
||||
<QTr>
|
||||
<QTh>
|
||||
<QCheckbox v-model="props.selected" />
|
||||
</QTh>
|
||||
<QTh
|
||||
v-for="(col, index) in ticketColumns"
|
||||
:key="index"
|
||||
:class="{ 'vertical-separator': col.name === 'futureId' }"
|
||||
>
|
||||
{{ col.label }}
|
||||
</QTh>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #column-icons="{ row }">
|
||||
<template #top-row="{ cols }">
|
||||
<QTr>
|
||||
<QTd />
|
||||
<QTd
|
||||
v-for="(col, index) in cols"
|
||||
:key="index"
|
||||
style="max-width: 100px"
|
||||
>
|
||||
<component
|
||||
:is="col.columnFilter.component"
|
||||
v-if="col.columnFilter"
|
||||
v-model="col.columnFilter.filterValue"
|
||||
v-bind="col.columnFilter.attrs"
|
||||
v-on="col.columnFilter.event(col)"
|
||||
dense
|
||||
/>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #header-cell-availableLines="{ col }">
|
||||
<QTh class="vertical-separator">
|
||||
{{ col.label }}
|
||||
</QTh>
|
||||
</template>
|
||||
<template #body-cell-icons="{ row }">
|
||||
<QTd class="q-gutter-x-xs">
|
||||
<QIcon
|
||||
v-if="row.futureAgency !== row.agency && row.agency"
|
||||
|
|
@ -493,52 +624,73 @@ const getFutureColor = (row) => {
|
|||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-id="{ row }">
|
||||
<span class="link" @click.stop>
|
||||
{{ row.id }}
|
||||
<TicketDescriptorProxy :id="row.id" />
|
||||
</span>
|
||||
<template #body-cell-ticketId="{ row }">
|
||||
<QTd>
|
||||
<QBtn flat class="link">
|
||||
{{ row.id }}
|
||||
<TicketDescriptorProxy :id="row.id" />
|
||||
</QBtn>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-state="{ row }">
|
||||
<QChip :class="getColor(row)" dense square>
|
||||
{{ row.state }}
|
||||
</QChip>
|
||||
<template #body-cell-state="{ row }">
|
||||
<QTd>
|
||||
<QBadge
|
||||
text-color="black"
|
||||
:color="row.classColor"
|
||||
class="q-ma-none"
|
||||
dense
|
||||
>
|
||||
{{ row.state }}
|
||||
</QBadge>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-totalWithVat="{ row }">
|
||||
<QBadge
|
||||
:text-color="isLessThan50(row.totalWithVat) ? 'black' : 'white'"
|
||||
:color="totalPriceColor(row.totalWithVat)"
|
||||
class="q-ma-none"
|
||||
dense
|
||||
>
|
||||
{{ toCurrency(row.totalWithVat || 0) }}
|
||||
</QBadge>
|
||||
<template #body-cell-import="{ row }">
|
||||
<QTd>
|
||||
<QBadge
|
||||
:text-color="isLessThan50(row.totalWithVat) ? 'black' : 'white'"
|
||||
:color="totalPriceColor(row.totalWithVat)"
|
||||
class="q-ma-none"
|
||||
dense
|
||||
>
|
||||
{{ toCurrency(row.totalWithVat || 0) }}
|
||||
</QBadge>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-futureId="{ row }">
|
||||
<!--TODO: arreglar estilos para que se muestre como antes, slot?-->
|
||||
<div class="vertical-separator">
|
||||
<span class="link" @click.stop>
|
||||
<template #body-cell-futureId="{ row }">
|
||||
<QTd class="vertical-separator">
|
||||
<QBtn flat class="link" dense>
|
||||
{{ row.futureId }}
|
||||
<TicketDescriptorProxy :id="row.futureId" />
|
||||
</span>
|
||||
</div>
|
||||
</QBtn>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-futureState="{ row }">
|
||||
<QChip :class="getFutureColor(row)" dense square>
|
||||
{{ row.futureState }}
|
||||
</QChip>
|
||||
<template #body-cell-futureState="{ row }">
|
||||
<QTd>
|
||||
<QBadge
|
||||
text-color="black"
|
||||
:color="row.futureClassColor"
|
||||
class="q-ma-none"
|
||||
dense
|
||||
>
|
||||
{{ row.futureState }}
|
||||
</QBadge>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-futureTotalWithVat="{ row }">
|
||||
<QBadge
|
||||
:text-color="isLessThan50(row.futureTotalWithVat) ? 'black' : 'white'"
|
||||
:color="totalPriceColor(row.futureTotalWithVat)"
|
||||
class="q-ma-none"
|
||||
dense
|
||||
>
|
||||
{{ toCurrency(row.futureTotalWithVat || 0) }}
|
||||
</QBadge>
|
||||
<template #body-cell-futureImport="{ row }">
|
||||
<QTd>
|
||||
<QBadge
|
||||
:text-color="
|
||||
isLessThan50(row.futureTotalWithVat) ? 'black' : 'white'
|
||||
"
|
||||
:color="totalPriceColor(row.futureTotalWithVat)"
|
||||
class="q-ma-none"
|
||||
dense
|
||||
>
|
||||
{{ toCurrency(row.futureTotalWithVat || 0) }}
|
||||
</QBadge>
|
||||
</QTd>
|
||||
</template>
|
||||
</VnTable>
|
||||
</QTable>
|
||||
<VnProgress
|
||||
:progress="progressPercentage"
|
||||
:cancelled="cancelProgress"
|
||||
|
|
@ -562,8 +714,6 @@ const getFutureColor = (row) => {
|
|||
}
|
||||
|
||||
.horizontal-separator {
|
||||
width: 100%;
|
||||
margin-top: 1%;
|
||||
border-bottom: 5px solid white !important;
|
||||
border-bottom: 4px solid white !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue