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

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

@section('content')
    @component('inventory.statement.menu')@endcomponent
<div id="list" class="d-none card container-fluid" style="min-width: 1500px">
    <div id="form_div"></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="processExport(false)" href="javascript:">导出勾选内容</a>
            <a class="dropdown-item" @click="processExport(true)" href="javascript:">导出所有页</a>
        </div>
    </span>
    <table class="table table-sm table-striped table-bordered table-hover text-nowrap card-body mt-2">
        <tr>
            <th>
                <label for="all">
                    <input id="all" type="checkbox" @click="checkAll($event)">全选
                </label>
            </th>
            <th>序号</th>
            <th>货主</th>
            <th>库位</th>
            <th>产品编码</th>
            <th>产品条码</th>
            <th>商品名称</th>
            <th>属性仓</th>
            <th>质量状态</th>
            <th>失效日期</th>
            <th>批号</th>
            <th>移出数量</th>
            <th>移入数量</th>
            <th>在库数量</th>
            <th>占用数量</th>
        </tr>
        <tr v-for="(oracleActTransactingLog,i) in oracleActTransactingLogs">
            <td>
                <input class="checkItem" type="checkbox" :value="oracleActTransactingLog" v-model="checkData">
            </td>
            <td>@{{ i+1 }}</td>
            <td class="text-primary">@{{ oracleActTransactingLog.货主 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.库位 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.产品编码 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.产品条码 }}</td>
            <td :title="oracleActTransactingLog.商品名称" class="tooltipTarget" style="max-width: 200px;overflow:hidden">@{{ oracleActTransactingLog.商品名称 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.属性仓 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.质量状态 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.失效日期 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.批号 }}</td>
            <td>@{{ oracleActTransactingLog.移出数量 }}</td>
            <td>@{{ oracleActTransactingLog.移入数量 }}</td>
            <td><span v-if="oracleActTransactingLog.在库数量">@{{ oracleActTransactingLog.在库数量 }}</span><span v-else>0</span></td>
            <td><span v-if="oracleActTransactingLog.占用数量">@{{ oracleActTransactingLog.占用数量 }}</span><span v-else>0</span></td>
        </tr>
    </table>
    <div >
        <button type="button" @click="pageUp()" :readonly="page>1?false:true" class="btn btn-sm " :class="page>1?'btn-outline-info':''">上一页</button>
        <button type="button" @click="pageDown()" :readonly="page<maxPage?false:true" class="btn btn-sm m-3" :class="page<maxPage?'btn-outline-info':''">下一页</button>
        <input  @keyup.enter="pageSkip($event)" class="form-control-sm ml-3 tooltipTarget" :placeholder="'当前页数：'+page+'/'+maxPage" title="去往指定页">
        <span class="text-muted m-1">共 @{{ sum }} 条</span>
    </div>
</div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{asset('js/queryForm/export.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/queryForm200803a.js')}}"></script>
    <script>
        new Vue({
            el:"#list",
            data:{
                oracleActTransactingLogs:{!! $oracleActTransactingLogs !!},
                page:Number('{{$page}}'),
                owners:[
                    @foreach($owners as $owner)
                    {name:'{{$owner->descr_c}}',value:'{{$owner->descr_c}}'},
                    @endforeach
                ],
                checkData:[],
                maxPage:1,
                sum:0,
                date:[{name:'1',value:'近一天'},{name:'3',value:'近三天'},{name:'7',value:'近一周'},{name:'30',value:'近一月'},],
            },
            mounted:function () {
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $("#list").removeClass('d-none');
                if (this.oracleActTransactingLogs.length>0){
                    this.maxPage=Math.ceil(this.oracleActTransactingLogs[0].sum/50);
                    this.sum=this.oracleActTransactingLogs[0].sum;
                }
                let data=[
                    [
                        {name:['date_start','range'],type:'dataTime_select',tip:['选择创建日期的起始时间','查询内容的日期范围'],placeholder:['','查询内容的日期范围'],data: this.date},
                        {name:'TOLocation',type:'input',tip:'库位：糊模查找需要在左边打上%符号',placeholder: '库位'},
                        {name:'LotAtt05',type:'input',tip:'属性仓：糊模查找需要在左边打上%符号',placeholder: '属性仓'},
                        {name:'LotAtt02_start',type:'dataTime',tip:'选择显示失效日期的起始时间'},
                        {name:'descr_c',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的客户'],
                            placeholder:['货主','定位或多选货主'],data:this.owners},
                    ],
                    [
                        {name:'date_end',type:'dataTime',tip:'选择创建日期的结束时间'},
                        {name:'SKU',type:'input',tip:'产品编码：糊模查找需要在左边打上%符号',placeholder: '产品编码'},
                        {name:'ALTERNATE_SKU1',type:'input',tip:'产品条码：糊模查找需要在左边打上%符号',placeholder: '产品条码'},
                        {name:'LotAtt02_end',type:'dataTime',tip:'选择显示失效日期的结束时间'},
                    ],
                ];
                this.form = new query({
                    el:'#form_div',
                    condition:data
                });
                this.form.init();
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.oracleActTransactingLogs.length){
                            document.querySelector('#all').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep:true
                }
            },
            methods:{
                pageUp(){
                    if (this.page<=1)return;
                    this.href(this.page-1);
                },
                pageDown(){
                    if (this.page>=this.maxPage)return;
                    this.href(this.page+1);
                },
                pageSkip(e){
                    if (Number(e.target.value)<=0 || Number(e.target.value)>this.maxPage){
                        tempTip.setDuration(2000);
                        tempTip.show('页数不存在！ ');
                        return
                    }
                    this.href(e.target.value);
                },
                href(page){
                    let url = document.URL;
                    if (url.indexOf('page='+this.page) != -1){
                        url = url.replace("page="+this.page,"page="+page);
                    }else{
                        if (url.indexOf('?') == -1) url += "?page="+page;
                        else url += "&page="+page;
                    }
                    window.location.href=url;
                },
                //全选事件
                checkAll(e){
                    if (e.target.checked){
                        this.oracleActTransactingLogs.forEach((el,i)=>{
                            if (this.checkData.indexOf(el) == '-1'){
                                this.checkData.push(el);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                processExport(checkAllSign){
                    let url = '{{url('inventory/statement/changeInventory/export')}}';
                    let token='{{ csrf_token() }}';
                    let data= JSON.stringify( this.checkData );
                    excelExport(checkAllSign,data,url,this.sum,token);
                },
            },
            filters:{
                json(value) {
                    return JSON.stringify(value);
                }
            },
        });
    </script>
@endsection