Ticket service #494
|
|
@ -10,17 +10,16 @@ import TicketCreateServiceType from './TicketCreateServiceType.vue';
|
|||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
||||
import { useArrayData } from 'src/composables/useArrayData';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
import axios from 'axios';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const ticketServiceTypeFetchRef = ref(null);
|
||||
const ticketServiceCrudRef = ref(null);
|
||||
const ticketServiceOptions = ref([]);
|
||||
const selected = ref([]);
|
||||
const arrayData = useArrayData('TicketNotes');
|
||||
const { store } = arrayData;
|
||||
const { notify } = useNotify();
|
||||
|
|
@ -28,11 +27,6 @@ const { notify } = useNotify();
|
|||
const selectedServices = ref(new Set());
|
||||
const defaultTaxClass = ref(null);
|
||||
|
||||
const toggleCheckSelection = (id) => {
|
||||
if (selectedServices.value.has(id)) selectedServices.value.delete(id);
|
||||
else selectedServices.value.add(id);
|
||||
};
|
||||
|
||||
const crudModelFilter = computed(() => ({
|
||||
where: { ticketFk: route.params.id },
|
||||
}));
|
||||
|
|
@ -50,6 +44,8 @@ watch(
|
|||
}
|
||||
);
|
||||
|
||||
onMounted(async () => await getDefaultTaxClass());
|
||||
|
||||
const createRefund = async () => {
|
||||
try {
|
||||
if (!selectedServices.value.size) return;
|
||||
|
|
@ -88,7 +84,29 @@ const getDefaultTaxClass = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
onMounted(async () => await getDefaultTaxClass());
|
||||
const columns = computed(() => [
|
||||
{
|
||||
name: 'description',
|
||||
label: t('service.description'),
|
||||
field: (row) => row.ticketServiceTypeFk,
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'quantity',
|
||||
label: t('service.quantity'),
|
||||
field: (row) => row.quantity,
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'price',
|
||||
label: t('service.price'),
|
||||
field: (row) => row.price,
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -98,41 +116,37 @@ onMounted(async () => await getDefaultTaxClass());
|
|||
auto-load
|
||||
url="TicketServiceTypes"
|
||||
/>
|
||||
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
|
||||
<QBtn
|
||||
color="primary"
|
||||
:label="t('service.pay')"
|
||||
:disabled="!selectedServices.size"
|
||||
@click.stop="createRefund()"
|
||||
/>
|
||||
</Teleport>
|
||||
<div class="flex justify-center">
|
||||
<CrudModel
|
||||
ref="ticketServiceCrudRef"
|
||||
data-key="TicketService"
|
||||
url="TicketServices"
|
||||
model="TicketService"
|
||||
:filter="crudModelFilter"
|
||||
:data-required="crudModelRequiredData"
|
||||
:default-remove="false"
|
||||
auto-load
|
||||
style="max-width: 800px"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QCard class="q-px-lg q-py-md">
|
||||
<div
|
||||
v-for="(row, index) in rows"
|
||||
:key="index"
|
||||
class="q-mb-md row items-center q-gutter-x-md"
|
||||
>
|
||||
<QCheckbox
|
||||
size="sm"
|
||||
@update:model-value="toggleCheckSelection(row.id)"
|
||||
:model-value="selectedServices.has(row.id)"
|
||||
:toggle-indeterminate="false"
|
||||
/>
|
||||
<CrudModel
|
||||
ref="ticketServiceCrudRef"
|
||||
data-key="TicketService"
|
||||
url="TicketServices"
|
||||
model="TicketService"
|
||||
:filter="crudModelFilter"
|
||||
:data-required="crudModelRequiredData"
|
||||
auto-load
|
||||
v-model:selected="selected"
|
||||
>
|
||||
<template #moreBeforeActions>
|
||||
<QBtn
|
||||
color="primary"
|
||||
:label="t('service.pay')"
|
||||
:disabled="!selectedServices.size"
|
||||
@click.stop="createRefund()"
|
||||
/>
|
||||
</template>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="$index"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
table-header-class="text-left"
|
||||
>
|
||||
<template #body-cell-description="{ row, col }">
|
||||
<QTd auto-width>
|
||||
<VnSelectDialog
|
||||
:label="t('service.description')"
|
||||
:label="col.label"
|
||||
v-model="row.ticketServiceTypeFk"
|
||||
:options="ticketServiceOptions"
|
||||
option-label="name"
|
||||
|
|
@ -145,44 +159,33 @@ onMounted(async () => await getDefaultTaxClass());
|
|||
/>
|
||||
</template>
|
||||
</VnSelectDialog>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-quantity="{ row, col }">
|
||||
<QTd auto-width>
|
||||
<VnInput
|
||||
:label="t('service.quantity')"
|
||||
:label="col.label"
|
||||
v-model.number="row.quantity"
|
||||
type="number"
|
||||
min="0"
|
||||
:info="t('service.quantityInfo')"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-price="{ row, col }">
|
||||
<QTd auto-width>
|
||||
<VnInput
|
||||
:label="t('service.price')"
|
||||
:label="col.label"
|
||||
v-model.number="row.price"
|
||||
type="number"
|
||||
min="0"
|
||||
/>
|
||||
<QIcon
|
||||
name="delete"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="ticketServiceCrudRef.remove([row])"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('service.removeNote') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
<QIcon
|
||||
name="add_circle"
|
||||
class="fill-icon-on-hover q-ml-md"
|
||||
size="sm"
|
||||
color="primary"
|
||||
@click="ticketServiceCrudRef.insert()"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('service.addService') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</QCard>
|
||||
</template>
|
||||
</CrudModel>
|
||||
</div>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
</template>
|
||||
</CrudModel>
|
||||
<QPageSticky position="bottom-right" :offset="[25, 25]">
|
||||
<QBtn fab color="primary" icon="add" @click="ticketServiceCrudRef.insert()" />
|
||||
</QPageSticky>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue