Esqueleto presupuesto
This commit is contained in:
@@ -34,6 +34,7 @@
|
||||
prop="categoria"
|
||||
label="Categoria"
|
||||
sortable
|
||||
|
||||
></el-TableColumn>
|
||||
<el-TableColumn>
|
||||
<div slot-scope="{ row, $index }">
|
||||
@@ -107,14 +108,23 @@ export default {
|
||||
openForm: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
mounted() {
|
||||
|
||||
|
||||
|
||||
// this.$store.dispatch("getCategorias");
|
||||
//this.$store.dispatch("getMetodos");
|
||||
this.newCompra.fecha = this.$store.state.fecha;
|
||||
this.$store.dispatch("getCategorias");
|
||||
this.$store.dispatch("getMetodos");
|
||||
this.categorias = this.$store.state.categorias;
|
||||
this.metodos_pago = this.$store.state.metodos_de_pago;
|
||||
|
||||
this.getCompras();
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
cell(row, column, cellValue, index) {
|
||||
@@ -203,9 +213,10 @@ export default {
|
||||
this.newCompra.categoria = "";
|
||||
this.isUpdate = false;
|
||||
},
|
||||
getIcon(name) {
|
||||
const found = this.$store.state.categorias.find((ic) => ic.name === name);
|
||||
console.log(found);
|
||||
getIcon(row, column, cellValue, index) {
|
||||
const found = this.$store.state.categorias.filter((ic) => ic.name === cellValue)[0];
|
||||
//console.log(found);
|
||||
return `<i class="${found.icon}"></i>${cellValue}`
|
||||
},
|
||||
|
||||
formatMoneda(dato) {
|
||||
|
||||
@@ -1,17 +1,258 @@
|
||||
<template>
|
||||
<div>
|
||||
<Prueba />
|
||||
<div class="row">
|
||||
<card class="col-12">
|
||||
<el-table
|
||||
:data="
|
||||
ingresos.filter(
|
||||
(data) =>
|
||||
!search ||
|
||||
data.detalle.toLowerCase().includes(search.toLowerCase()) ||
|
||||
data.fecha.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
"
|
||||
border
|
||||
empty-text="No hay compras realizadas"
|
||||
stripe
|
||||
:summary-method="getSummaries"
|
||||
show-summary
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-TableColumn prop="fecha" label="Fecha" sortable></el-TableColumn>
|
||||
<el-TableColumn prop="detalle" label="Detalle" sortable>
|
||||
</el-TableColumn>
|
||||
<el-TableColumn prop="valor" label="Valor" sortable :formatter="cell">
|
||||
</el-TableColumn>
|
||||
|
||||
<el-TableColumn>
|
||||
<div slot-scope="{ row, $index }">
|
||||
<el-tooltip content="Edit" effect="light">
|
||||
<base-button
|
||||
type="success"
|
||||
icon
|
||||
size="sm"
|
||||
class="btn-link"
|
||||
@click="updateIngresoClic($index)"
|
||||
>
|
||||
<i class="el-icon-edit"></i>
|
||||
</base-button>
|
||||
</el-tooltip>
|
||||
<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>
|
||||
<template slot="header" slot-scope="scope">
|
||||
<el-input v-model="search" size="mini" placeholder="Buscar" />
|
||||
</template>
|
||||
</el-TableColumn>
|
||||
</el-table>
|
||||
</card>
|
||||
<Fingreso
|
||||
|
||||
:newIngreso="newIngreso"
|
||||
:saveIngreso="saveIngreso"
|
||||
:updateIngreso="updateIngreso"
|
||||
:isUpdate="isUpdate"
|
||||
:openForm="openForm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { Table, TableColumn } from "element-ui";
|
||||
import { Select, Option } from "element-ui";
|
||||
export default {
|
||||
middleware: 'authenticated',
|
||||
middleware: "authenticated",
|
||||
components: {
|
||||
[Table.name]: Table,
|
||||
[TableColumn.name]: TableColumn,
|
||||
[Option.name]: Option,
|
||||
[Select.name]: Select,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
newIngreso: {
|
||||
fecha: "",
|
||||
detalle: "",
|
||||
valor: 0,
|
||||
},
|
||||
ingresos: [],
|
||||
search: "",
|
||||
isUpdate: false,
|
||||
openForm: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// this.$store.dispatch("getCategorias");
|
||||
//this.$store.dispatch("getMetodos");
|
||||
this.newIngreso.fecha = this.$store.state.fecha;
|
||||
|
||||
|
||||
|
||||
}
|
||||
this.getIngresos();
|
||||
},
|
||||
|
||||
methods: {
|
||||
cell(row, column, cellValue, index) {
|
||||
return this.formatMoneda(cellValue);
|
||||
},
|
||||
getIngresos() {
|
||||
const axiosHeader = {
|
||||
headers: {
|
||||
token: this.$store.state.auth.token,
|
||||
},
|
||||
};
|
||||
this.$axios
|
||||
.get("/ingreso", axiosHeader)
|
||||
.then((res) => {
|
||||
console.log(res.data.data);
|
||||
this.ingresos = res.data.data;
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
},
|
||||
saveIngreso() {
|
||||
if (this.checkFormulario() === false) {
|
||||
return;
|
||||
}
|
||||
const axiosHeader = {
|
||||
headers: {
|
||||
token: this.$store.state.auth.token,
|
||||
},
|
||||
};
|
||||
const toSend = this.newIngreso;
|
||||
console.log(axiosHeader.data);
|
||||
this.$axios
|
||||
.post("/ingreso", toSend, axiosHeader)
|
||||
.then((res) => {
|
||||
this.clearFormIngreso();
|
||||
console.log(res.data.status);
|
||||
this.getIngresos();
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
},
|
||||
updateIngreso(id) {
|
||||
const axiosHeader = {
|
||||
headers: {
|
||||
token: this.$store.state.auth.token,
|
||||
},
|
||||
};
|
||||
const toSend = this.newIngreso;
|
||||
console.log(axiosHeader.data);
|
||||
this.$axios
|
||||
.put("/ingreso", toSend, axiosHeader)
|
||||
.then((res) => {
|
||||
this.clearFormIngreso();
|
||||
console.log(res.data.status);
|
||||
this.getIngresos();
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
},
|
||||
updateIngresoClic(id) {
|
||||
this.isUpdate = true;
|
||||
this.newIngreso = JSON.parse(JSON.stringify(this.ingresos[id]));
|
||||
this.openForm = !this.openForm;
|
||||
},
|
||||
|
||||
deleteIngreso(id) {
|
||||
const axiosHeader = {
|
||||
headers: {
|
||||
token: this.$store.state.auth.token,
|
||||
},
|
||||
params: {
|
||||
id: id,
|
||||
},
|
||||
};
|
||||
this.$axios
|
||||
.delete("/ingreso", axiosHeader)
|
||||
.then((res) => {
|
||||
console.log(res.data);
|
||||
this.getIngresos();
|
||||
this.clearFormIngreso();
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
},
|
||||
clearFormIngreso() {
|
||||
this.newIngreso._id = "";
|
||||
this.newIngreso.detalle = "";
|
||||
this.newIngreso.valor = 0;
|
||||
this.isUpdate = false;
|
||||
},
|
||||
|
||||
formatMoneda(dato) {
|
||||
var num = dato;
|
||||
if (!isNaN(num)) {
|
||||
num = num
|
||||
.toString()
|
||||
.split("")
|
||||
.reverse()
|
||||
.join("")
|
||||
.replace(/(?=\d*\.?)(\d{3})/g, "$1.");
|
||||
num = num.split("").reverse().join("").replace(/^[\.]/, "");
|
||||
//return '$' +num;
|
||||
return `$ ${num}`;
|
||||
}
|
||||
},
|
||||
|
||||
getSummaries(param) {
|
||||
const { columns, data } = param;
|
||||
const sums = [];
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = "Valor total";
|
||||
return;
|
||||
}
|
||||
const values = data.map((item) => Number(item[column.property]));
|
||||
if (!values.every((value) => isNaN(value))) {
|
||||
sums[index] = this.formatMoneda(
|
||||
values.reduce((prev, curr) => {
|
||||
const value = Number(curr);
|
||||
if (!isNaN(value)) {
|
||||
return prev + curr;
|
||||
} else {
|
||||
return prev;
|
||||
}
|
||||
}, 0)
|
||||
);
|
||||
} else {
|
||||
sums[index] = "";
|
||||
}
|
||||
});
|
||||
|
||||
return sums;
|
||||
},
|
||||
checkFormulario() {
|
||||
if (this.newIngreso.valor === 0) {
|
||||
this.$notify({
|
||||
type: "danger",
|
||||
icon: "tim-icons icon-alert-circle-exc",
|
||||
message: "el campo valor no puede estar en cero :(",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.newIngreso.detalle === "") {
|
||||
this.$notify({
|
||||
type: "danger",
|
||||
icon: "tim-icons icon-alert-circle-exc",
|
||||
message: "el campo detalle no puede estar vacio :(",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,177 @@
|
||||
<template>
|
||||
<h1>Presupuesto</h1>
|
||||
<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>
|
||||
export default {
|
||||
middleware: 'authenticated',
|
||||
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>
|
||||
Reference in New Issue
Block a user