151 lines
3.8 KiB
Vue
151 lines
3.8 KiB
Vue
<template>
|
|
<div>
|
|
|
|
<div class="row">
|
|
<card class="col-12">
|
|
<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>
|
|
|
|
|
|
<Fcompras
|
|
:categorias="categorias"
|
|
:metodos_pago="metodos_pago"
|
|
:newCompra="newCompra"
|
|
:saveCompra="saveCompra"
|
|
/>
|
|
|
|
</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",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getDate()
|
|
},
|
|
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)
|
|
},
|
|
getDate(){
|
|
let data = new Date();
|
|
let year= data.getFullYear();
|
|
let month = (data.getMonth() + 1)<9?"0"+(data.getMonth() + 1):(data.getMonth() + 1)
|
|
let day = data.getDate()<9?"0"+data.getDate():data.getDate()
|
|
let dataF=`${year}-${month}-${day}`
|
|
this.newCompra.fecha=dataF;
|
|
}
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |