add: form create vehicle
This commit is contained in:
Alexandro Uc Santos
@@ -1,5 +1,11 @@
|
|||||||
<script setup>
|
<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({
|
const props = defineProps({
|
||||||
vehicle: {
|
vehicle: {
|
||||||
@@ -10,6 +16,42 @@
|
|||||||
|
|
||||||
defineEmits(['reset-vehicle']);
|
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(() => {
|
const title = computed(() => {
|
||||||
return (props.vehicle) ? 'Editar vehiculo' : 'Agregar vehiculo';
|
return (props.vehicle) ? 'Editar vehiculo' : 'Agregar vehiculo';
|
||||||
});
|
});
|
||||||
@@ -30,13 +72,100 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body form-content">
|
<div class="modal-body form-content">
|
||||||
</div>
|
<form @submit.prevent="saveVehicle" autocomplete="off" class="vehicle-form">
|
||||||
<div class="modal-footer">
|
<div class="row mt-4">
|
||||||
<button
|
<div class="col-lg-6 col-12">
|
||||||
type="button"
|
<label class="custom-label">Tipo de Transporte*</label>
|
||||||
class="btn btn-dark"
|
<TruckTypes
|
||||||
@click="$emit('reset-vehicle')"
|
v-model="vehicleForm.truck_type"
|
||||||
data-dismiss="modal">Cerrar</button>
|
/>
|
||||||
|
<!-- <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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -44,5 +173,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.vehicle-form {
|
||||||
|
padding: 0px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.vehicle-form {
|
||||||
|
padding: 0px 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user