320 lines
8.5 KiB
Vue
320 lines
8.5 KiB
Vue
<template>
|
|
<div>
|
|
<card title="Filtro general">
|
|
<base-input label="Filtro de fechas" v-model="filtro.fechas"></base-input>
|
|
<base-input
|
|
label="Número de presupuestos"
|
|
type="number"
|
|
v-model="filtro.npresupuesto"
|
|
></base-input>
|
|
<base-input
|
|
label="Número de ahorros"
|
|
type="number"
|
|
v-model="filtro.nahorro"
|
|
></base-input>
|
|
<base-button @click="guardarFiltro()" type="info">Guardar</base-button>
|
|
</card>
|
|
<div class="row">
|
|
<card title="Categorias">
|
|
<div class="row">
|
|
<div class="col-8">
|
|
<el-table :data="categorias" border height="500">
|
|
<el-TableColumn prop="name" label="Nombre Categoría" sortable>
|
|
</el-TableColumn>
|
|
|
|
<el-TableColumn prop="icon" label="Icono" sortable>
|
|
<div slot-scope="{ row, $index }">
|
|
<i class="fas text-success fa-2x" :class="[row.icon]"></i>
|
|
</div>
|
|
</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="deleteCategoria(row._id)"
|
|
>
|
|
<i class="fa fa-trash"></i>
|
|
</base-button>
|
|
</el-tooltip>
|
|
</div>
|
|
</el-TableColumn>
|
|
</el-table>
|
|
</div>
|
|
<div class="col-4">
|
|
<form>
|
|
<base-input
|
|
type="text"
|
|
placeholder="Nombre de categoria"
|
|
v-model="newCategoria.name"
|
|
/>
|
|
|
|
<base-input>
|
|
<select class="form-control" v-model="newCategoria.icon">
|
|
<option v-for="icono in iconos">
|
|
{{ icono.icon }}
|
|
</option>
|
|
</select>
|
|
</base-input>
|
|
|
|
<div class="col pull-buttom">
|
|
<base-button
|
|
type="info"
|
|
class="mb-3"
|
|
size="lg"
|
|
@click="enviarCategoria()"
|
|
>Enviar</base-button
|
|
>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</card>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<card title="Metodos de pago">
|
|
<div class="row">
|
|
<div class="col-8">
|
|
<el-table :data="metodos" border height="500">
|
|
<el-TableColumn prop="name" label="Nombre Categoría" sortable>
|
|
</el-TableColumn>
|
|
|
|
<el-TableColumn prop="icon" label="Icono" sortable>
|
|
<div slot-scope="{ row, $index }">
|
|
<i class="fas text-success fa-2x" :class="[row.icon]"></i>
|
|
</div>
|
|
</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="deleteMetodo(row._id)"
|
|
>
|
|
<i class="fa fa-trash"></i>
|
|
</base-button>
|
|
</el-tooltip>
|
|
</div>
|
|
</el-TableColumn>
|
|
</el-table>
|
|
</div>
|
|
<div class="col-4">
|
|
<form>
|
|
<base-input
|
|
placeholder="Nombre pago"
|
|
v-model="newMetodo.name"
|
|
></base-input>
|
|
<base-input>
|
|
<select class="form-control" v-model="newMetodo.icon">
|
|
<option v-for="icono in iconos">
|
|
{{ icono.icon }}
|
|
</option>
|
|
</select>
|
|
</base-input>
|
|
|
|
<div class="col pull-buttom">
|
|
<base-button
|
|
type="info"
|
|
class="mb-3"
|
|
size="lg"
|
|
@click="enviarMetodo()"
|
|
>Enviar</base-button
|
|
>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Table, TableColumn } from "element-ui";
|
|
export default {
|
|
middleware: "authenticated",
|
|
components: {
|
|
[Table.name]: Table,
|
|
[TableColumn.name]: TableColumn,
|
|
},
|
|
mounted() {
|
|
this.getCategorias();
|
|
this.getMetodos();
|
|
this.filtro = JSON.parse(JSON.stringify(this.$store.state.filtro));
|
|
},
|
|
data() {
|
|
return {
|
|
newCategoria: {
|
|
name: "",
|
|
icon: "",
|
|
},
|
|
newMetodo: {
|
|
name: "",
|
|
icon: "",
|
|
},
|
|
|
|
iconos: [
|
|
{ icon: "fa-bell" },
|
|
{ icon: "fa-book" },
|
|
{ icon: "fa-bookmark" },
|
|
{ icon: "fa-adjust" },
|
|
{ icon: "fa-puzzle-piece" },
|
|
{ icon: "fa-heart" },
|
|
{ icon: "fa-hotel" },
|
|
{ icon: "fa-plug" },
|
|
{ icon: "fa-square" },
|
|
{ icon: "fa-truck" },
|
|
{ icon: "fa-bus" },
|
|
{ icon: "fa-university" },
|
|
{ icon: "fa-tasks" },
|
|
{ icon: "fa-shopping-bag" },
|
|
{ icon: "fa-graduation-cap" },
|
|
{ icon: "fa-shopping-cart" },
|
|
{ icon: "fa-microchip" },
|
|
{ icon: "fa-bath" },
|
|
{ icon: "fa-star" },
|
|
{ icon: "fa-suitcase" },
|
|
{ icon: "fa-tablet" },
|
|
{ icon: "fa-terminal" },
|
|
{ icon: "fa-address-card" },
|
|
{ icon: "fa-credit-card" },
|
|
{ icon: "fa-paypal" },
|
|
{ icon: "fa-cc-mastercard" },
|
|
{ icon: "fa-cc-visa" },
|
|
{ icon: "fa-money" },
|
|
{ icon: "fa-bank" },
|
|
],
|
|
categorias: [],
|
|
metodos: [],
|
|
filtro: {
|
|
fechas: "",
|
|
npresupuesto: 0,
|
|
nahorro: 0
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
guardarFiltro() {
|
|
this.$store.commit("actualizarFiltro", this.filtro);
|
|
},
|
|
enviarCategoria() {
|
|
const axiosHeader = {
|
|
headers: {
|
|
token: this.$store.state.auth.token,
|
|
},
|
|
};
|
|
const toSend = this.newCategoria;
|
|
|
|
this.$axios
|
|
.post("/categoria", toSend, axiosHeader)
|
|
.then((res) => {
|
|
this.getCategorias();
|
|
})
|
|
.catch((e) => {
|
|
this.$notify({
|
|
type: "danger",
|
|
icon: "tim-icons icon-alert-circle-exc",
|
|
message: JSON.parse(e.request.response).error,
|
|
});
|
|
});
|
|
},
|
|
|
|
getCategorias() {
|
|
const axiosHeader = {
|
|
headers: {
|
|
token: this.$store.state.auth.token,
|
|
},
|
|
};
|
|
this.$axios
|
|
.get("/categoria", axiosHeader)
|
|
.then((res) => {
|
|
this.categorias = res.data.data;
|
|
this.$store.commit("setCategorias", this.categorias);
|
|
})
|
|
.catch((e) => console.log(e));
|
|
},
|
|
deleteCategoria(id) {
|
|
const axiosHeader = {
|
|
headers: {
|
|
token: this.$store.state.auth.token,
|
|
},
|
|
params: {
|
|
id: id,
|
|
},
|
|
};
|
|
this.$axios
|
|
.delete("/categoria", axiosHeader)
|
|
.then((res) => {
|
|
this.getCategorias();
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
});
|
|
},
|
|
enviarMetodo() {
|
|
const axiosHeader = {
|
|
headers: {
|
|
token: this.$store.state.auth.token,
|
|
},
|
|
};
|
|
const toSend = this.newMetodo;
|
|
|
|
this.$axios
|
|
.post("/metodo", toSend, axiosHeader)
|
|
.then((res) => {
|
|
this.getMetodos();
|
|
})
|
|
.catch((e) => {
|
|
this.$notify({
|
|
type: "danger",
|
|
icon: "tim-icons icon-alert-circle-exc",
|
|
message: JSON.parse(e.request.response).error,
|
|
});
|
|
});
|
|
},
|
|
|
|
getMetodos() {
|
|
const axiosHeader = {
|
|
headers: {
|
|
token: this.$store.state.auth.token,
|
|
},
|
|
};
|
|
this.$axios
|
|
.get("/metodo", axiosHeader)
|
|
.then((res) => {
|
|
this.metodos = res.data.data;
|
|
this.$store.commit("setMetodos", this.metodos);
|
|
})
|
|
.catch((e) => console.log(e));
|
|
},
|
|
deleteMetodo(id) {
|
|
const axiosHeader = {
|
|
headers: {
|
|
token: this.$store.state.auth.token,
|
|
},
|
|
params: {
|
|
id: id,
|
|
},
|
|
};
|
|
this.$axios
|
|
.delete("/metodo", axiosHeader)
|
|
.then((res) => {
|
|
this.getMetodos();
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |