177 lines
4.2 KiB
Vue
177 lines
4.2 KiB
Vue
<template>
|
|
<div>
|
|
<card>
|
|
<div class="row">
|
|
<base-input class="col-6">
|
|
<select class="form-control">
|
|
<option>Presupuesto</option>
|
|
<option>Presupuesto 2</option>
|
|
</select>
|
|
</base-input>
|
|
|
|
<div class="row pull-right pull-buttom">
|
|
<div class="col-12">
|
|
<Fpresupuesto
|
|
:newPresupuesto="newPresupuesto"
|
|
:savePresupuesto="savePresupuesto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</card>
|
|
<card title="Presupuesto">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
|
|
|
|
<el-table
|
|
:data="selectedPresupuesto.datos"
|
|
border
|
|
empty-text="No hay items"
|
|
stripe
|
|
style="width: 100%"
|
|
height="300"
|
|
>
|
|
|
|
<el-TableColumn prop="detalle" label="Detalle" sortable>
|
|
</el-TableColumn>
|
|
<el-TableColumn prop="valor" label="Valor" sortable>
|
|
</el-TableColumn>
|
|
|
|
<el-TableColumn>
|
|
<div slot-scope="{ row, $index }">
|
|
|
|
|
|
<el-tooltip content="Delete" effect="light">
|
|
<base-button
|
|
type="danger"
|
|
icon
|
|
size="sm"
|
|
class="btn-link"
|
|
@click="deleteIngreso(row._id)"
|
|
>
|
|
<i class="el-icon-delete-solid"></i>
|
|
</base-button>
|
|
</el-tooltip>
|
|
</div>
|
|
</el-TableColumn>
|
|
</el-table>
|
|
|
|
</div>
|
|
|
|
<div class="col-6">
|
|
<base-input v-model="newItem.detalle" label="Descripción">
|
|
</base-input>
|
|
<base-input v-model="newItem.valor" type="Number">
|
|
</base-input>
|
|
<base-input>
|
|
<select class="form-control" v-model="newItem.tipo">
|
|
<option>Ingreso</option>
|
|
<option>Egreso</option>
|
|
</select>
|
|
</base-input>
|
|
<base-button
|
|
|
|
type="info"
|
|
class="mb-3 col-12"
|
|
size="lg"
|
|
@click="addItem()"
|
|
>Guardar</base-button
|
|
>
|
|
|
|
</div>
|
|
</div>
|
|
</card>
|
|
|
|
<card>
|
|
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<b>Ingresos: </b> {{formatMoneda(totalIngresos)}}
|
|
</div>
|
|
<div class="col-4">
|
|
<b>Egreso:</b> <span>{{formatMoneda(totalEgresos)}} </span>
|
|
</div>
|
|
<div class="col-4">
|
|
<b>Total:<span :class="[total<0?'text-danger':'text-success']"> {{formatMoneda(total)}}</span></b>
|
|
</div>
|
|
</div>
|
|
|
|
</card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Table, TableColumn } from "element-ui";
|
|
|
|
export default {
|
|
components: {
|
|
|
|
[Table.name]: Table,
|
|
[TableColumn.name]: TableColumn,
|
|
},
|
|
middleware: "authenticated",
|
|
data() {
|
|
return {
|
|
newPresupuesto: {
|
|
fecha: "",
|
|
detalle: "",
|
|
},
|
|
selectedPresupuesto:{
|
|
|
|
_id:"",
|
|
fecha:"",
|
|
nombrePresupuesto:"",
|
|
datos:[]
|
|
|
|
},
|
|
newItem: {
|
|
detalle:"",
|
|
valor: 0,
|
|
tipo:"Egreso"
|
|
|
|
},
|
|
|
|
presupuestos: [],
|
|
totalIngresos:0,
|
|
totalEgresos:0,
|
|
total:0
|
|
};
|
|
},
|
|
methods: {
|
|
savePresupuesto() {},
|
|
addItem() {
|
|
this.selectedPresupuesto.datos.push(JSON.parse(JSON.stringify(this.newItem)))
|
|
this.sumItems()
|
|
},
|
|
sumItems(){
|
|
|
|
this.totalIngresos=this.selectedPresupuesto.datos.reduce((acc,x) => x.tipo ==="Ingreso"?acc + Number(x.valor):acc,0)
|
|
|
|
this.totalEgresos = this.selectedPresupuesto.datos.reduce((acc,x) => x.tipo==="Egreso"?acc + Number(x.valor):acc,0)
|
|
this.total = this.totalIngresos - this.totalEgresos
|
|
|
|
},
|
|
formatMoneda(dato) {
|
|
var num = dato;
|
|
if (!isNaN(num)) {
|
|
num = Math.abs(num)
|
|
.toString()
|
|
.split("")
|
|
.reverse()
|
|
.join("")
|
|
.replace(/(?=\d*\.?)(\d{3})/g, "$1.");
|
|
num = num.split("").reverse().join("").replace(/^[\.]/, "");
|
|
return `$ ${num}`;
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.newPresupuesto.fecha = this.$store.state.fecha;
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |