跟踪件 添加照片上传功能

app/Http/Controllers/OrderTrackingController.php

@@ -27,6 +27,13 @@ class OrderTrackingController extends Controller
         /** @var OrderTrackingService $service */
         $service = app('OrderTrackingService');
         $trackOrders = $service->paginate($request->input());
+        $trackOrders->map(function($trackOrder){
+            if($trackOrder->uploadFile){
+                if(!str_starts_with($trackOrder->uploadFile->url,'http')){
+                    $trackOrder->uploadFile->url = asset('/storage'.$trackOrder->uploadFile->url);
+                }
+            }
+        });
         $logistics = Logistic::all();
         return view('order.tracking.index', compact('owners', 'trackOrders','logistics'));
     }
@@ -84,11 +91,11 @@ class OrderTrackingController extends Controller
             return ['success'=>false,'fail_info'=>'没有对应权限'];
         $file=$request->file('file');
         /** @var OrderTracking $orderTracking */
-        $orderTracking = OrderTracking::query()->find($request['id']);
+        $orderTracking = OrderTracking::query()->with('uploadFile')->find($request['id']);
         if(!$orderTracking){
             return ['success'=>false,'error'=>'未找到该追踪件'];
         }
-        if($orderTracking->uploadFile()){
+        if($orderTracking->uploadFile){
             return ['success'=>false,'error'=>'该运单已存在照片！'];
         }
         if(!$file){
@@ -106,27 +113,28 @@ class OrderTrackingController extends Controller
         $thumbnailName=storage_path('app/public/files/'.$fileName.'-thumbnail.'.$fileExtension);
         $commonName=storage_path('app/public/files/'.$fileName.'-common.'.$fileExtension);
         $bulkyName=storage_path('app/public/files/'.$fileName.'-bulky.'.$fileExtension);
-        $result=move_uploaded_file($tmpFile,$bulkyName);
-        if($result){
-            $img=Image::make($bulkyName);
-            if($img->height()>$img->width()){
+        $result=move_uploaded_file ($tmpFile ,$bulkyName);
+        if($result) {
+            $img = Image::make($bulkyName);
+            if ($img->height() > $img->width()) {
                 $img->heighten(250)->save($commonName);
-            }else {
+            } else {
                 $img->widen(250)->save($commonName);
             }
             $img->heighten(28)->save($thumbnailName);
             $uploadFile=new UploadFile([
-                "table_name"=>'orderTrackings',
-                'table_id'=>$orderTracking->id,
-                'url'=>'/files/'.$fileName,
-                'type'=>$fileExtension
+                "table_name"=>"order_trackings",
+                "table_id"=>$orderTracking->order_client_code,
+                "url"=>'/files/'.$fileName,
+                "type"=>$fileExtension,
             ]);
-            if($uploadFile->save())
-                LogService::log(__METHOD__,'追踪件 图片上传'.__FUNCTION__,json_encode($request));
-            $uploadFile->url=assert('/storage'.$uploadFile->url);
+            if ($uploadFile->save()){
+                LogService::log(__METHOD__, '追踪件 图片上传' . __FUNCTION__, json_encode($request));
+            }
+            $uploadFile->url=asset('/storage'.$uploadFile->url);
             return ['success'=>true,'data'=>$uploadFile];
         }
-        return ['success'=>false,'error'=>'图片保存失败'];
+        return ['success'=>false,'error'=>'图片上传失败'];
     }
 
     public function export(Request $request)
@@ -211,6 +219,25 @@ class OrderTrackingController extends Controller
             "Content-type"=>"application/octet-stream",
             "Content-Disposition"=>"attachment; filename=订单跟踪件-".date('ymdHis').'.xlsx',
         ]);
+    }
 
+    public function destroyImg(Request $request)
+    {
+        if(!Gate::allows('订单管理-跟踪-仓库编辑'))
+            return ['success'=>false,'error'=>'没有对应权限'];
+        $orderTracking = OrderTracking::query()->where('id',$request['id'])->first();
+        if(!$orderTracking){
+            return ['success'=>false,'error'=>'没有找到对应id'];
+        }
+        $orderTrackings = OrderTracking::query()->where('order_client_code',$orderTracking->order_client_code)->get();
+        try {
+            UploadFile::query()->where('table_name', 'order_trackings')->whereIn('table_id', $orderTrackings->map(function ($order_tracking) {
+                return $order_tracking->id;
+            }))->delete();
+            return ['success'=>true];
+        } catch (Exception $e) {
+            LogService::log(__METHOD__,__FUNCTION__,'追踪件删除照片'.json_encode($e->getMessage()).json_encode($e->getTraceAsString()));
+            return ['success'=>false,'error'=>$e->getMessage()];
+        }
     }
 }

app/OrderTracking.php

@@ -19,13 +19,15 @@ class OrderTracking extends Model
     protected $appends =[
         'ownerName','sku','packageWeight','packageBulk','orderCity','packageLogisticNumber','packageLogistic','orderClientNumber'
     ];
-
     public function commodities(){
-        return $this->hasOne('App\OrderPackageCommodities','id','order_package_commodity_id');
+        return $this->hasOne(OrderPackageCommodities::class,'id','order_package_commodity_id');
     }
-
     public function owner(){
-        return $this->hasOne('App\Owner','id','owner_id');
+        return $this->hasOne(Owner::class,'id','owner_id');
+    }
+    public function uploadFile()
+    {
+        return $this->hasOne(UploadFile::class,'table_id','order_client_code')->where('table_name','order_trackings');
     }
 
     public function getOwnerNameAttribute(){

app/Services/OrderTrackingService.php

@@ -33,7 +33,7 @@ class OrderTrackingService
             $ownerids = explode(",", $params['owner_id']);
             $owner_ids = array_intersect($owner_ids, $ownerids);
         }
-        $query = OrderTracking::query()->with(['owner', 'commodities' => function ($query) {
+        $query = OrderTracking::query()->with(['owner','uploadFile', 'commodities' => function ($query) {
             $query->with(['commodity'=>function($query){
                 $query->with('barcodes');
             }, 'package.order.logistic']);

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

@@ -69,6 +69,7 @@
                         <th class="td-yellow" style="min-width: 120px">运输方式</th>
                         <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-calm" style="min-width: 200px">应送达时间</th>
                         <th class="td-calm" style="min-width: 120px">是否赶上卡班</th>
                         <th class="td-calm" style="min-width: 120px">到货情况</th>
@@ -160,7 +161,18 @@
                             </span>
                         </td>
                         <td class="td-yellow">@{{ trackOrder.orderCity}}</td>
-
+                        <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')}}">
+                                <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"/>
+                            @else
+                                <img v-if="trackOrder.upload_file" :id="'img_'+trackOrder.id" :data-scr="trackOrder.upload_file.url" src="{{url('icon/img404-thumbnail.jpg')}}">
+                            @endcan
+                            </div>
+                        </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" >
@@ -266,6 +278,7 @@
                 trackingOwner : [],
                 status:'',
                 ownerName:'',
+                imgs:'',
                 page: {
                     total: {!!  $trackOrders->toJson() !!}['total'],
                 },
@@ -273,6 +286,12 @@
                 isArrival: ['是','否'],
             },
             mounted:function(){
+                this.imgs=Array.from(document.getElementById('tracking_div').querySelectorAll('img'));
+                this.lazy();
+                if (this.imgs&&this.imgs.length>0){
+                    window.addEventListener('scroll',this.lazy)
+                }
+
                 let selectDate1 = [
                     {name:'31',value:'近一月'},
                     {name:'92',value:'近三月'},
@@ -502,7 +521,111 @@
                         tempTip.setDuration(200)
                         tempTip.show(error)
                     })
-                }
+                },
+                certiimg(id){
+                    $('#'+id+'input').click();
+                },
+                submitFile(e,trackOrder){
+                    let file=e.target.files[0]
+                    if (file.size >=5242880){
+                        tempTip.setDuration(3000);
+                        tempTip.show("图片大小不能超过5MB！");
+                        return;
+                    }
+                    let _this=this;
+                    let formData=new FormData();
+                    formData.append("file",file);
+                    formData.append("id",trackOrder.id);
+                    formData.append("order_client_code",trackOrder.order_client_code);
+                    axios.post('{{url('order/tracking/upload')}}',formData).then(function(response){
+                        tempTip.setDuration(2000)
+                        if(response.data.success){
+                            _this.trackOrders.forEach(function(_trackOrder){
+                                if(_trackOrder.order_client_code === response.data.data.table_id){
+                                    _trackOrder.upload_file=response.data.data;
+                                    setTimeout(function () {
+                                        _this.imgs.push(document.getElementById('img_'+_trackOrder.id));
+                                        _this.lazy();
+                                    },1);
+                                }
+                            })
+                            console.log(_this.imgs);
+                            tempTip.showSuccess('上传成功！')
+                        }else{
+                            tempTip.show(response.data.error)
+                        }
+                    }).catch(function(error){
+                        tempTip.setDuration(2000)
+                        tempTip.show(error)
+                    })
+                },
+                lazy(){
+                    //可视区域高度
+                    let height=window.innerHeight;
+                    //滚动区域高度
+                    let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
+                    let _this=this;
+                    this.imgs.forEach(function (img,i) {
+                        if ((height+scrollHeight)>$('#'+img.getAttribute('id')).offset().top && img.getAttribute('data-src')){
+                            let temp=new Image();
+                            temp.src=img.getAttribute('data-src');
+                            temp.onload=function () {
+                                img.src=img.getAttribute('data-src');
+                                _this.$delete(_this.imgs,i);
+                            }
+                        }
+                    });
+                },
+                removeCommonImg(id) {
+                    $('#'+id).remove();
+                },
+                commonImg(id,trackOrder){
+                    let url = trackOrder.upload_file ? trackOrder.upload_file.url :"";
+                    let type = trackOrder.upload_file  ? trackOrder.upload_file.type :'';
+                    $('#'+id).after(
+                        "<div id=\"common_"+id+"\" style='position: absolute;padding-top: 2px;z-index: 99'>" +
+                        "<div style='position:absolute'>"+
+                        "<div >"+
+                        "<a target='_blank' href='"+url+'-bulky.'+type+"'>" +
+                        "<img src='"+url+"-common."+type+"'"+"style='position: relative;left:-50px;' >" +
+                        "</a>" +
+                        "</div>"+
+                        @can('订单管理-跟踪-仓库编辑')"<button type='button' class='btn btn-sm btn-danger' onclick='tracking_vue.btnDeleteImg(this)' value='"+id+"' style='position: relative;float: right;margin-right: 51px;margin-top: -30px;' >删除</button>" +@endcan
+                            "</div>"+
+                        "</div>");
+                },
+                btnDeleteImg(e){
+                    let idstr = $(e).val()
+                    let id = idstr.substr(idstr.indexOf('_')+1)
+                    if (!confirm('确定要删除所选图片吗？'))return;
+                    this.destroyImg([id]);
+                },
+                destroyImg(id){
+                    let _this = this
+                    let data = {id:id}
+                    axios.post('{{url('order/tracking/destroyImg')}}',data).then(function(response){
+                        tempTip.setDuration(2000)
+                        if(response.data.success){
+                            tempTip.showSuccess('删除成功!')
+                            let _orderTracking = _this.trackOrders.find(function(_orderTrack){
+                                return id ==_orderTrack.id;
+                            });
+                            if(_orderTracking===null){return}
+                            _this.trackOrders.forEach(function (_orderTrack) {
+                                if(_orderTrack.order_client_code === _orderTracking.order_client_code){
+                                    if(_orderTrack.upload_file)
+                                        _orderTrack.upload_file = null
+                                }
+                            })
+                        }else{
+                            tempTip.show(response.data.error)
+                        }
+                    }).catch(function(error){
+                        tempTip.setDuration(2000)
+                        tempTip.show(error)
+                    })
+                },
+
             },
             filters:{
                 millimeterToCubic:function(val){

routes/web.php

@@ -473,6 +473,8 @@ Route::group(['prefix'=>'order'],function(){
         Route::get('index',"OrderTrackingController@index");
         Route::any('export',"OrderTrackingController@export");
         Route::get('update','OrderTrackingController@updateApi');
+        Route::post('upload','OrderTrackingController@upload');
+        Route::post('destroyImg','OrderTrackingController@destroyImg');
     });
 
     Route::post('freeze','OrderController@freeze');