refs #6321 feat dialog approach
This commit is contained in:
parent
c95b738e0c
commit
f6f84e191b
|
|
@ -0,0 +1,273 @@
|
|||
<script setup>
|
||||
import { computed, } from 'vue';
|
||||
import { toDate, toPercentage, } from 'filters/index';
|
||||
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
const { t } = useI18n();
|
||||
// const quasar = useQuasar();
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
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,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'Landed',
|
||||
label: t('Landed'),
|
||||
field: (row) => toDate(row.landed),
|
||||
},
|
||||
{
|
||||
name: 'quantity',
|
||||
label: t('Quantity'),
|
||||
field: (row) => row.quantity,
|
||||
},
|
||||
{
|
||||
name: 'concept',
|
||||
label: t('Description'),
|
||||
field: (row) => row.concept,
|
||||
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),
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'total',
|
||||
label: t('Total'),
|
||||
field: (row) => row.total,
|
||||
format: (value) => value,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
name: 'delete',
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
|
||||
defineEmits([...useDialogPluginComponent.emits]);
|
||||
|
||||
const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QDialog ref="dialogRef" @hide="onDialogHide">
|
||||
<CrudModel
|
||||
v-if="claim"
|
||||
data-key="ClaimEnds"
|
||||
url="ClaimEnds/filter"
|
||||
save-url="ClaimEnds/crud"
|
||||
ref="claimActionsForm"
|
||||
v-model:selected="selectedRows"
|
||||
:filter="{ where: { claimFk: claimId } }"
|
||||
:default-remove="true"
|
||||
:default-save="false"
|
||||
:default-reset="false"
|
||||
@on-fetch="setData"
|
||||
auto-load
|
||||
>
|
||||
<template #body>
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:dense="$q.screen.lt.md"
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
v-model:selected="selectedRows"
|
||||
:grid="$q.screen.lt.md"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:hide-bottom="true"
|
||||
>
|
||||
<template #body-cell-ticket="{ value }">
|
||||
<QTd align="center">
|
||||
<span class="link">
|
||||
{{ value }}
|
||||
<TicketDescriptorProxy :id="value" />
|
||||
</span>
|
||||
</QTd>
|
||||
</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 -->
|
||||
<template #item="props">
|
||||
<div class="q-mb-md col-12 grid-style-transition">
|
||||
<QCard>
|
||||
<QCardSection class="row justify-between">
|
||||
<QCheckbox v-model="props.selected" />
|
||||
<QBtn color="primary" icon="delete" flat round />
|
||||
</QCardSection>
|
||||
|
||||
<QSeparator inset />
|
||||
<QList dense>
|
||||
<QItem v-for="column of props.cols" :key="column.name">
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
{{ column.label }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
<QItemSection side>
|
||||
<QItemLabel v-if="column.name === 'destination'">
|
||||
<VnSelectFilter
|
||||
v-model="props.row.claimDestinationFk"
|
||||
:options="destinationTypes"
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
:autofocus="true"
|
||||
dense
|
||||
input-debounce="0"
|
||||
hide-selected
|
||||
@update:model-value="
|
||||
(value) =>
|
||||
updateDestination(
|
||||
value,
|
||||
props.row
|
||||
)
|
||||
"
|
||||
/>
|
||||
</QItemLabel>
|
||||
<QItemLabel v-else>
|
||||
{{ column.value }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
</QCard>
|
||||
</div>
|
||||
</template>
|
||||
</QTable>
|
||||
</template>
|
||||
<template #moreBeforeActions>
|
||||
<QBtn
|
||||
color="primary"
|
||||
text-color="white"
|
||||
:unelevated="true"
|
||||
:label="tMobile('Regularize')"
|
||||
:title="t('Regularize')"
|
||||
icon="check"
|
||||
@click="regularizeClaim"
|
||||
:disable="claim.claimStateFk == resolvedStateId"
|
||||
/>
|
||||
|
||||
<QBtn
|
||||
color="primary"
|
||||
text-color="white"
|
||||
:unelevated="true"
|
||||
:disable="!selectedRows.length"
|
||||
:label="tMobile('Change destination')"
|
||||
:title="t('Change destination')"
|
||||
icon="swap_horiz"
|
||||
@click="dialogDestination = !dialogDestination"
|
||||
/>
|
||||
<QBtn
|
||||
color="primary"
|
||||
text-color="white"
|
||||
:unelevated="true"
|
||||
:label="tMobile('Import claim')"
|
||||
:title="t('Import claim')"
|
||||
icon="Upload"
|
||||
@click="importToNewRefundTicket"
|
||||
:disable="claim.claimStateFk == resolvedStateId"
|
||||
/>
|
||||
</template>
|
||||
</CrudModel>
|
||||
<QDialog v-model="dialogDestination">
|
||||
<QCard>
|
||||
<QCardSection>
|
||||
<QItem class="q-pa-sm">
|
||||
<span class="q-dialog__title text-white">
|
||||
{{ t('dialog title') }}
|
||||
</span>
|
||||
<QBtn icon="close" flat round dense v-close-popup />
|
||||
</QItem>
|
||||
</QCardSection>
|
||||
<QItemSection>
|
||||
<VnSelectFilter
|
||||
class="q-pa-sm"
|
||||
v-model="claimDestinationFk"
|
||||
:options="destinationTypes"
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
:autofocus="true"
|
||||
dense
|
||||
input-debounce="0"
|
||||
hide-selected
|
||||
/>
|
||||
</QItemSection>
|
||||
<QCardActions class="justify-end q-mr-sm">
|
||||
<QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
|
||||
<QBtn
|
||||
:disable="!claimDestinationFk"
|
||||
:label="t('globals.save')"
|
||||
color="primary"
|
||||
v-close-popup
|
||||
@click="updateDestinations(claimDestinationFk)"
|
||||
/>
|
||||
</QCardActions>
|
||||
</QCard>
|
||||
</QDialog>
|
||||
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.q-dialog .summary .header {
|
||||
position: sticky;
|
||||
z-index: $z-max;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<script setup>
|
||||
import TicketDescriptor from './TicketDescriptor.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<QDialog ref="dialogRef" @hide="onDialogHide">
|
||||
<TicketDescriptor v-if="$props.id" :id="$props.id" />
|
||||
</QDialog>
|
||||
</template>
|
||||
|
|
@ -5,25 +5,34 @@ import { useStateStore } from 'stores/useStateStore';
|
|||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import TicketFilter from 'pages/Ticket/Negative/TicketFilter.vue';
|
||||
// import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
|
||||
// import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import TicketDescriptorDialog from 'pages/Ticket/Negative/TicketDescriptorDialog.vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const selected = ref([]);
|
||||
const quasar = useQuasar();
|
||||
|
||||
const viewSummary = (value) => {
|
||||
quasar.dialog({
|
||||
component: TicketDescriptorDialog,
|
||||
componentProps: {
|
||||
id: value,
|
||||
},
|
||||
});
|
||||
};
|
||||
const columns = computed(() => [
|
||||
{
|
||||
name: 'itemFk',
|
||||
label: t('ticket.negative.id'),
|
||||
field: ({itemFk}) => itemFk,
|
||||
field: ({ itemFk }) => itemFk,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'longName',
|
||||
label: t('ticket.negative.longName'),
|
||||
field: ({longName}) => longName,
|
||||
field: ({ longName }) => longName,
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
headerStyle: 'padding-left: 35px',
|
||||
|
|
@ -31,32 +40,32 @@ const columns = computed(() => [
|
|||
{
|
||||
name: 'producer',
|
||||
label: t('ticket.negative.supplier'),
|
||||
field: ({producer}) => producer,
|
||||
field: ({ producer }) => producer,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'inkFk',
|
||||
label: t('ticket.negative.colour'),
|
||||
field: ({inkFk}) => inkFk,
|
||||
field: ({ inkFk }) => inkFk,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
label: t('ticket.negative.size'),
|
||||
field: ({size}) => size,
|
||||
field: ({ size }) => size,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'category',
|
||||
label: t('ticket.negative.origen'),
|
||||
field: ({category}) => category,
|
||||
field: ({ category }) => category,
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'lack',
|
||||
label: t('ticket.negative.lack'),
|
||||
field: ({lack}) => lack,
|
||||
field: ({ lack }) => lack,
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
headerStyle: 'padding-left: 33px',
|
||||
|
|
@ -86,21 +95,16 @@ const columns = computed(() => [
|
|||
headerStyle: 'padding-left: 33px',
|
||||
},*/
|
||||
{
|
||||
align: 'right',
|
||||
field: 'actions',
|
||||
label: '',
|
||||
name: 'actions',
|
||||
}
|
||||
name: 'icons',
|
||||
align: 'center',
|
||||
field: (row) => row,
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
<template>
|
||||
<div class="column items-center">
|
||||
<div class="list">
|
||||
<VnPaginate
|
||||
data-key="NegativeList"
|
||||
:url="`Tickets/itemLack`"
|
||||
auto-load
|
||||
>
|
||||
<VnPaginate data-key="NegativeList" :url="`Tickets/itemLack`" auto-load>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
|
|
@ -136,7 +140,6 @@ const columns = computed(() => [
|
|||
<template #body-cell-ticketFk="{ value }">
|
||||
<QTd align="right" class="text-primary">
|
||||
<span class="text-primary link">{{ value }}</span>
|
||||
<TicketDescriptorProxy :id="value" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-clientFk="{ value }">
|
||||
|
|
@ -147,17 +150,20 @@ const columns = computed(() => [
|
|||
</template>
|
||||
<template #body-cell-icons="{ value }">
|
||||
<QTd align="center">
|
||||
<a :href="getCmrUrl(value)" target="_blank">
|
||||
<QIcon
|
||||
name="visibility"
|
||||
color="primary"
|
||||
size="md"
|
||||
class="q-mr-sm q-ml-sm"
|
||||
/>
|
||||
|
||||
<QIcon
|
||||
@click.stop="viewSummary(value)"
|
||||
class="q-ml-md"
|
||||
color="primary"
|
||||
name="preview"
|
||||
size="sm"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('ticket.negative.viewCmr') }}
|
||||
{{ t('Preview') }}
|
||||
</QTooltip>
|
||||
</a>
|
||||
|
||||
<!-- <TicketDescriptorProxy :id="value" /> -->
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
|
|
@ -167,7 +173,6 @@ const columns = computed(() => [
|
|||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<TicketFilter data-key="NegativeList" />
|
||||
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
</div>
|
||||
|
|
@ -176,7 +181,7 @@ const columns = computed(() => [
|
|||
<style lang="scss" scoped>
|
||||
.list {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.grid-style-transition {
|
||||
transition: transform 0.28s, background-color 0.28s;
|
||||
|
|
|
|||
Loading…
Reference in New Issue