baoshi-was/resources/views/inventory/statement/dailyLog.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="modal" tabindex="-1" role="dialog" aria-labelledby="pasteDataTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header row form-inline">
                        <input type="text" v-model="name" class="form-control form-control-sm col-5 offset-3" placeholder="搜索货主，点击下方块添加" />
                        <button class="btn btn-sm btn-info col-2" @click="seekOwner()">搜索</button>
                        <label class="col-2"></label>
                    </div>
                    <div class="modal-body container row" style="text-align:center">
                        <div class="col-2 mt-2" v-for="owner in owners">
                            <div class="tooltipTarget" style="border: 1px solid #aac7ea;height: 80px;text-align: center;line-height: 80px;border-radius: 4px;cursor: pointer;overflow: hidden"
                                :style="[{'background': loggingOwners.includes(Number(owner.name)) ? '#00FF00' : ''},
                                    {'box-shadow' : seekOwners.includes(owner.name) ? '0px 0px 10px 5px rgba(0,0,0,0.9)' : ''}]"
                            @click="addLoggingOwner( owner.name,owner.value )" :title="owner.value">@{{ owner.value }}</div>
                        </div>
                    </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="dailyLogExport(false)" href="javascript:">导出勾选内容</a>
                    <a class="dropdown-item" @click="dailyLogExport(true)" href="javascript:">导出所有页</a>
                </div>
            </span>
            @can('库存管理-库存体积-管理监听货主')<button class="btn btn-outline-info btn-sm tooltipTarget mt-1" @click="openModal()">管理监听货主</button>@endcan
        </div>
        <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="(inventoryDailyLog,i) in inventoryDailyLogs" @click="selectedColor(i,$event)">
                   <td>
                       <input type="checkbox" :value="inventoryDailyLog.id" v-model="checkData">
                   </td>
                    <td>@{{ i+1 }}</td>
                    <td>@{{ inventoryDailyLog.owner_name }}</td>
                    <td>@{{ inventoryDailyLog.created_at }}</td>
                    <td>@{{ inventoryDailyLog.commodity_name }}</td>
                    <td>@{{ inventoryDailyLog.commodity_sku }}</td>
                    <td>
                        <span v-if="inventoryDailyLog.commodity_barcodes && inventoryDailyLog.commodity_barcodes.length>0">
                            <span v-if="inventoryDailyLog.commodity_barcodes.length==1">
                                @{{ inventoryDailyLog.commodity_barcodes[0].code }}
                            </span>
                            <span v-if="inventoryDailyLog.commodity_barcodes.length>1">
                                <small v-for="barcode in inventoryDailyLog.commodity_barcodes">@{{ barcode.code }}<br></small>
                            </span>
                        </span>
                    </td>
                    <td>@{{ inventoryDailyLog.depository_name }}</td>
                    <td>@{{ inventoryDailyLog.amount }}</td>
                    <td>@{{ inventoryDailyLog.commodity_length }}</td>
                    <td>@{{ inventoryDailyLog.commodity_width }}</td>
                    <td>@{{ inventoryDailyLog.commodity_height }}</td>
                    <td>@{{ inventoryDailyLog.commodity_volumn }}</td>
                    <td>@{{ inventoryDailyLog.volumn_occupied }}</td>
                    <td>@{{ inventoryDailyLog.gross_weight }}</td>
                </tr>
            </table>
            {{$inventoryDailyLogs->appends($param)->links()}}
        </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:"#container",
            data:{
                inventoryDailyLogs : [
                    @foreach($inventoryDailyLogs as $inventoryDailyLog)
                    {id:'{{$inventoryDailyLog->id}}',owner_name:'{{$inventoryDailyLog->owner ? $inventoryDailyLog->owner->name : ''}}',
                        created_at:'{{$inventoryDailyLog->created_at}}', commodity_name:'{{$inventoryDailyLog->commodity ? $inventoryDailyLog->commodity->name : ''}}',
                        commodity_sku:'{{$inventoryDailyLog->commodity ? $inventoryDailyLog->commodity->sku : ''}}',
                        commodity_barcodes:[
                            @foreach($inventoryDailyLog->commodity ? $inventoryDailyLog->commodity->barcodes ?? [] : [] as $barcode)
                            {code:'{{$barcode->code}}'},
                            @endforeach
                        ],
                        amount:'{{$inventoryDailyLog->amount}}', commodity_length:'{{$inventoryDailyLog->commodity ? $inventoryDailyLog->commodity->length : ''}}',
                        commodity_width:'{{$inventoryDailyLog->commodity ? $inventoryDailyLog->commodity->width : ''}}',
                        commodity_height:'{{$inventoryDailyLog->commodity ? $inventoryDailyLog->commodity->height : ''}}',
                        commodity_volumn:'{{$inventoryDailyLog->commodity ? $inventoryDailyLog->commodity->volumn : ''}}',
                        volumn_occupied:'{{$inventoryDailyLog->volumn_occupied}}',
                        depository_name:'{{$inventoryDailyLog->depository ? $inventoryDailyLog->depository->name : ''}}',
                        gross_weight:'{{$inventoryDailyLog->gross_weight}}'},
                    @endforeach
                ],
                owners : [
                    @foreach($owners as $owner)
                    {name:"{{$owner->id}}",value:"{{$owner->name}}"},
                    @endforeach
                ],
                checkData:[],
                name : "",
                loggingOwners : [],
                seekOwners : [],
                sum:{!! $inventoryDailyLogs->total() !!},
                selectTr:''
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.inventoryDailyLogs.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');
                let data=[
                    [
                        {name:'created_at_start',type:'dateTime',tip:'选择创建日期的起始时间'},
                        {
                            name: 'owner_id', type: 'select_multiple_select', tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的客户'],
                            placeholder: ['货主', '定位或多选货主'], data: this.owners
                        },
                    ],
                    [
                        {name:'created_at_end',type:'dateTime',tip:'选择创建日期的结束时间'},
                    ],
                ];
                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: 'created_at', value: '日期'},
                    {name: 'commodity_name', value: '商品名称'},
                    {name:'commodity_sku',value: '商品编码'},
                    {name: 'commodity_barcodes', value: '商品条码', neglect: true},
                    {name: 'depository_name', value: '属性仓'},
                    {name: 'amount', value: '在库数量', neglect: true},
                    {name: 'commodity_length', value: '长', neglect: true},
                    {name: 'commodity_width',value: '宽', neglect: true},
                    {name: 'commodity_height', value: '高', neglect: true},
                    {name: 'commodity_volumn', value: '体积', neglect: true},
                    {name: 'volumn_occupied', value: '总占用体积', neglect: true},
                    {name: 'gross_weight', value: '总毛重', neglect: true},
                ];
                let _this = this;
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.inventoryDailyLogs,
                        restorationColumn: 'id',
                        fixedTop:($('#form').height())+2,
                        vue:vue
                    });
                    header.init();
                },0);
            },
            methods:{
                selectedColor(id,e){
                    $('#headerParent tr[class=focusing]').removeClass('focusing')
                    if (id==this.selectTr){
                        this.selectTr='';
                        return;
                    }
                    this.selectTr=id;
                    $(e.target).parent('tr').addClass('focusing')
                },
                //全选事件
                checkAll(e) {
                    if (e.target.checked) {
                        this.inventoryDailyLogs.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 = [];
                    }
                },
                openModal(){
                    let url = "{{url('inventory/statement/dailyLog/getLoggingOwner')}}";
                    axios.post(url).then(res=>{
                       this.loggingOwners = res.data;
                        $("#modal").modal('show');
                    });
                },
                seekOwner(){
                    if (!this.name)return ;
                    let name = this.name;
                    let seekOwners = [];
                    this.owners.forEach(function (owner) {
                        if ((owner.value).indexOf(name) !== -1){
                            seekOwners.push(owner.name);
                        }
                    });
                    if (seekOwners.length > 0)this.seekOwners = seekOwners;
                },
                addLoggingOwner(owner_id,name){
                    if (!owner_id){
                        alert('选中记录异常！');
                        return;
                    }
                    if (this.loggingOwners.includes(Number(owner_id))){
                        return;
                    }
                    if (!confirm("确定要添加对“"+name+"”的监听吗？"))return;
                    let url = "{{url('inventory/statement/dailyLog/addLoggingOwner')}}";
                    axios.post(url,{
                        owner_id:owner_id
                    }).then(res=>{
                        tempTip.setDuration(2000);
                        tempTip.setIndex(1099);
                        if (res.data.success){
                            this.loggingOwners.push(Number(res.data.data));
                            this.seekOwners = [];
                            tempTip.showSuccess('成功添加对“'+name+"的记录监听");
                            tempTip.setIndex(99);
                            return;
                        }
                        tempTip.show(res.data.data);
                        tempTip.setIndex(99);
                    }).catch(err=>{
                        tempTip.setDuration(3000);
                        tempTip.setIndex(1099);
                        tempTip.show('网络连接错误：'+err);
                        tempTip.setIndex(99);
                    });
                },
                dailyLogExport(checkAllSign){
                    let url = '{{url('inventory/statement/dailyLog/export')}}';
                    let token='{{ csrf_token() }}';
                    excelExport(checkAllSign,this.checkData,url,this.sum,token);
                },
            },
        });
    </script>
@endsection