baoshi-was/resources/views/store/checkingReceive/mission.blade.php

@extends('layouts.app')
@section('title')盘收一体-任务@endsection

@section('content')
<div id="container" class="d-none container-fluid">
    <span>
        @component('store.menu')@endcomponent
        @component('store.checkingReceive.menu')@endcomponent
    </span>
    <div class="modal fade" id="import" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body" style="text-align:center;height: 150px">
                    <button type="button" id="popover" class="btn btn-danger"
                            data-container="body" data-toggle="popover" data-placement="bottom"
                            :data-content="popoverContent" data-html="true">
                        部分数据导入失败
                    </button>
                    <div class="mt-5">
                        <label>
                            <input name="file" hidden type="file" class="col-5" id="excelFile" @change="getFile($event)"
                                   accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
                        </label>
                        <button class="btn btn-dark col-5" @click="$('#excelFile').trigger('click');">选择Excel文件</button><br>
                        <small class="text-primary">@{{ excel.file ? excel.file.name : '' }}</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="col-12 btn btn-success" @click="importMission()">开始导入</button>
                </div>
            </div>
        </div>
    </div>

    <div id="form_div"></div>
    <div class="ml-2">
        <button class="btn btn-sm btn-outline-info" @click="openImport()">导入</button>
    </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 mt-1" id="headerParent">
        <tr id="header"></tr>
        <tr v-for="(storeCheckingReceive,i) in storeCheckingReceives">
            <td>
                <label><input class="checkItem" type="checkbox" :value="storeCheckingReceives.id" v-model="checkData" /></label>
            </td>
            <td>@{{ i+1 }}</td>
            <td>@{{ storeCheckingReceive.id }}</td>
            <td>@{{ storeCheckingReceive.owner_name }}</td>
            <td>@{{ storeCheckingReceive.status }}</td>
            <td>@{{ storeCheckingReceive.is_receive_diff }}</td>
            <td>@{{ storeCheckingReceive.asn }}</td>
            <td>@{{ storeCheckingReceive.is_asn_diff }}</td>
            <td>@{{ storeCheckingReceive.created_at }}</td>
            <td>
                @can('入库管理-盘收一体-盘收')<a target="_blank" :href="'{{url('store/checkReceive/mission')}}/'+storeCheckingReceive.id">
                    <button class="btn btn-sm btn-outline-success">盘收</button>
                </a>@endcan
            </td>
        </tr>
    </table>
    {{$storeCheckingReceives->appends($params)->links()}}
</div>
@stop

@section('lastScript')
    <script type="text/javascript" src="{{asset('js/queryForm/header200826b.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/queryForm200914.js')}}"></script>
    <script>
        let vue = new Vue({
            el:"#container",
            data:{
                storeCheckingReceives:[
                    @foreach($storeCheckingReceives as $storeCheckingReceive)
                    {id:'{{$storeCheckingReceive->id}}',owner_name:'{{$storeCheckingReceive->owner ? $storeCheckingReceive->owner->name : ''}}',
                        created_at:'{{$storeCheckingReceive->created_at}}',status:'{{$storeCheckingReceive->status}}',
                        is_receive_diff:'{{$storeCheckingReceive->is_receive_diff}}',asn:'{{$storeCheckingReceive->asn}}',
                        is_asn_diff:'{{$storeCheckingReceive->is_asn_diff}}',
                    },
                    @endforeach
                ],
                owners:[
                    @foreach($owners as $owner)
                    {name:'{{$owner->id}}',value:'{{$owner->name}}'},
                    @endforeach
                ],
                checkData:[],
                sum:Number('{{$storeCheckingReceives->total()}}'),
                excel : {
                    file : null,
                },
                popoverContent:'',
            },
            mounted(){
                $('#container').removeClass('d-none');
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                let _this = this;
                let data = [[
                    {name:'created_at_start',type:'dateTime',tip:'选择显示指定日期的起始时间'},
                    {name:'created_at_end',type:'dateTime',tip:'选择显示指定日期的结束时间'},
                    {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的客户'],
                        placeholder:['货主','定位或多选货主'],data:_this.owners},
                    {name:'asn',type:'input',tip:'ASN单号：可在两侧增加百分号(%)进行模糊搜索',placeholder:'ASN单号'},
                ]];

                _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:'index',value: '序号', neglect: true},
                    {name:'id',value: 'ID', neglect: true},
                    {name:'owner_name',value: '货主'},
                    {name:'status',value: '状态'},
                    {name:'is_receive_diff',value: '收货差异'},
                    {name:'asn',value: 'ASN单号'},
                    {name:'is_asn_diff',value: 'ASN差异'},
                    {name:'created_at',value: '创建时间'},
                    {name:'operating',value: '操作', neglect: true},
                ];
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.storeCheckingReceives,
                        restorationColumn: 'id',
                        vue:vue,
                    });
                    header.init();
                },0);
            },
            methods:{
                checkAll(event){
                    if (event.target.checked){
                        this.packages.forEach((el)=>{
                            if (this.checkData.indexOf(el.id) === '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else this.checkData = [];
                },
                getFile(e){
                    this.excel.file = e.target.files[0];
                },
                openImport(){
                    $("#popover").attr('hidden','hidden');
                    $('#import').modal('show');
                },
                importMission(){
                    if (!this.excel.file){
                        tempTip.setDuration(3000);
                        tempTip.setIndex(1099);
                        tempTip.showSuccess('未选择任何文件!');
                        return;
                    }
                    let formData = new FormData();
                    formData.append("file",this.excel.file);
                    axios.post('{{url('store/checkReceive/mission/import')}}',formData,{
                        'Content-Type':'multipart/form-data'
                    })
                    .then(res=>{
                        if (res.data.success){
                            let receive = res.data.data;
                            let storeCheckingReceive = {
                                id:receive.id,owner_name:receive.owner_name,created_at:receive.created_at,
                                status:receive.status,is_receive_diff:receive.is_receive_diff,asn:receive.asn,
                                is_asn_diff:receive.is_asn_diff
                            };
                            this.storeCheckingReceives.unshift(storeCheckingReceive);
                            console.log(this.storeCheckingReceives);
                            if (res.data.errors.length < 1) $("#import").modal('hide');
                            else this.writeErrorText(res.data.errors);

                            tempTip.setDuration(2000);
                            tempTip.setIndex(1099);
                            tempTip.showSuccess("任务导入成功");
                            return true;
                        }
                        if (res.data.errors && res.data.errors.length > 0){
                            this.writeErrorText(res.data.errors)
                            return true;
                        }
                        tempTip.setDuration(3000);
                        tempTip.setIndex(1099);
                        tempTip.show(res.data.data);
                    }).catch(err=> {
                        tempTip.setDuration(3000);
                        tempTip.show("网络错误："+err);
                    })
                },
                writeErrorText(errors){
                    let content = '';
                    for (let i in errors){
                        content += errors[i]+"</br>";
                    }
                    this.popoverContent = content;
                    setTimeout(function () {
                        $("#popover").removeAttr('hidden').popover('show');
                    },0);
                }
            },
        });
    </script>
@stop