baoshi-was/resources/views/store/inStorage/storeItem.blade.php

@extends('layouts.app')
@section('title')入库管理@endsection

@section('content')
    <span id="nav2">
        @component('store.menu')@endcomponent
        @component('store.fast.menu')@endcomponent
    </span>
    <div class="d-none" id="item">
        <div class="container-fluid">
            <label for="all" class="d-none" id="cloneCheckAll">
                <input id="all" type="checkbox" @click="checkAll($event)">全选
            </label>
            <table class="table table-sm text-nowrap table-bordered d-none" id="headerRoll"></table>
            <table class="table table-striped table-sm text-nowrap table-hover" id="headerParent">
                <tr id="header"></tr>
                <tr v-for="(storeItem,i) in storeItems">
                    <td>
                        <input class="checkItem" type="checkbox" :value="storeItem.id" v-model="checkData">
                    </td>
                    <td>@{{ i+1  }}</td>
                    <td>@{{storeItem.store_asn_code}}</td>
                    <td>@{{storeItem.asn_line_code}}</td>
                    <td class="text-muted">@{{storeItem.name}}</td>
                    <td class="text-muted">@{{storeItem.sku}}</td>
                    <td class="text-muted">@{{storeItem.barcode}}</td>
                    <td>@{{storeItem.depository_name}}</td>
                    <td class="text-muted">@{{storeItem.amount}}</td>
                    <td class="text-muted">@{{storeItem.quality}}</td>
                    <td class="text-muted">@{{storeItem.status}}</td>
                    <td class="text-muted">@{{storeItem.created_at}}</td>
                </tr>
            </table>
            <div class="text-info h5 btn btn">{{$storeItems->count()}}/{{$storeItems->total()}}</div>
            {{$storeItems->links()}}
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
    <script>
        let vue = new Vue({
            el:'#item',
            data:{
                storeItems:[
                @foreach($storeItems as $storeItem)
                {!! $storeItem !!},
                @endforeach
                ],
                checkData:[]
            },
            mounted:function(){
                $('#item').removeClass('d-none');
                let _this=this;
                let column = [
                    {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
                        dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
                    {name:'index',value: '序号', neglect: true},
                    {name:'store_asn_code',value: 'ASN编号'},
                    {name:'asn_line_code',value: 'ASN行号'},
                    {name:'name',value: '产品名', class:'text-muted'},
                    {name:'sku',value: 'SKU', class:'text-muted'},
                    {name:'barcode',value: '条码', class:'text-muted'},
                    {name:'depository_name',value: '属性仓'},
                    {name:'amount',value: '总计', class:'text-muted'},
                    {name:'quality',value: '质量', class:'text-muted'},
                    {name:'status',value: '状态', class:'text-muted'},
                    {name:'created_at',value: '创建时间', class:'text-muted'},
                ];
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.storeItems,
                        restorationColumn: 'id',
                        vue:vue,
                    });
                    header.init();
                },0);
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.storeItems.length){
                            document.querySelector('#all').checked = true;
                            document.querySelector('#all_temp').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                            document.querySelector('#all_temp').checked = false;
                        }
                    },
                    deep:true
                }
            },
            methods:{
                checkAll(e){
                    if (e.target.checked){
                        this.storeItems.forEach((el,i)=>{
                            if (this.checkData.indexOf(el.id) == '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
            }
        });
    </script>
@endsection