0

¡Buenas tardes!; tengo realizado un sistema de compras - ventas realizado en Lavarel 5.7 y vue.js de los cuales la mayoría de las opciones del menú si muestran, en la opción de Roles, del menú que adjunto la pantalla:

Sistema de Compras - ventas en Lavarel 5.7 y Vue.js

En la que se muestra la opción de los Roles:

Sistema de Compras - ventas Laravel - Roles

Para ello se especificó el esquema de la tabla de roles de migración que para ello se realizó mediante el comando php artisan make:migration create_rol_table que crea el esquema de migración: ( de acuerdo al siguiente link Documentación de Laravel - Database (Migraciones)

El esquema de la tabla de roles en la migración es el siguiente:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateRolesTable extends Migration
{
    /**
     * Run the migrations
     *
     * @return void
     */
    public function up()
    {
        if (Schema::hasTable('roles')) {

            exit (0);

        } else{

            Schema::create('roles', function (Blueprint $table) {
                $table->increments('id');
                $table->string('nombre',30)->unique();
                $table->string('descripcion',100)->nullable();
                $table->boolean('condicion')->default(1);
                //$table->timestamps();
            });

            DB::table('roles')->insert(array('id'=>'1','nombre'=>'Administrador','descripcion'=>'Administrador'));
            DB::table('roles')->insert(array('id'=>'2','nombre'=>'Vendedor','descripcion'=>'Vendedor'));
            DB::table('roles')->insert(array('id'=>'3','nombre'=>'Comprador','descripcion'=>'Comprador'));
            
            


        }
        
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('roles');
    }
}

Luego se definió el controlador RolController con el comando php artisan make:controller RolController, que queda así mi controlador:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Resources\RolesResource;
use App\Http\Controllers\Controller;
use App\Rol;

class RolController extends Controller
{
    public function index(Request $request)
    {
        //
        if(!$request->ajax()) return redirect('/');
        $buscar= $request->buscar;
        $criterio= $request->criterio;

        if($buscar==''){

            $roles= Rol::orderBy('id','desc')->paginate(3);

        } else{

            $roles= Rol::where($criterio,'like','%'.$buscar.'%')->orderBy('id','desc')->paginate(3);
        }

        
        //return $categorias;
        return[

            'pagination' => [
            'total'           => $roles->total(),
            'current_page'    => $roles->currentPage(),
            'per_page'        => $roles->perPage(),
            'last_page'       => $roles->lastPage(),
            'from'            => $roles->firstItem(),
            'to'              => $roles->lastitem(),

            ],

            'roles' => $roles
        ]; 

       
    }
}

Ahora bien se definio la ruta al controlador en el archivo web.php de la carpeta /routes

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('contenido/contenido');
});

Route::get('/categoria', 'CategoriaController@index');
Route::get('/categoria/selectCategoria', 'CategoriaController@selectCategoria');
Route::post('/categoria/registrar', 'CategoriaController@store');
Route::put('/categoria/actualizar', 'CategoriaController@update');
Route::put('/categoria/desactivar', 'CategoriaController@desactivar');
Route::put('/categoria/activar', 'CategoriaController@activar');

Route::get('/producto', 'ProductoController@index');
Route::post('/producto/registrar', 'ProductoController@store');
Route::put('/producto/actualizar', 'ProductoController@update');
Route::put('/producto/desactivar', 'ProductoController@desactivar');
Route::put('/producto/activar', 'ProductoController@activar');

Route::get('/proveedor', 'ProveedorController@index');
Route::post('/proveedor/registrar', 'ProveedorController@store');
Route::put('/proveedor/actualizar', 'ProveedorController@update');

Route::get('/cliente', 'ClienteController@index');
Route::post('/cliente/registrar', 'ClienteController@store');
Route::put('/cliente/actualizar', 'ClienteController@update');

Route::get('/rol', 'RolController@index');

Y ahora el componente Rol.Vue para que muestre la lista de los Roles que no muestra en el componente Rol.vue que el componente Rol.vie es el siguiente:

<template>
   <main class="main">
            <!-- Breadcrumb -->
            <ol class="breadcrumb">
                <li class="breadcrumb-item active"><a href="/">BACKEND - SISTEMA DE COMPRAS - VENTAS</a></li>
            </ol>
            <div class="container-fluid">
                <!-- Ejemplo de tabla Listado -->
                <div class="card">
                    <div class="card-header">

                       <h2>Listado de Roles</h2><br/>
                        
                    </div>
                    <div class="card-body">
                        <div class="form-group row">
                            <div class="col-md-6">
                                <div class="input-group">
                                    <select class="form-control col-md-3" v-model="criterio">
                                      <option value="nombre">Rol</option>
                                      <option value="descripcion">Descripción</option>
                                    </select>
                                    <input type="text" @keyup.enter="listarRol(1,buscar,criterio);" v-model="buscar" class="form-control" placeholder="Buscar texto">
                                    <button type="submit" @click="listarRol(1,buscar,criterio);" class="btn btn-primary"><i class="fa fa-search"></i> Buscar</button>
                                </div>
                            </div>
                        </div>
                        <table class="table table-bordered table-striped table-sm">
                            <thead>
                                <tr class="bg-primary">
                                   
                                    <th>Rol</th>
                                    <th>Descripción</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                               
                                <tr v-for="rol in arrayRol" :key="rol.id">
                                    
                                    <td v-text="rol.nombre"></td>
                                    <td v-text="rol.descripcion"></td>

                                    <td>
                                        <button type="button" class="btn btn-success btn-md" v-if="rol.condicion">
                                    
                                          <i class="fa fa-check fa-2x"></i> Activo
                                        </button>
                                        
                                        
                                        <button type="button" class="btn btn-danger btn-md" v-else>
                                        
                                            <i class="fa fa-check fa-2x"></i> Desactivado
                                        </button>
                                        
                                    </td>

                                    
                                    
                                </tr>
                               
                            </tbody>
                        </table>
                        <nav>
                            <ul class="pagination">
                                <li class="page-item" v-if="pagination.current_page > 1">
                                    <a class="page-link" href="#" @click.prevent="cambiarPagina(pagination.current_page -1,buscar,criterio)">Anterior</a>
                                </li>
                                <li class="page-item" v-for="page in pagesNumber" :key="page" :class="[page] == isActived ? 'active' : ']'">
                                    <a class="page-link" href="#" @click.prevent="cambiarPagina(page,buscar,criterio)" v-text="page"></a>
                                </li>
                               
                                <li class="page-item" v-if="pagination.current_page < pagination.last_page">
                                    <a class="page-link" href="#" @click.prevent="cambiarPagina(pagination.curent_page + 1,buscar,criterio)">Siguiente</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <!-- Fin ejemplo de tabla Listado -->
            </div>
            
        
        </main>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
   
    export default {
        data(){

            return {

                rol_id:0,  
                nombre:'',
                descripcion:'',
                arrayRol:[],
                pagination:{

                    'total':0,
                    'current_page':0,
                    'per_page':0,
                    'last_page':0,
                    'from':0,
                    'to':0,
                },
                offset:3,
                criterio:'nombre',
                buscar:''
            }

        },

        computed:{

            isActived: function(){

                return this.pagination.current_page;

            },

            pagesNumber: function(){

                if(!this.pagination.to){
                    
                    return[];
                }

                var from = this.pagination.current_page - this.offset;

                if(from < 1){

                    from = 1;
                }

                var to = from + (this.offset * 2);
                if(to >= this.pagination.last_page){

                    to = this.pagination.last_page;


                }

                var pageArray = [];
                while(from <= to){

                    pageArray.push(from);
                    from++;

                }
                return pageArray;
                
            }
        },

        methods:{

           listarRol(page,buscar,criterio){

               let me=this;

               var url = 'http://localhost/proyectolaravel/public/rol?page=' +page + '&buscar=' + buscar + '&criterio='+criterio;
             
               axios.get(url).then(function (response) {
                    // handle success
                    //console.log(response);
                    var respuesta=response.data;
                    me.arrayRol=respuesta.roles.data;
                    me.pagination= respuesta.pagination;

                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                });
           },

           cambiarPagina(page,buscar,criterio){

               let me=this;

               me.pagination.current_page=page;
               me.listarRol(page,buscar,criterio);


           
           },


           
           
        
        },
        
        mounted() {
            //console.log('Component mounted.')
            this.listarRol(1,this.buscar,this.criterio);
        }
    }
</script>

<style>
           
     .modal-content{

      width:100% !important;
      position:absolute !important;
  }

  .mostrar{

      display:list-item !important;
      opacity:1 !important;
      position:absolute !important;
      background-color:#3c29297a !important;
  }

   .div-error{

      display:flex;
      justify-content:center;
  }

  .text-error{
      
      color:red !important;
      font-weight:bold;
      font-size:20px;
  }

</style>

Una vez creado el componente Rol.Vue al compilar el proyecto con el comando npm run dev y ejecutar el proyecto y entrar al componente Rol.Vue sale un mensaje de error y no se ¿por qué no muestra la información?; adjunto pantalla con el mensaje de error que sale:

Sistema de Compras - Ventas en Laravel 5.7, Vue.js (Opciones Roles - mensaje de error)

¿Cuál sería la solución al error que me sale? y ¿como corregirlo?, si me podrían ayudar con este error. ¡Gracias!

Estimado @azeós ¡Buenas noches!, tengo en el método listarRol, en donde se debe de listarRol que hay en la tabla pero no se ¿Cuál es el error en la url?; ya que no muestra (adjunto el método ListarRol() del componente Rol.vue)

listarRol(page,buscar,criterio){

               let me=this;

               var url= 'http://localhost/proyectolaravel/public/rol?page=' + page + '&buscar=' + buscar + '&criterio='+criterio;

               axios.get(url).then(function (response) {
                    // handle success
                    //console.log(response);
                    var respuesta = response.data;
                    me.arrayRol=respuesta.roles.data;
                    me.pagination= respuesta.pagination;
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                });
           },

¿Estaría bien la cadena de url que se envía mediante axios a buscar el rol?; ya que mi archivo de ruta que esta en /routes/web.php esta correcto:

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('contenido/contenido');
});

Route::get('/categoria', 'CategoriaController@index');
Route::get('/categoria/selectCategoria', 'CategoriaController@selectCategoria');
Route::post('/categoria/registrar', 'CategoriaController@store');
Route::put('/categoria/actualizar', 'CategoriaController@update');
Route::put('/categoria/desactivar', 'CategoriaController@desactivar');
Route::put('/categoria/activar', 'CategoriaController@activar');

Route::get('/producto', 'ProductoController@index');
Route::post('/producto/registrar', 'ProductoController@store');
Route::put('/producto/actualizar', 'ProductoController@update');
Route::put('/producto/desactivar', 'ProductoController@desactivar');
Route::put('/producto/activar', 'ProductoController@activar');

Route::get('/proveedor', 'ProveedorController@index');
Route::post('/proveedor/registrar', 'ProveedorController@store');
Route::put('/proveedor/actualizar', 'ProveedorController@update');

Route::get('/cliente', 'ClienteController@index');
Route::post('/cliente/registrar', 'ClienteController@store');
Route::put('/cliente/actualizar', 'ClienteController@update');

Route::get('/rol', 'RolController@index');

Estimado amigo @azeós en el controlador RolController.php lo que hace es devolver con return primero los parámetros de la paginación para que luego resultado de la consulta en parámetro $roles pero no esta devolviendo nada. ¿Cuál sería la solución?; adjunto RolController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Resources\RolesResource;
use App\Http\Controllers\Controller;
use App\Rol;

class RolController extends Controller
{
    public function index(Request $request)
    {
        //
        if(!$request->ajax()) return redirect('/');
        $buscar= $request->buscar;
        $criterio= $request->criterio;

        if($buscar==''){

            $roles= Rol::orderBy('id','desc')->paginate(3);

        } else{

            $roles= Rol::where($criterio,'like','%'.$buscar.'%')->orderBy('id','desc')->paginate(3);
        }

        
        //return $categorias;
        return[

            'pagination' => [
            'total'           => $roles->total(),
            'current_page'    => $roles->currentPage(),
            'per_page'        => $roles->perPage(),
            'last_page'       => $roles->lastPage(),
            'from'            => $roles->firstItem(),
            'to'              => $roles->lastitem(),

            ],

            'roles' => $roles
        ]; 

       
    }
}

8
  • Si hacés un console.log(response) dentro de la consulta axios que está en listarRol(), devuelve algo? No hace falta que armes el return del controlador a mano. Si hacés directamente return $roles se va a generar un JSON con todas las propiedades..
    – azeós
    el 3 ago. 2019 a las 21:39
  • Estimado @azeós la verdad ¡no te entiendo!, lo que quieres decir pero el método listar error tengo la linea de código: (asi) var url= 'localhost/proyectolaravel/public/rol?page=' + page + '&buscar=' + buscar + '&criterio='+criterio; ¿cuál sería el error? el 5 ago. 2019 a las 2:52
  • Estimado @azeós explicame esto que me dices: "Si hacés un console.log(response) dentro de la consulta axios que está en listarRol(), devuelve algo? No hace falta que armes el return del controlador a mano. Si hacés directamente return $roles se va a generar un JSON con todas las propiedades"; ya que no te entiendo lo que quieres decir el 5 ago. 2019 a las 3:02
  • En tu RolController hacés un return creando un array a mano. Lo que digo es que no hace falta crear ese array a mano, con solo hacer return $roles es suficiente, eso ya arma un JSON con las keys que estás creando. Olvidate lo que te dije de JS, el error tiene que estar en PHP. Probá hacer un dd($roles) antes del return a ver si ahí está devolviendo todo bien.
    – azeós
    el 5 ago. 2019 a las 3:52
  • Estimado @azeós , ¡Buenas noches!; en mi controlador RolController en el return lo que hace es devolver los parámetros de la paginación del registro, y en parámetro roles debería de enviar resultado de la consulta el 7 ago. 2019 a las 4:55

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.