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
|
worker: Worker
|
||||||
created: Created
|
created: Created
|
||||||
addState: Add state
|
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
|
shipped: F. Envío
|
||||||
agency: Agencia
|
agency: Agencia
|
||||||
address: Consignatario
|
address: Consignatario
|
||||||
|
package:
|
||||||
|
package: Package
|
||||||
|
quantity: Cantidad
|
||||||
|
added: Añadido
|
||||||
|
addPackage: Añadir embalaje
|
||||||
|
removePackage: Quitar embalaje
|
||||||
Search ticket: Buscar tickets
|
Search ticket: Buscar tickets
|
||||||
You can search by ticket id or alias: Puedes buscar por id o alias del ticket
|
You can search by ticket id or alias: Puedes buscar por id o alias del ticket
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@ export default {
|
||||||
'TicketTracking',
|
'TicketTracking',
|
||||||
'TicketVolume',
|
'TicketVolume',
|
||||||
'TicketNotes',
|
'TicketNotes',
|
||||||
|
'TicketPackage',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
|
|
@ -188,6 +189,15 @@ export default {
|
||||||
},
|
},
|
||||||
component: () => import('src/pages/Ticket/Card/TicketNotes.vue'),
|
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