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) =>
|
||||
data.reduce((acc, cur) => acc + +String(cur[key]).replace(',', '.'), 0);
|
||||
const getTotal = (data, key) => data.reduce((acc, cur) => acc + cur[key], 0);
|
||||
</script>
|
||||
<template>
|
||||
<FetchData
|
||||
|
|
@ -111,7 +110,7 @@ const getTotal = (data, key) =>
|
|||
<template #body-cell="{ row, col }">
|
||||
<QTd>
|
||||
<QInput
|
||||
v-model="row[col.name]"
|
||||
v-model.number="row[col.name]"
|
||||
clearable
|
||||
clear-icon="close"
|
||||
/>
|
||||
|
|
@ -187,22 +186,7 @@ const getTotal = (data, key) =>
|
|||
</template>
|
||||
</VnSelect>
|
||||
</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>
|
||||
<VnSelect
|
||||
:label="t('country')"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { computed, onMounted, ref, toRefs } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
|
|
@ -20,9 +20,22 @@ const $props = defineProps({
|
|||
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(() => [
|
||||
{
|
||||
name: 'status',
|
||||
label: t('negative.split.status'),
|
||||
field: ({ status }) => status,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'ticket',
|
||||
label: t('negative.split.ticket'),
|
||||
|
|
@ -35,26 +48,40 @@ const columns = computed(() => [
|
|||
field: ({ newTicket }) => newTicket,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'status',
|
||||
label: t('negative.split.status'),
|
||||
field: ({ status }) => status,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'message',
|
||||
label: t('negative.split.message'),
|
||||
field: ({ message }) => message,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'actions',
|
||||
label: t('negative.split.actions'),
|
||||
style: 'padding-left: 100px',
|
||||
headerStyle: 'padding-left: 100px',
|
||||
},
|
||||
// {
|
||||
// name: 'actions',
|
||||
// align: 'center',
|
||||
// label: t('negative.split.actions'),
|
||||
// // 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([]);
|
||||
onMounted(() => {
|
||||
ticketsSelected.value = [...new Set($props.tickets.map(({ ticketFk }) => ticketFk))];
|
||||
|
|
@ -94,6 +121,12 @@ function getIcon(value) {
|
|||
};
|
||||
return icons[value];
|
||||
}
|
||||
|
||||
const updateNewTickets = async () => {
|
||||
tickets.value = $props.tickets.filter((ticket) => ticket.newTicket !== 1000005);
|
||||
console.log('updateNewTickets');
|
||||
rowsSelected.value = [];
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -108,17 +141,56 @@ function getIcon(value) {
|
|||
v-if="icon"
|
||||
/>
|
||||
<span class="text-h6 text-grey">{{
|
||||
t('negative.detail.modal.split.title')
|
||||
t('negative.detail.modal.handleSplited.title')
|
||||
}}</span>
|
||||
<QSpace />
|
||||
<QBtn icon="close" flat round dense v-close-popup />
|
||||
</QCardSection>
|
||||
<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">
|
||||
<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">
|
||||
<QTr :props="props">
|
||||
<QTh></QTh>
|
||||
<QTh
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
|
|
@ -130,11 +202,13 @@ function getIcon(value) {
|
|||
</template>
|
||||
<template #body="props">
|
||||
<QTr :props="props">
|
||||
<QTh
|
||||
<Qtd>
|
||||
<QCheckbox v-model="props.selected" />
|
||||
</Qtd>
|
||||
<QTd
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
:class="{ splitRow: props.row.status == 'split' }"
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
|
|
@ -150,54 +224,21 @@ function getIcon(value) {
|
|||
<span v-if="'status' === col.name">
|
||||
<QIcon
|
||||
:name="`${getIcon(col.value).name}`"
|
||||
size="md"
|
||||
size="xs"
|
||||
class="cursor-pointer"
|
||||
:color="getIcon(col.value).color"
|
||||
>
|
||||
</QIcon>
|
||||
</span>
|
||||
<span v-if="'message' === col.name">message</span>
|
||||
<div
|
||||
v-if="
|
||||
'actions' === col.name &&
|
||||
props.row.status == 'split'
|
||||
"
|
||||
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>
|
||||
</QTd></QTr
|
||||
></template
|
||||
>
|
||||
</QTable></template
|
||||
>
|
||||
</VnPaginate>
|
||||
</QCardSection>
|
||||
<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.confirm')"
|
||||
|
|
|
|||
|
|
@ -304,8 +304,8 @@ const split = async () => {
|
|||
// resultSplit.value = data;
|
||||
resultSplit.value = [
|
||||
{ ticket: 32, newTicket: 1000005, status: 'split' },
|
||||
{ ticket: 32, newTicket: 1000005, status: 'noSplit' },
|
||||
{ ticket: 32, newTicket: 1000005, status: 'error' },
|
||||
{ ticket: 32, newTicket: 1000006, status: 'noSplit' },
|
||||
{ ticket: 32, newTicket: 1000007, status: 'error' },
|
||||
];
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -55,9 +55,11 @@ negative:
|
|||
split:
|
||||
title: Are you sure you want to split selected tickets?
|
||||
subTitle: Confirm split action
|
||||
handleSplited:
|
||||
title: Handle splited tickets
|
||||
subTitle: Confirm date and agency
|
||||
split:
|
||||
ticket: Old ticket
|
||||
newTicket: New ticket
|
||||
status: Result
|
||||
message: Message
|
||||
actions: Actions
|
||||
|
|
|
|||
|
|
@ -27,6 +27,9 @@ negative:
|
|||
title: 'Actualizar negativos'
|
||||
question: 'Seleccione un estado para guardar'
|
||||
|
||||
modalSplit:
|
||||
title: Confirmar acción de split
|
||||
question: 'Select a state to update'
|
||||
detail:
|
||||
itemFk: 'Articulo'
|
||||
ticketFk: 'Id_Ticket'
|
||||
|
|
@ -51,6 +54,14 @@ negative:
|
|||
changeQuantity:
|
||||
title: Actualizar cantidad de los tickets
|
||||
placeholder: Nueva cantidad
|
||||
split:
|
||||
splitQuestion: ¿Estás seguro de separar los tickets seleccionados?
|
||||
confirmSplitSelected: Confirmar separar tickets seleccionados
|
||||
split:
|
||||
title: ¿Seguro de separar los 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