salix-front/src/components/CloneFixedPriceForm.vue

169 lines
5.0 KiB
Vue

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { useQuasar } from 'quasar';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnRow from 'components/ui/VnRow.vue';
const $props = defineProps({
row: {
type: Array,
default: () => [],
},
});
const { t } = useI18n();
const quasar = useQuasar();
const isLoading = ref(false);
const closeButton = ref(null);
const data = $props.row;
const emit = defineEmits(['onDataSaved']);
const onSubmit = async () => {
if (isLoading.value) return;
isLoading.value = true;
const params = data;
await axios.post('FixedPrices', params);
quasar.notify({
type: 'positive',
message: t('globals.dataSaved'),
});
isLoading.value = false;
closeForm();
emit('onDataSaved');
};
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
};
</script>
<template>
<QForm @submit="onSubmit()" class="all-pointer-events">
<QCard class="q-pa-lg">
<span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" />
</span>
<div class="q-pb-md">
<span class="title">{{ t('Clone item') }}</span>
</div>
<VnRow>
<VnSelect
url="Items/search"
v-model="data.itemFk"
:label="t('item.fixedPrice.itemName')"
:fields="['id', 'name']"
:filter-options="['id', 'name']"
option-label="name"
option-value="id"
:required="true"
sort-by="name ASC"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt.name }}
</QItemLabel>
<QItemLabel caption> #{{ scope.opt.id }} </QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</VnRow>
<VnRow>
<VnInput
:label="t('item.fixedPrice.groupingPrice')"
v-model="data.rate2"
/>
<VnInput
:label="t('item.fixedPrice.packingPrice')"
v-model="data.rate3"
/>
</VnRow>
<VnRow>
<VnInputDate
:label="t('item.fixedPrice.started')"
v-model="data.started"
/>
<VnInputDate :label="t('item.fixedPrice.ended')" v-model="data.ended" />
</VnRow>
<VnRow>
<VnSelect
:label="t('globals.warehouse')"
url="Warehouses"
v-model="data.warehouseFk"
:fields="['id', 'name']"
option-label="name"
option-value="id"
hide-selected
:required="true"
sort-by="name ASC"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt.name }}
</QItemLabel>
<QItemLabel caption> #{{ scope.opt.id }} </QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</VnRow>
<div class="q-mt-lg row justify-end">
<QBtn
:label="t('globals.cancel')"
type="reset"
color="primary"
flat
:disabled="isLoading"
:loading="isLoading"
v-close-popup
/>
<QBtn
:label="t('globals.save')"
type="submit"
color="primary"
class="q-ml-sm"
:disabled="isLoading"
:loading="isLoading"
@click="onSubmit()"
/>
</div>
</QCard>
</QForm>
</template>
<style lang="scss" scoped>
.title {
font-size: 17px;
font-weight: bold;
line-height: 20px;
}
.close-icon {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.countLines {
font-size: 24px;
color: $primary;
font-weight: bold;
}
</style>
<i18n>
es:
Clone item: Clonar artículo
Item id: Id artículo
</i18n>