158 lines
4.2 KiB
Vue
158 lines
4.2 KiB
Vue
<template>
|
|
<div>
|
|
<div class="row">
|
|
<card class="col-8">
|
|
<el-table
|
|
:data="
|
|
compras.filter(
|
|
(data) =>
|
|
!search ||
|
|
data.detalle.toLowerCase().includes(search.toLowerCase()) ||
|
|
data.fecha.toLowerCase().includes(search.toLowerCase()) ||
|
|
data.metodo_pago.toLowerCase().includes(search.toLowerCase()) ||
|
|
data.categoria.toLowerCase().includes(search.toLowerCase())
|
|
)
|
|
"
|
|
border
|
|
height="900"
|
|
>
|
|
<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> </el-TableColumn>
|
|
|
|
<el-TableColumn prop="metodo_pago" label="Metodo de pago" sortable>
|
|
</el-TableColumn>
|
|
|
|
<el-TableColumn prop="categoria" label="Categoria" sortable>
|
|
</el-TableColumn>
|
|
<el-TableColumn label="Actions" sortable>
|
|
<div slot-scope="{ row, $index }">
|
|
<el-tooltip content="Delete" effect="light">
|
|
<base-button
|
|
type="danger"
|
|
icon
|
|
size="sm"
|
|
class="btn-link"
|
|
@click="deleteCompra($index)"
|
|
>
|
|
<i class="fas fa-trash"></i>
|
|
</base-button>
|
|
</el-tooltip>
|
|
<el-tooltip content="Edit">
|
|
<base-button
|
|
type="primary"
|
|
icon
|
|
size="sm"
|
|
class="btn-link"
|
|
@click="deleteCompra($index)"
|
|
>
|
|
<i class="fas fa-edit"></i>
|
|
</base-button>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<template slot="header" slot-scope="scope">
|
|
<el-input
|
|
v-model="search"
|
|
size="mini"
|
|
placeholder="Type to search"
|
|
/>
|
|
</template>
|
|
</el-TableColumn>
|
|
</el-table>
|
|
</card>
|
|
|
|
<card class="col-4">
|
|
<base-input
|
|
label="Fecha"
|
|
v-model="newCompra.fecha"
|
|
type="Date"
|
|
></base-input>
|
|
<base-input
|
|
label="Descripcion"
|
|
v-model="newCompra.detalle"
|
|
></base-input>
|
|
<base-input
|
|
label="Valor"
|
|
type="Number"
|
|
v-model="newCompra.valor"
|
|
></base-input>
|
|
<base-input label="Metodo de pago">
|
|
<select class="form-control" v-model="newCompra.metodo_pago">
|
|
<option v-for="metodo in metodos_pago">{{ metodo.metodo }}</option>
|
|
</select>
|
|
</base-input>
|
|
<base-input label="categoría">
|
|
<select class="form-control" v-model="newCompra.categoria">
|
|
<option v-for="categoria in categorias">{{ categoria.ctg }}</option>
|
|
</select>
|
|
</base-input>
|
|
<base-button type="primary" class="mb-3" size="lg" @click="saveCompra()"
|
|
>Guardar</base-button
|
|
>
|
|
</card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { Table, TableColumn } from "element-ui";
|
|
import { Select, Option } from "element-ui";
|
|
export default {
|
|
components: {
|
|
[Table.name]: Table,
|
|
[TableColumn.name]: TableColumn,
|
|
[Option.name]: Option,
|
|
[Select.name]: Select,
|
|
},
|
|
data() {
|
|
return {
|
|
newCompra: {
|
|
fecha: "",
|
|
detalle: "",
|
|
valor: 0,
|
|
metodo_pago: "",
|
|
categoria: "",
|
|
},
|
|
compras: [],
|
|
search: "",
|
|
metodos_pago: [
|
|
{
|
|
metodo: "Efectivo",
|
|
},
|
|
{
|
|
metodo: "Tarjeta Credito",
|
|
},
|
|
{
|
|
metodo: "Tarjeta Debito",
|
|
},
|
|
],
|
|
categorias: [
|
|
{
|
|
ctg: "Restaurante",
|
|
},
|
|
{
|
|
ctg: "Servicios",
|
|
},
|
|
{
|
|
ctg: "Transporte",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
saveCompra() {
|
|
var compra = JSON.stringify(this.newCompra);
|
|
this.compras.push(JSON.parse(compra));
|
|
console.log(compra);
|
|
},
|
|
deleteCompra(index) {
|
|
this.compras.splice(index, 1);
|
|
//console.log(index)
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |