Tutorial completo

Tutorial resumida

Modulo de Productos

Laravel (Backend)

ProductoController.php

Para listar en el modulo del Producto

public function list(){

  $data = Productos::where("prod_delete",0)
  ->join('categorias', 'categorias.cat_id', '=', 'productos.prod_categoria')
  ->get();

  return $data;
}

Cambiar el status del producto

public function change_status(Request $request){


      // id de producto
      $idprod = $request->input("idprod");
      // el estado de producto
      $status = $request->input("status");

      Log::info("Actualizando status $idprod => $status");

      Productos::where("prod_id",$idprod)->update([
        'prod_visible' => $status
      ]);

      $response['message'] = "Actualizo exitosamente";
      $response['success'] = true;
      return $response;

    }

Ruta de api

// API
Route::group(['prefix'=>'api'],function(){
 ...

  Route::get('Producto/list','API\ProductoController@list');
  Route::post('Producto/change-status','API\ProductoController@change_status');


});

Vue.js (Frontend)

component-producto.vue

template

Tabla de productos

<table class="table table-striped">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Producto</th>
              <th scope="col">Precio</th>
              <th scope="col">Categoria</th>
              <th scope="col">Acciones</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="data in listProd">
              <td></td>
              <td>{{data.prod_name}}</td>
              <td>{{data.prod_price}}</td>
              <td>{{data.cat_nombre}}</td>
              <td>
                <button type="button" class="btn btn-info" v-if="data.prod_visible==1" v-on:click="updateSatus(data.prod_id,0)">Activo</button>
                <button type="button" class="btn btn-light" v-else v-on:click="updateSatus(data.prod_id,1)">Desactivado</button>
              </td>
            </tr>
          </tbody>
        </table>

data

listProd:[]

methods

Para cargar los productos

listProdService(){

            axios.get("api/Producto/list")
            .then(response=>{
              // cargar datos
              this.listProd = response.data
            })
            .catch(error=>{
              alert(error)
            })

          },

Cambiar status del producto

updateSatus(id,status){

            const formData = new FormData()
            // parametro
            // id de categoria
            formData.append('idprod',id)
            // status de categoria
            formData.append('status',status)

            axios.post("api/Producto/change-status",formData)
            .then(response => {
              // cargar lista de nuevo
              this.listProdService()
            })
            .catch(error => {
              alert(error)
            })
          }

mounted

this.listProdService()

Modulo de POS

Laravel (Backend)

ProductoController.php

Mostrar los productos visibles con categorías en el POS

public function visible(){

      $data = Productos::where("prod_delete",0)
      ->where("prod_visible",1)
      ->join('categorias', 'categorias.cat_id', '=', 'productos.prod_categoria')
      ->where("cat_active",1)
      ->get();

      foreach ($data as  $value) {
        $value['prod_image'] = asset('storage/'.$value->prod_image);
      }

      return $data;

    }

Ruta de web.php

Dentro del prefijo API

Route::get('Producto/visible','API\ProductoController@visible');

Vue.js (Frontend)

component-pos.vue

template

Esta los botones de categorías con v-on:click v-on:click=»selectCategoria=cat.cat_id» para poder filtrar los productos y card de producto con el v-for para mostrar los productos con el variable listProd.

<button type="button" class="btn btn-light" v-for="cat in listCat" v-on:click="selectCategoria=cat.cat_id">{{cat.cat_nombre}}</button>

        <hr>
        
        <div class="row">

          <div class="card col-md-4 " v-show="prod.prod_categoria==selectCategoria||selectCategoria==0" style="padding:0px;" v-for="prod in listProd">
            <img class="card-img-top"  :src="prod.prod_image" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">{{prod.prod_name}}</h5>
              <p class="card-text">{{prod.prod_description}}</p>
              <a href="#" class="btn btn-primary">{{prod.prod_price}}</a>
            </div>
          </div>

        </div>

data

listProd:[],
selectCategoria:0

methods

listProdService(){

            axios.get("api/Producto/visible")
            .then(response=>{
              // cargar datos
              this.listProd = response.data
            })
            .catch(error=>{
              alert(error)
            })

          },

Mounted

this.listProdService()

GitHub

https://github.com/artyom-developer/laravel-pos-restaurant