0
0
Fork 0

feat: #6321 Update handleSplitted form

This commit is contained in:
Javier Segarra 2024-06-04 14:14:16 +02:00
parent 5b1819f7da
commit fd4ff94f4c
5 changed files with 120 additions and 82 deletions

View File

@ -72,8 +72,7 @@ const columns = computed(() => [
}, },
]); ]);
const getTotal = (data, key) => const getTotal = (data, key) => data.reduce((acc, cur) => acc + cur[key], 0);
data.reduce((acc, cur) => acc + +String(cur[key]).replace(',', '.'), 0);
</script> </script>
<template> <template>
<FetchData <FetchData
@ -111,7 +110,7 @@ const getTotal = (data, key) =>
<template #body-cell="{ row, col }"> <template #body-cell="{ row, col }">
<QTd> <QTd>
<QInput <QInput
v-model="row[col.name]" v-model.number="row[col.name]"
clearable clearable
clear-icon="close" clear-icon="close"
/> />
@ -187,22 +186,7 @@ const getTotal = (data, key) =>
</template> </template>
</VnSelect> </VnSelect>
</QItem> </QItem>
<QItem
v-for="(value, index) of [
'amount',
'net',
'stems',
]"
:key="index"
>
<QInput
:label="t(value)"
class="full-width"
v-model="props.row[value]"
clearable
clear-icon="close"
/>
</QItem>
<QItem> <QItem>
<VnSelect <VnSelect
:label="t('country')" :label="t('country')"

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, onMounted, ref } from 'vue'; import { computed, onMounted, ref, toRefs } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import axios from 'axios'; import axios from 'axios';
import { useDialogPluginComponent } from 'quasar'; import { useDialogPluginComponent } from 'quasar';
@ -20,9 +20,22 @@ const $props = defineProps({
default: () => [], default: () => [],
}, },
}); });
const rowBtnDisable = (row) => !(row?.name && row?.date); const tickets = ref($props.tickets ?? []);
const rowBtnDisable = () =>
!(
formData.value?.agencyModeFk &&
formData.value?.date &&
rowsSelected.value.length > 0
);
const rowsSelected = ref([]);
const columns = computed(() => [ const columns = computed(() => [
{
name: 'status',
label: t('negative.split.status'),
field: ({ status }) => status,
sortable: true,
},
{ {
name: 'ticket', name: 'ticket',
label: t('negative.split.ticket'), label: t('negative.split.ticket'),
@ -35,26 +48,40 @@ const columns = computed(() => [
field: ({ newTicket }) => newTicket, field: ({ newTicket }) => newTicket,
sortable: true, sortable: true,
}, },
{
name: 'status',
label: t('negative.split.status'),
field: ({ status }) => status,
sortable: true,
},
{ {
name: 'message', name: 'message',
label: t('negative.split.message'), label: t('negative.split.message'),
field: ({ message }) => message, field: ({ message }) => message,
sortable: true, sortable: true,
}, },
{ // {
name: 'actions', // name: 'actions',
label: t('negative.split.actions'), // align: 'center',
style: 'padding-left: 100px', // label: t('negative.split.actions'),
headerStyle: 'padding-left: 100px', // // style: 'padding-left: 100px',
}, // // headerStyle: 'padding-left: 100px',
// },
]); ]);
const formData = ref({ agencies: [] });
const handleDateChanged = async () => {
const { data: agencyData } = await axios.get('Agencies/getLanded', {
params: {
addressFk: 123,
agencyModeFk: 8,
warehouseFk: 1,
shipped: '2001-02-08T23:00:00.000Z',
},
});
if (!agencyData) formData.value.agencies = [];
const { zoneFk } = agencyData;
const { data: zoneData } = await axios.get('Zones/Includingexpired', {
params: { filter: { fields: ['id', 'name'], where: { id: zoneFk } } },
});
formData.value.agencies = zoneData;
if (zoneData.length === 1) formData.value.agencyModeFk = zoneData[0];
// formData.value.dateChanged = false;
};
const ticketsSelected = ref([]); const ticketsSelected = ref([]);
onMounted(() => { onMounted(() => {
ticketsSelected.value = [...new Set($props.tickets.map(({ ticketFk }) => ticketFk))]; ticketsSelected.value = [...new Set($props.tickets.map(({ ticketFk }) => ticketFk))];
@ -94,6 +121,12 @@ function getIcon(value) {
}; };
return icons[value]; return icons[value];
} }
const updateNewTickets = async () => {
tickets.value = $props.tickets.filter((ticket) => ticket.newTicket !== 1000005);
console.log('updateNewTickets');
rowsSelected.value = [];
};
</script> </script>
<template> <template>
@ -108,17 +141,56 @@ function getIcon(value) {
v-if="icon" v-if="icon"
/> />
<span class="text-h6 text-grey">{{ <span class="text-h6 text-grey">{{
t('negative.detail.modal.split.title') t('negative.detail.modal.handleSplited.title')
}}</span> }}</span>
<QSpace /> <QSpace />
<QBtn icon="close" flat round dense v-close-popup /> <QBtn icon="close" flat round dense v-close-popup />
</QCardSection> </QCardSection>
<QCardSection class="row items-center justify-center column items-stretch"> <QCardSection class="row items-center justify-center column items-stretch">
<Qform>
<VnRow class="row q-gutter-md q-mb-md">
<VnInputDate
:label="t('Max date')"
v-model="formData.date"
@update:model-value="(evt) => handleDateChanged()" />
<VnSelect
:disable="formData.agencies.length < 1"
:label="t('Agency')"
v-model="formData.agencyModeFk"
:options="formData.agencies"
option-label="name"
option-value="id" />
<QBtn
icon="save"
:disable="rowBtnDisable()"
color="primary"
flat
rounded
@click="updateNewTickets"
/></VnRow>
</Qform>
<VnPaginate data-key="splitLack" :data="tickets"> <VnPaginate data-key="splitLack" :data="tickets">
<template #body="{ rows }"> <template #body="{ rows }">
<QTable :rows="rows" :columns="columns" flat dense hide-bottom> <QTable
:rows="rows"
:columns="columns"
selection="multiple"
row-key="newTicket"
v-model:selected="rowsSelected"
:no-data-label="t('globals.noResults')"
flat
dense
hide-bottom
auto-load
:rows-per-page-options="[0]"
hide-pagination
:pagination="{ rowsPerPage: null }"
>
<template #header="props"> <template #header="props">
<QTr :props="props"> <QTr :props="props">
<QTh></QTh>
<QTh <QTh
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
@ -130,11 +202,13 @@ function getIcon(value) {
</template> </template>
<template #body="props"> <template #body="props">
<QTr :props="props"> <QTr :props="props">
<QTh <Qtd>
<QCheckbox v-model="props.selected" />
</Qtd>
<QTd
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
:props="props" :props="props"
:class="{ splitRow: props.row.status == 'split' }"
> >
<span <span
v-if=" v-if="
@ -150,54 +224,21 @@ function getIcon(value) {
<span v-if="'status' === col.name"> <span v-if="'status' === col.name">
<QIcon <QIcon
:name="`${getIcon(col.value).name}`" :name="`${getIcon(col.value).name}`"
size="md" size="xs"
class="cursor-pointer" class="cursor-pointer"
:color="getIcon(col.value).color" :color="getIcon(col.value).color"
> >
</QIcon> </QIcon>
</span> </span>
<span v-if="'message' === col.name">message</span> <span v-if="'message' === col.name">message</span>
<div </QTd></QTr
v-if=" ></template
'actions' === col.name && >
props.row.status == 'split' </QTable></template
" >
style="
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
column-gap: 20px;
align-items: center;
"
>
<div>
<VnInputDate
:label="t('Max date')"
v-model="props.row.date"
/>
<VnInput
:label="t('Name')"
v-model="props.row.name"
/>
</div>
<div>
<QBtn
icon="save"
class="q-mt-sm"
size="md"
color="primary"
flat
:disable="rowBtnDisable(props.row)"
/>
</div>
</div> </QTh></QTr
></template> </QTable
></template>
</VnPaginate> </VnPaginate>
</QCardSection> </QCardSection>
<QCardActions align="right"> <QCardActions align="right">
<QBtn :label="t('globals.next')" color="primary" flat v-close-popup />
<QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup /> <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
<QBtn <QBtn
:label="t('globals.confirm')" :label="t('globals.confirm')"

View File

@ -304,8 +304,8 @@ const split = async () => {
// resultSplit.value = data; // resultSplit.value = data;
resultSplit.value = [ resultSplit.value = [
{ ticket: 32, newTicket: 1000005, status: 'split' }, { ticket: 32, newTicket: 1000005, status: 'split' },
{ ticket: 32, newTicket: 1000005, status: 'noSplit' }, { ticket: 32, newTicket: 1000006, status: 'noSplit' },
{ ticket: 32, newTicket: 1000005, status: 'error' }, { ticket: 32, newTicket: 1000007, status: 'error' },
]; ];
}; };
</script> </script>

View File

@ -55,9 +55,11 @@ negative:
split: split:
title: Are you sure you want to split selected tickets? title: Are you sure you want to split selected tickets?
subTitle: Confirm split action subTitle: Confirm split action
handleSplited:
title: Handle splited tickets
subTitle: Confirm date and agency
split: split:
ticket: Old ticket ticket: Old ticket
newTicket: New ticket newTicket: New ticket
status: Result status: Result
message: Message message: Message
actions: Actions

View File

@ -27,6 +27,9 @@ negative:
title: 'Actualizar negativos' title: 'Actualizar negativos'
question: 'Seleccione un estado para guardar' question: 'Seleccione un estado para guardar'
modalSplit:
title: Confirmar acción de split
question: 'Select a state to update'
detail: detail:
itemFk: 'Articulo' itemFk: 'Articulo'
ticketFk: 'Id_Ticket' ticketFk: 'Id_Ticket'
@ -51,6 +54,14 @@ negative:
changeQuantity: changeQuantity:
title: Actualizar cantidad de los tickets title: Actualizar cantidad de los tickets
placeholder: Nueva cantidad placeholder: Nueva cantidad
split: split:
splitQuestion: ¿Estás seguro de separar los tickets seleccionados? title: ¿Seguro de separar los tickets seleccionados?
confirmSplitSelected: Confirmar separar tickets seleccionados subTitle: Confirma separar tickets seleccionados
handleSplited:
title: Gestionar tickets spliteados
subTitle: Confir fecha y agencia
split:
ticket: Ticket viejo
newTicket: Ticket nuevo
status: Estado
message: Mensaje