|
|
@@ -0,0 +1,248 @@
|
|
|
+@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 style="border: 1px solid #aac7ea;height: 80px;text-align: center;line-height: 80px;border-radius: 4px;cursor: pointer"
|
|
|
+ :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 )">@{{ 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 d-none">
|
|
|
+ <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" @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">
|
|
|
+ <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.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>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ {{$inventoryDailyLogs->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/queryForm200818a.js')}}"></script>
|
|
|
+ <script type="text/javascript" src="{{asset('js/queryForm/header200819.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}}'},
|
|
|
+ @endforeach
|
|
|
+ ],
|
|
|
+ owners : [
|
|
|
+ @foreach($owners as $owner)
|
|
|
+ {name:"{{$owner->id}}",value:"{{$owner->name}}"},
|
|
|
+ @endforeach
|
|
|
+ ],
|
|
|
+ checkData:[],
|
|
|
+ name : "",
|
|
|
+ loggingOwners : [],
|
|
|
+ seekOwners : [],
|
|
|
+ },
|
|
|
+ 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: '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},
|
|
|
+ ];
|
|
|
+ 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:{
|
|
|
+ //全选事件
|
|
|
+ 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 = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dailyLogExport(type){
|
|
|
+
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+@endsection
|