baoshi-was/resources/views/store/index.blade.php

@extends('layouts.app')
@section('title')称重管理@endsection

@section('content')
    <span id="nav2">
        @component('store.menu')@endcomponent
    </span>
    <div class="d-none" id="fast">
        <div class="container-fluid">
            <div class="">
                <table class="table table-striped table-sm text-nowrap table-hover">
                    <tr>
                        <th>
                            <label for="all">
                                <input id="all" type="checkbox" @click="checkAll($event)">全选
                            </label>
                        </th>
                        <th>序号</th>
                        <th>ID</th>
                        <th>ASN编号</th>
                        <th>仓库</th>
                        <th>货主</th>
                        <th>入库类型</th>
                        <th>状态</th>
                        <th>备注</th>
                        <th>生成时间</th>
                    </tr>
                    <tr v-for="(store,i) in stores">
                        <td>
                            <input class="checkItem" type="checkbox" :value="store.id" v-model="checkData">
                        </td>
                        <td>@{{ i+1  }}</td>
                        <td>@{{store.id}}</td>
                        <td class="text-muted">@{{store.asn_code}}</td>
                        <td>@{{store.warehouse_name}}</td>
                        <td class="text-muted">@{{store.owner_name}}</td>
                        <td class="text-muted">@{{store.stored_method}}</td>
                        <td class="text-muted">@{{store.status}}</td>
                        <td>@{{store.remark}}</td>
                        <td class="text-muted">@{{store.created_at}}</td>
                    </tr>
                </table>
                <div class="text-info h5 btn btn">{{$stores->count()}}/{{$stores->total()}}</div>
                {{$stores->links()}}
            </div>
        </div>
    </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:'#fast',
            data:{
                stores:[
                @foreach($stores as $store)
                {!! $store !!},
                @endforeach
                ],
                checkData:[]
            },
            mounted:function(){
                /*this.initInputs();
                $(".tooltipTarget").tooltip({'trigger':'hover'});*/
                $('#fast').removeClass('d-none');
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.stores.length){
                            document.querySelector('#all').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep:true
                }
            },
            methods:{
                checkAll(e){
                    if (e.target.checked){
                        this.stores.forEach((el,i)=>{
                            if (this.checkData.indexOf(el.id) == '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
            }
        });
    </script>
@endsection