front presupuesto
This commit is contained in:
@@ -3,12 +3,28 @@
|
||||
<card>
|
||||
<div class="row">
|
||||
<base-input class="col-6">
|
||||
<select class="form-control">
|
||||
<option>Presupuesto</option>
|
||||
<option>Presupuesto 2</option>
|
||||
<select
|
||||
class="form-control"
|
||||
@change="onChange()"
|
||||
v-model="selectedPresupuestoName"
|
||||
>
|
||||
<option v-for="presupuesto in presupuestos">
|
||||
{{ presupuesto.nombrePresupuesto }}
|
||||
</option>
|
||||
</select>
|
||||
</base-input>
|
||||
|
||||
<base-button
|
||||
type="danger"
|
||||
icon
|
||||
size="sm"
|
||||
v-if="selectedPresupuesto.nombrePresupuesto !== ''"
|
||||
class="btn-link"
|
||||
@click="deletePresupuesto()"
|
||||
>
|
||||
<i class="el-icon-delete-solid"></i>
|
||||
</base-button>
|
||||
|
||||
<div class="row pull-right pull-buttom">
|
||||
<div class="col-12">
|
||||
<Fpresupuesto
|
||||
@@ -19,84 +35,83 @@
|
||||
</div>
|
||||
</div>
|
||||
</card>
|
||||
<card title="Presupuesto">
|
||||
<card
|
||||
title="Presupuesto"
|
||||
v-if="selectedPresupuesto.nombrePresupuesto !== ''"
|
||||
>
|
||||
<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>
|
||||
: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>
|
||||
<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>
|
||||
<el-TableColumn prop="valor" label="Valor" sortable>
|
||||
</el-TableColumn>
|
||||
|
||||
<el-TableColumn prop="tipo" label="Tipo" 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 v-model="newItem.detalle" label="Descripción">
|
||||
</base-input>
|
||||
<base-input v-model="newItem.valor" type="Number">
|
||||
<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-input>
|
||||
<select class="form-control" v-model="newItem.tipo">
|
||||
<option>Ingreso</option>
|
||||
<option>Egreso</option>
|
||||
</select>
|
||||
</base-input>
|
||||
<base-button
|
||||
|
||||
<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)}}
|
||||
<b>Ingresos: </b> {{ formatMoneda(totalIngresos) }}
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<b>Egreso:</b> <span>{{formatMoneda(totalEgresos)}} </span>
|
||||
<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 class="col-4">
|
||||
<b
|
||||
>Total:<span :class="[total < 0 ? 'text-danger' : 'text-success']">
|
||||
{{ formatMoneda(total) }}</span
|
||||
></b
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -105,54 +120,93 @@
|
||||
import { Table, TableColumn } from "element-ui";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
components: {
|
||||
[Table.name]: Table,
|
||||
[TableColumn.name]: TableColumn,
|
||||
},
|
||||
},
|
||||
middleware: "authenticated",
|
||||
data() {
|
||||
return {
|
||||
newPresupuesto: {
|
||||
fecha: "",
|
||||
detalle: "",
|
||||
nombrePresupuesto: "",
|
||||
},
|
||||
selectedPresupuesto:{
|
||||
|
||||
_id:"",
|
||||
fecha:"",
|
||||
nombrePresupuesto:"",
|
||||
datos:[]
|
||||
|
||||
selectedPresupuesto: {
|
||||
_id: "",
|
||||
nombrePresupuesto: "",
|
||||
datos: [],
|
||||
},
|
||||
selectedPresupuestoName: "",
|
||||
newItem: {
|
||||
detalle:"",
|
||||
_id: "",
|
||||
detalle: "",
|
||||
valor: 0,
|
||||
tipo:"Egreso"
|
||||
|
||||
tipo: "Egreso",
|
||||
},
|
||||
|
||||
presupuestos: [],
|
||||
totalIngresos:0,
|
||||
totalEgresos:0,
|
||||
total:0
|
||||
totalIngresos: 0,
|
||||
totalEgresos: 0,
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
savePresupuesto() {},
|
||||
savePresupuesto() {
|
||||
const axiosHeader = {
|
||||
headers: {
|
||||
token: this.$store.state.auth.token,
|
||||
},
|
||||
};
|
||||
this.newPresupuesto.nombrePresupuesto = this.newPresupuesto.nombrePresupuesto.trim();
|
||||
const toSend = this.newPresupuesto;
|
||||
console.log(axiosHeader.data);
|
||||
this.$axios
|
||||
.post("/presupuesto", toSend, axiosHeader)
|
||||
.then((res) => {
|
||||
console.log(res.data.status);
|
||||
this.getPresupuesto();
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
},
|
||||
addItem() {
|
||||
this.selectedPresupuesto.datos.push(JSON.parse(JSON.stringify(this.newItem)))
|
||||
this.sumItems()
|
||||
//this.selectedPresupuesto.datos.push(JSON.parse(JSON.stringify(this.newItem)))
|
||||
console.log(this.newItem._id);
|
||||
var nameSelected = this.selectedPresupuestoName;
|
||||
console.log(nameSelected);
|
||||
const axiosHeader = {
|
||||
headers: {
|
||||
token: this.$store.state.auth.token,
|
||||
},
|
||||
};
|
||||
const toSend = this.newItem;
|
||||
this.$axios
|
||||
.put("/presupuesto", toSend, axiosHeader)
|
||||
.then((res) => {
|
||||
console.log(res.data.status);
|
||||
this.getPresupuesto();
|
||||
this.selectedPresupuestoName = nameSelected;
|
||||
console.log(this.selectedPresupuestoName);
|
||||
this.selectedPresupuesto = this.presupuestos.find(
|
||||
(x) => x.nombrePresupuesto === this.selectedPresupuestoName
|
||||
);
|
||||
this.newItem._id = this.selectedPresupuesto._id;
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
|
||||
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
|
||||
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) {
|
||||
formatMoneda(dato) {
|
||||
var num = dato;
|
||||
if (!isNaN(num)) {
|
||||
num = Math.abs(num)
|
||||
@@ -165,11 +219,68 @@ export default {
|
||||
return `$ ${num}`;
|
||||
}
|
||||
},
|
||||
getPresupuesto() {
|
||||
const axiosHeader = {
|
||||
headers: {
|
||||
token: this.$store.state.auth.token,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
this.$axios
|
||||
.get("/presupuesto", axiosHeader)
|
||||
.then((res) => {
|
||||
this.presupuestos=[]
|
||||
if (res.data.data.length) {
|
||||
this.presupuestos = res.data.data;
|
||||
this.selectedPresupuesto = this.presupuestos[0];
|
||||
this.selectedPresupuestoName = this.selectedPresupuesto.nombrePresupuesto;
|
||||
this.newItem._id = this.selectedPresupuesto._id;
|
||||
console.log(this.selectedPresupuesto);
|
||||
this.sumItems();
|
||||
}
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
},
|
||||
onChange() {
|
||||
this.selectedPresupuesto = this.presupuestos.find(
|
||||
(x) => x.nombrePresupuesto === this.selectedPresupuestoName
|
||||
);
|
||||
this.newItem._id = this.selectedPresupuesto._id;
|
||||
this.sumItems();
|
||||
},
|
||||
deletePresupuesto() {
|
||||
console.log(this.selectedPresupuesto._id);
|
||||
const axiosHeader = {
|
||||
headers: {
|
||||
token: this.$store.state.auth.token,
|
||||
},
|
||||
params: {
|
||||
id: this.selectedPresupuesto._id,
|
||||
},
|
||||
};
|
||||
this.$axios
|
||||
.delete("/presupuesto", axiosHeader)
|
||||
.then((res) => {
|
||||
console.log(res.data);
|
||||
|
||||
this.selectedPresupuesto = {
|
||||
_id: "",
|
||||
nombrePresupuesto: "",
|
||||
datos: [],
|
||||
}
|
||||
this.selectedPresupuestoName=""
|
||||
this.getPresupuesto();
|
||||
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.newPresupuesto.fecha = this.$store.state.fecha;
|
||||
},
|
||||
// this.newPresupuesto.fecha = this.$store.state.fecha;
|
||||
|
||||
this.getPresupuesto();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user