forked from verdnatura/salix-front
feat: #6321 Update handleSplitted form
This commit is contained in:
parent
5b1819f7da
commit
fd4ff94f4c
|
@ -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')"
|
||||||
|
|
|
@ -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')"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue