Create manual invoice WIP
This commit is contained in:
parent
b994d39369
commit
0e79676f58
|
|
@ -0,0 +1,155 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import FormModelPopup from './FormModelPopup.vue';
|
||||
import VnInputDate from './common/VnInputDate.vue';
|
||||
|
||||
const emit = defineEmits(['onDataSaved']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const manualInvoiceFormData = reactive({
|
||||
maxShipped: Date.vnNew(),
|
||||
});
|
||||
|
||||
const isInvoicing = ref(false);
|
||||
const invoiceOutSerialsOptions = ref([]);
|
||||
const taxAreasOptions = ref([]);
|
||||
const ticketsOptions = ref([]);
|
||||
const clientsOptions = ref([]);
|
||||
|
||||
const onDataSaved = (formData, requestResponse) => {
|
||||
emit('onDataSaved', formData, requestResponse);
|
||||
router.push({ name: 'InvoiceOutSummary', params: { id: requestResponse.id } });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="InvoiceOutSerials"
|
||||
:filter="{ where: { code: { neq: 'R' } }, order: ['code'] }"
|
||||
@on-fetch="(data) => (invoiceOutSerialsOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="TaxAreas"
|
||||
:filter="{ order: ['code'] }"
|
||||
@on-fetch="(data) => (taxAreasOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Tickets"
|
||||
:filter="{ fields: ['id', 'nickname'], order: 'shipped DESC', limit: 30 }"
|
||||
@on-fetch="(data) => (ticketsOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Clients"
|
||||
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||
@on-fetch="(data) => (clientsOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FormModelPopup
|
||||
:title="t('Create manual invoice')"
|
||||
url-create="InvoiceOuts/createManualInvoice"
|
||||
model="invoiceOut"
|
||||
:form-initial-data="manualInvoiceFormData"
|
||||
@on-data-saved="onDataSaved"
|
||||
>
|
||||
<template #form-inputs="{ data }">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Ticket')"
|
||||
:options="ticketsOptions"
|
||||
hide-selected
|
||||
option-label="id"
|
||||
option-value="id"
|
||||
v-model="data.ticketFk"
|
||||
@update:model-value="data.clientFk = null"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
|
||||
<QItemLabel caption>{{
|
||||
scope.opt?.nickname
|
||||
}}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</div>
|
||||
<span class="row items-center" style="max-width: max-content">{{
|
||||
t('Or')
|
||||
}}</span>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Client')"
|
||||
:options="clientsOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="data.clientFk"
|
||||
@update:model-value="data.ticketFk = null"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Serial')"
|
||||
:options="invoiceOutSerialsOptions"
|
||||
hide-selected
|
||||
option-label="description"
|
||||
option-value="code"
|
||||
v-model="data.serial"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Area')"
|
||||
:options="taxAreasOptions"
|
||||
hide-selected
|
||||
option-label="code"
|
||||
option-value="code"
|
||||
v-model="data.taxArea"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<VnInput
|
||||
:label="t('Reference')"
|
||||
type="textarea"
|
||||
v-model="data.reference"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModelPopup>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Create manual invoice: Crear factura manual
|
||||
Ticket: Ticket
|
||||
Client: Cliente
|
||||
Max date: Fecha límite
|
||||
Serial: Serie
|
||||
Area: Area
|
||||
Reference: Referencia
|
||||
Or: O
|
||||
</i18n>
|
||||
|
|
@ -42,8 +42,8 @@ const { t } = useI18n();
|
|||
const closeButton = ref(null);
|
||||
const isLoading = ref(false);
|
||||
|
||||
const onDataSaved = (dataSaved) => {
|
||||
emit('onDataSaved', dataSaved);
|
||||
const onDataSaved = (formData, requestResponse) => {
|
||||
emit('onDataSaved', formData, requestResponse);
|
||||
closeForm();
|
||||
};
|
||||
|
||||
|
|
@ -59,7 +59,7 @@ const closeForm = () => {
|
|||
:default-actions="false"
|
||||
:url-create="urlCreate"
|
||||
:model="model"
|
||||
@on-data-saved="onDataSaved($event)"
|
||||
@on-data-saved="onDataSaved"
|
||||
>
|
||||
<template #form="{ data, validate }">
|
||||
<span ref="closeButton" class="close-icon" v-close-popup>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
|
|||
import CardList from 'src/components/ui/CardList.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import CreateManualInvoiceForm from 'src/components/CreateManualInvoiceForm.vue';
|
||||
|
||||
import InvoiceOutFilter from './InvoiceOutFilter.vue';
|
||||
import { toDate, toCurrency } from 'src/filters/index';
|
||||
|
|
@ -18,13 +19,15 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
|||
import { useSession } from 'src/composables/useSession';
|
||||
|
||||
const { t } = useI18n();
|
||||
const selectedCards = ref(new Map());
|
||||
const router = useRouter();
|
||||
const stateStore = useStateStore();
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
|
||||
const manualInvoiceDialogRef = ref(null);
|
||||
const selectedCards = ref(new Map());
|
||||
|
||||
onMounted(() => (stateStore.rightDrawer = true));
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
|
||||
|
|
@ -83,6 +86,10 @@ const openPdf = () => {
|
|||
console.error('Error opening PDF');
|
||||
}
|
||||
};
|
||||
|
||||
const openCreateInvoiceModal = () => {
|
||||
manualInvoiceDialogRef.value.show();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -204,6 +211,20 @@ const openPdf = () => {
|
|||
</div>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
<QPageSticky :offset="[20, 20]">
|
||||
<QBtn fab icon="add" color="primary" @click="openCreateInvoiceModal()" />
|
||||
<QTooltip>
|
||||
{{ t('createInvoice') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
|
||||
<QDialog
|
||||
ref="manualInvoiceDialogRef"
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<CreateManualInvoiceForm />
|
||||
</QDialog>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
|
|
@ -214,10 +235,13 @@ en:
|
|||
fileAllowed: Successful download of CSV file
|
||||
youCanSearchByInvoiceReference: You can search by invoice reference
|
||||
downloadPdf: Download PDF
|
||||
createInvoice: Make invoice
|
||||
es:
|
||||
searchInvoice: Buscar factura emitida
|
||||
fileDenied: El navegador denegó la descarga de archivos...
|
||||
fileAllowed: Descarga exitosa de archivo CSV
|
||||
youCanSearchByInvoiceReference: Puedes buscar por referencia de la factura
|
||||
downloadPdf: Download PDF
|
||||
createInvoice: Crear factura
|
||||
|
||||
</i18n>
|
||||
|
|
|
|||
Loading…
Reference in New Issue