forked from verdnatura/salix-front
Ticket package
This commit is contained in:
parent
2961c813a5
commit
9179dc7432
|
|
@ -0,0 +1,121 @@
|
|||
<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';
|
||||
|
||||
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: null,
|
||||
created: Date.vnNew(),
|
||||
ticketFk: route.params.id,
|
||||
}));
|
||||
|
||||
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 }">
|
||||
<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="row.quantity"
|
||||
class="col"
|
||||
/>
|
||||
<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>
|
||||
<QIcon
|
||||
name="add_circle"
|
||||
class="fill-icon-on-hover q-ml-md"
|
||||
size="sm"
|
||||
color="primary"
|
||||
@click="ticketPackagingsCrudRef.insert()"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('package.addPackage') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</QCard>
|
||||
</template>
|
||||
</CrudModel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -164,3 +164,9 @@ tracking:
|
|||
worker: Worker
|
||||
created: Created
|
||||
addState: Add state
|
||||
package:
|
||||
package: Package
|
||||
quantity: Quantity
|
||||
added: Added
|
||||
addPackage: Add package
|
||||
removePackage: Remove package
|
||||
|
|
|
|||
|
|
@ -164,5 +164,11 @@ ticketSale:
|
|||
shipped: F. Envío
|
||||
agency: Agencia
|
||||
address: Consignatario
|
||||
package:
|
||||
package: Package
|
||||
quantity: Cantidad
|
||||
added: Añadido
|
||||
addPackage: Añadir embalaje
|
||||
removePackage: Quitar embalaje
|
||||
Search ticket: Buscar tickets
|
||||
You can search by ticket id or alias: Puedes buscar por id o alias del ticket
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ export default {
|
|||
'TicketTracking',
|
||||
'TicketVolume',
|
||||
'TicketNotes',
|
||||
'TicketPackage',
|
||||
],
|
||||
},
|
||||
children: [
|
||||
|
|
@ -188,6 +189,15 @@ export default {
|
|||
},
|
||||
component: () => import('src/pages/Ticket/Card/TicketNotes.vue'),
|
||||
},
|
||||
{
|
||||
path: 'package',
|
||||
name: 'TicketPackage',
|
||||
meta: {
|
||||
title: 'packages',
|
||||
icon: 'vn:bin',
|
||||
},
|
||||
component: () => import('src/pages/Ticket/Card/TicketPackage.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue