baoshi-was/resources/views/store/checkingReceive/appointment.blade.php

@extends('layouts.app')
@section('title')客户预约-盘收一体@endsection

@section('content')
    <span id="nav2">
    @component('store.menu')@endcomponent
    @component('store.checkingReceive.menu')@endcomponent
    </span>
    <div class="container-fluid" id="container">
        <div class="card">
            <div class="card-body row">
                <div class="offset-2 col-8">
                    <div class="card">
                        <div class="card-header">
                            <div class="row">
                                <label class="col-2 offset-2">车牌号</label>
                                <label class="col-2">车型</label>
                                <label class="col-2">司机姓名</label>
                                <label class="col-3">司机电话</label>
                                <label class="col-1">
                                    <span class="fa fa-plus cursor-pointer text-primary" @click="addCar()">增加</span>
                                </label>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row" v-for="(car,i) in model.cars">
                                <label class="col-2">车辆-@{{ i+1 }}</label>
                                <label class="col-2">
                                    <input type="text" class="form-control" v-model="car.license_plate_number" :class="errors[i+'.license_plate_number'] ? 'is-invalid' : ''">
                                </label>
                                <label class="col-2">
                                    <div class="dropdown">
                                        <input type="text" class="form-control" v-model="car.car_id" :id="'car-'+i" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <div class="dropdown-menu" :aria-labelledby="'car-'+i">

                                        </div>
                                    </div>
                                </label>
                                <label class="col-2">
                                    <input type="text" class="form-control" v-model="car.driver_name">
                                </label>
                                <label class="col-3">
                                    <input type="text" class="form-control" v-model="car.driver_phone">
                                </label>
                                <label class="col-1" v-if="i!==0">
                                    <span class="h4 font-weight-bold cursor-pointer text-danger" @click="delCar(i)">&times;</span>
                                </label>
                                <label v-if="errors[i+'.license_plate_number']" class="col-2 offset-2 text-danger font-weight-bold small">
                                    @{{ errors[i+'.license_plate_number'][0] }}
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4 ml-1">
                        <label class="col-2" for="ownerId">货主</label>
                        <select id="ownerId" v-model="model.owner_id" class="col-4 form-control" :class="errors.owner_id ? 'is-invalid' : ''">
                            <option v-for="owner in owners" :value="owner.id">@{{ owner.name }}</option>
                        </select>
                        <label class="col-2"><input class="form-control rounded-pill" placeholder="搜索货主" @input="seekOwner($event)"></label>
                    </div>
                    <label class="row mt-0 mb-0 ml-1" v-if="errors.owner_id">
                        <label class="offset-2 text-danger font-weight-bold small">@{{ errors.owner_id[0] }}</label>
                    </label>
                    <div class="row mt-4 ml-1">
                        <label class="col-2" for="procurementNumber">采购单号</label>
                        <input class="col-6 form-control" type="text" id="procurementNumber" v-model="model.procurement_number" :class="errors.procurement_number ? 'is-invalid' : ''">
                    </div>
                    <div class="row mt-2 ml-1">
                        <label class="col-2" for="asnNumber">ASN单号</label>
                        <input class="col-6 form-control" type="text" id="asnNumber" v-model="model.asn_number" :class="errors.asn_number ? 'is-invalid' : ''">
                    </div>
                    <div class="row mt-2 ml-1">
                        <label class="col-2" for="warehouse">仓库</label>
                        <input class="col-6 form-control" type="text" id="warehouse" v-model="model.warehouse_id" :class="errors.warehouse_id ? 'is-invalid' : ''">
                    </div>
                    <label class="row mt-0 mb-0 ml-1" v-if="errors.warehouse_id">
                        <label class="offset-2 text-danger font-weight-bold small">@{{ errors.warehouse_id[0] }}</label>
                    </label>
                    <div class="row mt-2 ml-1">
                        <label class="col-2" for="tonne">吨</label>
                        <input class="col-3 form-control" type="number" step="0.01" min="0" id="tonne" v-model="model.tonne" :class="errors.tonne ? 'is-invalid' : ''">
                        <label class="col-1 offset-2" for="cubic_meter">立方</label>
                        <input class="col-3 form-control" type="number" step="0.01" min="0" id="cubic_meter" v-model="model.cubic_meter" :class="errors.cubic_meter ? 'is-invalid' : ''">
                    </div>
                    <label class="row mt-0 mb-0 ml-1" v-if="errors.tonne || errors.cubic_meter">
                        <label class="offset-2 text-danger col-3 small"><b v-if="errors.tonne">@{{ errors.tonne[0] }}</b></label>
                        <label class="offset-3 text-danger font-weight-bold small" v-if="errors.cubic_meter">@{{ errors.cubic_meter[0] }}</label>
                    </label>
                    <div class="row mt-2 ml-1">
                        <label class="col-2" for="box_amount">箱数</label>
                        <input class="col-3 form-control" step="1" min="0" type="number" id="box_amount" v-model="model.box_amount" :class="errors.box_amount ? 'is-invalid' : ''">
                    </div>
                    <label class="row mt-0 mb-0 ml-1" v-if="errors.box_amount">
                        <label class="offset-2 text-danger font-weight-bold small">@{{ errors.box_amount[0] }}</label>
                    </label>
                    <div class="row mt-2 ml-1">
                        <label class="col-2" for="isUpload">是否上传明细单</label>
                        <input content="col-3" id="isUpload" type="checkbox" class="switch" v-model="model.is_upload">
                        <button id="openFile" type="button" class="col-2 offset-1 btn btn-info text-white"
                                title="表头必须包含：商品名称 数量 条码"
                                :data-toggle="errors.details ? 'popover' : 'tooltip'"
                                v-show="model.is_upload" @click="openFile()">
                            <span class="fa fa-cloud-upload"></span> 选择文件</button>
                        <span v-if="model.is_upload" class="text-secondary mt-1">&nbsp;@{{ fileName }}</span>
                        <label hidden><input type="file" id="file" accept=".csv, .xlsx, .xls" @change="selectedFile($event)"></label>
                    </div>
                    <div class="row mt-4 ml-1">
                        <button type="button" class="btn btn-success col-8 offset-2" @click="submit()">提 交 预 约</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section("lastScript")
    <script>
        new Vue({
            el:"#container",
            data:{
                cars:[],
                model:{
                    cars:[{license_plate_number:"",car_id:"",driver_name:"",driver_phone:""}],
                },
                owners:@json($owners),
                fileName:"",
                details:[],
                errors : {
                    details:"",
                },
                datePeriod : {
                    0:"9-11",1:"13-17",
                },
            },
            mounted(){
                if (this.owners.length === 1)this.$set(this.model,"owner_id",this.owners[0].id);
                $('#openFile').tooltip();
            },
            methods:{
                seekOwner(e){
                    let val = e.target.value;
                    this.owners.some(owner=>{
                        if (owner.name.indexOf(val)!==-1){
                            this.$set(this.model,"owner_id",owner.id);
                            return true;
                        }
                    })
                },
                openFile(){
                    $('#file').click();
                },
                selectedFile(e){
                    window.tempTip.setDuration(3000);
                    let file=e.target.files[0];
                    if (!file)return;
                    this.fileName = file.name;
                    let formData = new FormData();
                    formData.append("file",file);
                    window.axios.post('{{url('store/checkingReceive/appointment/import')}}',formData,{
                        'Content-Type':'multipart/form-data'
                    }).then(res=>{
                        if (!res.data.success){
                            window.tempTip.setDuration(3000);
                            window.tempTip.show(res.data.data);
                        }else{
                            let arr = res.data.data;
                            let details = [];
                            for(let key  in arr.data){
                                let data=arr.data[key];
                                details.push({name:data["商品名称"],amount:data["数量"],bar_code:data["条码"]});
                            }
                            this.details = details;
                            if (Object.keys(arr.errors).length>0){
                                let err = "<span class='text-danger'>";
                                for(let key  in arr.errors){
                                    let errors=arr.errors[key];
                                    err += "<b class='text-dark'>第"+key+"行</b>"+"<br>";
                                    errors.forEach(error=>{
                                        err += "&nbsp;&nbsp;&nbsp;&nbsp;"+error+"<br>";
                                    });
                                }
                                err += "</span>";
                                this.errors.details = err;
                                $('#openFile').tooltip('dispose').attr("title","明细错误信息").popover({
                                    html: true,
                                    content: err,
                                    placement:'right',
                                    trigger:'focus'
                                }).popover('show');
                            }else $('#openFile').popover('dispose').tooltip('show');
                        }
                    }).catch(err=> {
                        window.tempTip.show("网络错误："+err);
                    })
                },
                addCar(){
                    this.model.cars.push({});
                },
                delCar(index){
                    this.$delete(this.model.cars,index);
                },
                submit(){
                    let errors = {};
                    if (!this.model.owner_id)errors.owner_id = ["不得为空"];
                    if (!this.model.warehouse_id)errors.warehouse_id = ["不得为空"];
                    if (!this.model.tonne && !this.model.cubic_meter){
                        errors.tonne = ["吨与立方值至少填写一个"];
                        errors.cubic_meter = ["立方值与吨至少填写一个"];
                    }
                    this.model.cars.forEach((car,i)=>{
                        if (!car.license_plate_number) errors[i+".license_plate_number"] = ["不得为空"];
                    });
                    if (JSON.stringify(errors) !== "{}"){
                        errors.details=this.errors.details;
                        this.errors = errors;
                        return
                    }
                    window.tempTip.postBasicRequest();
                },
            },
        });
    </script>
@stop