baoshi-was/resources/views/inventory/statement/inventoryCompare.blade.php

@extends('layouts.app')
@section('title')库存管理-库存-库存对比@endsection

@section('content')
    @component('inventory.statement.menu')@endcomponent
    <div class="d-none card" id="container">
        <div class="modal fade" id="importExcel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">导入相关excel</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="POST" id="submitFrom" action="{{ url('inventory/inventoryCompare/import/excel') }}" enctype="multipart/form-data" target="_blank">
                            @csrf
                            <div class="form-group row text-center">
                                <div class="col-12 text-danger">
                                    注意：导入字段头必须有以下字段名在第一行表头行，不分顺序：<br>
                                    产品编码，数量，属性仓<br>
                                </div>
                                <div class="col-12 text-info ">
                                    导入时间随文件大小可能达数十分钟以上，请耐心等候
                                    <hr>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="sku" class="col-2 col-form-label text-right">选择EXCEL</label>
                                <div class="col-8">
                                    <div class="form-control">
                                        <input type="file" class="form-control-file @error('file') is-invalid @enderror"
                                               name="file" value="{{ old('file') }}" required>
                                        @error('file')
                                        <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

{{--                            <div class="form-group row">--}}
{{--                                <label for="sku" class="col-2 col-form-label text-right">选择货主</label>--}}
{{--                                <div class="col-3">--}}
{{--                                    <select name="owner_id" id="owner_id" class="form-control @error('owner_id') is-invalid @enderror">--}}
{{--                                        <option value="">货主</option>--}}
{{--                                        <option v-for="owner in fakeOwners" :value="owner.name">@{{ owner.value }}</option>--}}
{{--                                    </select>--}}
{{--                                    @error('owner_id')--}}
{{--                                    <span class="invalid-feedback" role="alert">--}}
{{--                                    <strong>{{ $message }}</strong>--}}
{{--                                    </span>--}}
{{--                                    @enderror--}}
{{--                                </div>--}}
{{--                                <div class="col-5">--}}
{{--                                    <input placeholder="定位货主" id="ownerName" autocomplete="off" class="form-control" @change="定位货主($event)">--}}
{{--                                </div>--}}
{{--                            </div>--}}
                            <div class="form-group row">
                                <div class="col-8 offset-2">
                                    <input type="submit" class="btn btn-success form-control" @click="submitFrom" value="执行导入">
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-8 offset-2">
                                <span v-if="isSubmit" class="btn btn-sm btn-outline-info" @click="flushView">刷新页面</span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-header pt-0">
            <div id="form"></div>
        </div>
        <div class="w-100 ml-4 mt-0 mb-0">
            <span class="dropdown ">
                <button class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget" :class="[checkData.length>0?'btn-dark text-light':'']"
                        data-toggle="dropdown" title="导出所有页将会以搜索条件得到的过滤结果，将其全部记录（每一页）导出">
                    导出Excel
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" @click="inventoryCompareExport(false)" href="javascript:">导出勾选内容</a>
                    <a class="dropdown-item" @click="inventoryCompareExport(true)" href="javascript:">导出所有页</a>
                </div>
            </span>
            <span>
                <button class="btn btn-outline-dark btn-sm form-control-sm  tooltipTarget" title="导入Excel生成库存对比" @click="importExcel">导入</button>
            </span>
        </div>
    </span>
        <div class="card-body pt-1">
            <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-sm text-nowrap table-striped table-bordered m-0" id="headerParent">
                <tr class="p-0" id="header"></tr>
                <tr v-for="(inventoryCompare,i) in inventoryCompares">
                   <td>
                       <input type="checkbox" :value="inventoryCompare.id" v-model="checkData">
                   </td>
                    <td>@{{ i+1 }}</td>
                    <td>@{{ inventoryCompare.owner_name }}</td>
                    <td>@{{ inventoryCompare.mission_code }}</td>
                    <td>@{{ inventoryCompare.created_at }}</td>
                    <td>@{{ inventoryCompare.commodity_name }}</td>
                    <td>@{{ inventoryCompare.commodity_sku }}</td>
                    <td>
                        <span v-if="inventoryCompare.commodity_barcodes && inventoryCompare.commodity_barcodes.length>0">
                            <span v-if="inventoryCompare.commodity_barcodes.length==1">
                                @{{ inventoryCompare.commodity_barcodes[0].code }}
                            </span>
                            <span v-if="inventoryCompare.commodity_barcodes.length>1">
                                <small v-for="barcode in inventoryCompare.commodity_barcodes">@{{ barcode.code }}<br></small>
                            </span>
                        </span>
                    </td>
                    <td>@{{ inventoryCompare.custom_location }}</td>
                    <td>@{{ inventoryCompare.quality }}</td>
                    <td>@{{ inventoryCompare.amount_in_sys }}</td>
                    <td>@{{ inventoryCompare.amount_in_compare }}</td>
                    <td>@{{ inventoryCompare.differ }}</td>
                </tr>
            </table>
            {{$inventoryCompares->appends($param)->links()}}
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{asset('js/queryForm/export200818a.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/queryForm200914.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/header200826b.js')}}"></script>
    <script>
        let vue = new Vue({
            el:"#container",
            data:{
                {{--inventoryCompares:{!! $inventoryCompares->toJson() !!}['data'],--}}
                inventoryCompares : [
                        @foreach($inventoryCompares as $inventoryCompare)
                    {id:'{{$inventoryCompare->id}}',owner_name:'{{$inventoryCompare->owner ? $inventoryCompare->owner->name : ''}}',
                        created_at:'{{$inventoryCompare->created_at}}', commodity_name:'{{$inventoryCompare->commodity ? $inventoryCompare->commodity->name : ''}}',
                        commodity_sku:'{{$inventoryCompare->commodity ? $inventoryCompare->commodity->sku : ''}}',
                        commodity_barcodes:[
                                @foreach($inventoryCompare->commodity ? $inventoryCompare->commodity->barcodes ?? [] : [] as $barcode)
                            {code:'{{$barcode->code}}'},
                            @endforeach
                        ],
                        custom_location:'{{$inventoryCompare->custom_location}}', quality:'{{$inventoryCompare->quality}}', amount_in_sys:'{{$inventoryCompare->amount_in_sys}}',
                        amount_in_compare:'{{$inventoryCompare->amount_in_compare}}',
                        differ:'{{$inventoryCompare->differ}}', mission_code:'{{$inventoryCompare->mission_code}}',
                    },
                    @endforeach
                ],
                differ:[
                    {name:'全部',value:'全部'},{name:'有',value:'有'},{name:'无',value:'无'},
                ],
                owners : [
                        @foreach($owners as $owner)
                    {name:"{{$owner->id}}",value:"{{$owner->name}}"},
                    @endforeach
                ],
                checkData:[],
                fakeOwners:'',
                isSubmit:false,
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.inventoryCompares.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
                }
            },
            mounted(){
                $(".tooltipTarget").tooltip({'trigger': 'hover'});
                $("#container").removeClass('d-none');
                this.fakeOwners = this.owners;
                let data=[
                    [
                        {name:'date_start',type:'dateTime',tip:'选择创建日期的起始时间'},
                        {name:'mission_code',type:'input',tip:'任务号：糊模查找需要在左边打上%符号',placeholder: '任务号'},
                        {
                            name: 'owner_id', type: 'select_multiple_select', tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的客户'],
                            placeholder: ['货主', '定位或多选货主'], data: this.owners
                        },
                    ],
                    [
                        {name:'date_end',type:'dateTime',tip:'选择创建日期的结束时间'},
                        {name: 'differ', type: 'select', placeholder: '差值', data: this.differ},
                    ],
                ];
                this.form = new query({
                    el:'#form',
                    condition:data,
                });
                this.form.init();
                let column = [
                    {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
                        dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
                    {name:'index',value: '序号', neglect: true},
                    {name:'owner_name',value: '货主'},
                    {name:'mission_code',value: '任务号'},
                    {name: 'created_at', value: '生成时间'},
                    {name: 'commodity_name', value: '商品名称'},
                    {name:'commodity_sku',value: '商品编码'},
                    {name: 'commodity_barcodes', value: '商品条码', neglect: true},
                    {name: 'amount', value: '属性仓', neglect: true},
                    {name: 'quality', value: '质量状态', neglect: true},
                    {name: 'amount_in_sys',value: '宝时库存', neglect: true},
                    {name: 'amount_in_compare', value: '参考库存', neglect: true},
                    {name: 'differ', value: '差值', neglect: true},
                ];
                let _this = this;
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.inventoryCompares,
                        restorationColumn: 'id',
                        fixedTop:($('#form').height())+2,
                        vue:vue
                    });
                    header.init();
                },0);
            },
            methods:{
                //全选事件
                checkAll(e) {
                    if (e.target.checked) {
                        this.inventoryCompares.forEach((el) => {
                            if (!el.id) this.checkData.push(el.id);
                            if (el.id && this.checkData.indexOf(el.id) === -1) {
                                this.checkData.push(el.id);
                            }
                        });
                    } else {
                        this.checkData = [];
                    }
                },
                importExcel(){
                    $('#importExcel').modal('show');
                },
                submitFrom(){
                    let _this=this;
                    _this.isSubmit=true;
                },
                flushView(){
                  window.location.reload();
                },
                inventoryCompareExport(checkAllSign){
                    let url = '{{url('inventory/statement/inventoryCompare/export')}}'
                    let token='{{ csrf_token() }}';
                    excelExport(checkAllSign,this.checkData,url,this.sum,token);
                },
                // 定位货主(e){
                //     let target = $(e.target).val();
                //     if(target === ''){
                //         this.fakeOwners = this.owners;
                //     }else{
                //         this.fakeOwners = this.fakeOwners.filter(function(map){
                //             return map.value.includes(target) ;
                //         })
                //     }
                // },
            },
        });
    </script>
@endsection