|
|
@@ -17,58 +17,87 @@
|
|
|
<a href="{{url('package/statistics')}}"><span class="btn btn-warning text-dark">清除过滤条件</span></a>
|
|
|
</div></td>
|
|
|
</tr>
|
|
|
- <tr>
|
|
|
- <td rowspan="2">
|
|
|
- <span class="text-muted">根据条件过滤:</span>
|
|
|
+ <tr >
|
|
|
+ <td rowspan="2" class="">
|
|
|
+ <div class="d-flex" style="height: 100px">
|
|
|
+ <span class="text-muted align-items-center d-flex">根据条件过滤:</span>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="form-inline" style="height: 100px">
|
|
|
+ <label class="align-items-center d-flex">选择货主:</label>
|
|
|
+
|
|
|
+ <div style="max-height: 90px;width:100px;overflow-y: scroll;border: solid 1px #ddd;border-radius:5px;opacity:0.5;text-align: center;transform:scale(0.9)" v-if="ownersCopy.length>0">
|
|
|
+ <ul class="list-group" id="seek" onselectstart="return false;">
|
|
|
+ <li title="双击添加货主" v-for="ownerCopy in ownersCopy" :id="ownerCopy.name"
|
|
|
+ @dblclick="selectedOwner(ownerCopy)" :style="ownerCopy.style ? selectedOwnerStyle :''" style="list-style: none"><a :name="ownerCopy.name">@{{ ownerCopy.name }}</a></li>
|
|
|
+ </ul>
|
|
|
+ <input hidden name="owner_id" :value="selectedOwners">
|
|
|
+ </div>
|
|
|
+ <div class="align-items-center d-flex">
|
|
|
+ <label>定位:</label>
|
|
|
+ <input type="text" style="width: 80px" class="form-control-sm tooltipTarget" placeholder="查找"
|
|
|
+ @input="owner_seek"
|
|
|
+ title="输入关键词快速定位下拉列表,回车确定">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</td>
|
|
|
<td >
|
|
|
- <label class="form-inline" style="width: 350px">时间:
|
|
|
- <input style="width: 150px" name="date_start" type="date" v-model="filterData.created_at_start" class="form-control-sm">
|
|
|
- <input style="width: 150px" type="date" name="date_end" v-model="filterData.created_at_end" class="form-control-sm">
|
|
|
- </label>
|
|
|
+ <div class="form-inline" style="height: 100px">
|
|
|
+ <label class="align-items-center d-flex">选择物流公司:</label>
|
|
|
+ <div style="max-height: 90px;overflow-y: scroll;border: solid 1px #ddd;border-radius:5px;opacity:0.5;text-align: center;transform:scale(0.9)" v-if="logisticsCopy.length>0">
|
|
|
+ <ul class="list-group" onselectstart="return false;">
|
|
|
+ <li title="双击添加物流公司" v-for="logisticCopy in logisticsCopy"
|
|
|
+ @dblclick="selectedLogistic(logisticCopy)" :style="logisticCopy.style ? selectedOwnerStyle :''" style="list-style: none">
|
|
|
+ <a :name="logisticCopy.name">@{{ logisticCopy.name }}</a></li>
|
|
|
+ </ul>
|
|
|
+ <input hidden name="logistic_id" :value="selectedLogistics">
|
|
|
+ </div>
|
|
|
+ <div class="align-items-center d-flex">
|
|
|
+ <label>定位:</label>
|
|
|
+ <input type="text" style="width: 80px" class="form-control-sm tooltipTarget" placeholder="查找"
|
|
|
+ @input="logistic_seek"
|
|
|
+ title="输入关键词快速定位下拉列表,回车确定">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</td>
|
|
|
- <td class="form-inline">
|
|
|
- <label >选择货主:</label>
|
|
|
- <div style="max-height: 90px;width:100px;overflow-y: scroll;border: solid 1px #ddd;border-radius:5px;opacity:0.5;text-align: center;transform:scale(0.9)" v-if="ownersCopy.length>0">
|
|
|
- <ul class="list-group">
|
|
|
- <li class="tooltipTarget" title="双击添加货主" v-for="ownerCopy in ownersCopy"
|
|
|
- @dblclick="selectedOwner(ownerCopy)" :style="ownerCopy.style ? selectedOwnerStyle :''" style="list-style: none"><a >@{{ ownerCopy.name }}</a></li>
|
|
|
- </ul>
|
|
|
+ <td >
|
|
|
+ <div class="form-inline" style="height: 100px;width: 350px">
|
|
|
+ <div class=" align-items-center d-flex">
|
|
|
+ <label >时间:</label>
|
|
|
+ <input style="width: 150px" name="date_start" type="date" v-model="filterData.date_start" class="form-control-sm">
|
|
|
+ <input style="width: 150px" name="date_end" type="date" v-model="filterData.date_end" class="form-control-sm">
|
|
|
+ </div>
|
|
|
+ <div class="m-auto d-flex">
|
|
|
+ <button class="btn btn-outline-dark">提交</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</td>
|
|
|
<td>
|
|
|
- <label for="">物流公司:</label>
|
|
|
- <input type="text" class="form-control-sm tooltipTarget" placeholder="查找"
|
|
|
- style="width:70px" @input="logistic_seek"
|
|
|
- title="输入关键词快速定位下拉列表,回车确定">
|
|
|
- <select name="logistic_seek" v-model="filterData.owner_id" class="form-control-sm tooltipTarget">
|
|
|
- <option > </option>
|
|
|
- @foreach($logistics as $logistic)
|
|
|
- <option value="{{$logistic->id}}">{{$logistic->name}}</option>
|
|
|
- @endforeach
|
|
|
- </select>
|
|
|
- <input hidden type="submit" value="kk">
|
|
|
+
|
|
|
</td>
|
|
|
+ </tr>
|
|
|
</table>
|
|
|
</form>
|
|
|
</div>
|
|
|
- <div class="">
|
|
|
- <table class="table table-striped table-sm text-nowrap table-hover">
|
|
|
- <tr >
|
|
|
- <th>货主</th>
|
|
|
- <th v-for="logisticCopy in logisticsCopy">@{{ logisticCopy.name }}</th>
|
|
|
- <th>总计</th>
|
|
|
- </tr>
|
|
|
- <tr v-for="ownerModel in ownersModel">
|
|
|
- <th>@{{ ownerModel.name }}</th>
|
|
|
- <td v-for="logisticCopy in logisticsCopy">@{{ ownerModel.logistics[logisticCopy.name] }}</td>
|
|
|
- <td>@{{ ownerModel.sum }}</td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
+ <div class="">
|
|
|
+ <table class="table table-striped table-sm text-nowrap table-hover">
|
|
|
+ <tr >
|
|
|
+ <th>货主</th>
|
|
|
+ <th v-for="logisticCopy in logisticsCopy">@{{ logisticCopy.name }}</th>
|
|
|
+ <th>总计</th>
|
|
|
+ </tr>
|
|
|
+ <tr v-for="ownerModel in ownersModel">
|
|
|
+ <th>@{{ ownerModel.name }}</th>
|
|
|
+ <td v-for="logisticCopy in logisticsCopy"><p v-if="ownerModel.logistics[logisticCopy.name]">@{{ ownerModel.logistics[logisticCopy.name] }}</p>
|
|
|
+ <p v-else>0</p></td>
|
|
|
+ <td><p v-if="ownerModel.sum">@{{ ownerModel.sum }}</p><p v-else>0</p></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
@endsection
|
|
|
|
|
|
@section('lastScript')
|
|
|
@@ -80,9 +109,9 @@
|
|
|
el:"#statistics",
|
|
|
data:{
|
|
|
packages:[
|
|
|
- @foreach($packages as $package)
|
|
|
+ @foreach($packages as $package)
|
|
|
{owner_id:'{{$package->owner_id}}',logistic_id:'{{$package->logistic_id}}',count:'{{$package->count}}',
|
|
|
- owner_name:'',logistic_name:''},
|
|
|
+ owner_name:'',logistic_name:''},
|
|
|
@endforeach
|
|
|
],
|
|
|
owners:{
|
|
|
@@ -96,33 +125,33 @@
|
|
|
@endforeach
|
|
|
},
|
|
|
ownersCopy:[
|
|
|
- @foreach($owners as $owner)
|
|
|
+ @foreach($owners as $owner)
|
|
|
{id:'{{$owner->id}}',name:"{{$owner->name}}",style:false},
|
|
|
@endforeach
|
|
|
],
|
|
|
logisticsCopy:[],
|
|
|
ownersModel:[],
|
|
|
filterData:
|
|
|
- {owner_id:'',logistic_id:'',date_start:'',date_end:''},
|
|
|
+ {date_start:'',date_end:''},
|
|
|
selectedOwners:[],
|
|
|
selectedLogistics:[],
|
|
|
selectedOwnerStyle:'background-color: #a1cbef',
|
|
|
},
|
|
|
computed:{
|
|
|
isBeingFilterConditions:function(){
|
|
|
-
|
|
|
for(let key in this.filterData){
|
|
|
if(this.filterData[key]){
|
|
|
return true
|
|
|
}
|
|
|
}
|
|
|
+ if (this.selectedOwners.length>0||this.selectedLogistics.length>0){
|
|
|
+ return true;
|
|
|
+ }
|
|
|
return false;
|
|
|
},
|
|
|
|
|
|
},
|
|
|
mounted:function(){
|
|
|
- $(".tooltipTarget").tooltip({'trigger':'hover'});
|
|
|
- $('#statistics').removeClass('d-none');
|
|
|
let _this=this;
|
|
|
let owners=this.owners;
|
|
|
let logistics=this.logistics;
|
|
|
@@ -139,7 +168,7 @@
|
|
|
return true;
|
|
|
});
|
|
|
if (isLogistic){
|
|
|
- _this.logisticsCopy.push({'id':package.logistic_id,'name':package.logistic_name});
|
|
|
+ _this.logisticsCopy.push({'id':package.logistic_id,'name':package.logistic_name,'style':false});
|
|
|
}
|
|
|
}
|
|
|
let isEvery=true;
|
|
|
@@ -159,8 +188,57 @@
|
|
|
_this.ownersModel.push({'id':package.owner_id,'name':package.owner_name,'sum':package.count,'logistics':obj,});
|
|
|
}
|
|
|
});
|
|
|
+ this.initInputs();
|
|
|
+ $(".tooltipTarget").tooltip({'trigger':'hover'});
|
|
|
+ $('#statistics').removeClass('d-none');
|
|
|
},
|
|
|
methods: {
|
|
|
+ initInputs:function(){
|
|
|
+ let data=this;
|
|
|
+ let uriParts =decodeURI(location.href).split("?");
|
|
|
+ if(uriParts.length>1){
|
|
|
+ let params = uriParts[1].split('&');
|
|
|
+ params.forEach(function(paramPair){
|
|
|
+ let pair=paramPair.split('=');
|
|
|
+ let key = pair[0], val = pair[1];
|
|
|
+ $('input[name="'+key+'"]').val(val);
|
|
|
+ $('select[name="'+key+'"]').val(val);
|
|
|
+ if (key!='owner_id'||key!='logistic_id') {
|
|
|
+ decodeURI(data.filterData[key]=val);
|
|
|
+ }
|
|
|
+ if (key=='owner_id'){
|
|
|
+ let str=unescape(val);
|
|
|
+ let strs=new Array();
|
|
|
+ strs=str.split(",");
|
|
|
+ for (let i=0;i<strs.length;i++){
|
|
|
+ data.selectedOwners.push(strs[i]);
|
|
|
+ data.ownersCopy.every(function (ownerCopy) {
|
|
|
+ if (strs[i]==ownerCopy.id){
|
|
|
+ ownerCopy.style=true;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (key=='logistic_id'){
|
|
|
+ let str=unescape(val);
|
|
|
+ let strs=new Array();
|
|
|
+ strs=str.split(",");
|
|
|
+ for (let i=0;i<strs.length;i++){
|
|
|
+ data.selectedLogistics.push(strs[i]);
|
|
|
+ data.logisticsCopy.every(function (logisticCopy) {
|
|
|
+ if (strs[i]==logisticCopy.id){
|
|
|
+ logisticCopy.style=true;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
owner_seek:function (e) {
|
|
|
let _this=this;
|
|
|
let $val=e.target.value;
|
|
|
@@ -169,6 +247,20 @@
|
|
|
@foreach($owners as $owner)
|
|
|
if ("{{ $owner->name }}".includes($val)){
|
|
|
_this.filterData.owner_id="{{ $owner->id }}";
|
|
|
+ location.href="#{{$owner->name}}";
|
|
|
+ }
|
|
|
+ @endforeach
|
|
|
+ }
|
|
|
+ },
|
|
|
+ logistic_seek:function(e){
|
|
|
+ let _this=this;
|
|
|
+ let $val=e.target.value;
|
|
|
+ if($val==='')_this.filterData.logistic_id='';
|
|
|
+ else{
|
|
|
+ @foreach($logistics as $logistic)
|
|
|
+ if ("{{ $logistic->name }}".includes($val)){
|
|
|
+ _this.filterData.logistic_id="{{ $logistic->id }}";
|
|
|
+ location.href="#{{$logistic->name}}";
|
|
|
}
|
|
|
@endforeach
|
|
|
}
|
|
|
@@ -201,6 +293,34 @@
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ selectedLogistic:function (e) {
|
|
|
+ let selectedLogistics=this.selectedLogistics;
|
|
|
+ let sign = true;
|
|
|
+ for (let i=0;i<selectedLogistics.length;i++){
|
|
|
+ if (selectedLogistics[i]==e.id){
|
|
|
+ selectedLogistics.splice(i,1);
|
|
|
+ this.logisticsCopy.every(function (logisticCopy) {
|
|
|
+ if (logisticCopy.id==e.id) {
|
|
|
+ logisticCopy.style=false;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+ sign=false;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (sign) {
|
|
|
+ this.selectedLogistics.push(e.id);
|
|
|
+ this.logisticsCopy.every(function (logisticCopy) {
|
|
|
+ if (logisticCopy.id==e.id) {
|
|
|
+ logisticCopy.style=true;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
});
|
|
|
</script>
|