feat(claim): added claim lines section
gitea/salix-front/pipeline/head This commit looks good
Details
gitea/salix-front/pipeline/head This commit looks good
Details
This commit is contained in:
parent
b077622fe7
commit
6e935cb91f
|
|
@ -72,9 +72,9 @@ function stateColor(code) {
|
||||||
<q-item-section v-if="entity.claimState">
|
<q-item-section v-if="entity.claimState">
|
||||||
<q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
|
<q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
|
||||||
<q-item-label>
|
<q-item-label>
|
||||||
<q-chip :color="stateColor(entity.claimState.code)" dense>
|
<q-badge :color="stateColor(entity.claimState.code)" dense>
|
||||||
{{ entity.claimState.description }}
|
{{ entity.claimState.description }}
|
||||||
</q-chip>
|
</q-badge>
|
||||||
</q-item-label>
|
</q-item-label>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,269 @@
|
||||||
|
<script setup>
|
||||||
|
import axios from 'axios';
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import { useArrayData } from 'src/composables/useArrayData';
|
||||||
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
|
import Paginate from 'src/components/PaginateData.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnConfirm from 'src/components/ui/VnConfirm.vue';
|
||||||
|
|
||||||
|
import { toDate, toCurrency, toPercentage } from 'src/filters';
|
||||||
|
|
||||||
|
const quasar = useQuasar();
|
||||||
|
const route = useRoute();
|
||||||
|
const { t } = useI18n();
|
||||||
|
const stateStore = useStateStore();
|
||||||
|
const arrayData = useArrayData('ClaimLines');
|
||||||
|
const store = arrayData.store;
|
||||||
|
|
||||||
|
const filter = {
|
||||||
|
include: {
|
||||||
|
relation: 'sale',
|
||||||
|
scope: {
|
||||||
|
fields: ['concept', 'ticketFk', 'price', 'quantity', 'discount', 'itemFk'],
|
||||||
|
include: {
|
||||||
|
relation: 'ticket',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const amount = ref(0);
|
||||||
|
const amountClaimed = ref(0);
|
||||||
|
async function onFetch(rows) {
|
||||||
|
amount.value = rows.reduce(
|
||||||
|
(acumulator, { sale }) => acumulator + sale.price * sale.quantity,
|
||||||
|
0
|
||||||
|
);
|
||||||
|
|
||||||
|
amountClaimed.value = rows.reduce(
|
||||||
|
(acumulator, line) => acumulator + line.sale.price * line.quantity,
|
||||||
|
0
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns = computed(() => [
|
||||||
|
{
|
||||||
|
name: 'dated',
|
||||||
|
label: t('Delivered'),
|
||||||
|
field: ({ sale: { ticket } }) => toDate(ticket.landed),
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'quantity',
|
||||||
|
label: t('Quantity'),
|
||||||
|
field: ({ sale }) => sale.quantity,
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'claimed',
|
||||||
|
label: t('Claimed'),
|
||||||
|
field: (row) => row.quantity,
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'description',
|
||||||
|
label: t('Description'),
|
||||||
|
field: ({ sale }) => sale.concept,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'price',
|
||||||
|
label: t('Price'),
|
||||||
|
field: ({ sale }) => sale.price,
|
||||||
|
format: (value) => toCurrency(value),
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'discount',
|
||||||
|
label: t('Discount'),
|
||||||
|
field: ({ sale }) => sale.discount,
|
||||||
|
format: (value) => toPercentage(value),
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'total',
|
||||||
|
label: t('Total'),
|
||||||
|
field: ({ sale }) => sale.price * sale.quantity,
|
||||||
|
format: (value) => toCurrency(value),
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'actions',
|
||||||
|
label: t('Actions'),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
async function updateQuantity({ id, quantity }) {
|
||||||
|
if (!id) return;
|
||||||
|
await axios.patch(`ClaimBeginnings/${id}`, { quantity });
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateDiscount({ id, discount }) {}
|
||||||
|
|
||||||
|
async function confirmRemove(id, index) {
|
||||||
|
quasar
|
||||||
|
.dialog({
|
||||||
|
component: VnConfirm,
|
||||||
|
componentProps: {
|
||||||
|
title: t('Delete claimed sale'),
|
||||||
|
data: { id },
|
||||||
|
promise: remove,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.onOk(() => store.data.splice(index, 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function remove({ id }) {
|
||||||
|
if (!id) return;
|
||||||
|
await axios.delete(`ClaimBeginnings/${id}`);
|
||||||
|
quasar.notify({
|
||||||
|
type: 'positive',
|
||||||
|
message: t('globals.rowRemoved'),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<q-page-sticky position="top" :offset="[0, 0]" expand>
|
||||||
|
<q-toolbar class="bg-dark text-white">
|
||||||
|
<q-toolbar-title class="row q-gutter-md">
|
||||||
|
<div>
|
||||||
|
{{ t('Amount') }}
|
||||||
|
<q-chip>{{ toCurrency(amount) }}</q-chip>
|
||||||
|
</div>
|
||||||
|
<q-separator dark vertical />
|
||||||
|
<div>
|
||||||
|
{{ t('Amount Claimed') }}
|
||||||
|
<q-chip color="positive">{{ toCurrency(amountClaimed) }}</q-chip>
|
||||||
|
</div>
|
||||||
|
</q-toolbar-title>
|
||||||
|
</q-toolbar>
|
||||||
|
</q-page-sticky>
|
||||||
|
<div class="column items-center">
|
||||||
|
<div class="list">
|
||||||
|
<paginate
|
||||||
|
data-key="ClaimLines"
|
||||||
|
:url="`Claims/${route.params.id}/lines`"
|
||||||
|
:filter="filter"
|
||||||
|
@on-fetch="onFetch"
|
||||||
|
auto-load
|
||||||
|
>
|
||||||
|
<template #body="{ rows }">
|
||||||
|
<q-table
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
:dense="$q.screen.lt.md"
|
||||||
|
:pagination="{ rowsPerPage: 0 }"
|
||||||
|
row-key="id"
|
||||||
|
hide-pagination
|
||||||
|
>
|
||||||
|
<template #body-cell-claimed="{ row, value }">
|
||||||
|
<q-td auto-width align="right" class="dimmed">
|
||||||
|
<span>{{ value }}</span>
|
||||||
|
|
||||||
|
<q-popup-edit
|
||||||
|
v-model="row.quantity"
|
||||||
|
v-slot="scope"
|
||||||
|
title="Claimed quantity"
|
||||||
|
buttons
|
||||||
|
@update:model-value="updateQuantity(row)"
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
v-model="scope.value"
|
||||||
|
dense
|
||||||
|
autofocus
|
||||||
|
@keyup.enter="scope.set"
|
||||||
|
@focus="($event) => $event.target.select()"
|
||||||
|
/>
|
||||||
|
</q-popup-edit>
|
||||||
|
</q-td>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #body-cell-discount="{ row, value }">
|
||||||
|
<q-td auto-width align="right" class="dimmed">
|
||||||
|
{{ value }}
|
||||||
|
|
||||||
|
<q-popup-edit
|
||||||
|
v-model="row.sale.discount"
|
||||||
|
v-slot="scope"
|
||||||
|
title="Discount"
|
||||||
|
buttons
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
v-model="scope.value"
|
||||||
|
dense
|
||||||
|
autofocus
|
||||||
|
@keyup.enter="scope.set"
|
||||||
|
@focus="($event) => $event.target.select()"
|
||||||
|
/>
|
||||||
|
</q-popup-edit>
|
||||||
|
</q-td>
|
||||||
|
</template>
|
||||||
|
<template #body-cell-actions="{ row, rowIndex }">
|
||||||
|
<q-td auto-width class="text-center">
|
||||||
|
<q-btn
|
||||||
|
icon="vn:deleteline"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
@click="confirmRemove(row.id, rowIndex)"
|
||||||
|
>
|
||||||
|
<q-tooltip>Delete claimed sale</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</template>
|
||||||
|
</paginate>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Teleport
|
||||||
|
v-if="stateStore.isHeaderMounted() && !quasar.platform.is.mobile"
|
||||||
|
to="#actions-prepend"
|
||||||
|
>
|
||||||
|
<div class="row q-gutter-x-sm">
|
||||||
|
<q-btn @click="addRow()" icon="add" color="primary" dense rounded>
|
||||||
|
<q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-separator vertical />
|
||||||
|
</div>
|
||||||
|
</Teleport>
|
||||||
|
|
||||||
|
<q-page-sticky
|
||||||
|
v-if="quasar.platform.is.mobile"
|
||||||
|
position="bottom"
|
||||||
|
:offset="[0, 0]"
|
||||||
|
expand
|
||||||
|
>
|
||||||
|
<q-toolbar class="bg-primary text-white q-pa-none">
|
||||||
|
<q-tabs class="full-width" align="justify" inline-label narrow-indicator>
|
||||||
|
<q-tab @click="addRow()" icon="add_circle" :label="t('globals.add')" />
|
||||||
|
</q-tabs>
|
||||||
|
</q-toolbar>
|
||||||
|
</q-page-sticky>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.list {
|
||||||
|
padding-top: 50px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Delivered: Entregado
|
||||||
|
Quantity: Cantidad
|
||||||
|
Claimed: Reclamada
|
||||||
|
Description: Descripción
|
||||||
|
Price: Precio
|
||||||
|
Discount: Descuento
|
||||||
|
Actions: Acciones
|
||||||
|
Amount: Total
|
||||||
|
Amount Claimed: Cantidad reclamada
|
||||||
|
Delete claimed sale: Eliminar venta reclamada
|
||||||
|
</i18n>
|
||||||
|
|
@ -11,7 +11,7 @@ export default {
|
||||||
redirect: { name: 'ClaimMain' },
|
redirect: { name: 'ClaimMain' },
|
||||||
menus: {
|
menus: {
|
||||||
main: ['ClaimList', 'ClaimRmaList'],
|
main: ['ClaimList', 'ClaimRmaList'],
|
||||||
card: ['ClaimBasicData', 'ClaimRma', 'ClaimPhotos', 'ClaimLog'],
|
card: ['ClaimBasicData', 'ClaimLines', 'ClaimRma', 'ClaimPhotos', 'ClaimLog'],
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|
@ -85,6 +85,15 @@ export default {
|
||||||
},
|
},
|
||||||
component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
|
component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'ClaimLines',
|
||||||
|
path: 'lines',
|
||||||
|
meta: {
|
||||||
|
title: 'lines',
|
||||||
|
icon: 'history',
|
||||||
|
},
|
||||||
|
component: () => import('src/pages/Claim/Card/ClaimLines.vue'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'ClaimLog',
|
name: 'ClaimLog',
|
||||||
path: 'log',
|
path: 'log',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue