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

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

@section('content')
    <span id="nav2">
        @component('store.menu')@endcomponent
        @component('store.inStorage.menu')@endcomponent
    </span>
    <div class="d-none container-fluid" id="list">
        <div id="form_div"></div>
        <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="(store,i) in stores" :id="'data-'+store.id">
                <td>
                    <input class="checkItem" type="checkbox" :value="store.id" v-model="checkData">
                </td>
                                <td>
                                    <button class="btn btn-sm btn-outline-info" v-if="!store.isOpenStoreItem" @click="openStoreItems(store,i,$event);store.isOpenStoreItem=true">查看明细</button>
                                    <button v-if="store.isOpenStoreItem"  @click="closeStoreItems();store.isOpenStoreItem=false" class="btn btn-sm btn-dark">收起明细</button>
                                </td>
                <td>@{{ i+1  }}</td>
                <td >@{{store.asn_code}}</td>
                <td class="text-muted">@{{store.warehouse.name}}</td>
                <td >@{{store.owner.name}}</td>
                <td >@{{store.stored_method}}</td>
                <td >@{{store.status}}</td>
                <td>@{{store.remark}}</td>
                <td class="text-muted">@{{store.created_at}}</td>
            </tr>
                        <tr id="showStoreItem" v-show="store.store_items">
                            <td colspan="2"></td>
                            <td colspan="16">
                                <table class="table-sm table-bordered table-condensed">
                                    <tr>
                                        <th>行号</th>
                                        <th>商品名称</th>
                                        <th>商品编码</th>
                                        <th>商品条码</th>
                                        <th>数量</th>
                                        <th>质量</th>
                                        <th>状态</th>
                                        <th>创建时间</th>
                                    </tr>
                                    <tr v-for="storeItem in store.store_items">
                                        <td>@{{ storeItem.asn_line_code }}</td>
                                        <td>@{{ storeItem.name }}</td>
                                        <td>@{{ storeItem.sku }}</td>
                                        <td>@{{ storeItem.barcode }}</td>
                                        <td>@{{ storeItem.amount }}</td>
                                        <td>@{{ storeItem.quality }}</td>
                                        <td>@{{ storeItem.status }}</td>
                                        <td class="text-muted">@{{ storeItem.created_at }}</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
        </table>
        <div class="text-info h5 btn btn">{{$stores->count()}}/{{$stores->total()}}</div>
        {{$stores->links()}}
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
    <script>
        let vue = new Vue({
            el:'#list',
            data:{
                stores:[
                    @foreach($stores as $store)
                    {!! $store !!},
                    @endforeach
                ],
                owners:[
                        @foreach($owners as $owner)
                    {name:'{{$owner->id}}',value:'{{$owner->name}}'},
                    @endforeach
                ],
                warehouses:[
                        @foreach($warehouses as $warehouse)
                    {name:'{{$warehouse->id}}',value:'{{$warehouse->name}}'},
                    @endforeach
                ],
                store:{},
                checkData:[]
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $('#list').removeClass('d-none');
                let _this = this;
                let data=[
                    [
                        {name:'created_at_start',type:'dateTime',tip:'选择显示指定日期的起始时间'},
                        {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的货主'],
                            placeholder:['货主','定位或多选货主'],data:this.owners},
                        {name:'warehouse_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的仓库'],
                            placeholder:['仓库','定位或多选仓库'],data:this.warehouses},
                    ],
                    [
                        {name:'created_at_end',type:'dateTime',tip:'选择显示指定日期的结束时间'},
                        {name:'asn_code',type:'input',tip:'进场编号:支持15天内模糊搜索，15天外精确搜索',placeholder: 'ASN单号'},
                        {name:'status',type:'select',placeholder: '订单状态',data:[{name:'完全收货',value:'完全收货'},{name:'部分收货',value:'部分收货'},
                                {name:'已码盘',value:'已码盘'},{name:'订单创建',value:'订单创建'},{name:'ASN关闭',value:'ASN关闭'},{name:'等待释放',value:'等待释放'},{name:'收货取消',value:'收货取消'}]},
                        {name:'stored_method',type:'select',placeholder: '入库类型',data:[{name:'采购入库',value:'采购入库'},{name:'笕尚退货入库单',value:'笕尚退货入库单'},
                                {name:'笕尚进仓入库单',value:'笕尚进仓入库单'},{name:'笕尚移仓入库单',value:'笕尚移仓入库单'},{name:'笕尚调整入库单',value:'笕尚调整入库单'},
                                {name:'B2B入库',value:'B2B入库'},{name:'换货入库',value:'换货入库'}, {name:'初始化库存',value:'初始化库存'},{name:'调拨入库',value:'调拨入库'},
                                {name:'虚拟入库',value:'虚拟入库'}, {name:'退货入库',value:'退货入库'}, {name:'其他入库',value:'其他入库'},
                            ]},
                    ],
                ];
                this.form = new query({
                    el:"#form_div",
                    condition:data,
                });
                this.form.init();
                let column = [
                    {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
                        dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
                    {name:'',value: '操作', neglect: true},
                    {name:'index',value: '序号', neglect: true},
                    {name:'asn_code',value: 'ASN编号'},
                    {name:'warehouse_name',value: '仓库'},
                    {name:'owner_name',value: '货主'},
                    {name:'stored_method',value: '入库类型'},
                    {name:'status',value: '状态'},
                    {name:'remark',value: '备注'},
                    {name:'created_at',value: '生成时间'},
                ];
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.stores,
                        restorationColumn: 'id',
                        vue:vue,
                    });
                    header.init();
                },0);
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.stores.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:{
                openStoreItems(store,i,e){
                    let _this=this;
                    let id=store.id;
                    _this.store=store;
                    let showStoreItem=$('#showStoreItem');
                    $("#data-" + id).after(showStoreItem);
                },
                closeStoreItems(){
                    let _this=this;
                    _this.store={};
                },
                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