baoshi-was/resources/views/inventory/stockInventory/mission.blade.php

@extends('layouts.app')
@section('title')盘点-任务@endsection


@section('content')
    @component('inventory.stockInventory.menu')@endcomponent
    <div class="text-center h5 mt-2" id="loadingPage">
        载入中……
    </div>
    <div id="list" class="container-fluid d-none" {{--style="min-width: 1500px"--}}>
            <div class="card-header alert-info">
        <form class="form-inline">
            <span class="form-inline ml-5">
                 <span class="btn btn-sm btn-outline-secondary tooltipTarget" @click="syncOwners">同步货主</span>
                <select class="form-control form-control-sm tooltipTarget" name="owner_id" id="owner_id" style="width: 150px;position: relative" title="选择指定货主" v-model="owner_id">
                                        <option value="">货主</option>
                                        <option v-for="owner in owners" :value="owner.name">@{{ owner.value }}</option>
                                    </select>
                <input placeholder="定位货主" id="ownerName" autocomplete="off" @input="定位货主($event)" class="form-control form-control-sm tooltipTarget" style="width: 100px" title="输入关键字定位货主" >
            </span>
            <span class="form-inline">
                <input type="date" @change="hasDateStart" class="form-control form-control-sm ml-5 tooltipTarget" name="date_start" id="date_start"  title="选择创建日期的开始时间" style="width: 150px">
                <input type="date" @change="hasDateEnd" class="form-control form-control-sm ml-5 tooltipTarget" name="date_end" id="date_end"  title="选择创建日期的结束时间" style="width: 150px">
                <input type="text" @change="hasLocation" class="form-control form-control-sm ml-5 tooltipTarget" name="location" id="location"  title="选择创建盘点任务库位的前缀字母，支持多个，以空格或逗号分隔" placeholder="库位前缀字母,多个空格分隔" style="width: 150px" autocomplete="off">
                <input type="text" @change="hasBarcode" class="form-control form-control-sm ml-5 tooltipTarget" name="barcode" id="barcode"  title="商品条码，糊模查找需要在左边打上%符号" placeholder="条码" style="width: 200px" autocomplete="off">
            </span>
            <span class="ml-5">
            @can('库存管理-盘点')
                    <span v-if="date_start&&date_end&&!location&&!barcode" class="btn btn-sm  btn-outline-secondary tooltipTarget" @click="createInventoryMission" title="选择单一指定货主生成盘点任务">生成动盘任务</span>
                    <span v-else-if="location||barcode ||(date_start&&date_end&&location)||(date_start&&date_end&&barcode)" class="btn btn-sm  btn-outline-secondary tooltipTarget" @click="createInventoryMission" title="选择单一指定货主生成盘点任务">生成局部盘点任务</span>
                    <span v-else class="btn btn-sm btn-outline-secondary  tooltipTarget" @click="createInventoryMission" title="选择单一指定货主生成盘点任务">生成全盘任务</span>
                @endcan
            </span>
        </form>
        </div>
        <div id="form_div" class="mt-2"></div>

{{--        <div class="card-header pt-0">--}}
{{--            <div id="form"></div>--}}
{{--            <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="inventoryExport(false)" href="javascript:">导出勾选内容</a>--}}
{{--            <a class="dropdown-item" @click="inventoryExport(true)" href="javascript:">导出所有页</a>--}}
{{--        </div>--}}
{{--        </span>--}}
{{--        </div>--}}

        <div class=" 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="(inventory,i) in inventoryAccounts" @click="selectedColor(inventory.id)" :style="{'font-weight': inventory.id==selectedStyle?'bold':''}">
                    <td>
                        <input class="checkItem" type="checkbox" :value="inventory.id" v-model="checkData">
                    </td>
                    <td>
                        @can('库存管理-盘点')
                            <span class="btn  btn-sm btn-outline-info" @click="enterStockInventory(inventory.id)" v-if="inventory.status!='已完成'&&inventory.status!='已审核'">盘点</span>
                        @endcan
                        @can('库存管理-盘点-查看')
                            <a :href="'{{url('inventory/stockInventory/enterStockInventory')}}/'+inventory.id+'?listMode=true'"><button class="btn btn-sm btn-outline-dark">查看</button></a>
                        @endcan
                    </td>
                    <td>
                        @can('库存管理-盘点-项目审核')
                            <span v-if="inventory.auditor" class="text-success">已审核</span>
                            <span v-else class="btn  btn-sm btn-outline-dark" @click="inventoryChecked(inventory.id)">审核</span>
                        @else
                            <span v-if="inventory.auditor" class="text-success">已审核</span>
                            <span v-else>未审核</span>
                        @endcan
                    </td>
                    <td >@{{ i+1 }}</td>
                    <td >@{{ inventory.status }}</td>
                    <td >@{{ inventory.id }}</td>
                    <td >@{{ inventory.created_at }}</td>
                    <td >@{{ inventory.owner_name }}</td>
                    <td style="width: 200px;word-wrap: break-word">
                        <small>@{{ inventory.type }}</small>
                        <span v-if="inventory.remark" class="text-wrap"><small>@{{ inventory.remark }}</small></span>
                    </td>
                    <td >@{{ inventory.start_at }}</td>
                    <td class="text-muted">@{{ inventory.end_at }}</td>
                    <td >@{{ inventory.total }}</td>
                    <td >@{{ inventory.processed }}</td>
                    <td >@{{ inventory.surplus }}</td>
                    <td >@{{ inventory.ignored?inventory.ignored:0 }}</td>
                    <td>@{{ inventory.difference }}</td>
                    <td>@{{ inventory.returned }}</td>
                    <td v-if="inventory.processed">@{{ inventory.processed }}/@{{ inventory.total }}</td>
                    <td>@{{ inventory.auditor }}</td>
                    <td class="text-muted">@{{ inventory.creator }}</td>
                    <td>
                        <span v-if="inventory.status!='已完成'&&inventory.status!='已审核'" class="btn  btn-sm btn-outline-danger" @click="deleteStockInventoryMission(inventory.id)">删</span>
                    </td>
                </tr>
            </table>
            <div class="text-info h5 btn btn">{{$inventoryAccounts->count()}}/@{{ sum }}</div>
            <div>{{$inventoryAccounts->appends($paginateParams)->links()}}</div>
        </div>
    </div>

@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <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: {
                {{--inventoryAccounts:{!! $inventoryAccounts->toJson()!!}['data'],--}}
                inventoryAccounts : [
                        @foreach($inventoryAccounts as $inventory)
                    {id:'{{$inventory->id}}',owner_name:'{{$inventory->owner?$inventory->owner->name:''}}',
                        creator:'{{$inventory->creator?$inventory->creator->mark:''}}',
                        created_at:'{{$inventory->created_at}}', status:'{{$inventory->status}}', processed:'{{$inventory->processed}}',
                        returned:'{{$inventory->returned}}', surplus:'{{$inventory->surplus}}',
                        total:'{{$inventory->total}}',end_at:'{{$inventory->end_at}}',
                        start_at:'{{$inventory->start_at}}',type:'{{$inventory->type}}',
                        difference:'{{$inventory->difference}}',
                        remark:'{{$inventory->remark}}',ignored:'{{$inventory->ignored}}',auditor:'{{$inventory->auditor?$inventory->userAuditor->name:''}}',
                    },
                    @endforeach
                ],
                owners:[
                        @foreach($owners as $owner)
                    {name:'{{$owner->id}}',value:'{{$owner->name}}'},
                    @endforeach
                ],
                {{--owners:{!! $owners !!},--}}
                checkData: [],
                selectedStyle:'',
                sum:{!! $inventoryAccounts->total() !!},
                // formData:{},
                date_end:'',location:'',barcode:'', date_start:'',
                fakeOwners:'',
                owner_id:'',
            },
            mounted: function () {
                $(".tooltipTarget").tooltip({'trigger': 'hover'});
                (function 显示渲染后页面(){
                    $('#loadingPage').remove();
                    $('#list').removeClass('d-none');
                })()
                this.fakeOwners=this.owners;
                $('#list').removeClass('d-none');
                let data=[
                    [
                        {name:'date_start',type:'dateTime',tip:'选择显示指定日期的起始时间'},
                        {name:'date_end',type:'dateTime',tip:'选择显示指定日期的结束时间'},
                         {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的货主'],
                             placeholder:['货主','定位或多选货主'],data:this.owners},
                        {name:'type',type:'select',placeholder: '任务类型',data:[{name:'全盘',value:'全盘'},{name:'动盘',value:'动盘'}, {name:'局部盘点',value:'局部盘点'}]},
                    ],
                ];
                this.form = new query({
                    el:"#form_div",
                    condition:data,
                });
                this.form.init();
                let _this = this;
                let column = [
                    {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
                        dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
                    {name:'operation',value: '操作', neglect: true},
                    {name:'check',value: '审核', neglect: true},
                    {name:'index',value: '序号', neglect: true},
                    {name:'status',value: '盘点状态', neglect: true},
                    {name:'id',value: '盘点单号', neglect: true},
                    {name: 'created_at', value: '创建日期'},
                    {name:'owner_name',value: '货主'},
                    {name: 'type', value: '任务类型',neglect: true},
                    {name:'start_at',value: '起始时间'},
                    {name: 'end_at', value: '结束时间', neglect: true},
                    {name: 'total', value: '盘点任务数', neglect: true},
                    {name: 'processed', value: '盘点数量', neglect: true},
                    {name: 'surplus',value: '未盘数量', neglect: true},
                    {name: 'ignored',value: '跳过数量', neglect: true},
                    {name: 'difference', value: '差异数量', neglect: true},
                    {name: 'returned', value: '复盘归位', neglect: true},
                    {name: '', value: '盘点比例', neglect: true},
                    {name: 'auditor', value: '审核人', neglect: true},
                    {name: 'creator', value: '创建人', neglect: true},
                    {name:'remove',value: '操作', neglect: true},
                ];
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.inventoryAccounts,
                        restorationColumn: 'id',
                        fixedTop:($('#form').height())+2,
                        vue:vue
                    });
                    header.init();
                },0);
            },
            methods:{
                selectedColor(id){
                    if (id==this.selectedStyle){
                        this.selectedStyle='';
                        return;
                    }
                    this.selectedStyle=id;
                },
                checkAll(e){
                    if (e.target.checked){
                        this.inventories.forEach((el,i)=>{
                            if (this.checkData.indexOf(el.id) == '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                inventoryExport(checkAllSign){
                    let url = '{{url('inventory/stockInventoryExport')}}';
                    let token='{{ csrf_token() }}';
                    excelExport(checkAllSign,this.checkData,url,this.sum,token);
                },
                //生成盘点任务
                createInventoryMission(){
                    let _this=this;
                    const date_end=document.getElementById('date_end').value;
                    const date_start=document.getElementById('date_start').value;
                    //const owner_id=$('#owner_id').val();
                    const owner_id=_this.owner_id;
                    const location=$('#location').val().trim();
                    const barcode=$('#barcode').val();
                    if(owner_id===''){
                        tempTip.setDuration(2000);
                        tempTip.show('生成盘点任务失败'+'   '+'请先选择货主！');
                        return;
                    }
                    if(!date_end && date_start){
                        tempTip.setDuration(2000);
                        tempTip.show('生成盘点任务失败'+'   '+'请选择结束时间！');
                        return;
                    }
                    if(date_end && !date_start){
                        tempTip.setDuration(2000);
                        tempTip.show('生成盘点任务失败'+'   '+'请选择开始时间！');
                        return;
                    }
                    tempTip.setDuration(999999);
                    tempTip.waitingTip('生成任务中');
                    // if (_this.formData.owner_id.length<=0){
                    //     tempTip.setDuration(1000);
                    //     tempTip.show('生成盘点任务失败'+'   '+'请先选择货主！');
                    //     return;
                    // }
                    let url='{{url('inventory/stockInventory/createStockInventoryMission')}}';
                    axios.post(url,{date_end:date_end,date_start:date_start,owner_id:owner_id,location:location,barcode:barcode}).then(function (response) {
                        tempTip.setDuration(2000);
                        tempTip.cancelWaitingTip();
                        if(!response.data.success){
                            tempTip.setDuration(1000);
                            tempTip.show('生成盘点任务失败'+'   '+response.data.data);
                            return;
                        }else{
                            let inventory=response.data.data;
                            //_this.inventories.push(inventory);
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('生成盘点任务成功!');
                            // tempTip.setDuration(99999);
                            // tempTip.waitingTip('页面跳转中');
                            window.location.href='{{url('inventory/stockInventory/enterStockInventory')}}/'+inventory.id;
                        }
                    }).catch(function (err) {
                        tempTip.cancelWaitingTip();
                        tempTip.setDuration(3000);
                        tempTip.show('生成盘点任务失败!'+'网络错误：' + err);
                    });
                },
                //进入盘点中页面  或者复盘页面
                enterStockInventory(id){
                    location.href='{{url('inventory/stockInventory/enterStockInventory')}}/'+id;
                },
                deleteStockInventoryMission(id){
                    let _this=this;
                    if(!confirm('确定要删除盘点单号为：“'+id+'”的盘点任务吗？')){return};
                    let url = '{{url('inventory/deleteStockInventoryMission')}}/'+id;
                    axios.delete(url).then(
                        function (response) {
                            if(!response.data.success){
                                tempTip.setDuration(3000);
                                tempTip.show('盘点单号:'+id+'删除失败!');
                            }else {
                                _this.inventoryAccounts.every(function (inventoryAccount,i) {
                                    if (response.data.data>0&&inventoryAccount.id===id){
                                        _this.inventoryAccounts.splice(i,1);
                                        return false;
                                    }else {
                                        return true
                                    }
                                });
                                tempTip.setDuration(3000);
                                tempTip.showSuccess('盘点单号:'+id+'删除成功!');
                            }
                        }
                    ).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('删除失败,网络链接错误！'+err);
                    });
                },
                inventoryChecked(id){
                    let _this=this;
                    let url = '{{url('inventory/inventoryChecked')}}';
                    axios.post(url,{id:id}).then(
                        function (response) {
                            if(!response.data.success){
                                tempTip.setDuration(3000);
                                tempTip.show('盘点单号:'+id+'审核失败!');
                            }else {
                                _this.inventoryAccounts.every(function (inventoryAccount,i) {
                                    if (inventoryAccount.id===id){
                                        inventoryAccount.auditor=response.data.data.user_auditor.name;
                                        inventoryAccount.status=response.data.data.status;
                                        return false;
                                    }else {
                                        return true
                                    }
                                });
                                tempTip.setDuration(3000);
                                tempTip.showSuccess('盘点单号:'+id+'审核成功!');
                            }
                        }
                    ).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('审核失败,网络链接错误！'+err);
                    });
                },
                syncOwners(){
                    let _this=this;
                    let url = '{{url('inventory/syncOwners')}}';
                    axios.get(url).then(function (response) {
                        if(!response.data.success){
                            tempTip.setDuration(3000);
                            tempTip.show(response.data.data);
                        }else {
                            _this.owners=response.data.data;
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('同步货主成功!');
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('同步货主失败,网络链接错误！'+err);
                    })
                },
                定位货主(e){
                    this.owners.some(owner => {
                        if (owner.value.indexOf(e.target.value) !== -1){
                            this.owner_id = owner.name;
                            return true;
                        }
                    });
                    if (e.target.value=== ''||e.target.value===null||e.target.value===undefined) {
                        this.owner_id='';
                    }
                },
                hasDateStart(){
                    this.date_start=document.getElementById('date_start').value;
                },
                hasDateEnd(){
                    this.date_end=document.getElementById('date_end').value;
                },
                hasLocation(){
                    this.location=$('#location').val().trim();
                },
                hasBarcode(){
                    this.barcode=$('#barcode').val();
                },
            }
        });
    </script>
@endsection