Created
July 31, 2018 14:39
-
-
Save hamiltongabriel/7ddc6f7797642b8948d5ccb77f9653f4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="row"> | |
<div class="col-md-12"> | |
<b-card> | |
<!--<div slot="header">--> | |
<!--<h6>{{titulo}} Cadastrados</h6>--> | |
<!--</div>--> | |
<div class="row" v-if="mostraButtons"> | |
<div class="form-group col-sm-12 col-md-12 col-xl-12"> | |
<btn-crud type="primary" :onClick="incluir" title="Incluir Função" | |
:disable="operacoes.btnIncluir.desabilitado">Incluir | |
</btn-crud> | |
<btn-crud type="warning" :onClick="editar" | |
:disable="operacoes.btnAlterar.desabilitado">Editar | |
</btn-crud> | |
<btn-crud type="danger" :onClick="excluir" title="Excluir Função" | |
:disable="operacoes.btnExcluir.desabilitado">Excluir | |
</btn-crud> | |
<btn-crud type="primary" :onClick="consultar" title="Consultar Função" | |
:disable="operacoes.btnConsultar.desabilitado">Consultar | |
</btn-crud> | |
<btn-crud v-if="btnResetSenha" :on-click="resetarSenha" title="Resetar Senha para um Usuario" | |
:disabled="operacoes.btnResetarSenha.desabilitado" type="primary">Resetar Senha | |
</btn-crud> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="form-group col-sm-12 col-md-12 col-xl-12" style="margin-bottom: -5px"> | |
<label>Pesquisar Por: <strong>{{pesquisar.label}}</strong></label> | |
<div class="input-group mb-3"> | |
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" | |
v-if="this.pesquisar.field === 'id'" type="number" class="form-control" title="Pesquisar" | |
placeholder="Pesquisar..." @keyup.enter="fazerBusca" v-model="pesquisar.data" maxlength="10"> | |
<input v-if="this.pesquisar.field !== 'id'" type="text" class="form-control" title="Pesquisar" | |
placeholder="Pesquisar..." @keyup.enter="fazerBusca" v-model="pesquisar.data"> | |
</div> | |
</div> | |
<div class="form-group col-sm-12 col-md-12 col-xl-12"> | |
<CompGoodTable | |
:columns="colunas" | |
:rows="linhas" | |
:lineNumbers="false" | |
@on-row-click="clickLinha" | |
@on-sort-change="onHeaderClick" | |
:searchOptions="{ | |
enabled: false, | |
placeholder: 'Pesquisar', | |
}" | |
:paginationOptions="{ | |
enabled: true, | |
perPage: 30, | |
position: 'botton', | |
perPageDropdown: [30, 60, 90, 120], | |
dropdownAllowAll: true, | |
setCurrentPage: 1, | |
nextLabel: 'Proximo', | |
prevLabel: 'Anterior', | |
rowsPerPageLabel: 'Resultados por página', | |
ofLabel: 'de', | |
allLabel: 'Todos', | |
}" | |
:select-options="{ | |
enabled: false, | |
selectAll:false, | |
selectionInfoClass: 'custom-class', | |
selectionText: 'Linhas Selecionadas', | |
clearSelectionText: 'Limpar', | |
}" | |
styleClass="vgt-table bordered condensed "> | |
<template slot="table-row" slot-scope="props"> | |
<span v-if="props.column.field == 'vigente'"> | |
<div :class="{'isOk': props.row.vigente , 'notOk': !props.row.vigente }"></div> | |
</span> | |
<span v-else-if="props.column.field == 'ativo'"> | |
<div :class="{'isOk': props.row.ativo , 'notOk': !props.row.ativo }"></div> | |
</span> | |
<span v-else-if="props.column.field == 'bloqueado'"> | |
<div :class="{'isOk': props.row.bloqueado , 'notOk': !props.row.bloqueado }"></div> | |
</span> | |
<span v-else> | |
{{props.formattedRow[props.column.field]}} | |
</span> | |
</template> | |
</CompGoodTable> | |
</div> | |
<hr> | |
</div> | |
</b-card> | |
</div> | |
</div> | |
</template> | |
<script> | |
import {retira_acentos} from '../../../utils/index' | |
import Http from '../../../services/http/axiosConfig' | |
import {store} from '../../../modulos/educacao/store/store' | |
import {filtrarPermissoes} from '../../../scripts/permissionamento' | |
import {EventBus} from "../../../main"; | |
import Button from '../components-parents/Button' | |
import BtnCrud from "./Button"; | |
export default { | |
components: { | |
BtnCrud, | |
'btn-crud': Button, | |
}, | |
data() { | |
return { | |
path: location.pathname, | |
newNumber: 0, | |
linhas: [], | |
operacoes: { | |
btnIncluir: { | |
nome: 'btnIncluir', | |
desabilitado: true, | |
}, | |
btnAlterar: { | |
nome: 'btnAlterar', | |
desabilitado: true, | |
}, | |
btnExcluir: { | |
nome: 'btnExcluir', | |
desabilitado: true, | |
}, | |
btnConsultar: { | |
nome: 'btnConsultar', | |
desabilitado: false | |
}, | |
btnImprimir: { | |
nome: 'btnImprimir', | |
desabilitado: true | |
}, | |
btnResetarSenha: { | |
nome: 'btnResetarSenha', | |
desabilitado: true | |
} | |
}, | |
itemTabelaSelecionado: null, | |
idDados: '', | |
status: ['/alteracao', '/visualizar', '/novo'], | |
pesquisar: { | |
label: 'Nome', | |
field: 'nome', | |
data: '' | |
}, | |
} | |
}, | |
props: { | |
btnResetSenha: false, | |
colunas: { | |
default: [], | |
type: Array, | |
required: true | |
}, | |
type: '', | |
// titulo: { | |
// type: String, | |
// required: true | |
// }, | |
url: { | |
type: String, | |
required: true | |
}, | |
mostraButtons: { | |
type: Boolean, | |
required: false, | |
default: true | |
}, | |
idTela: { | |
type: String, | |
required: true | |
}, | |
paiFilha: { | |
type: Boolean, | |
required: true | |
}, | |
requestBanco: { | |
type: String, | |
required: true | |
} | |
}, | |
methods: { | |
numberOnly(id) { | |
var element = document.getElementById(id); | |
var regex = /[^0-9]/gi; | |
element.value = element.value.replace(regex, ""); | |
}, | |
editar() { | |
if (this.itemTabelaSelecionado != null) { | |
this.$destroy(); | |
this.abrirPaginaFilha(`${this.url}/${this.itemTabelaSelecionado.id}${this.status[0]}`, `${this.idTela}`, this.paiFilha) | |
} else { | |
swal(`Nenhum(a) ${this.idTela} foi selecionado(a) !`, { | |
icon: "error" | |
}) | |
} | |
}, | |
resetarSenha() { | |
//PUT usuarios/idUsuario/reset | |
// console.log(this.usuario); | |
if (this.itemTabelaSelecionado != null) { | |
swal({ | |
title: "Confirmação", | |
text: "Confirma Reset de senha para usuário", | |
icon: "info", | |
closeOnClickOutside: false, | |
buttons: { | |
cancel: { | |
text: "Cancelar", | |
value: null, | |
visible: true, | |
className: "danger", | |
closeModal: true, | |
}, | |
confirm: { | |
text: "OK", | |
value: true, | |
visible: true, | |
className: "", | |
closeModal: true | |
} | |
}, | |
}).then((willDelete) => { | |
if (willDelete) { | |
Http.put('/usuarios/' + this.itemTabelaSelecionado.id + '/reset') | |
.then(response => { | |
swal("Senha Resetada !", { | |
icon: "success", | |
}); | |
this.atualizarDados(); | |
this.itemTabelaSelecionado = null; | |
} | |
).catch(error => { | |
}); | |
} | |
}); | |
} else { | |
swal("Nenhum dado foi selecionado !", { | |
icon: "error", | |
}); | |
} | |
}, | |
consultar() { | |
if (this.itemTabelaSelecionado != null) { | |
this.$destroy(); | |
this.abrirPaginaFilha(`${this.url}/${this.itemTabelaSelecionado.id}${this.status[1]}`, `${this.idTela}`, this.paiFilha) | |
} else { | |
swal(`Nenhum(a) ${this.idTela} foi selecionado(a) !`, { | |
icon: "error" | |
}) | |
} | |
}, | |
incluir() { | |
this.$destroy(); | |
this.abrirPaginaFilha(`${this.url}/` + null + `${this.status[2]}`, `${this.idTela}`, this.paiFilha); | |
}, | |
excluir() { | |
if (this.itemTabelaSelecionado != null) { | |
swal({ | |
title: "Confirmação", | |
text: `Deseja realmente excluir este ${this.idTela} ?`, | |
icon: "info", | |
closeOnClickOutside: false, | |
buttons: { | |
cancel: { | |
text: "Cancelar", | |
value: null, | |
visible: true, | |
className: "danger", | |
closeModal: true, | |
}, | |
confirm: { | |
text: "OK", | |
value: true, | |
visible: true, | |
className: "", | |
closeModal: true | |
} | |
}, | |
}).then((willDelete) => { | |
if (willDelete) { | |
debugger | |
this.requestBanco.includes("/enderecos?search=endereco") === true ? this.requestBanco = '/enderecos' : '' | |
Http.delete(`${this.requestBanco}/` + this.itemTabelaSelecionado.id) | |
.then(response => { | |
swal(`${this.idTela} excluído com sucesso !`, { | |
icon: "success", | |
}); | |
this.requestBanco.includes("/enderecos") === true ? this.requestBanco = '/enderecos?search=endereco:IS_NULL' : '' | |
this.atualizarDados(); | |
this.itemTabelaSelecionado = null; | |
} | |
).catch(error => { | |
}); | |
} | |
}); | |
} else { | |
swal(`Nenhum(a) ${this.idTela} foi selecionado(a) !`, { | |
icon: "error", | |
}); | |
} | |
}, | |
atualizarDados() { | |
Http.get(`${this.requestBanco}`) | |
.then(response => { | |
this.linhas = response.data; | |
console.log(response.data) | |
}).catch(error => { | |
}); | |
}, | |
fazerBuscaEndereco() { | |
let field = retira_acentos(this.pesquisar.field); | |
Http.get(`enderecos?search=endereco:IS_NULL,${field}:${this.pesquisar.data.toUpperCase()}`) | |
.then(response => { | |
this.linhas = []; | |
this.linhas = response.data; | |
} | |
).catch(error => { | |
}) | |
}, | |
fazerBuscaPadrao() { | |
let field = retira_acentos(this.pesquisar.field); | |
Http.get(`${this.requestBanco}?search=` + field + ':' + this.pesquisar.data.toUpperCase()) | |
.then(response => { | |
this.linhas = []; | |
this.linhas = response.data; | |
} | |
).catch(error => { | |
}); | |
}, | |
fazerBusca() { | |
if (this.pesquisar.data !== "") { | |
this.requestBanco.includes("enderecos") === true ? this.fazerBuscaEndereco() : this.fazerBuscaPadrao() | |
} else { | |
Http.get(`${this.requestBanco}`) | |
.then(response => { | |
this.linhas = []; | |
this.linhas = response.data; | |
} | |
).catch(error => { | |
}); | |
} | |
}, | |
onHeaderClick(data) { | |
this.pesquisar.label = data.column.label; | |
this.pesquisar.field = data.column.field; | |
this.newNumber = data.column.field | |
this.pushNewNumber(this.newNumber) | |
}, | |
pushNewNumber(newNumber) { | |
store.pushNewNumber(newNumber) | |
}, | |
// filtro(filtro) { | |
// this.pesquisar.field = ''; | |
// this.colunas.label = filtro | |
// filtro = retira_acentos(filtro.toLowerCase()); | |
// this.pesquisar.label = this.colunas.label; | |
// | |
// }, | |
// toggleDropdown(e) { | |
// e.preventDefault() | |
// e.target.parentElement.classList.toggle('show') | |
// }, | |
// | |
// closeDropDow() { | |
// this.$refs['dropBTN'].classList.toggle('show') | |
// }, | |
abrirPaginaFilha(path, label, paifilha) { | |
let obj = { | |
path: path, | |
label: label, | |
paifilha: paifilha | |
}; | |
EventBus.$emit('openItem', obj); | |
}, | |
clickLinha(row) { | |
this.itemTabelaSelecionado = row.row; | |
} | |
}, | |
mounted() { | |
var listaOperacoes = filtrarPermissoes(this.$route.name); | |
for (var i = 0; i < listaOperacoes.length; i++) { | |
if (this.operacoes.hasOwnProperty(listaOperacoes[i].nome)) { | |
this.operacoes[listaOperacoes[i].nome].desabilitado = false; | |
} | |
} | |
this.atualizarDados(); | |
} | |
} | |
</script> | |
<style scoped> | |
.btn { | |
margin-right: 5px; | |
} | |
.dropdown-item { | |
position: relative !important; | |
padding: 4px 20px !important; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment