Base de datos

Tabla de orden

--
-- Estructura de tabla para la tabla `orden`
--

CREATE TABLE `orden` (
  `ord_id` int(11) NOT NULL,
  `ord_mesa` int(11) NOT NULL,
  `ord_valor` int(11) NOT NULL,
  `ord_estado` int(11) NOT NULL,
  `ord_fecha` timestamp NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `orden`
--
ALTER TABLE `orden`
  ADD PRIMARY KEY (`ord_id`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `orden`
--
ALTER TABLE `orden`
  MODIFY `ord_id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

Tabla de pedidos

--
-- Estructura de tabla para la tabla `pedidos`
--

CREATE TABLE `pedidos` (
  `ped_id` int(11) NOT NULL,
  `ped_ordern` int(11) NOT NULL,
  `ped_producto` int(11) NOT NULL,
  `ped_cantidad` int(11) NOT NULL,
  `ped_valor` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `pedidos`
--
ALTER TABLE `pedidos`
  ADD PRIMARY KEY (`ped_id`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `pedidos`
--
ALTER TABLE `pedidos`
  MODIFY `ped_id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

Enviar Pedidos

Laravel ( Backend)

Modelo

Modelo para dos tablas de Orden y Pedidos , ejecutar en comandos:

php artisan make:model Orden
php artisan make:model Pedidos

app/Orden.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Orden extends Model
{
    //
    protected $table = "orden";

    protected $fillable = [
      'ord_id',
      'ord_mesa',
      'ord_valor',
      'ord_estado',
      'ord_fecha'
    ];

    public $timestamps = false;
}

app/Pedidos.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Pedidos extends Model
{
    //
    protected $table = "pedidos";

    protected $fillable = [
      'ped_id',
      'ped_ordern',
      'ped_producto',
      'ped_cantidad',
      'ped_valor'
    ];

    public $timestamps = false;
}

Controller

Comando para crear un controlador

php artisan make:controller API/OrdenController

Función para crear pedidos app/Http/Controllers/API/OrdenController.php

   
// add model
use App\Orden;
use App\Pedidos;

/.../

 // add function 
 public function create_order(Request $request){

        // obetner un array de pedidos
        $pedido = $request->input("pedidos");

        $orderdata['ord_estado'] = 1;
        $orderdata['ord_mesa']   = $request->input("mesa");
        $orderdata['ord_valor'] = $request->input("total");
        // guarda el pedido
        $order = Orden::create($orderdata);  

        foreach (json_decode($pedido) as $item){

          $itemped['ped_producto'] = $item->id;
          $itemped['ped_ordern']   = $order->id;
          $itemped['ped_cantidad'] = $item->cant;
          $itemped['ped_valor'] = $item->precio;

          Pedidos::create($itemped);

        }

        $response['success'] = true;
        $response['message'] = "Guardo exitosamente";
    }

Route

Una ruta para enviar pedidos desde API y dentro del prefijo API

  Route::post('Orden/create','API\OrdenController@create_order');

Vue.js (Frontend)

resources/js/components/component-pos.vue

Template

Un select para seleccionar la mesa

<li class="list-group-item d-flex justify-content-between">

                <select class="form-control" id="exampleFormControlSelect1" v-model="SelectMesa" >
                  <option value="1">Mesa 1</option>
                  <option value="2">Mesa 2</option>
                  <option value="3">Mesa 3</option>
                  <option value="4">Mesa 4</option>
                  <option value="5">Mesa 5</option>
                </select>

              </li>

Botón para procesar el pedido

<button type="button" class="btn btn-success btn-lg btn-block" v-on:click="onSendOrder()">PROCESAR PEDIDO</button>

data

SelectMesa:1

Methods

onSendOrder()
          {

            if (this.listCarrito.length>=1) {

              // sumar todal de los productos
              let total = 0
              this.listCarrito.map((data)=>{
                total = total + (data.cant * data.precio)
              })

              const formData = new FormData()
              formData.append('pedidos',JSON.stringify(this.listCarrito))
              formData.append('mesa',this.SelectMesa)
              formData.append('total',total)

              axios.post("api/Orden/create",formData)
              .then(response => {
                // limpiar campo

                alert("Enviado exitosamente");

                // this.$swal.fire(
                //   'Enviado exitosamente!',
                //   'Se envio los ordenó exitosamente',
                //   'success'
                // )

                this.listCarrito = []
              })
              .catch(error => {
                alert(error)
              })

            }


          }

SweetAlert2

Instalar una librería para una alerta con estilo, ejecutar en el comando:

npm install -S vue-sweetalert2

Agregar lineas en el resources/js/app.js

// main.js
import Vue from 'vue';
import VueSweetalert2 from 'vue-sweetalert2';

// If you don't need the styles, do not connect
import 'sweetalert2/dist/sweetalert2.min.css';

Vue.use(VueSweetalert2);

Fuentes https://www.npmjs.com/package/vue-sweetalert2

Github

Código fuentes

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