salix-front/src/pages/InvoiceIn/Card/InvoiceInCorrective.vue

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useArrayData } from 'src/composables/useArrayData';
import { useCapitalize } from 'src/composables/useCapitalize';
import CrudModel from 'src/components/CrudModel.vue';
import FetchData from 'src/components/FetchData.vue';
import VnSelect from 'src/components/common/VnSelect.vue';

const { push, currentRoute } = useRouter();
const { t } = useI18n();

const invoiceId = +currentRoute.value.params.id;
const arrayData = useArrayData();
const invoiceIn = computed(() => arrayData.store.data);
const invoiceInCorrectionRef = ref();
const filter = {
    include: { relation: 'invoiceIn' },
    where: { correctingFk: invoiceId },
};
const columns = computed(() => [
    {
        name: 'origin',
        label: t('Original invoice'),
        field: (row) => row.correctedFk,
        sortable: true,
        tabIndex: 1,
        align: 'left',
        style: 'padding-bottom: 20px',
    },
    {
        name: 'type',
        label: useCapitalize(t('globals.type')),
        field: (row) => row.cplusRectificationTypeFk,
        options: cplusRectificationTypes.value,
        model: 'cplusRectificationTypeFk',
        optionValue: 'id',
        optionLabel: 'description',
        sortable: true,
        tabIndex: 1,
        align: 'left',
    },
    {
        name: 'class',
        label: useCapitalize(t('globals.class')),
        field: (row) => row.siiTypeInvoiceOutFk,
        options: siiTypeInvoiceOuts.value,
        model: 'siiTypeInvoiceOutFk',
        optionValue: 'id',
        optionLabel: 'code',
        sortable: true,
        tabIndex: 1,
        align: 'left',
    },
    {
        name: 'reason',
        label: useCapitalize(t('globals.reason')),
        field: (row) => row.invoiceCorrectionTypeFk,
        options: invoiceCorrectionTypes.value,
        model: 'invoiceCorrectionTypeFk',
        optionValue: 'id',
        optionLabel: 'description',
        sortable: true,
        tabIndex: 1,
        align: 'left',
    },
]);
const cplusRectificationTypes = ref([]);
const siiTypeInvoiceOuts = ref([]);
const invoiceCorrectionTypes = ref([]);
const rowsSelected = ref([]);

const requiredFieldRule = (val) => val || t('globals.requiredField');

const onSave = (data) => data.deletes && push(`/invoice-in/${invoiceId}/summary`);
</script>
<template>
    <FetchData
        url="CplusRectificationTypes"
        @on-fetch="(data) => (cplusRectificationTypes = data)"
        auto-load
    />
    <FetchData
        url="SiiTypeInvoiceOuts"
        :where="{ code: { like: 'R%' } }"
        @on-fetch="(data) => (siiTypeInvoiceOuts = data)"
        auto-load
    />
    <FetchData
        url="InvoiceCorrectionTypes"
        @on-fetch="(data) => (invoiceCorrectionTypes = data)"
        auto-load
    />
    <CrudModel
        ref="invoiceInCorrectionRef"
        v-if="invoiceIn"
        data-key="InvoiceInCorrection"
        url="InvoiceInCorrections"
        :filter="filter"
        auto-load
        v-model:selected="rowsSelected"
        primary-key="correctingFk"
        @save-changes="onSave"
    >
        <template #body="{ rows }">
            <QTable
                v-model:selected="rowsSelected"
                :columns="columns"
                :rows="rows"
                row-key="$index"
                selection="single"
                :grid="$q.screen.lt.sm"
                :pagination="{ rowsPerPage: 0 }"
            >
                <template #body-cell-type="{ row, col }">
                    <QTd>
                        <VnSelect
                            class="q-pb-md"
                            v-model="row[col.model]"
                            :options="col.options"
                            :option-value="col.optionValue"
                            :option-label="col.optionLabel"
                            :readonly="row.invoiceIn.isBooked"
                        />
                    </QTd>
                </template>
                <template #body-cell-class="{ row, col }">
                    <QTd>
                        <VnSelect
                            class="q-pb-md"
                            v-model="row[col.model]"
                            :options="col.options"
                            :option-value="col.optionValue"
                            :option-label="col.optionLabel"
                            :rules="[requiredFieldRule]"
                            :readonly="row.invoiceIn.isBooked"
                        />
                    </QTd>
                </template>
                <template #body-cell-reason="{ row, col }">
                    <QTd>
                        <VnSelect
                            class="q-pb-md"
                            v-model="row[col.model]"
                            :options="col.options"
                            :option-value="col.optionValue"
                            :option-label="col.optionLabel"
                            :rules="[requiredFieldRule]"
                            :readonly="row.invoiceIn.isBooked"
                        />
                    </QTd>
                </template>
            </QTable>
        </template>
    </CrudModel>
</template>
<style lang="scss" scoped></style>
<i18n>
es:
    Original invoice: Factura origen
</i18n>