calculator modal
This commit is contained in:
Alexandro Uc Santos
411
src/components/CreateBudgetModal.vue
Normal file
411
src/components/CreateBudgetModal.vue
Normal file
@@ -0,0 +1,411 @@
|
||||
<script setup>
|
||||
import { computed, reactive } from 'vue';
|
||||
import CustomInput from './ui/CustomInput.vue';
|
||||
import Products from './ui/Products.vue';
|
||||
import TruckTypes from './ui/TruckTypes.vue';
|
||||
|
||||
|
||||
defineProps({
|
||||
budget: {
|
||||
type: Object,
|
||||
required: false
|
||||
}
|
||||
})
|
||||
|
||||
const budgetForm = reactive({
|
||||
client: '',
|
||||
material: '',
|
||||
origin: '',
|
||||
destination: '',
|
||||
num_tons: 0.0,
|
||||
price_per_ton: 0.0,
|
||||
tonnage: 0.0,
|
||||
pickup_distance: 0.0,
|
||||
delivery_distance: 0.0,
|
||||
warehouse_distance: 0.0,
|
||||
cost_per_liter: 0.0,
|
||||
fuel_price_per_liter: 0.0,
|
||||
other_fuel_expenses: 0.0,
|
||||
driver_salary: 0.0,
|
||||
accomadation_allowance: 0.0,
|
||||
other_administrative_expenses: 0.0,
|
||||
total_administrative_expenses: 0.0,
|
||||
total_before_tax: 0.0,
|
||||
total_utility_per_km: 0.0,
|
||||
total_profit: 0.0,
|
||||
profit_percentage: 0.0,
|
||||
total_travel: 0.0,
|
||||
total_fuel: 0.0,
|
||||
total_fuel_cost: 0.0,
|
||||
budgetproduct:[],
|
||||
budgetTrucktypes:[],
|
||||
})
|
||||
|
||||
const clearMoal = () => {
|
||||
// loadsStore.openProposalsModal = false;
|
||||
// loadsStore.currentLoad = false;
|
||||
}
|
||||
|
||||
// const total = computed(() => {
|
||||
|
||||
// });
|
||||
|
||||
const totalTravel = computed(() => {
|
||||
budgetForm.total_travel = budgetForm.warehouse_distance * 1 + budgetForm.delivery_distance * 1 + budgetForm.pickup_distance * 1;
|
||||
return budgetForm.total_travel;
|
||||
});
|
||||
|
||||
const totalFuel = computed(() => {
|
||||
budgetForm.total_fuel = budgetForm.total_travel / budgetForm.cost_per_liter;
|
||||
console.log(budgetForm.total_travel)
|
||||
console.log(budgetForm.cost_per_liter)
|
||||
console.log('TOTAL: ', budgetForm.total_fuel);
|
||||
return isNaN(budgetForm.total_fuel) ? '0.0' : parseFloat(budgetForm.total_fuel).toFixed(2);
|
||||
});
|
||||
|
||||
const totalFuelCost = computed(() => {
|
||||
budgetForm.total_fuel_cost = budgetForm.total_fuel * budgetForm.fuel_price_per_liter;
|
||||
return "$" + (isNaN(budgetForm.total_fuel_cost) ? '0.0' : parseFloat(budgetForm.total_fuel_cost).toFixed(2));
|
||||
});
|
||||
|
||||
const totalAdminExpenses = computed(() => {
|
||||
budgetForm.total_administrative_expenses = budgetForm.driver_salary*1 + budgetForm.accomadation_allowance*1 + budgetForm.other_administrative_expenses*1;
|
||||
return "$" + (isNaN(budgetForm.total_administrative_expenses) ? '0.0' : parseFloat(budgetForm.total_administrative_expenses).toFixed(2));
|
||||
});
|
||||
|
||||
const totalBeforeTax = computed(() => {
|
||||
budgetForm.total_before_tax = budgetForm.tonnage * budgetForm.price_per_ton;
|
||||
return "$" + (isNaN(budgetForm.total_before_tax) ? '0.0' : parseFloat(budgetForm.total_before_tax).toFixed(2));
|
||||
});
|
||||
|
||||
const totalUtilityPerKm = computed(() => {
|
||||
budgetForm.total_utility_per_km = budgetForm.total_before_tax / budgetForm.total_travel;
|
||||
return "$" + (isNaN(budgetForm.total_utility_per_km) ? '0.0' : parseFloat(budgetForm.total_utility_per_km).toFixed(2));
|
||||
});
|
||||
|
||||
const totalProfit = computed(() => {
|
||||
budgetForm.total_profit = budgetForm.total_before_tax - budgetForm.total_fuel_cost - budgetForm.other_fuel_expenses - budgetForm.driver_salary - budgetForm.accomadation_allowance - budgetForm.other_administrative_expenses;
|
||||
return "$" + (isNaN(budgetForm.total_profit) ? '0.0' : parseFloat(budgetForm.total_profit).toFixed(2));
|
||||
});
|
||||
|
||||
const totalPercentage = computed(() => {
|
||||
budgetForm.profit_percentage = budgetForm.total_profit / budgetForm.total_before_tax * 100;
|
||||
return (isNaN(budgetForm.profit_percentage) ? '0.0' : parseFloat(budgetForm.profit_percentage).toFixed(2)) + "%";
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="modal fade" id="budgetModal" tabindex="-1" role="dialog" aria-labelledby="editcompany" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="title mt-2 mb-3">Calculadora</h2>
|
||||
<button
|
||||
id="btnClosebudgetModal"
|
||||
type="button"
|
||||
@click="clearMoal"
|
||||
class="close bg-white" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body form-content">
|
||||
<div class="container-fluid">
|
||||
<form action="" @submit.prevent="saveBudget" autocomplete="off" method="post">
|
||||
<div class="calculator-card">
|
||||
<div class="calculator-card__title">
|
||||
<h2>CALCULADOR DE TARIFAS</h2>
|
||||
</div>
|
||||
<div class="calculator-card__subtitle">
|
||||
<h4>DATOS DE CARGA</h4>
|
||||
</div>
|
||||
<div class="calculator-card__body">
|
||||
<div class="calculator-card__loads_data">
|
||||
<CustomInput
|
||||
label="CLIENTE*"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="client"
|
||||
:required="true"
|
||||
:error="(!budgetForm.client) ? 'Cliente es requerido' : null"
|
||||
v-model:field="budgetForm.client"
|
||||
/>
|
||||
<div class="mb-4 mt-3">
|
||||
<label class="custom-label">MATERIAL</label>
|
||||
<Products
|
||||
v-model="budgetForm.budgetproduct"
|
||||
/>
|
||||
</div>
|
||||
<CustomInput
|
||||
label="ORIGEN"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="origin"
|
||||
v-model:field="budgetForm.origin"
|
||||
/>
|
||||
<CustomInput
|
||||
label="DESTINO"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="destination"
|
||||
v-model:field="budgetForm.destination"
|
||||
/>
|
||||
<div class="mb-4 mt-3">
|
||||
<label class="custom-label">TIPO DE CAMIÓN</label>
|
||||
<TruckTypes
|
||||
v-model="budgetForm.budgetTrucktypes"
|
||||
/>
|
||||
</div>
|
||||
<CustomInput
|
||||
label="TONELADAS"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="num_tons"
|
||||
v-model:field="budgetForm.num_tons"
|
||||
/>
|
||||
<CustomInput
|
||||
label="PRECIO POR TONELADA"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="price_per_ton"
|
||||
v-model:field="budgetForm.price_per_ton"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calculator-card__subtitle">
|
||||
<h4>TARIFA / KILOMETRAJE</h4>
|
||||
</div>
|
||||
<div class="calculator-card__body">
|
||||
<div class="calculator-card__loads_data">
|
||||
<CustomInput
|
||||
label="TONELAJE APROXIMADO DE CARGA"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="tonnage"
|
||||
v-model:field="budgetForm.tonnage"
|
||||
/>
|
||||
<CustomInput
|
||||
label="PRECIO POR TONELADA"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="price_per_ton"
|
||||
v-model:field="budgetForm.price_per_ton"
|
||||
/>
|
||||
<CustomInput
|
||||
label="ORIGEN DEL CAMION AL ORIGEN DE CARGA(KM)"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="pickup_distance"
|
||||
v-model:field="budgetForm.pickup_distance"
|
||||
/>
|
||||
<CustomInput
|
||||
label="ORIGEN DE CARGA A DESTINO DE DESCARGA(KM)"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="delivery_distance"
|
||||
v-model:field="budgetForm.delivery_distance"
|
||||
/>
|
||||
<CustomInput
|
||||
label="DESTINO DE DESCARGA AL PATIO-BASE (KM)"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="warehouse_distance"
|
||||
v-model:field="budgetForm.warehouse_distance"
|
||||
/>
|
||||
<div class="calculator-card__totals">
|
||||
<div>
|
||||
<h6>TOTAL KM RECORRIDOS</h6>
|
||||
</div>
|
||||
<div>
|
||||
{{ totalTravel }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calculator-card__subtitle">
|
||||
<h4>COSTOS DIRECTOS CAMION</h4>
|
||||
</div>
|
||||
<div class="calculator-card__body">
|
||||
<div class="calculator-card__loads_data">
|
||||
<CustomInput
|
||||
label="RENDIMIENTO CAMION - LITROS POR KILOMETRO RECORRIDO"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="cost_per_liter"
|
||||
v-model:field="budgetForm.cost_per_liter"
|
||||
/>
|
||||
<CustomInput
|
||||
label="PRECIO DEL DIESEL POR LITRO"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="fuel_price_per_liter"
|
||||
v-model:field="budgetForm.fuel_price_per_liter"
|
||||
/>
|
||||
<CustomInput
|
||||
label="OTROS GASTOS"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="other_fuel_expenses"
|
||||
v-model:field="budgetForm.other_fuel_expenses"
|
||||
/>
|
||||
<div class="calculator-card__totals">
|
||||
<div>
|
||||
<h6>TOTAL LITROS DE DIESEL CONSUMIDOS</h6>
|
||||
</div>
|
||||
<div>
|
||||
{{ totalFuel }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="calculator-card__totals">
|
||||
<div>
|
||||
<h6>TOTAL COSTO DEL DIESEL</h6>
|
||||
</div>
|
||||
<div>
|
||||
{{ totalFuelCost }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calculator-card__subtitle">
|
||||
<h4>SUELDO OPERADOR</h4>
|
||||
</div>
|
||||
<div class="calculator-card__body">
|
||||
<div class="calculator-card__loads_data">
|
||||
<CustomInput
|
||||
label="GASTOS ADMINISTRATIVOS"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="driver_salary"
|
||||
v-model:field="budgetForm.driver_salary"
|
||||
/>
|
||||
<CustomInput
|
||||
label="CASETAS"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="accomadation_allowance"
|
||||
v-model:field="budgetForm.accomadation_allowance"
|
||||
/>
|
||||
<CustomInput
|
||||
label="OTROS GASTOS"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="other_administrative_expenses"
|
||||
v-model:field="budgetForm.other_administrative_expenses"
|
||||
/>
|
||||
<div class="calculator-card__totals">
|
||||
<div>
|
||||
<h6>GASTOS ADMINISTRATIVOS TOTALES</h6>
|
||||
</div>
|
||||
<div>
|
||||
{{ totalAdminExpenses }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calculator-card__subtitle">
|
||||
<h4>UTILIDAD / PERDIDA</h4>
|
||||
</div>
|
||||
<div class="calculator-card__body">
|
||||
<div class="calculator-card__loads_data">
|
||||
<div class="calculator-card__totals">
|
||||
<div>
|
||||
<h6>TOTAL ANTES DE IVA</h6>
|
||||
</div>
|
||||
<div>
|
||||
{{ totalBeforeTax }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="calculator-card__totals">
|
||||
<div>
|
||||
<h6>TOTAL UTILIDAD POR KILOMETRO</h6>
|
||||
</div>
|
||||
<div>
|
||||
{{ totalUtilityPerKm }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="calculator-card__totals">
|
||||
<div>
|
||||
<h6>TOTAL UTILIDAD</h6>
|
||||
</div>
|
||||
<div>
|
||||
{{ totalProfit }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="calculator-card__totals">
|
||||
<div>
|
||||
<h6>PORCENTAJE DE UTILIDAD</h6>
|
||||
</div>
|
||||
<div>
|
||||
{{ totalPercentage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<button class="btn btn-primary myshipper-btn" type="submit">Guardar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-dark"
|
||||
@click="clearMoal"
|
||||
data-dismiss="modal">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.form-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
border: 1px solid grey;
|
||||
}
|
||||
|
||||
.calculator-card {
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
width: 70%;
|
||||
border: 1px solid grey;
|
||||
}
|
||||
|
||||
.calculator-card__title {
|
||||
background-color: #323030;
|
||||
padding: 10px 20px;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calculator-card__subtitle {
|
||||
background-color: #50b1e5;
|
||||
padding: 10px 20px;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calculator-card__loads_data {
|
||||
padding: 24px 24px;
|
||||
}
|
||||
|
||||
.calculator-card__totals {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user