184 lines
4.6 KiB
Vue
184 lines
4.6 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.metodopago.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="metodopago" 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(row._id)"
|
|
>
|
|
<i class="el-icon-delete-solid"></i>
|
|
</base-button>
|
|
</el-tooltip>
|
|
<el-tooltip content="Edit">
|
|
<base-button
|
|
type="success"
|
|
icon
|
|
size="sm"
|
|
class="btn-link"
|
|
@click="deleteCompra($_id)"
|
|
>
|
|
<i class="el-icon-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 {
|
|
middleware: "authenticated",
|
|
components: {
|
|
[Table.name]: Table,
|
|
[TableColumn.name]: TableColumn,
|
|
[Option.name]: Option,
|
|
[Select.name]: Select,
|
|
},
|
|
data() {
|
|
return {
|
|
newCompra: {
|
|
fecha: "",
|
|
detalle: "",
|
|
valor: 0,
|
|
metodopago: "",
|
|
categoria: "",
|
|
},
|
|
compras: [],
|
|
search: "",
|
|
metodos_pago: [
|
|
{
|
|
metodo: "Efectivo",
|
|
},
|
|
{
|
|
metodo: "Tarjeta Credito",
|
|
},
|
|
{
|
|
metodo: "Tarjeta Debito",
|
|
},
|
|
],
|
|
categorias: [
|
|
{
|
|
ctg: "Restaurante",
|
|
},
|
|
{
|
|
ctg: "Servicios",
|
|
},
|
|
{
|
|
ctg: "Transporte",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.newCompra.fecha = this.$store.state.fecha;
|
|
this.getCompras();
|
|
},
|
|
methods: {
|
|
getCompras() {
|
|
const axiosHeader = {
|
|
headers: {
|
|
token: this.$store.state.auth.token,
|
|
},
|
|
};
|
|
this.$axios
|
|
.get("/compras", axiosHeader)
|
|
.then((res) => {
|
|
console.log(res.data.data);
|
|
this.compras = res.data.data;
|
|
})
|
|
.catch((e) => console.log(e));
|
|
},
|
|
saveCompra() {
|
|
const axiosHeader = {
|
|
headers: {
|
|
token: this.$store.state.auth.token,
|
|
},
|
|
};
|
|
const toSend = this.newCompra;
|
|
console.log(axiosHeader.data);
|
|
this.$axios
|
|
.post("/compra", toSend, axiosHeader)
|
|
.then((res) => {
|
|
this.clearFormCompra();
|
|
console.log(res.data.status);
|
|
this.getCompras();
|
|
})
|
|
.catch((e) => console.log(e));
|
|
},
|
|
deleteCompra(id) {
|
|
const axiosHeader={
|
|
headers:{
|
|
token: this.$store.state.auth.token,
|
|
|
|
},
|
|
params:{
|
|
id:id
|
|
}
|
|
}
|
|
this.$axios.delete("/compra",axiosHeader).then(res=>{
|
|
|
|
console.log(res.data);
|
|
this.getCompras();
|
|
}).catch(e => console.log(e))
|
|
},
|
|
clearFormCompra() {
|
|
this.newCompra.detalle = "";
|
|
this.newCompra.valor = 0;
|
|
this.newCompra.metodopago = "";
|
|
this.newCompra.categoria = "";
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |