baoshi-was/resources/views/maintenance/materialBoxModel/modelSequence.blade.php

@extends('layouts.app')
@section('title')货主定制序列-料箱型号@endsection

@section('content')
    <div class="container-fluid d-none" id="container">
        <div class="row">
            <div class="col-6 card">
                <div class="card-header">
                    <label class="pull-left h5 font-weight-bold">货主列表</label>
                    <label class="pull-right"><input type="text" class="form-control form-control-sm rounded-pill" placeholder="检索" @keydown.enter="seekOwner()"></label>
                </div>
                <div class="card-body p-0" style="cursor: pointer">
                    <ul class="list-group">
                        <li class="list-group-item" :class="selectedOwner===owner.id ? 'bg-info' : ''" v-for="(owner,i) in owners" v-show="!owner.hide" @click="loadModel(owner)">
                            @{{ owner.name }}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-6 card card-body pt-0">
                <div class="card">
                    <div class="card-header">
                        <div class="pull-left h5 font-weight-bold mr-3">料箱型号</div>
                        <button class="btn btn-sm btn-outline-info" @click="checkAll()">全选</button>
                        <button class="pull-right btn border border-2" :class="isSaveSort ? 'btn-success' : 'text-secondary border-secondary'" :disabled="!isSaveSort" @click="saveModel()">保存</button>
                    </div>
                    <div class="card-body p-0">
                        <ul class="list-group" style="cursor: move;">
                            <li class="list-group-item" v-for="model in sequenceModels" :id="'model-'+model.id" draggable="true"
                                @drop="drop($event)" @dragover="dragover($event,dragoverId!==model.id)" @dragstart.stop="dragstart(model.id)">
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input type="checkbox" name="model" class="form-check-input" @change="isSaveSort=true" v-model="model.checked" :value="model.id">@{{ model.description }}
                                    </label>
                                </div>
                            </li>
                        </ul>
                        <li id="dragover-container" class="border-dashed-red" v-show="isDragover" @drop="drop($event)" @dragover="dragover($event,false)">
                            <div class='w-100 text-center text-secondary'>拖拽至此</div>
                        </li>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section("lastScript")
    <script type="text/javascript">
        new Vue({
            el:"#container",
            data:{
                owners:[@foreach($owners as $owner)@json($owner),@endforeach],
                models:{@foreach($models as $model)"{{$model->id}}":@json($model),@endforeach},
                selectedOwner:"",
                sequenceModels:[],
                dragoverId:"",
                isDragover:false,
                isSaveSort:false,
                checked:false,
            },
            mounted(){
                $("#container").removeClass("d-none");
            },
            methods:{
                checkAll(){
                    this.sequenceModels.forEach((m,i)=>{
                        this.$set(this.sequenceModels[i],'checked',!this.checked);
                    });
                    this.checked = !this.checked;
                },
                seekOwner(){
                    let val = event.target.value;
                    this.owners.forEach((owner,i)=>{
                        if (owner.name.indexOf(val)===-1)this.$set(this.owners[i],'hide',true);
                        else this.$set(this.owners[i],'hide',false);
                    });
                },
                loadModel(owner){
                    if (this.selectedOwner === owner.id)return;
                    this.selectedOwner = owner.id;
                    this.isSaveSort = false;
                    let arr = [];
                    if (owner.model_sequence)arr = owner.model_sequence.split(",");
                    let sequenceModels = [];
                    arr.forEach(id=>{
                        let model = Object.assign({},this.models[id]);
                        model.checked = true;
                        sequenceModels.push(model);
                    });
                    for (let key in this.models){
                        if (!arr.includes(this.models[key].id.toString())){
                            let model = Object.assign({},this.models[key]);
                            model.checked = false;
                            sequenceModels.push(model);
                        }
                    }
                    this.sequenceModels = sequenceModels;
                },
                drop(e){
                    e.preventDefault();
                    e.stopPropagation();
                    $("#dragover-container").after($("#model-"+this.dragoverId));
                    this.dragoverId = "";
                    this.isDragover = false;
                    this.isSaveSort = true;
                },
                dragover(e, isAllow = true){
                    e.preventDefault();
                    e.stopPropagation();
                    if (isAllow) e.currentTarget.after(document.getElementById("dragover-container"))
                },
                dragstart(id){
                    $("#model-"+id).after($("#dragover-container"));
                    this.dragoverId = id;
                    this.isDragover = true;
                },
                saveModel(){
                    if (!this.isSaveSort)return;
                    let element = document.getElementsByName("model");
                    let val = "";
                    for (let i=0;i<element.length;i++){
                        if (element[i].checked===true)val += element[i].value+",";
                    }
                    val = val.substring(0,val.length-1);
                    let index = null;
                    this.owners.some((owner,i)=>{
                        if (owner.id===this.selectedOwner){
                            index = i;
                            return true;
                        }
                    });
                    this.isSaveSort = false;
                    if (this.owners[index].model_sequence === val)return;
                    window.tempTip.postBasicRequest("{{url('maintenance/materialBoxModel/updateModelSequence')}}",{id:this.selectedOwner,sequence:val},()=>{
                        this.$set(this.owners[index],"model_sequence",val);
                        return "模型序列已更新";
                    })
                },
            },
        });
    </script>
@stop