salix-front/src/pages/Route/Vehicle/Card/VehicleBasicData.vue

<script setup>
import { ref } from 'vue';
import FormModel from 'components/FormModel.vue';
import FetchData from 'src/components/FetchData.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputNumber from 'src/components/common/VnInputNumber.vue';

const warehouses = ref([]);
const companies = ref([]);
const countries = ref([]);
const fuelTypes = ref([]);
const bankPolicies = ref([]);
const deliveryPoints = ref([]);
</script>
<template>
    <FetchData
        url="Warehouses"
        :filter="{ fields: ['id', 'name'] }"
        @on-fetch="(data) => (warehouses = data)"
        auto-load
    />
    <FetchData
        url="Companies"
        :filter="{ fields: ['id', 'code'] }"
        @on-fetch="(data) => (companies = data)"
        auto-load
    />
    <FetchData
        url="Countries"
        :filter="{ fields: ['code'] }"
        @on-fetch="(data) => (countries = data)"
        auto-load
    />
    <FetchData
        url="FuelTypes"
        :filter="{ fields: ['id', 'name'] }"
        @on-fetch="(data) => (fuelTypes = data)"
        auto-load
    />
    <FetchData
        url="DeliveryPoints"
        :filter="{ fields: ['id', 'name'] }"
        @on-fetch="(data) => (deliveryPoints = data)"
        auto-load
    />
    <FormModel model="Vehicle" :url-update="`Vehicles/${$route.params.id}`">
        <template #form="{ data }">
            <VnRow>
                <VnInput v-model="data.description" :label="$t('globals.description')" />
                <VnInput v-model="data.numberPlate" :label="$t('vehicle.numberPlate')" />
            </VnRow>
            <VnRow>
                <VnInput
                    v-model="data.model"
                    :label="$t('globals.model')"
                    :required="true"
                />
                <VnSelect
                    url="VehicleTypes"
                    v-model="data.vehicleTypeFk"
                    :label="$t('globals.type')"
                />
            </VnRow>
            <VnRow>
                <VnInput
                    v-model="data.tradeMark"
                    :label="$t('vehicle.tradeMark')"
                    :required="true"
                />
                <VnInput v-model="data.chassis" :label="$t('vehicle.chassis')" />
            </VnRow>
            <VnRow>
                <VnSelect
                    v-model="data.fuelTypeFk"
                    :label="$t('globals.fuel')"
                    :options="fuelTypes"
                />
                <VnSelect
                    v-model="data.deliveryPointFk"
                    :label="$t('globals.deliveryPoint')"
                    :options="deliveryPoints"
                />
            </VnRow>
            <VnRow>
                <VnSelect
                    v-model="data.companyFk"
                    :label="$t('globals.company')"
                    :options="companies"
                    option-label="code"
                />
                <VnSelect
                    v-model="data.warehouseFk"
                    :label="$t('globals.warehouse')"
                    :options="warehouses"
                />
            </VnRow>
            <VnRow>
                <VnSelect
                    url="Suppliers"
                    :filter="{ fields: ['id', 'name'] }"
                    v-model="data.supplierFk"
                    :label="$t('globals.supplier')"
                />
                <VnSelect
                    url="Suppliers"
                    :filter="{ fields: ['id', 'name'] }"
                    v-model="data.supplierCoolerFk"
                    :label="$t('vehicle.supplierCooler')"
                />
            </VnRow>
            <VnRow>
                <VnSelect
                    url="BankPolicies"
                    :filter="{ fields: ['id', 'ref'] }"
                    v-model="data.bankPolicyFk"
                    :label="$t('vehicle.leasing')"
                    :options="bankPolicies"
                    option-label="ref"
                    option-value="id"
                />
                <VnInput v-model="data.leasing" :label="$t('vehicle.nLeasing')" />
            </VnRow>
            <VnRow>
                <VnInputNumber v-model="data.import" :label="$t('globals.amount')" />
                <VnInputNumber
                    v-model="data.importCooler"
                    :label="$t('vehicle.amountCooler')"
                />
            </VnRow>
            <VnRow>
                <VnSelect
                    url="Ppes"
                    option-label="id"
                    v-model="data.ppeFk"
                    :label="$t('vehicle.ppe')"
                />
                <VnSelect
                    v-model="data.countryCodeFk"
                    :label="$t('globals.country')"
                    :options="countries"
                    option-label="code"
                    option-value="code"
                />
            </VnRow>
            <VnRow>
                <VnInput v-model="data.vin" :label="$t('vehicle.vin')" />
                <span :style="{ 'align-self': $q.screen.gt.xs ? 'end' : 'unset' }">
                    <QCheckbox
                        v-model="data.isActive"
                        :label="$t('vehicle.isActive')"
                        :false-value="0"
                        :true-value="1"
                        dense
                        class="q-mt-sm"
                    />
                </span>
            </VnRow>
        </template>
    </FormModel>
</template>