137 lines
5.1 KiB
Vue
137 lines
5.1 KiB
Vue
<script setup>
|
|
import { ref, watch, computed, reactive } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import CrudModel from 'components/CrudModel.vue';
|
|
import VnInput from 'src/components/common/VnInput.vue';
|
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
|
import FetchData from 'components/FetchData.vue';
|
|
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
|
|
|
import { useArrayData } from 'src/composables/useArrayData';
|
|
import VnRow from 'src/components/ui/VnRow.vue';
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
const ticketPackagingsCrudRef = ref(null);
|
|
const listPackagingsOptions = ref([]);
|
|
const arrayData = useArrayData('TicketPackagings');
|
|
const { store } = arrayData;
|
|
|
|
const crudModelFilter = reactive({
|
|
fields: ['id', 'ticketFk', 'packagingFk', 'quantity', 'created'],
|
|
where: { ticketFk: route.params.id },
|
|
});
|
|
|
|
const crudModelRequiredData = computed(() => ({
|
|
packagingFk: null,
|
|
quantity: 0,
|
|
created: Date.vnNew(),
|
|
ticketFk: route.params.id,
|
|
}));
|
|
|
|
const handleInputQuantityClear = (row) => {
|
|
if (row.quantity === null || row.quantity === undefined) row.quantity = 0;
|
|
};
|
|
|
|
watch(
|
|
() => route.params.id,
|
|
async () => {
|
|
crudModelFilter.where.ticketFk = route.params.id;
|
|
store.filter = crudModelFilter;
|
|
await ticketPackagingsCrudRef.value.reload();
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<FetchData
|
|
@on-fetch="(data) => (listPackagingsOptions = data)"
|
|
auto-load
|
|
:filter="{ fields: ['packagingFk', 'name'], order: 'name ASC', limit: 30 }"
|
|
url="Packagings/listPackaging"
|
|
/>
|
|
<div class="flex justify-center">
|
|
<CrudModel
|
|
ref="ticketPackagingsCrudRef"
|
|
data-key="TicketPackagings"
|
|
url="TicketPackagings"
|
|
model="TicketPackagings"
|
|
:filter="crudModelFilter"
|
|
:data-required="crudModelRequiredData"
|
|
:default-remove="false"
|
|
auto-load
|
|
style="max-width: 800px"
|
|
>
|
|
<template #body="{ rows, validate }">
|
|
<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"
|
|
>
|
|
<VnSelect
|
|
:label="t('package.package')"
|
|
:options="listPackagingsOptions"
|
|
hide-selected
|
|
option-label="name"
|
|
option-value="packagingFk"
|
|
v-model="row.packagingFk"
|
|
>
|
|
<template #option="scope">
|
|
<QItem v-bind="scope.itemProps">
|
|
<QItemSection>
|
|
<QItemLabel>
|
|
{{ scope.opt?.name }}
|
|
</QItemLabel>
|
|
<QItemLabel caption>
|
|
#{{ scope.opt?.itemFk }}
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</template>
|
|
</VnSelect>
|
|
<VnInput
|
|
:label="t('package.quantity')"
|
|
v-model.number="row.quantity"
|
|
class="col"
|
|
type="number"
|
|
min="1"
|
|
:required="true"
|
|
@update:model-value="handleInputQuantityClear(row)"
|
|
:rules="validate('TicketPackaging.quantity')"
|
|
/>
|
|
<VnInputDate :label="t('package.added')" v-model="row.created" />
|
|
<QIcon
|
|
name="delete"
|
|
size="sm"
|
|
class="cursor-pointer"
|
|
color="primary"
|
|
@click="ticketPackagingsCrudRef.remove([row])"
|
|
>
|
|
<QTooltip>
|
|
{{ t('package.removePackage') }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
</div>
|
|
<VnRow>
|
|
<QBtn
|
|
icon="add_circle"
|
|
shortcut="+"
|
|
flat
|
|
class="fill-icon-on-hover q-ml-md"
|
|
color="primary"
|
|
@click="ticketPackagingsCrudRef.insert()"
|
|
>
|
|
<QTooltip>
|
|
{{ t('package.addPackage') }}
|
|
</QTooltip>
|
|
</QBtn>
|
|
</VnRow>
|
|
</QCard>
|
|
</template>
|
|
</CrudModel>
|
|
</div>
|
|
</template>
|