Order/tracking/index 序列号显示

resources/views/order/tracking/index.blade.php

@@ -11,7 +11,9 @@
                     <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="搜索货主，点击下方块添加" />
+                                <label>
+                                    <input type="text" v-model="name" class="form-control form-control-sm col-5 offset-3" placeholder="搜索货主，点击下方块添加">
+                                </label>
                                 <button class="btn btn-sm btn-info col-2" @click="seekOwner()">搜索</button>
                                 <label class="col-2"></label>
                             </div>
@@ -50,7 +52,9 @@
                 <table class="table table-sm table-striped table-bordered table-hover card-body p-0 m-0" id="headerParent">
                     <tr class="text-center" >
                         <th>
-                            <input id="all" type="checkbox" @click="checkAll($event)"/>
+                            <label>
+                                <input id="all" type="checkbox" @click="checkAll($event)">
+                            </label>
                         </th>
                         <th style="min-width: 50px">序号</th>
                         <th class="td-warm" style="min-width: 75px">公司</th>
@@ -71,6 +75,7 @@
                         <th class="td-yellow">运输单号</th>
                         <th class="td-yellow" style="min-width: 120px">到达城市</th>
                         <th class="td-yellow" style="min-width: 120px">照片</th>
+                        <th class="td-yellow" style="min-width: 120px">序列号</th>
                         <th class="td-calm" style="min-width: 200px">应送达时间</th>
                         <th class="td-calm" style="min-width: 120px">是否赶上卡班</th>
                         <th class="td-calm" style="min-width: 120px">到货情况</th>
@@ -81,13 +86,16 @@
                     <tr v-for="(trackOrder,index) in trackOrders" class="table-body text-center"  :key="trackOrder.id"
                         @click="selectTr===index+1?selectTr=0:selectTr=index+1" :class="selectTr===index+1?'focusing' : ''">
                         <td>
+                            <label for="all"></label>
                             <input id="all" type="checkbox" :value="trackOrder.id" v-model="checkData">
                         </td>
                         <td>@{{ index+1 }}</td>
                         <td class="text-decoration-none td-warm">@{{ trackOrder.ownerName }}</td>
                         <td class="td-warm">
                             <span v-if="trackOrder.web_order_number">
-                                <input class="form-control form-control-sm" :value="trackOrder.order_client_code === trackOrder.web_order_number ? '' : trackOrder.order_client_code " @change="warehouseUpdate($event,'order_client_code',trackOrder)" >
+                                <label>
+                                    <input class="form-control form-control-sm" :value="trackOrder.order_client_code === trackOrder.web_order_number ? '' : trackOrder.order_client_code " @change="warehouseUpdate($event,'order_client_code',trackOrder)" >
+                                </label>
                             </span>
                             <span v-else>@{{ trackOrder.order_client_code }}</span>
 {{--                            <span v-else>--}}
@@ -104,14 +112,18 @@
 
                         <td class="td-warm">
                             @can('订单管理-跟踪-仓库编辑')
-                                <input class="form-control form-control-sm" :value="trackOrder.web_order_number" @change="warehouseUpdate($event,'web_order_number',trackOrder)" >
+                                <label>
+                                    <input class="form-control form-control-sm" :value="trackOrder.web_order_number" @change="warehouseUpdate($event,'web_order_number',trackOrder)" >
+                                </label>
                             @else
                                 @{{ trackOrder.web_order_number }}
                             @endcan
                         </td>
                         <td class="td-warm">
                             @can('订单管理-跟踪-仓库编辑')
-                                <input class="form-control form-control-sm" type="datetime-local" :value="trackOrder.pick_up_at | dateLocal" @change="warehouseUpdate($event,'pick_up_at',trackOrder)" >
+                                <label>
+                                    <input type="datetime-local" class="form-control form-control-sm"  :value="trackOrder.pick_up_at | dateLocal" @change="warehouseUpdate($event,'pick_up_at',trackOrder)" >
+                                </label>
                             @else
                                 @{{ trackOrder.pick_up_at }}
                             @endcan
@@ -127,7 +139,9 @@
 {{--                        </td>--}}
                         <td class="td-yellow">
                             @can('订单管理-跟踪-仓库编辑')
+                            <label>
                                 <input class="form-control form-control-sm" :value="trackOrder.client" @change="warehouseUpdate($event,'client',trackOrder)" >
+                            </label>
                             @else
                                 @{{ trackOrder.client }}
                             @endcan
@@ -137,7 +151,9 @@
                         <td class="td-yellow">@{{ trackOrder.sku.skuAmount }}</td>
                         <td class="td-yellow " data-toggle="tooltip" >
                             @can('订单管理-跟踪-仓库编辑')
-                                <input class="form-control form-control-sm" :value="trackOrder.order_remark" @change="warehouseUpdate($event,'order_remark',trackOrder)" data-toggle="tooltip" data-placement="bottom" :title="trackOrder.order_remark">
+                                <label>
+                                    <input class="form-control form-control-sm" :value="trackOrder.order_remark" @change="warehouseUpdate($event,'order_remark',trackOrder)" data-toggle="tooltip" data-placement="bottom" :title="trackOrder.order_remark">
+                                </label>
                             @else
                                 @{{ trackOrder.order_remark }}
                             @endcan
@@ -146,7 +162,9 @@
                         <td class="td-yellow">@{{ trackOrder.bulk |millimeterToCubic}}</td>
                         <td class="td-yellow">
                             @can('订单管理-跟踪-仓库编辑')
-                                <input class="form-control form-control-sm" :value="trackOrder.pallet_total" @change="warehouseUpdate($event,'pallet_total',trackOrder)" >
+                                <label>
+                                    <input class="form-control form-control-sm" :value="trackOrder.pallet_total" @change="warehouseUpdate($event,'pallet_total',trackOrder)" >
+                                </label>
                             @else
                                 @{{ trackOrder.pallet_total }}
                             @endcan
@@ -178,57 +196,80 @@
                         <td class="td-yellow">
                             <div class="text-center" @mouseleave="removeCommonImg('common_img_'+trackOrder.id)" @mouseenter="commonImg('img_'+trackOrder.id,trackOrder)">
                             @can('订单管理-跟踪-物流公司编辑')
-                                <img v-if="trackOrder.upload_file" :id="'img_'+trackOrder.id" :data-src="trackOrder.upload_file.url+'-thumbnail.'+trackOrder.upload_file.type" src="{{url('icon/img404-thumbnail.jpg')}}">
+                                <img v-if="trackOrder.upload_file" :id="'img_'+trackOrder.id" :data-src="trackOrder.upload_file.url+'-thumbnail.'+trackOrder.upload_file.type" src="{{url('icon/img404-thumbnail.jpg')}}" alt="">
                                 <input v-else class="btn btn-sm btn-outline-secondary" type="button" @click="certiimg(trackOrder.id)" value="上传照片">
-                                <input type="file" @change="submitFile($event,trackOrder)" :id="trackOrder.id+'input'"
-                                       style="display: none" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>
+                                <input type="file" @change="submitFile($event,trackOrder)" :id="trackOrder.id+'input'" alt=""
+                                       style="display: none" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
                             @else
-                                <img v-if="trackOrder.upload_file" :id="'img_'+trackOrder.id" :data-scr="trackOrder.upload_file.url" src="{{url('icon/img404-thumbnail.jpg')}}">
+                                <img v-if="trackOrder.upload_file" :id="'img_'+trackOrder.id" :data-scr="trackOrder.upload_file.url" src="{{url('icon/img404-thumbnail.jpg')}}" alt="">
                             @endcan
                             </div>
                         </td>
+                        <td class="td-yellow">
+                            <template v-if="trackOrder.commodities['serial_numbers'].length > 0">
+                                    <template v-for="serialNumber in trackOrder.commodities['serial_numbers']">
+                                        <transition name="fade">
+                                        <p v-show="trackOrder.displayed || trackOrder.commodities['serial_numbers'].length === 1">@{{ serialNumber.serial_number }}</p>
+                                        </transition>
+                                    </template>
+                                <p class="text-primary m-0 p-0" v-if="trackOrder.commodities.serial_numbers.length !== 1" @click="trackOrder.displayed = !trackOrder.displayed">@{{ trackOrder.displayed ? '点击隐藏' : '点击展开' }}</p>
+                            </template>
+                        </td>
                         <td class="td-calm">
                             @can('订单管理-跟踪-物流公司编辑')
-                                <input class="form-control form-control-sm" type="date"  @change="logisticUpdate($event,'planning_sent_at',trackOrder)"  :value="trackOrder.planning_sent_at | date" >
+
+                                <label>
+                                    <input class="form-control form-control-sm" type="date"  @change="logisticUpdate($event,'planning_sent_at',trackOrder)"  :value="trackOrder.planning_sent_at | date" >
+                                </label>
                             @else
                                 @{{ trackOrder.planning_sent_at }}
                             @endcan
                         </td>
                         <td class="td-calm">
                             @can('订单管理-跟踪-物流公司编辑')
-                                <select class="form-control form-control-sm" :value="trackOrder.is_on_duty_shift" @change="logisticUpdate($event,'is_on_duty_shift',trackOrder)" >
-                                    <option v-for="item in isOnDutyShift" :value="item">@{{ item }}</option>
-                                </select>
+                                <label>
+                                    <select class="form-control form-control-sm" :value="trackOrder.is_on_duty_shift" @change="logisticUpdate($event,'is_on_duty_shift',trackOrder)" >
+                                        <option v-for="item in isOnDutyShift" :value="item">@{{ item }}</option>
+                                    </select>
+                                </label>
                             @else
                                 @{{ trackOrder.is_on_duty_shift }}
                             @endcan
                         </td>
                         <td class="td-calm">
                             @can('订单管理-跟踪-物流公司编辑')
+                                <label>
                                 <select class="form-control form-control-sm" :value="trackOrder.is_arrival" @change="logisticUpdate($event,'is_arrival',trackOrder)" >
                                     <option v-for="item in isArrival" :value="item">@{{ item }}</option>
                                 </select>
+                                </label>
                             @else
                                 @{{ trackOrder.is_arrival }}
                             @endcan
                         </td>
                         <td class="td-calm">
                             @can('订单管理-跟踪-物流公司编辑')
-                                <input class="form-control form-control-sm" type="date"  @change="logisticUpdate($event,'signed_at',trackOrder)" :value="trackOrder.signed_at | date">
+                                <label >
+                                    <input class="form-control form-control-sm" type="date"  @change="logisticUpdate($event,'signed_at',trackOrder)" :value="trackOrder.signed_at | date">
+                                </label>
                             @else
                                 @{{ trackOrder.signed_at }}
                             @endcan
                         </td>
                         <td class="td-calm">
                             @can('订单管理-跟踪-物流公司编辑')
-                                <input class="form-control form-control-sm" @change="logisticUpdate($event,'receive_bill_status',trackOrder)" :value="trackOrder.receive_bill_status">
+                                <label>
+                                    <input class="form-control form-control-sm" @change="logisticUpdate($event,'receive_bill_status',trackOrder)" :value="trackOrder.receive_bill_status">
+                                </label>
                             @else
                                 @{{ trackOrder.receive_bill_status }}
                             @endcan
                         </td>
                         <td class="td-calm" data-toggle="tooltip">
                             @can('订单管理-跟踪-物流公司编辑')
-                                <input class="form-control form-control-sm" @change="logisticUpdate($event,'remark',trackOrder)" :value="trackOrder.remark" data-toggle="tooltip" data-placement="bottom" :title="trackOrder.remark">
+                                <label>
+                                    <input class="form-control form-control-sm" @change="logisticUpdate($event,'remark',trackOrder)" :value="trackOrder.remark" data-toggle="tooltip" data-placement="bottom" :title="trackOrder.remark">
+                                </label>
                             @else
                                 @{{ trackOrder.remark }}
                             @endcan
@@ -267,10 +308,17 @@
 @section('lastScript')
     <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
     <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
+
     <style>
         .btn-border{
             border:1px solid rgba(108, 117, 125,0.3);
         }
+        .fade-enter-active, .fade-leave-active {
+            transition: opacity .3s;
+        }
+        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+            opacity: 0;
+        }
     </style>
     <script>
         let tracking_vue = new Vue({
@@ -300,6 +348,9 @@
                 selectTr:''
             },
             mounted:function(){
+                this.trackOrders.forEach(function(item,index,self){
+                    self[index]['displayed'] = false;
+                });
                 this.imgs=Array.from(document.getElementById('tracking_div').querySelectorAll('img'));
                 this.lazy();
                 if (this.imgs&&this.imgs.length>0){
@@ -356,11 +407,7 @@
             watch:{
                 checkData: {
                     handler() {
-                        if (this.checkData.length === this.trackOrders.length && this.checkData.length !== 0) {
-                            document.querySelector('#all').checked = true;
-                        } else {
-                            document.querySelector('#all').checked = false;
-                        }
+                        document.querySelector('#all').checked = this.checkData.length === this.trackOrders.length && this.checkData.length !== 0;
                     },
                     deep: true
                 },
@@ -368,9 +415,9 @@
             methods:{
                 checkAll(e){
                     if (e.target.checked) {
-                        this.trackOrders.forEach((el, i) => {
-                            if (this.checkData.indexOf(el.id) === -1)
-                                this.checkData.push(el.id);
+                        this.trackOrders.forEach((el) => {
+                            if (this.checkData.indexOf(el['id']) === -1)
+                                this.checkData.push(el['id']);
                         });
                     } else {
                         this.checkData = [];
@@ -426,7 +473,7 @@
                 },
                 hideInput(e){
                     let input = $(e.target);
-                    let button = input.prev('button').show();
+                    input.prev('button').show();
                     input.addClass('d-none');
                 },
                 warehouseUpdate(e,param,trackingOrder){
@@ -497,7 +544,6 @@
                     this.trackOrders.forEach(function(trackOrder){
                         if(parseInt(data['id']) === trackOrder['id'] ){
                             trackOrder[data['param']] = data['value'];
-                            return;
                         }
                     });
                 },
@@ -525,7 +571,7 @@
                         value='新杰物流'
                     }
                     let data = {id:tackOrder.id,param:'logistic_id',value:value}
-                    let _this = this
+
                     axios.post('{{url('apiLocal/order/tracking/updateLogisticId')}}',data).then(function (response) {
                         tempTip.setDuration(2000);
                         if(response.data.success){
@@ -570,7 +616,6 @@
                                     },1);
                                 }
                             })
-                            console.log(_this.imgs);
                             tempTip.showSuccess('上传成功！')
                         }else{
                             tempTip.show(response.data.error)
@@ -630,7 +675,7 @@
                         if(response.data.success){
                             tempTip.showSuccess('删除成功!')
                             let _orderTracking = _this.trackOrders.find(function(_orderTrack){
-                                return id ==_orderTrack.id;
+                                return id === _orderTrack['id'];
                             });
                             if(_orderTracking===null){return}
                             _this.trackOrders.forEach(function (_orderTrack) {
@@ -669,9 +714,8 @@
                     return value
                 },
                 number:function(value){
-                    var toFixedNum = Number(value).toFixed(3);
-                    var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
-                    return realVal;
+                    let toFixedNum = Number(value).toFixed(3);
+                    return toFixedNum.substring(0, toFixedNum.toString().length - 1);
                 }
             },