forked from verdnatura/salix-front
refs #6321 feat: updates dialog
This commit is contained in:
parent
3a7e092efe
commit
59e260d448
|
|
@ -1,150 +1,361 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { toDate, toPercentage } from 'filters/index';
|
||||
|
||||
import CrudModel from 'src/components/CrudModel.vue';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { QBtn, QCheckbox, QSelect } from 'quasar';
|
||||
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import FetchedTags from 'components/ui/FetchedTags.vue';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
||||
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { toCurrency } from 'src/filters';
|
||||
import axios from 'axios';
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
const { t } = useI18n();
|
||||
const URL_KEY = 'Tickets/ItemLack';
|
||||
const editableStates = ref([]);
|
||||
|
||||
const rowsSelected = ref([]);
|
||||
const entryBuysPaginateRef = ref(null);
|
||||
const packagingsOptions = ref(null);
|
||||
const originalRowDataCopy = ref(null);
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const copyOriginalRowsData = (rows) => {
|
||||
// el objetivo de esto es guardar los valores iniciales de todas las rows para evitar guardar cambios si la data no cambió al disparar los eventos
|
||||
originalRowDataCopy.value = JSON.parse(JSON.stringify(rows));
|
||||
};
|
||||
|
||||
const getInputEvents = (colField, props) => ({
|
||||
'update:modelValue': () => saveChange(colField, props),
|
||||
'keyup.enter': () => saveChange(colField, props),
|
||||
blur: () => saveChange(colField, props),
|
||||
});
|
||||
const saveChange = async (field, { rowIndex, row }) => {
|
||||
try {
|
||||
switch (field) {
|
||||
case 'split':
|
||||
// Dim vSaleCount As Long
|
||||
// Dim stateCode As String
|
||||
|
||||
// vSaleCount = db.getValueV("select count(s.id) from vn.ticket t LEFT JOIN vn.sale s ON s.ticketFk = t.id WHERE t.id= #", Me.Id_Ticket)
|
||||
|
||||
// If vSaleCount = 1 Then
|
||||
// MsgBox ("El siguiente ticket no se ha hecho split, porque tienen solo una linea")
|
||||
// Exit Sub
|
||||
// End If
|
||||
|
||||
// db.execV "CALL vn.ticket_clone(#, @vNewTicket)", Me.Id_Ticket
|
||||
|
||||
// Dim vNewTicketFk As Long
|
||||
// vNewTicketFk = db.getValue("SELECT @vNewTicket")
|
||||
|
||||
// If vNewTicketFk = 0 Then Exit Sub
|
||||
|
||||
// db.execV "UPDATE vn.sale SET isPicked = (id = #) WHERE ticketFk = #", Me.Id_Movimiento, Me.Id_Ticket
|
||||
|
||||
// Call tour(Me.Id_Ticket, vNewTicketFk)
|
||||
|
||||
// Call ticketChangeState(vNewTicketFk, , , "FIXING")
|
||||
|
||||
// Buscador_Ticket (vNewTicketFk)
|
||||
// Call Form_Requery
|
||||
break;
|
||||
case 'stateId':
|
||||
// Call ticketChangeState(ticketFk, stateFk)
|
||||
break;
|
||||
|
||||
case 'quantity':
|
||||
// Private Function updateQuantity(newQuantity As Integer, saleFk As Long)
|
||||
// Dim vSalesPerson As Long
|
||||
// Dim vOldQuantity As Integer
|
||||
// Dim vTicketFk As Long
|
||||
// Dim vItemId As Long
|
||||
|
||||
// vItemId = DFirst("id_Article", "tblRadar_Negativos_Detalle", "id_Movimiento = " & Me.Id_Movimiento)
|
||||
|
||||
// vOldQuantity = db.getValueV("SELECT quantity FROM vn.sale WHERE id = #", saleFk)
|
||||
// vTicketFk = db.getValueV("SELECT ticketFk FROM vn.sale WHERE id = #", saleFk)
|
||||
// vSalesPerson = Nz(db.getValueV("SELECT vn.client_getSalesPersonByTicket(#)", vTicketFk), 0)
|
||||
|
||||
// db.execV "UPDATE vn.sale SET quantity = #, originalQuantity = # WHERE id = #", newQuantity, newQuantity, saleFk
|
||||
|
||||
// app.sendChatCheckingPresence vSalesPerson, "He modificado de " & vOldQuantity & " a " & newQuantity & " " & articod(vItemId) & " del ticket [#" & vTicketFk & "](" & salix.uri & "/#!/ticket/" & vTicketFk & "/sale)"
|
||||
|
||||
// End Function
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error(field, { rowIndex, row });
|
||||
break;
|
||||
}
|
||||
// if (originalRowDataCopy.value[rowIndex][field] == row[field]) return;
|
||||
// await axios.patch(`Buys/${row.id}`, row);
|
||||
// originalRowDataCopy.value[rowIndex][field] = row[field];
|
||||
} catch (err) {
|
||||
console.error('Error saving changes', err);
|
||||
}
|
||||
};
|
||||
const entityId = computed(() => $props.id);
|
||||
function isComponentVn(col) {
|
||||
// return (
|
||||
// !tableColumnComponents?.value[col.name]?.component?.__name?.startsWith('Vn') ??
|
||||
// true
|
||||
// );
|
||||
return tableColumnComponents?.value[col.name]?.component === 'span' ?? false;
|
||||
}
|
||||
const tableColumnComponents = computed(() => ({
|
||||
itemFk: {
|
||||
component: QBtn,
|
||||
props: { color: 'blue', flat: true },
|
||||
event: () => ({}),
|
||||
},
|
||||
ticketFk: {
|
||||
component: QBtn,
|
||||
props: { color: 'blue', flat: true },
|
||||
event: () => ({}),
|
||||
},
|
||||
code: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
},
|
||||
nickname: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
},
|
||||
name: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
},
|
||||
quantity: {
|
||||
component: VnInput,
|
||||
props: {
|
||||
type: 'number',
|
||||
min: 0,
|
||||
class: 'input-number',
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
alertLevel: {
|
||||
component: VnInput,
|
||||
props: {
|
||||
type: 'number',
|
||||
min: 0,
|
||||
class: 'input-number',
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
state: {
|
||||
component: VnSelectFilter,
|
||||
props: {
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
'emit-value': false,
|
||||
'map-options': false,
|
||||
'use-input': false,
|
||||
'hide-selected': false,
|
||||
options: editableStates.value,
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
|
||||
alertLevelCode: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
},
|
||||
|
||||
peticionCompra: {
|
||||
component: QCheckbox,
|
||||
props: {},
|
||||
event: getInputEvents,
|
||||
},
|
||||
isRookie: {
|
||||
component: QCheckbox,
|
||||
props: {},
|
||||
event: getInputEvents,
|
||||
},
|
||||
actions: {
|
||||
component: QBtn,
|
||||
props: {},
|
||||
event: getInputEvents,
|
||||
},
|
||||
}));
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
name: 'Id',
|
||||
label: t('Id item'),
|
||||
field: (row) => row.itemFk,
|
||||
},
|
||||
{
|
||||
name: 'ticket',
|
||||
label: t('Ticket'),
|
||||
field: (row) => row.ticketFk,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
name: 'destination',
|
||||
label: t('Destination'),
|
||||
field: (row) => row.claimDestinationFk,
|
||||
name: 'ticketFk',
|
||||
label: t('ticket.negative.detail.ticketFk'),
|
||||
field: 'ticketFk',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'Landed',
|
||||
label: t('Landed'),
|
||||
field: (row) => toDate(row.landed),
|
||||
name: 'itemFk',
|
||||
label: t('ticket.negative.detail.itemFk'),
|
||||
field: 'itemFk',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'code',
|
||||
label: t('ticket.negative.detail.Code'),
|
||||
field: 'code',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'nickname',
|
||||
label: t('ticket.negative.detail.Nickname'),
|
||||
field: 'nickname',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
label: t('ticket.negative.detail.name'),
|
||||
field: 'name',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'state',
|
||||
label: t('ticket.negative.detail.state'),
|
||||
field: 'stateId',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'quantity',
|
||||
label: t('Quantity'),
|
||||
field: (row) => row.quantity,
|
||||
},
|
||||
{
|
||||
name: 'concept',
|
||||
label: t('Description'),
|
||||
field: (row) => row.concept,
|
||||
label: t('ticket.negative.detail.quantity'),
|
||||
field: 'quantity',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'price',
|
||||
label: t('Price'),
|
||||
field: (row) => row.price,
|
||||
format: (value) => value,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
name: 'discount',
|
||||
label: t('Discount'),
|
||||
field: (row) => row.discount,
|
||||
format: (value) => toPercentage(value / 100),
|
||||
name: 'alertLevelCode',
|
||||
label: t('ticket.negative.detail.alertLevelCode'),
|
||||
field: 'alertLevelCode',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'total',
|
||||
label: t('Total'),
|
||||
field: (row) => row.total,
|
||||
format: (value) => value,
|
||||
name: 'isRookie',
|
||||
label: t('ticket.negative.detail.isRookie'),
|
||||
field: 'isRookie',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
name: 'delete',
|
||||
name: 'turno',
|
||||
label: t('ticket.negative.detail.turno'),
|
||||
field: 'turno',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
name: 'peticionCompra',
|
||||
label: t('ticket.negative.detail.peticionCompra'),
|
||||
field: 'peticionCompra',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
name: 'actions',
|
||||
label: t('claim.summary.actions'),
|
||||
align: 'center',
|
||||
},
|
||||
]);
|
||||
|
||||
defineEmits([...useDialogPluginComponent.emits]);
|
||||
|
||||
const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
||||
|
||||
async function changeState(value) {
|
||||
/* if (!ticket.value.id) return;
|
||||
|
||||
const formData = {
|
||||
ticketFk: ticket.value.id,
|
||||
code: value,
|
||||
};
|
||||
|
||||
await axios.post(`TicketTrackings/changeState`, formData);*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CrudModel
|
||||
v-if="$props.id"
|
||||
<FetchData
|
||||
url="States/editableStates"
|
||||
@on-fetch="(data) => (editableStates = data)"
|
||||
auto-load
|
||||
/>
|
||||
<VnPaginate
|
||||
:data-key="URL_KEY"
|
||||
:url="`${URL_KEY}/${entityId}/detail`"
|
||||
ref="itemLackForm"
|
||||
v-model:selected="selectedRows"
|
||||
:default-remove="true"
|
||||
:default-save="false"
|
||||
:default-reset="false"
|
||||
@on-fetch="setData"
|
||||
@on-fetch="copyOriginalRowsData($event)"
|
||||
auto-load
|
||||
>
|
||||
<template #body>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:dense="$q.screen.lt.md"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
v-model:selected="selectedRows"
|
||||
v-model:selected="rowsSelected"
|
||||
:grid="$q.screen.lt.md"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:hide-bottom="true"
|
||||
hide-bottom
|
||||
>
|
||||
<template #body-cell-ticket="{ value }">
|
||||
<QTd align="center">
|
||||
<span class="link">
|
||||
{{ value }}
|
||||
<TicketDescriptorProxy :id="value" />
|
||||
</span>
|
||||
</QTd>
|
||||
<template #body="props">
|
||||
<QTr>
|
||||
<QTd>
|
||||
<QCheckbox v-model="props.selected" />
|
||||
</QTd>
|
||||
<QTd v-for="col in props.cols" :key="col.name">
|
||||
<template v-if="col.name == 'actions'">
|
||||
<QBtn icon="close" flat round dense v-close-popup />
|
||||
</template>
|
||||
<template
|
||||
v-if="
|
||||
col.name !== 'actions' &&
|
||||
tableColumnComponents[col.name]?.component
|
||||
"
|
||||
>
|
||||
<component
|
||||
:is="tableColumnComponents[col.name].component"
|
||||
v-bind="tableColumnComponents[col.name].props"
|
||||
v-model="props.row[col.field]"
|
||||
v-on="
|
||||
tableColumnComponents[col.name].event(
|
||||
col.field,
|
||||
props
|
||||
)
|
||||
"
|
||||
>
|
||||
<template v-if="isComponentVn(col)">{{
|
||||
col.value
|
||||
}}</template>
|
||||
<template v-if="col.name === 'ticketFk'"
|
||||
>{{ col.value }}
|
||||
<ItemDescriptorProxy :id="props.row.id"
|
||||
/></template>
|
||||
<template v-if="col.name === 'itemFk'"
|
||||
>{{ col.value }}
|
||||
<ItemDescriptorProxy :id="props.row.id"
|
||||
/></template>
|
||||
</component>
|
||||
</template>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #body-cell-destination="{ row }">
|
||||
<QTd>
|
||||
<VnSelectFilter
|
||||
v-model="row.claimDestinationFk"
|
||||
:options="destinationTypes"
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
:autofocus="true"
|
||||
dense
|
||||
input-debounce="0"
|
||||
hide-selected
|
||||
@update:model-value="(value) => updateDestination(value, row)"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-price="{ value }">
|
||||
<QTd align="center">
|
||||
{{ toCurrency(value) }}
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-total="{ value }">
|
||||
<QTd align="center">
|
||||
{{ toCurrency(value) }}
|
||||
</QTd>
|
||||
</template>
|
||||
<!-- View for grid mode -->
|
||||
</QTable>
|
||||
</template>
|
||||
</CrudModel>
|
||||
</VnPaginate>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
Loading…
Reference in New Issue