wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

feat: refs #7553 ticket component to vntable and fixed minor errors

This commit is contained in:
Jon Elias 2024-09-06 13:59:50 +02:00
parent e962063753
commit 0e5607d685
5 changed files with 338 additions and 366 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
src/pages/Ticket/Card/BasicData/TicketBasicData.vue
View File

@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import FetchData from 'components/FetchData.vue';
import { useStateStore } from 'stores/useStateStore';
@ -145,83 +144,81 @@ onUnmounted(() => (stateStore.rightDrawer = false));
@on-fetch="(data) => (ticketUpdateActions = data)"
auto-load
/>
<RightMenu>
<template #right-panel>
<QCard
class="q-pa-md q-mb-md q-ma-md color-vn-text"
bordered
flat
style="border-color: black"
<QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
<QCard
class="q-pa-md q-mb-md q-ma-md color-vn-text"
bordered
flat
style="border-color: black"
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('basicData.total') }}
</span>
</QCardSection>
<QCardSection class="column items-center" horizontal>
<span>
{{ t('basicData.price') }}:
{{ toCurrency(totalPrice) }}
</span>
</QCardSection>
<QCardSection class="column items-center" horizontal>
<span>
{{ t('basicData.newPrice') }}: {{ toCurrency(totalNewPrice) }}
</span>
</QCardSection>
<QCardSection class="column items-center" horizontal>
<span>
{{ t('basicData.difference') }}: {{ toCurrency(totalDifference) }}
</span>
</QCardSection>
</QCard>
<QCard
v-if="totalDifference"
class="q-pa-md q-mb-md q-ma-md color-vn-text"
bordered
flat
style="border-color: black"
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('basicData.chargeDifference') }}
</span>
</QCardSection>
<QCardSection
v-for="(action, index) in ticketUpdateActions"
:key="index"
horizontal
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('basicData.total') }}
</span>
</QCardSection>
<QCardSection class="column items-center" horizontal>
<span>
{{ t('basicData.price') }}:
{{ toCurrency(totalPrice) }}
</span>
</QCardSection>
<QCardSection class="column items-center" horizontal>
<span>
{{ t('basicData.newPrice') }}: {{ toCurrency(totalNewPrice) }}
</span>
</QCardSection>
<QCardSection class="column items-center" horizontal>
<span>
{{ t('basicData.difference') }}: {{ toCurrency(totalDifference) }}
</span>
</QCardSection>
</QCard>
<QCard
v-if="totalDifference"
class="q-pa-md q-mb-md q-ma-md color-vn-text"
bordered
flat
style="border-color: black"
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('basicData.chargeDifference') }}
</span>
</QCardSection>
<QCardSection
v-for="(action, index) in ticketUpdateActions"
:key="index"
horizontal
>
<QRadio
v-model="_ticketData.option"
:val="action.code"
:label="action.description"
dense
/>
</QCardSection>
</QCard>
<QCard
v-if="haveNegatives"
class="q-pa-md q-mb-md q-ma-md color-vn-text"
bordered
flat
style="border-color: black"
>
<QCardSection horizontal class="flex row items-center">
<QCheckbox
:label="t('basicData.withoutNegatives')"
v-model="_ticketData.withoutNegatives"
:toggle-indeterminate="false"
/>
<QIcon name="info" size="xs" class="q-ml-sm">
<QTooltip max-width="350px">
{{ t('basicData.withoutNegativesInfo') }}
</QTooltip>
</QIcon>
</QCardSection>
</QCard>
</template>
</RightMenu>
<QRadio
v-model="_ticketData.option"
:val="action.code"
:label="action.description"
dense
/>
</QCardSection>
</QCard>
<QCard
v-if="haveNegatives"
class="q-pa-md q-mb-md q-ma-md color-vn-text"
bordered
flat
style="border-color: black"
>
<QCardSection horizontal class="flex row items-center">
<QCheckbox
:label="t('basicData.withoutNegatives')"
v-model="_ticketData.withoutNegatives"
:toggle-indeterminate="false"
/>
<QIcon name="info" size="xs" class="q-ml-sm">
<QTooltip max-width="350px">
{{ t('basicData.withoutNegativesInfo') }}
</QTooltip>
</QIcon>
</QCardSection>
</QCard>
</QDrawer>
<QTable
:visible-columns="showMovablecolumn"
:rows="rows"

353
src/pages/Ticket/Card/TicketComponents.vue
View File

@ -5,15 +5,16 @@ import { useRoute } from 'vue-router';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import FetchData from 'components/FetchData.vue';
import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import { useStateStore } from 'stores/useStateStore';
import { dashIfEmpty } from 'src/filters';
import { useArrayData } from 'composables/useArrayData';
import { toCurrency } from 'filters/index';
import axios from 'axios';
import VnTable from 'src/components/VnTable/VnTable.vue';
const route = useRoute();
const stateStore = useStateStore();
@ -75,32 +76,39 @@ const columns = computed(() => [
name: 'item',
align: 'left',
},
{
align: 'left',
label: t('lines.image'),
name: 'image',
columnField: {
component: VnImg,
attrs: (id) => {
return {
id,
width: '50px',
};
},
},
columnFilter: false,
},
{
label: t('ticketComponents.description'),
name: 'description',
align: 'left',
columnClass: 'expand',
},
{
label: t('ticketComponents.quantity'),
name: 'quantity',
field: 'quantity',
align: 'left',
format: (val) => dashIfEmpty(val),
format: (row) => dashIfEmpty(row.quantity),
},
{
label: t('ticketComponents.serie'),
name: 'serie',
align: 'left',
},
{
label: t('ticketComponents.components'),
name: 'components',
align: 'left',
},
{
label: t('ticketComponents.import'),
name: 'import',
align: 'left',
format: (row) => dashIfEmpty(row.serie),
},
{
label: t('ticketComponents.total'),
@ -174,181 +182,166 @@ onUnmounted(() => (stateStore.rightDrawer = false));
@on-fetch="(data) => (components = data)"
auto-load
/>
<RightMenu>
<template #right-panel>
<QCard
class="q-pa-sm color-vn-text"
bordered
flat
style="border-color: black"
<QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
<QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('ticketComponents.total') }}
</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label"
>{{ t('ticketComponents.baseToCommission') }}:
</span>
<span>{{ toCurrency(getBase) }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label"
>{{ t('ticketComponents.totalWithoutVat') }}:
</span>
<span>{{ toCurrency(getTotal) }}</span>
</QCardSection>
</QCard>
<QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('ticketComponents.components') }}
</span>
</QCardSection>
<QCardSection
v-for="(component, index) in componentsList"
:key="index"
horizontal
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('ticketComponents.total') }}
</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label"
>{{ t('ticketComponents.baseToCommission') }}:
</span>
<span>{{ toCurrency(getBase) }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label"
>{{ t('ticketComponents.totalWithoutVat') }}:
</span>
<span>{{ toCurrency(getTotal) }}</span>
</QCardSection>
</QCard>
<QCard
class="q-pa-sm color-vn-text"
bordered
flat
style="border-color: black"
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('ticketComponents.components') }}
</span>
</QCardSection>
<QCardSection
v-for="(component, index) in componentsList"
:key="index"
horizontal
>
<span v-if="component.name" class="q-mr-xs color-vn-label">
{{ component.name }}:
</span>
<span v-if="component.value">{{
toCurrency(component.value, 'EUR', 3)
}}</span>
</QCardSection>
</QCard>
<QCard
class="q-pa-sm color-vn-text"
bordered
flat
style="border-color: black"
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('ticketComponents.zoneBreakdown') }}
</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('ticketComponents.price') }}:
</span>
<span>{{ toCurrency(ticketData?.zonePrice, 'EUR', 2) }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('ticketComponents.bonus') }}:
</span>
<span>{{ toCurrency(ticketData?.zoneBonus, 'EUR', 2) }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('ticketComponents.zone') }}:
</span>
<span class="link">
{{ dashIfEmpty(ticketData?.zone?.name) }}
<ZoneDescriptorProxy :id="ticketData?.zone?.id" />
</span>
</QCardSection>
<QCardSection v-if="ticketData?.zone?.isVolumetric" horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('ticketComponents.volume') }}:
</span>
<span>{{ ticketVolume }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('ticketComponents.packages') }}:
</span>
<span>{{ dashIfEmpty(ticketData?.packages) }}</span>
</QCardSection>
</QCard>
<QCard
class="q-pa-sm color-vn-text"
bordered
flat
style="border-color: black"
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('ticketComponents.theoricalCost') }}
</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('ticketComponents.totalPrice') }}:
</span>
<span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
</QCardSection>
</QCard>
</template>
</RightMenu>
<QTable
:rows="components"
<span v-if="component.name" class="q-mr-xs color-vn-label">
{{ component.name }}:
</span>
<span v-if="component.value">{{
toCurrency(component.value, 'EUR', 3)
}}</span>
</QCardSection>
</QCard>
<QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('ticketComponents.zoneBreakdown') }}
</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('ticketComponents.price') }}:
</span>
<span>{{ toCurrency(ticketData?.zonePrice, 'EUR', 2) }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('ticketComponents.bonus') }}:
</span>
<span>{{ toCurrency(ticketData?.zoneBonus, 'EUR', 2) }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('ticketComponents.zone') }}:
</span>
<span class="link">
{{ dashIfEmpty(ticketData?.zone?.name) }}
<ZoneDescriptorProxy :id="ticketData?.zone?.id" />
</span>
</QCardSection>
<QCardSection v-if="ticketData?.zone?.isVolumetric" horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('ticketComponents.volume') }}:
</span>
<span>{{ ticketVolume }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('ticketComponents.packages') }}:
</span>
<span>{{ dashIfEmpty(ticketData?.packages) }}</span>
</QCardSection>
</QCard>
<QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('ticketComponents.theoricalCost') }}
</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('ticketComponents.totalPrice') }}:
</span>
<span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
</QCardSection>
</QCard>
</QDrawer>
<VnTable
ref="tableRef"
data-key="TicketComponents"
url="Sales"
:user-filter="salesFilter"
:columns="columns"
row-key="id"
:pagination="{ rowsPerPage: 0 }"
class="full-width q-mt-md"
:no-data-label="t('globals.noResults')"
:right-search="false"
auto-load
:disable-option="{ card: true }"
:column-search="false"
>
<template #body-cell-item="{ row }">
<QTd @click.stop class="link">
<QBtn flat>
<span>{{ row.itemFk }}</span>
<ItemDescriptorProxy :id="row.itemFk" />
</QBtn>
</QTd>
<template #column-item="{ row }">
<span @click.stop flat class="link">
{{ row.itemFk }}
<ItemDescriptorProxy :id="row.itemFk" />
</span>
</template>
<template #body-cell-description="{ row }">
<QTd>
<div class="column">
<span>{{ row.item.name }}</span>
<span class="color-vn-label">{{ row.item.subName }}</span>
<FetchedTags :item="row.item" />
</div>
</QTd>
<template #column-image="{ row }">
<div class="image-wrapper">
<VnImg :id="parseInt(row?.item?.id)" class="rounded" />
</div>
</template>
<template #body-cell-serie="{ row }">
<QTd>
<div class="column">
<span v-for="(saleComponent, index) in row.components" :key="index">
{{ saleComponent.component?.componentType?.name }}
</span>
</div>
</QTd>
<template #column-description="{ row }">
<div class="column">
<span>{{ row.item.name }}</span>
<span class="color-vn-label">{{ row.item.subName }}</span>
<FetchedTags :item="row.item" />
</div>
</template>
<template #body-cell-components="{ row }">
<QTd>
<div class="column">
<span v-for="(saleComponent, index) in row.components" :key="index">
{{ saleComponent.component?.name }}
</span>
</div>
</QTd>
<template #column-serie="{ row }">
<div class="column">
<span v-for="(saleComponent, index) in row.components" :key="index">
{{ saleComponent.component?.componentType?.name }}
</span>
</div>
</template>
<template #body-cell-import="{ row }">
<QTd>
<div class="column text-right">
<span v-for="(saleComponent, index) in row.components" :key="index">
<!-- <template #column-components="{ row }">
<div class="column">
<span v-for="(saleComponent, index) in row.components" :key="index">
{{ saleComponent.component?.name }}
</span>
</div>
</template> -->
<!-- <template #column-import="{ row }">
<div class="column text-left">
<span v-for="(saleComponent, index) in row.components" :key="index">
{{ toCurrency(saleComponent.value, 'EUR', 3) }}
</span>
</div>
</template> -->
<template #column-total="{ row }">
<div class="column">
<span v-for="(saleComponent, index) in row.components" :key="index">
{{ toCurrency(saleComponent.value * row.quantity, 'EUR', 3) }}
<QTooltip>
{{ saleComponent.component?.name }}:
{{ toCurrency(saleComponent.value, 'EUR', 3) }}
</span>
</div>
</QTd>
</QTooltip>
</span>
</div>
</template>
<template #body-cell-total="{ row }">
<QTd>
<div class="column text-right">
<span v-for="(saleComponent, index) in row.components" :key="index">
{{ toCurrency(saleComponent.value * row.quantity, 'EUR', 3) }}
</span>
</div>
</QTd>
</template>
</QTable>
</VnTable>
</template>
<style lang="scss" scoped>
.image-wrapper {
width: 40px;
height: 40px;
}
</style>

15
src/pages/Ticket/Card/TicketPurchaseRequest.vue
View File

@ -14,8 +14,11 @@ import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'src/components/FetchData.vue';
import { useVnConfirm } from 'composables/useVnConfirm';
import useNotify from 'src/composables/useNotify.js';
import { onMounted } from 'vue';
import { useStateStore } from 'src/stores/useStateStore';
const route = useRoute();
const stateStore = useStateStore();
const { t } = useI18n();
const tableRef = ref();
const attendersOptions = ref([]);
@ -84,14 +87,12 @@ const columns = computed(() => [
condition: () => true,
},
isId: true,
hidden: true,
},
{
align: 'left',
label: t('purchaseRequest.description'),
name: 'description',
columnClass: 'expand',
hidden: true,
},
{
align: 'left',
@ -99,7 +100,6 @@ const columns = computed(() => [
name: 'created',
format: (row) => toDateFormat(row.created),
cardVisible: true,
hidden: true,
},
{
align: 'left',
@ -107,7 +107,6 @@ const columns = computed(() => [
name: 'requesterFk',
cardVisible: true,
format: (row) => dashIfEmpty(row.requester?.user?.nickname),
hidden: true,
},
{
align: 'left',
@ -115,33 +114,28 @@ const columns = computed(() => [
name: 'attenderFk',
cardVisible: true,
format: (row) => dashIfEmpty(row.atender?.user?.nickname),
hidden: true,
},
{
align: 'left',
label: t('purchaseRequest.quantity'),
name: 'quantity',
hidden: true,
},
{
align: 'left',
label: t('purchaseRequest.price'),
name: 'price',
hidden: true,
},
{
align: 'left',
label: t('purchaseRequest.saleFk'),
name: 'saleFk',
cardVisible: true,
hidden: true,
},
{
align: 'left',
label: t('purchaseRequest.state'),
name: 'isOk',
cardVisible: true,
isHidden: true,
},
{
align: 'right',
@ -186,6 +180,8 @@ async function removeLine(id) {
console.error('Error ', err);
}
}
onMounted(() => (stateStore.rightDrawer = false));
</script>
<template>
@ -212,6 +208,7 @@ async function removeLine(id) {
:columns="columns"
:is-editable="true"
:right-search="false"
:column-search="false"
auto-load
>
<template #column-description="{ row }">

181
src/pages/Ticket/Card/TicketSale.vue
View File

@ -63,7 +63,6 @@ const columns = computed(() => [
{
align: 'left',
name: 'statusIcons',
hidden: true,
},
{
align: 'center',
@ -85,20 +84,17 @@ const columns = computed(() => [
label: t('ticketSale.visible'),
name: 'visible',
format: (row, dashIfEmpty) => dashIfEmpty(row.visible),
hidden: true,
},
{
align: 'left',
label: t('ticketSale.available'),
name: 'available',
format: (row, dashIfEmpty) => dashIfEmpty(row.available),
hidden: true,
},
{
align: 'left',
label: t('ticketSale.id'),
name: 'itemFk',
hidden: true,
},
{
align: 'left',
@ -106,7 +102,6 @@ const columns = computed(() => [
name: 'quantity',
cardVisible: true,
format: (row) => toCurrency(row.quantity),
hidden: true,
},
{
align: 'left',
@ -115,7 +110,6 @@ const columns = computed(() => [
format: (row) => row?.item?.name,
columnClass: 'expand',
cardVisible: true,
hidden: true,
},
{
align: 'left',
@ -123,7 +117,6 @@ const columns = computed(() => [
name: 'price',
cardVisible: true,
format: (row) => toCurrency(row.price),
hidden: true,
},
{
align: 'left',
@ -131,14 +124,12 @@ const columns = computed(() => [
name: 'discount',
cardVisible: true,
format: (row) => toPercentage(row.discount),
hidden: true,
},
{
align: 'left',
label: t('ticketSale.amount'),
name: 'amount',
format: (row) => parseInt(row.amount * row.quantity),
hidden: true,
},
{
align: 'left',
@ -146,7 +137,6 @@ const columns = computed(() => [
name: 'itemPackingTypeFk',
cardVisible: true,
format: (row, dashIfEmpty) => dashIfEmpty(row?.item?.itemPackingTypeFk),
hidden: true,
},
{
align: 'right',
@ -578,52 +568,51 @@ async function save(item) {
selection: 'multiple',
}"
:right-search="false"
:column-search="false"
auto-load
>
<template #column-statusIcons="{ row }">
<QTd class="q-gutter-x-xs">
<router-link
v-if="row.claim?.claimFk"
:to="{ name: 'ClaimBasicData', params: { id: row.claim?.claimFk } }"
>
<QIcon color="primary" name="vn:claims" size="xs">
<QTooltip>
{{ t('ticketSale.claim') }}:
{{ row.claim?.claimFk }}
</QTooltip>
</QIcon>
</router-link>
<QIcon v-if="row.visible < 0" color="primary" name="warning" size="xs">
<router-link
v-if="row.claim?.claimFk"
:to="{ name: 'ClaimBasicData', params: { id: row.claim?.claimFk } }"
>
<QIcon color="primary" name="vn:claims" size="xs">
<QTooltip>
{{ t('ticketSale.visible') }}: {{ row.visible || 0 }}
{{ t('ticketSale.claim') }}:
{{ row.claim?.claimFk }}
</QTooltip>
</QIcon>
<QIcon v-if="row.reserved" color="primary" name="vn:reserva" size="xs">
<QTooltip>
{{ t('ticketSale.reserved') }}
</QTooltip>
</QIcon>
<QIcon
v-if="row.itemShortage"
color="primary"
name="vn:unavailable"
size="xs"
>
<QTooltip>
{{ t('ticketSale.noVisible') }}
</QTooltip>
</QIcon>
<QIcon
v-if="row.hasComponentLack"
color="primary"
name="vn:components"
size="xs"
>
<QTooltip>
{{ t('ticketSale.hasComponentLack') }}
</QTooltip>
</QIcon>
</QTd>
</router-link>
<QIcon v-if="row.visible < 0" color="primary" name="warning" size="xs">
<QTooltip>
{{ t('ticketSale.visible') }}: {{ row.visible || 0 }}
</QTooltip>
</QIcon>
<QIcon v-if="row.reserved" color="primary" name="vn:reserva" size="xs">
<QTooltip>
{{ t('ticketSale.reserved') }}
</QTooltip>
</QIcon>
<QIcon
v-if="row.itemShortage"
color="primary"
name="vn:unavailable"
size="xs"
>
<QTooltip>
{{ t('ticketSale.noVisible') }}
</QTooltip>
</QIcon>
<QIcon
v-if="row.hasComponentLack"
color="primary"
name="vn:components"
size="xs"
>
<QTooltip>
{{ t('ticketSale.hasComponentLack') }}
</QTooltip>
</QIcon>
</template>
<template #column-image="{ row }">
<div class="image-wrapper">
@ -677,59 +666,53 @@ async function save(item) {
</VnSelect>
</template>
<template #column-quantity="{ row }">
<QTd @click.stop>
<VnInput
v-if="isTicketEditable"
v-model.number="row.quantity"
@keyup.enter="changeQuantity(row)"
@blur="changeQuantity(row)"
@focus="edit.oldQuantity = row.quantity"
/>
<span v-else>{{ row.quantity }}</span>
</QTd>
<VnInput
v-if="isTicketEditable"
v-model.number="row.quantity"
@keyup.enter="changeQuantity(row)"
@blur="changeQuantity(row)"
@focus="edit.oldQuantity = row.quantity"
/>
<span v-else>{{ row.quantity }}</span>
</template>
<template #column-price="{ row }">
<QTd>
<template v-if="isTicketEditable && row.id">
<QBtn flat class="link" dense @click="onOpenEditPricePopover(row)">
{{ toCurrency(row.price) }}
</QBtn>
<TicketEditManaProxy
ref="editPriceProxyRef"
:mana="mana"
:new-price="getNewPrice"
@save="updatePrice(row)"
>
<VnInput
v-model.number="edit.price"
:label="t('ticketSale.price')"
type="number"
/>
</TicketEditManaProxy>
</template>
<span v-else>{{ toCurrency(row.price) }}</span>
</QTd>
<template v-if="isTicketEditable && row.id">
<QBtn flat class="link" dense @click="onOpenEditPricePopover(row)">
{{ toCurrency(row.price) }}
</QBtn>
<TicketEditManaProxy
ref="editPriceProxyRef"
:mana="mana"
:new-price="getNewPrice"
@save="updatePrice(row)"
>
<VnInput
v-model.number="edit.price"
:label="t('ticketSale.price')"
type="number"
/>
</TicketEditManaProxy>
</template>
<span v-else>{{ toCurrency(row.price) }}</span>
</template>
<template #column-discount="{ row }">
<QTd>
<template v-if="!isLocked && row.id">
<QBtn flat class="link" dense @click="onOpenEditDiscountPopover(row)">
{{ toPercentage(row.discount / 100) }}
</QBtn>
<TicketEditManaProxy
:mana="mana"
:new-price="getNewPrice"
@save="changeDiscount(row)"
>
<VnInput
v-model.number="edit.discount"
:label="t('ticketSale.discount')"
type="number"
/>
</TicketEditManaProxy>
</template>
<span v-else>{{ toPercentage(row.discount / 100) }}</span>
</QTd>
<template v-if="!isLocked && row.id">
<QBtn flat class="link" dense @click="onOpenEditDiscountPopover(row)">
{{ toPercentage(row.discount / 100) }}
</QBtn>
<TicketEditManaProxy
:mana="mana"
:new-price="getNewPrice"
@save="changeDiscount(row)"
>
<VnInput
v-model.number="edit.discount"
:label="t('ticketSale.discount')"
type="number"
/>
</TicketEditManaProxy>
</template>
<span v-else>{{ toPercentage(row.discount / 100) }}</span>
</template>
<template #column-amount="{ row }">
{{ toCurrency(row.quantity * row.price) }}

4
src/pages/Ticket/Card/TicketVolume.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { ref, computed, onUnmounted, watch, nextTick } from 'vue';
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
@ -93,6 +93,8 @@ const applyVolumes = async (salesData) => {
}
};
onMounted(() => (stateStore.rightDrawer = false));
onUnmounted(() => (stateStore.rightDrawer = false));
</script>