101 lines
3.1 KiB
Vue
101 lines
3.1 KiB
Vue
<script setup>
|
|
import toCurrency from '../../../filters/toCurrency';
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import axios from 'axios';
|
|
import { useRoute } from 'vue-router';
|
|
import useNotify from 'composables/useNotify';
|
|
import { useArrayData } from 'composables/useArrayData';
|
|
|
|
const { t } = useI18n();
|
|
const { notify } = useNotify();
|
|
const emit = defineEmits(['added']);
|
|
const route = useRoute();
|
|
const props = defineProps({
|
|
prices: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const fields = ref((props.prices || []).map((item) => ({ ...item, quantity: 0 })));
|
|
const descriptorData = useArrayData('orderData');
|
|
const isLoading = ref(false);
|
|
const addToOrder = async () => {
|
|
if (isLoading.value) return;
|
|
isLoading.value = true;
|
|
const items = (fields.value || []).filter((item) => Number(item.quantity) > 0);
|
|
await axios.post('/OrderRows/addToOrder', {
|
|
items,
|
|
orderFk: Number(route.params.id),
|
|
});
|
|
notify(t('globals.dataSaved'), 'positive');
|
|
emit('added');
|
|
descriptorData.fetch({});
|
|
isLoading.value = false;
|
|
};
|
|
const canAddToOrder = () => {
|
|
return (fields.value || []).some((item) => Number(item.quantity) > 0);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container order-catalog-item q-pa-md">
|
|
<QForm @submit="addToOrder">
|
|
<QMarkupTable class="shadow-0">
|
|
<tbody>
|
|
<tr v-for="item in fields" :key="item.warehouse">
|
|
<td class="text-bold q-pr-md td" style="width: 35%">
|
|
{{ item.warehouse }}
|
|
</td>
|
|
<td class="text-right" style="width: 35%">
|
|
<span
|
|
class="link"
|
|
@click="
|
|
() => {
|
|
item.quantity += item.grouping;
|
|
}
|
|
"
|
|
>
|
|
{{ item.grouping }}
|
|
</span>
|
|
x {{ toCurrency(item.price) }}
|
|
</td>
|
|
<td class="text-right">
|
|
<QInput
|
|
v-model.number="item.quantity"
|
|
type="number"
|
|
:step="item.grouping"
|
|
min="0"
|
|
dense
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</QMarkupTable>
|
|
<div class="flex justify-center q-mt-lg">
|
|
<QBtn
|
|
color="primary"
|
|
type="submit"
|
|
:disable="!isLoading && !canAddToOrder()"
|
|
>
|
|
{{ t('globals.add') }}
|
|
</QBtn>
|
|
</div>
|
|
</QForm>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.td {
|
|
width: 200px;
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
es:
|
|
noAmount: La cantidad no puede ser 0
|
|
en:
|
|
noAmount: Amount can not be 0
|
|
</i18n>
|