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()
Hola, gracias por el tutorial. Quisiera poder imprimir desde una impresora POS, instale esta libreria mike42/escpos-php laravel pero no logro hacer funcionar, estoy probando con una inpresora bixolon, creo que la estoy instalando mal en el equipo. por favor me podria orientar?
Sorry nunca he trabajado con esa impresora.