Как передать данные массива из vuejs в контроллер laravel api - PullRequest
Новая
       13

Как передать данные массива из vuejs в контроллер laravel api

1 голос
/ 24 марта 2019

Я хочу сделать систему счетов с помощью laravel, используя vuejs от api. Во-первых, показать весь товар, и когда я нажимаю добавить в корзину, он добавляется.

Вот скриншот: View Screenshot

Теперь я хочу отправить входные данные заполнения в таблицу order_masters и, включая последние вставленные данные корзины ID, отправить таблицу order_details.

но я не могу передать все данные. иногда передавать информацию о клиентах, но не данные корзины.

N. B: я использую vuejs, vform и API

Мой код компонента указан ниже: 

<template>
<div class="row">
    <div class="col-md-7">
        <div class="col-md-11">
            <input type="hidden" v-model="field">
            <input type="search" v-model="query" class="form-control form-control-sm mb-3" placeholder="Search Here">
        </div>
        <div class="row justify-content-center">
            <div v-show="products.length" v-for="(product, id) in products" :key="id" class="card col-xl-3 col-md-3 col-sm-3 mb-5 mr-5 float-left" style="background-color:lightgray">
                <div class="card-body">
                    <h5 class="card-title">{{product.name}}</h5>
                    <p class="card-text"><input type="text" v-model="product.qty" class="form-control form-control-sm mb-2"></p>
                    <strong class="">
                           {{product.price}} TK
                        </strong>
                    <button class="btn btn-sm btn-primary float-right" @click="addToCart(product)">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <div v-show="!products.length" class="alert alert-danger text-center" role="alert">
            <strong>Opps! No Data Found!</strong>
        </div>
        <pagination v-if="pagination.last_page > 1" :pagination="pagination" :offset="5" @paginate="query === ''? showProduct(): searchProduct()"></pagination>
    </div>

    <div class="col-md-5 float-righ">
        <form @submit.prevent="store" @keydown="form.onKeydown($event)">
            <alert-error :form="form"></alert-error>
        <div class="row mb-2">
            <label for="" class="col-md-3 font-weight-bold">Name</label>
            <div class="col-md-9">
                <input type="text" v-model="form.name" name="name" class="form-control form-control-sm" :class="{ 'is-invalid': form.errors.has('name') }">
                <has-error :form="form" field="name"></has-error>
            </div>
        </div>
        <div class="row mb-2">
            <label for="" class="col-md-3 font-weight-bold">Phone</label>
            <div class="col-md-9">
                <input type="text" v-model="form.phone" name="phone" class="form-control form-control-sm" :class="{ 'is-invalid': form.errors.has('phone') }">
                <has-error :form="form" field="phone"></has-error>
            </div>
        </div>
        <div class="row mb-2">
            <label for="" class="col-md-3 font-weight-bold">Address</label>
            <div class="col-md-9">
                <input type="text" v-model="form.address" name="address" class="form-control form-control-sm" :class="{ 'is-invalid': form.errors.has('address') }" >
                <has-error :form="form" field="address"></has-error>
            </div>
        </div>
        <div class="mb-5">
            <input type="button" class="btn btn-sm btn-danger float-left" @click="clearCart" value="Clear" />
            <button type="submit" :disabled="form.busy" class="btn btn-sm btn-success float-right" @click="store">Checkout</button>
        </div>
        <table class="table table-sm table-bordered table-striped">
            <thead class="text-center">
                <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Qty</th>
                <th>Price</th>
                <th>L/T</th>
                <th>Action</th>
                </tr>
            </thead> 
            <tbody>
                <tr v-for="(cart, i) in carts" :key="i">
                    <td class="text-center"><input type="hidden" name="pro_id[]" v-model="form.pro_id"> {{cart.id}}</td>
                    <td>{{cart.name}} </td>
                    <td class="text-right" name="qty"><input type="hidden" name="qty[]" v-model="form.qty">{{cart.qty}}</td>
                    <td class="text-right" name="unit_price"><input type="hidden" name="pro_id[]" v-model="form.price">{{cart.price}}</td>
                    <td class="text-right">{{cart.price*cart.qty}}</td>
                    <td class="text-center"><button type="button" @click="removeProduct(i)" class="btn btn-sm btn-danger">x</button></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" class="text-right font-weight-bold">Total =</td>
                    <td class="text-right"> {{total}}/-</td>
                </tr>
            </tfoot>
        </table>

        </form>
    </div>
    <vue-progress-bar></vue-progress-bar>
    <vue-snotify></vue-snotify>
</div>


<script>
export default {
data(){
    return{
        field: 'name',
        query: '',
        form: new Form({
            'name': '',
            'phone': '',
            'address':'',
            'pro_id' : [],
            'qty' : [],
            'unit_price' : []
        }),
        products:[],
        carts:[],
        pagination:{
            current_page: 1
        }
    }
},
methods:{
    store(){
        var data = {
            carts: this.carts,
        }
        this.$Progress.start()
        this.form.busy = true
        this.form.post('api/pos', data)
            .then( res => {
                this.form.reset()
                this.form.clear()
                this.$Progress.finish()
                console.log(data)
            })
            .catch( e => {
                this.$Progress.fail()
                console.log(e)
            })

      }
  }
}
</script>

Вот функция контроллера API: 

public function store(Request $request)
{
    $carts = json_decode($request->getContent('data'), true);

     $this->validate($request,[
         'name' => 'required',
         'phone' => 'required',
         'address' => 'required'
     ]);

     $order = new OrderMaster;
     $order->name = $request->name;
     $order->phone = $request->phone;
     $order->address = $request->address;
     $order->save();

    $order_id = DB::getPdo()->lastInsertId();

    foreach ($carts as $cart) {

         OrderDetails::create([
             'order_id' => $order_id,
             'product_id' => ?,
             'qty' => ?,
             'unite_price' => ?,
         ]);
    }
}

Ответы [ 2 ]

0 голосов
/ 26 марта 2019

Я сделал это по-другому.Не используя vform, я использовал axios.но я хочу сделать это с помощью vform. 

return{
        field: 'name',
        query: '',
        form:{
            'name': '',
            'phone': '',
            'address':''
        },
        products:[],
        carts:[],
        pagination:{
            current_page: 1
        }
    }
store(){
        let client = {
            cli: this.form
        }
        let data = {
            carts: this.carts
        }

        this.$Progress.start()
        axios.post('api/pos', {data, client})
            .then( res => {
                this.$Progress.finish()
                console.log(res)
            })
            .catch( e => {
                this.$Progress.fail()
                console.log(e)
            })

    }

Контроллер: 

$carts = json_decode($request->getContent('client','data'), true);

    $customer = $carts['client'];
    $pro_info = $carts['data'];

    foreach ($customer as $cus) {
        $order = new OrderMaster;
        $order->name = $cus['name'];
        $order->phone = $cus['phone'];
        $order->address = $cus['address'];
        $order->save();

    }

    $order_id = DB::getPdo()->lastInsertId();

    foreach ($pro_info as $cart) {
        foreach ($cart as $c) {
            OrderDetails::create([
                'order_id' => $order_id,
                'product_id' => $c['id'],
                'qty' => $c['qty'],
                'unit_price' => $c['price'],
            ]);
        }
    }
0 голосов
/ 25 марта 2019

Во-первых, вы звоните form.post неправильно. Второй параметр - это не дополнительные данные, а параметры конфигурации для вызова axios.request.

Для отправки массива carts необходимо добавить его в саму форму: 

form: new Form({
  'name': '',
  'phone': '',
  'address':'',
  'pro_id' : [],
  'qty' : [],
  'unit_price' : [],
  'carts' : [], // <-- added
}),

Затем замените использование carts на form.carts в вашем шаблоне (и методах).

Теперь carts будет отправлено на сервер вместе с другими данными.

И, наконец, вам вообще не нужно использовать json_decode. 

//...
$data = $this->validate($request, [
  'name' => 'required',
  'phone' => 'required',
  'address' => 'required',
  'carts' => 'required|array',
  'carts.*.name' => 'string',
  'carts.*.id' => 'integer',
  'carts.*.qty' => 'integer',
  'carts.*.price' => 'numeric',
]);

Затем вы можете использовать $data в качестве источника данных. 

foreach ($data['carts'] as $cart) {
  OrderDetails::create([
    'order_id' => $order_id,
    'product_id' => $cart['id'],
    'qty' => $cart['qty'],
    'unite_price' => $cart['price'],
  ]);
}
...