Tutorial POS Restaurante – Laravel + Vue.js Parte 7 : Listar Orden

Laravel (Backend)

Controlador

OrdenController.php

Importar libreria de Carbon

use Carbon\Carbon;

función para listar

   public function list_order(){

     // fecha hoy / today date
     $fecha_hoy = Carbon::now()->format('Y-m-d') ;

     // get order per today
     $order = Orden::whereDate("ord_fecha",$fecha_hoy)->get();

     foreach ($order as $value) {
       // add value show
       $value['show'] = false;
       // add day details for order
       $value['pedidos'] = Pedidos::join('productos', 'productos.prod_id', '=', 'pedidos.ped_producto')
       ->where("ped_ordern",$value->ord_id)->get();
     }
     return $order;
   }

Route

routes/web.php

 // Listar orden y pedido
 Route::get('Orden/list','API\[email protected]_order');

Vue.js (Frontend)

Componente

resources/js/components/component-orden.vue

template

<template>
  <div class="container">
        <br>
        <div class="row">

      <div class="col-md-8 order-md-1">

        <h4 class="mb-3">Orden</h4>

        <table class="table t ">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Orden</th>
              <th scope="col">Valor</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <template v-for="data in listOrder">
              <tr style="background-color: #cecece; ">
                <td>{{data.ord_id}}</td>
                <td><b>Mesa {{data.ord_mesa}}</b> - {{data.ord_fecha}}</td>
                <td>{{data.ord_valor}}</td>
                <td>
                  <button type="button" class="btn btn-light"  v-on:click="data.show=!data.show">Detalles</button>
                </td>
              </tr>
              <!-- Detalles del orden -->
              <tr v-for="pedido in data.pedidos" v-show="data.show">
                <td>{{data.ord_id}}</td>
                <td>{{pedido.prod_name}}</td>
                <td>{{pedido.ped_cantidad}}</td>
                <td>{{pedido.ped_valor}}</td>
              </tr>
            </template>
          </tbody>
        </table>

      </div>


    </div>


  </div> <!-- /container -->
</template>

Script

export default {
        data(){
          return{
            listOrder:[]
          }
        },
        mounted() {
            this.listOrderService()
        },
        methods:{
          listOrderService()
          {
            axios.get("api/Orden/list")
            .then(response=>{
              // cargar datos
              this.listOrder = response.data
            })
            .catch(error=>{
              alert(error)
            })

          },
        }
    }

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *