button.vue

<!--
Primary; Secondary; Success; Info; Warning; Danger; Link
https://codepen.io/shivkumarganesh/pen/zddLZr/
-->
<template>
  <button type="button" class="btn" @click="onClick" :disabled="disable"
          :class='[computedType, computedOutline, computedSize, computedActive, computeBlock]'>
    <slot>Button</slot>
  </button>
</template>

<script>
  export default {
    name:"btn-crud",
    props: {
      btnText: String,
      size: String,
      type: String,
      outline: String,
      active: String,
      block: String,
      onClick: {
        type: Function,
        required: true
      },
      disable: Boolean
    },
    computed: {
      computedType: function () {
        return "btn btn-" + this.type;
      },
      computedOutline: function () {
        return "btn btn-outline" + this.outline;
      },
      computedSize: function () {
        return "btn btn-" + this.size;
      },
      computedActive: function () {
        return this.active === "true" ? "active" : "";
      },
      computeBlock: function () {
        return this.block === "true" ? "btn-block" : "";
      }
    }
  }
</script>

<style scoped>

</style>

crud.vue

<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>