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">增加</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.number">
                                </label>
                                <label class="col-2">
                                    <input type="text" class="form-control" v-model="car.id">
                                </label>
                                <label class="col-2">
                                    <input type="text" class="form-control" v-model="car.name">
                                </label>
                                <label class="col-3">
                                    <input type="text" class="form-control" v-model="car.phone">
                                </label>
                                <label class="col-1" v-if="i!==0">
                                    <span class="h4 font-weight-bold cursor-pointer text-danger">&times;</span>
                                </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-6 form-control">
                            <option v-for="owner in owners" :value="owner.id">@{{ owner.name }}</option>
                        </select>
                    </div>
                    <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">
                    </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">
                    </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">
                    </div>
                    <div class="row mt-2 ml-1">
                        <label class="col-2" for="tonne">吨</label>
                        <input class="col-3 form-control" type="text" id="tonne" v-model="model.tonne">
                        <label class="col-1 offset-2" for="cube">立方</label>
                        <input class="col-3 form-control" type="text" id="cube" v-model="model.cube">
                    </div>
                    <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 data-toggle="tooltip" id="openFile" type="button" class="col-2 offset-1 btn btn-info text-white"
                                title="表头必须包含：商品名称 数量 条码"
                                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">提 交 预 约</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section("lastScript")
    <script>
        new Vue({
            el:"#container",
            data:{
                cars:[],
                model:{
                    cars:[{number:"",id:"",name:"",phone:""}],
                },
                owners:@json($owners),
                fileName:""
            },
            mounted(){
                if (this.owners.length === 1)this.model.owner_id = this.owners[0].id;
                $('#openFile').tooltip();
            },
            methods:{
                openFile(){
                    if (!this.model.owner_id){
                        window.tempTip.setDuration(2000);
                        window.tempTip.show("必须先选定货主");
                    }else $('#file').click();
                },
                selectedFile(e){
                    let file=e.target.files[0];
                    this.fileName = file.name;
                    if (!file){
                        window.tempTip.setDuration(3000);
                        window.tempTip.show("未选择文件");
                        return;
                    }
                    let formData = new FormData();
                    formData.append("file",file);
                    window.axios.post('{{url('store/checkingReceive/appointment/import')}}',formData,{
                        'Content-Type':'multipart/form-data'
                    }).then(res=>{
                        window.tempTip.setDuration(3000);
                        window.tempTip.show(res.data.data);
                    }).catch(err=> {
                        window.tempTip.setDuration(3000);
                        window.tempTip.show("网络错误："+err);
                    })
                },
            },
        });
    </script>
@stop