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>
|
||||||
@@ -5,6 +5,7 @@ import { useAuthStore } from '../stores/auth';
|
|||||||
import Spiner from '../components/ui/Spiner.vue';
|
import Spiner from '../components/ui/Spiner.vue';
|
||||||
import CardBudget from '../components/CardBudget.vue';
|
import CardBudget from '../components/CardBudget.vue';
|
||||||
import CardEmpty from '../components/CardEmpty.vue';
|
import CardEmpty from '../components/CardEmpty.vue';
|
||||||
|
import CreateBudgetModal from '../components/CreateBudgetModal.vue';
|
||||||
|
|
||||||
const companyStore = useCompanyStore();
|
const companyStore = useCompanyStore();
|
||||||
const authStore = useAuthStore();
|
const authStore = useAuthStore();
|
||||||
@@ -59,6 +60,7 @@ import CardEmpty from '../components/CardEmpty.vue';
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<CreateBudgetModal/>
|
||||||
<div>
|
<div>
|
||||||
<h2 class="title my-2">Calculadora</h2>
|
<h2 class="title my-2">Calculadora</h2>
|
||||||
</div>
|
</div>
|
||||||
@@ -73,7 +75,7 @@ import CardEmpty from '../components/CardEmpty.vue';
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="btn-primary-sm radius-sm"
|
class="btn-primary-sm radius-sm"
|
||||||
data-toggle="modal" data-target="#formLoadModal"
|
data-toggle="modal" data-target="#budgetModal"
|
||||||
@click=""
|
@click=""
|
||||||
><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> presupuesto</span></button>
|
><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> presupuesto</span></button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user