add: form create vehicle
This commit is contained in:
Alexandro Uc Santos
@@ -1,5 +1,11 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import CustomInput from './ui/CustomInput.vue';
|
||||
import TruckTypes from './ui/TruckTypes.vue';
|
||||
import Segments from './ui/Segments.vue';
|
||||
import States from './ui/States.vue';
|
||||
import Cities from './ui/Cities.vue';
|
||||
import Spiner from './ui/Spiner.vue';
|
||||
|
||||
const props = defineProps({
|
||||
vehicle: {
|
||||
@@ -10,6 +16,42 @@
|
||||
|
||||
defineEmits(['reset-vehicle']);
|
||||
|
||||
const initState = {
|
||||
truck_type: '',
|
||||
categories: '',
|
||||
vehicle_number: '',
|
||||
city: '',
|
||||
state: '',
|
||||
trailer_plate_1: '',
|
||||
trailer_plate_2: '',
|
||||
circulation_serial_number: '',
|
||||
notes: '',
|
||||
destino: '',
|
||||
}
|
||||
|
||||
const vehicleForm = reactive({
|
||||
...initState
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if(props.vehicle) {
|
||||
vehicleForm.truck_type = {
|
||||
meta_value: props.vehicle.truck_type
|
||||
};
|
||||
vehicleForm.categories = props.vehicle.categories;
|
||||
vehicleForm.vehicle_number = props.vehicle.vehicle_number,
|
||||
vehicleForm.city = {city_name: props.vehicle.city},
|
||||
vehicleForm.state = {state_name: props.vehicle.state},
|
||||
vehicleForm.trailer_plate_1 = props.vehicle.trailer_plate_1;
|
||||
vehicleForm.trailer_plate_2 = props.vehicle.trailer_plate_2;
|
||||
vehicleForm.circulation_serial_number = props.vehicle.circulation_serial_number;
|
||||
vehicleForm.notes = props.vehicle.notes;
|
||||
vehicleForm.destino = {city_name: props.vehicle.destino};
|
||||
}
|
||||
})
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const title = computed(() => {
|
||||
return (props.vehicle) ? 'Editar vehiculo' : 'Agregar vehiculo';
|
||||
});
|
||||
@@ -30,13 +72,100 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body form-content">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-dark"
|
||||
@click="$emit('reset-vehicle')"
|
||||
data-dismiss="modal">Cerrar</button>
|
||||
<form @submit.prevent="saveVehicle" autocomplete="off" class="vehicle-form">
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-6 col-12">
|
||||
<label class="custom-label">Tipo de Transporte*</label>
|
||||
<TruckTypes
|
||||
v-model="vehicleForm.truck_type"
|
||||
/>
|
||||
<!-- <span class="error-msg" v-if="submited && errors.truckType">{{ errors.truckType }}</span> -->
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<label class="custom-label">Segmento del transporte*</label>
|
||||
<Segments
|
||||
v-model="vehicleForm.categories"
|
||||
:multiple="true"
|
||||
/>
|
||||
<!-- <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-6 col-12">
|
||||
<CustomInput
|
||||
label="Número de Serie*"
|
||||
name="vehicle_number"
|
||||
v-model:field="vehicleForm.vehicle_number"
|
||||
:filled="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<CustomInput
|
||||
label="Placas Tracto Camión"
|
||||
name="circulation_serial_number"
|
||||
v-model:field="vehicleForm.circulation_serial_number"
|
||||
:filled="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<CustomInput
|
||||
label="Placas Remolque 1"
|
||||
name="trailer_plate_1"
|
||||
v-model:field="vehicleForm.trailer_plate_1"
|
||||
:filled="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<CustomInput
|
||||
label="Placas Remolque 1"
|
||||
name="trailer_plate_2"
|
||||
v-model:field="vehicleForm.trailer_plate_2"
|
||||
:filled="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<label class="custom-label">Base de carga por Estado*</label>
|
||||
<States
|
||||
v-model="vehicleForm.state"
|
||||
/>
|
||||
<!-- <span class="error-msg" v-if="submited && errors.truckType">{{ errors.truckType }}</span> -->
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<label class="custom-label">Base de Carga por Municipio*</label>
|
||||
<Cities
|
||||
v-model="vehicleForm.city"
|
||||
/>
|
||||
<!-- <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12 mt-4">
|
||||
<label class="custom-label">Destino*</label>
|
||||
<Cities
|
||||
v-model="vehicleForm.destino"
|
||||
/>
|
||||
<!-- <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span> -->
|
||||
</div>
|
||||
<div class="d-flex flex-column mt-4">
|
||||
<label class="custom-label" for="notes">Información Adicional del Transporte:</label>
|
||||
<textarea
|
||||
class="custom-input-light"
|
||||
name="notes"
|
||||
id="notes"
|
||||
placeholder="Escribe aqui..."
|
||||
v-model="vehicleForm.notes"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<Spiner v-if="loading"/>
|
||||
<button
|
||||
v-else
|
||||
class="btn btn-dark" type="submit">Guardar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,5 +173,13 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vehicle-form {
|
||||
padding: 0px 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.vehicle-form {
|
||||
padding: 0px 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user