|
|
@@ -0,0 +1,270 @@
|
|
|
+@extends('layouts.app')
|
|
|
+@section('title')预约管理-客户预约@endsection
|
|
|
+
|
|
|
+@section('content')
|
|
|
+ <span id="nav2">
|
|
|
+ @component('store.menu')@endcomponent
|
|
|
+ @component('store.deliveryAppointment.menu')@endcomponent
|
|
|
+ </span>
|
|
|
+ <div class="container-fluid d-none" id="container">
|
|
|
+ <div id="form"></div>
|
|
|
+ <div class="mt-1">
|
|
|
+ <button type="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="executeExport(false)" href="javascript:">导出勾选内容</a>
|
|
|
+ <a class="dropdown-item" @click="executeExport(true)" href="javascript:">导出所有页</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <table class="table table-striped table-hover text-nowrap">
|
|
|
+ <tr class="text-center">
|
|
|
+ <th>
|
|
|
+ <label for="all" id="cloneCheckAll">
|
|
|
+ <input id="all" type="checkbox" @click="checkAll($event)">全选
|
|
|
+ </label>
|
|
|
+ </th>
|
|
|
+ <th>序号</th>
|
|
|
+ <th>操作</th>
|
|
|
+ <th>状态</th>
|
|
|
+ <th>货主</th>
|
|
|
+ <th>预约时间</th>
|
|
|
+ <th>仓库</th>
|
|
|
+ <th>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-12">车辆信息</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-2">预约号</div>
|
|
|
+ <div class="col-2">车牌号</div>
|
|
|
+ <div class="col-3">车型</div>
|
|
|
+ <div class="col-2">司机姓名</div>
|
|
|
+ <div class="col-3">司机电话</div>
|
|
|
+ </div>
|
|
|
+ </th>
|
|
|
+ <th>吨</th>
|
|
|
+ <th>立方</th>
|
|
|
+ <th>箱数</th>
|
|
|
+ <th>采购单号</th>
|
|
|
+ <th>ASN单号</th>
|
|
|
+ <th>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-12 text-center">明细单</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-5 text-center">商品名称</div>
|
|
|
+ <div class="col-4 text-center">条码</div>
|
|
|
+ <div class="col-2 text-center">数量</div>
|
|
|
+ </div>
|
|
|
+ </th>
|
|
|
+ <th>创建时间</th>
|
|
|
+ </tr>
|
|
|
+ <tr v-for="(info,i) in list">
|
|
|
+ <td>
|
|
|
+ <label>
|
|
|
+ <input class="checkItem" type="checkbox" :value="info.id" v-model="checkData">
|
|
|
+ </label>
|
|
|
+ </td>
|
|
|
+ <td>@{{ i+1 }}</td>
|
|
|
+ <td><button type="button" @click="cancel(info.id,i)" class="btn btn-sm btn-outline-danger" v-if="info.status==0">取消预约</button></td>
|
|
|
+ <td>
|
|
|
+ <label v-if="!poolMapping.status">
|
|
|
+ <span class="fa fa-circle text-secondary">未知</span>
|
|
|
+ </label>
|
|
|
+ <label v-else>
|
|
|
+ <small><span class="fa fa-circle" :class="info.status==0 ? 'text-info' : (info.status==2 ? 'text-success' : 'text-danger')"></span></small>
|
|
|
+ @{{ poolMapping.status[info.status] }}
|
|
|
+ </label>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <label v-if="!poolMapping.owners"></label>
|
|
|
+ <label v-else>@{{ poolMapping.owners[info.owner_id] }}</label>
|
|
|
+ </td>
|
|
|
+ <td class="text-primary">@{{ info.appointment_date }} @{{ info.period }}</td>
|
|
|
+ <td>
|
|
|
+ <label v-if="!poolMapping.warehouses"></label>
|
|
|
+ <label v-else>@{{ poolMapping.warehouses[info.warehouse_id] }}</label>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div v-if="info.cars.length>0">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-2 font-weight-bold">@{{ info.cars[0].appointment_number }}</div>
|
|
|
+ <div class="col-2 text-secondary">@{{ info.cars[0].license_plate_number }}</div>
|
|
|
+ <div class="col-3 text-secondary">@{{ info.cars[0].car ? info.cars[0].car.name : '' }}</div>
|
|
|
+ <div class="col-2 text-secondary">@{{ info.cars[0].driver_name }}</div>
|
|
|
+ <div class="col-3 text-secondary">@{{ info.cars[0].driver_phone }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="up" :id="'item-'+info.id" v-show="info.cars.length>1">
|
|
|
+ <div class="row" v-for="(car,i) in info.cars" v-if="i!==0">
|
|
|
+ <div class="col-2 font-weight-bold">@{{ car.appointment_number }}</div>
|
|
|
+ <div class="col-2 text-secondary">@{{ car.license_plate_number }}</div>
|
|
|
+ <div class="col-3 text-secondary">@{{ car.car ? car.car.name : '' }}</div>
|
|
|
+ <div class="col-2 text-secondary">@{{ car.driver_name }}</div>
|
|
|
+ <div class="col-3 text-secondary">@{{ car.driver_phone }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text-center m-auto small cursor-pointer" v-if="info.cars.length>1" @click="upAll(info.id)">
|
|
|
+ <span class="fa" :class="upList[info.id] ? 'fa-angle-double-down' : 'fa-angle-double-right'" style="margin-top: 2px;"></span>
|
|
|
+ <span v-if="upList[info.id]">收起其余@{{ info.cars.length-1 }}条</span>
|
|
|
+ <span v-else>展开其余@{{ info.cars.length-1 }}条</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td>@{{ info.tonne>0 ? info.tonne : '-' }}</td>
|
|
|
+ <td>@{{ info.cubic_meter>0 ? info.cubic_meter : '-' }}</td>
|
|
|
+ <td>@{{ info.box_amount>0 ? info.box_amount : '-' }}</td>
|
|
|
+ <td>@{{ info.procurement_number }}</td>
|
|
|
+ <td>@{{ info.asn_number }}</td>
|
|
|
+ <td>
|
|
|
+ <div v-if="info.details.length>0">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-5 font-weight-bold">@{{ info.details[0].commodity_id ? (info.details[0].commodity ? info.details[0].commodity.name : '') : info.details[0].name }}</div>
|
|
|
+ <div class="col-4 text-secondary">@{{ info.details[0] | getCommodity }}</div>
|
|
|
+ <div class="col-2 text-secondary">@{{ info.details[0].amount }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="up" :id="'detail-'+info.id" v-show="info.details.length>1">
|
|
|
+ <div class="row" v-for="(detail,i) in info.details" v-if="i!==0">
|
|
|
+ <div class="col-5 font-weight-bold">@{{ detail.commodity_id ? (detail.commodity ? detail.commodity.name : '') : detail.name }}</div>
|
|
|
+ <div class="col-4 text-secondary">@{{ detail | getCommodity }}</div>
|
|
|
+ <div class="col-2 text-secondary">@{{ detail.amount }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text-center m-auto small cursor-pointer" v-if="info.details.length>1" @click="upAllDetail(info.id)">
|
|
|
+ <span class="fa" :class="upListDetail[info.id] ? 'fa-angle-double-down' : 'fa-angle-double-right'" style="margin-top: 2px;"></span>
|
|
|
+ <span v-if="upListDetail[info.id]">收起其余@{{ info.details.length-1 }}条</span>
|
|
|
+ <span v-else>展开其余@{{ info.details.length-1 }}条</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td>@{{ info.created_at }}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+@stop
|
|
|
+
|
|
|
+@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>
|
|
|
+ new Vue({
|
|
|
+ el:"#container",
|
|
|
+ data:{
|
|
|
+ list:[@foreach($list as $data)@json($data),@endforeach],
|
|
|
+ status:[],
|
|
|
+ warehouses:[],
|
|
|
+ owners:[@foreach($owners as $owner){name:"{{$owner->id}}",value:"{{$owner->name}}"},@endforeach],
|
|
|
+ checkData:[],
|
|
|
+ poolMapping:{},
|
|
|
+ upList:{},
|
|
|
+ upListDetail:{},
|
|
|
+ sum:Number("{{$list->total()}}"),
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ let status = [];
|
|
|
+ let statusMap = {};
|
|
|
+ let warehouses = [];
|
|
|
+ let warehouseMap = {};
|
|
|
+ let owners = [];
|
|
|
+ let ownerMap = [];
|
|
|
+
|
|
|
+ @foreach(\App\DeliveryAppointment::STATUS as $index=>$status)
|
|
|
+ status.push({name:"{{$index}}",value:"{{$status}}"});
|
|
|
+ statusMap["{{$index}}"] = "{{$status}}";
|
|
|
+ @endforeach
|
|
|
+ this.status = status;
|
|
|
+ this.$set(this.poolMapping,"status",statusMap);
|
|
|
+
|
|
|
+ @foreach($warehouses as $warehouse)
|
|
|
+ warehouses.push({name:"{{$warehouse->id}}",value:"{{$warehouse->name}}"});
|
|
|
+ warehouseMap["{{$warehouse->id}}"] = "{{$warehouse->name}}";
|
|
|
+ @endforeach
|
|
|
+ this.warehouses = warehouses;
|
|
|
+ this.poolMapping.warehouses = warehouseMap;
|
|
|
+
|
|
|
+ @foreach($owners as $owner)
|
|
|
+ owners.push({name:"{{$owner->id}}",value:"{{$owner->name}}"});
|
|
|
+ ownerMap["{{$owner->id}}"] = "{{$owner->name}}";
|
|
|
+ @endforeach
|
|
|
+ this.owners = owners;
|
|
|
+ this.poolMapping.owners = ownerMap;
|
|
|
+
|
|
|
+ $(".up").slideUp();
|
|
|
+ $("#container").removeClass("d-none");
|
|
|
+ this._renderingForm();
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ checkData:{
|
|
|
+ handler(){
|
|
|
+ if (this.checkData.length === this.list.length) document.querySelector('#all').checked = true;
|
|
|
+ else document.querySelector('#all').checked = false;
|
|
|
+ },
|
|
|
+ deep:true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ _renderingForm(){
|
|
|
+ let data=[
|
|
|
+ [
|
|
|
+ {name:'created_at_start',type:'dateTime',tip:"选择显示创建日期的结束时间"},
|
|
|
+ {name:'appointment_date_start',type:'dateTime',tip:"选择显示预约日期的结束时间"},
|
|
|
+ {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表,回车确定','选择要显示的客户'],
|
|
|
+ placeholder:['货主','定位或多选货主'],data:this.owners},
|
|
|
+ {name:'status',type:'select',placeholder: '状态',data:this.status},
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {name:'created_at_end',type:'dateTime',tip:"选择显示创建日期的结束时间"},
|
|
|
+ {name:'appointment_date_end',type:'dateTime',tip:"选择显示预约日期的结束时间"},
|
|
|
+ {name:'warehouse_id',type:'select',placeholder: '仓库',data:this.warehouses},
|
|
|
+ ],
|
|
|
+ ];
|
|
|
+ let form = new query({
|
|
|
+ el:"#form",
|
|
|
+ condition:data,
|
|
|
+ });
|
|
|
+ form.init();
|
|
|
+ },
|
|
|
+ upAll(id){
|
|
|
+ let dom = "#item-"+id;
|
|
|
+ if (this.upList[id]) $(dom).slideUp();
|
|
|
+ else $(dom).slideDown();
|
|
|
+ this.$set(this.upList,id,!this.upList[id]);
|
|
|
+ },
|
|
|
+ upAllDetail(id){
|
|
|
+ let dom = "#detail-"+id;
|
|
|
+ if (this.upListDetail[id]) $(dom).slideUp();
|
|
|
+ else $(dom).slideDown();
|
|
|
+ this.$set(this.upListDetail,id,!this.upListDetail[id]);
|
|
|
+ },
|
|
|
+ cancel(id,index){
|
|
|
+ window.tempTip.confirm("确定要取消该次预约吗?此操作不可逆,请谨慎选择",()=>{
|
|
|
+ window.tempTip.postBasicRequest("{{url('store/deliveryAppointment/cancel')}}",{id:id},res=>{
|
|
|
+ this.$set(this.list[index],"status",res);
|
|
|
+ return "成功取消该单预约";
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkAll(e){
|
|
|
+ if (e.target.checked){
|
|
|
+ this.checkData = [];
|
|
|
+ this.list.forEach((el)=>{
|
|
|
+ this.checkData.push(el.id);
|
|
|
+ });
|
|
|
+ }else this.checkData = [];
|
|
|
+ },
|
|
|
+ executeExport(isAll){
|
|
|
+ let url = '{{url('store/deliveryAppointment/export')}}';
|
|
|
+ let token='{{ csrf_token() }}';
|
|
|
+ excelExport(isAll,this.checkData,url,this.sum,token);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ filters:{
|
|
|
+ getCommodity(detail){
|
|
|
+ if (!detail.commodity_id)return detail.name;
|
|
|
+ if (detail.commodity && detail.commodity.barcodes.length>0)return detail.commodity.barcodes[0].code;
|
|
|
+ return "";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+@stop
|