baoshi-was/resources/views/maintenance/unit/index.blade.php

@extends('layouts.app')
@section('title')单位@endsection

@section('content')
    <div class="container-fluid" id="list" @drop="drop($event)" @dragover="dragover($event, false)">

        <div class="modal fade" tabindex="-1" role="dialog" id="modal">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <label class="col-2 offset-1" for="name">名称</label>
                            <input class="col-7 form-control form-control-sm" :class="errors.name ? 'is-invalid' : ''" id="name" type="text" v-model="unit.name">
                            <span class="invalid-feedback mt-0 offset-3" role="alert" v-if="errors.name">
                        <strong>@{{ errors.name[0] }}</strong>
                    </span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" @click="submitUnit()">提交</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                @can("计量单位-录入")<button class="btn btn-outline-info mb-1 mr-3" @click="openModal()"><span class="fa fa-plus"></span>&nbsp;新&nbsp;&nbsp;增</button>@endcan
                @can("计量单位-录入")<button class="btn border border-2 mb-1 mr-3" :class="isSaveSort ? 'btn-success' : 'text-secondary'" :disabled="!isSaveSort" @click="sort()"> 保 存 </button>@endcan
                <table class="table table-striped table-sm">
                    <tr>
                        <th>ID</th>
                        <th>计量单位名称</th>
                        <th>录入时间</th>
                        <th>操作</th>
                    </tr>
                    <tbody id="parent">
                        <tr v-for="(u,i) in units" draggable="true" :id="'unit-'+u.id" :data-order="u.sequence" :data-id="u.id"
                            @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''"
                            @drop="drop($event)" @dragover="dragover($event)" @dragstart="dragstart(u.id)" style="cursor: move">
                            <td class="text-muted">@{{u.id}}</td>
                            <td>@{{u.name}}</td>
                            <td class="text-muted">@{{u.created_at}}</td>
                            <td>
                                @can('计量单位-编辑')
                                    <button class="btn btn-sm btn-outline-primary" @click="openModal(u)">改</button> @endcan
                                @can('计量单位-删除')
                                    <button class="btn btn-sm btn-outline-dark" @click="destroy(u)">删</button> @endcan
                            </td>
                        </tr>
                        <tr id="dragover-container" class="border-dashed-red" v-if="isDragover" @drop="drop($event)" @dragover="dragover($event,false)">
                            <td colspan='4' class='text-secondary'><div class='w-100 text-center'>拖拽至此</div></td>
                        </tr>
                    </tbody>
                </table>
                {{$units->links()}}
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#list",
            data:{
                units:[
                    @foreach( $units as $unit)
                    {id:'{{$unit->id}}',name:'{{$unit->name}}',created_at:'{{$unit->created_at}}',sequence:'{{$unit->sequence}}'},
                    @endforeach
                ],
                selectTr:0,
                unit:{},
                errors:{},
                dragoverId:"",
                isDragover : false,
                isSaveSort : false,
            },
            methods:{
                edit:function(id){
                    location.href = "{{url('maintenance/unit')}}/"+id+"/edit";
                },
                destroy:function(unit){
                    if(!confirm('确定要删除单位“' + unit.name + '”吗？'))return;
                    let data=this;
                    let url = "{{url('maintenance/unit')}}/"+unit.id;
                    window.axios.delete(url,{id:unit.id})
                        .then(function (response) {
                            if(response.data.success){
                                for (let i = 0; i < data.units.length; i++) {
                                    if (data.units[i].id===unit.id){
                                        data.units.splice(i,1);
                                        break;
                                    }
                                }
                                tempTip.setDuration(1000);
                                tempTip.showSuccess('删除单位"'+unit.name+'"成功!')
                            }else{
                                tempTip.setDuration(1000);
                                tempTip.show('删除单位"'+unit.name+'"失败!')
                            }
                        }).catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('删除单位失败!'+'网络错误：' + err);
                    });
                },
                openModal(unit = null){
                    if (unit) this.unit={id:unit.id,name:unit.name};
                    else this.tag={id:"",name:""};
                    $("#modal").modal("show");
                },
                submitUnit(){
                    let url="{{url('maintenance/unit/save')}}";
                    let msg=this.unit.id ? "成功修改单位“"+this.unit.name+"”"  : "成功新增单位“"+this.unit.name+"”";
                    window.tempTip.postBasicRequest(url,this.unit,(res)=>{
                        if(res && res.errors){
                            this.errors = res.errors;
                            return '';
                        }
                        if (this.unit.id){
                            this.units.some((unit)=> {
                                if (unit.id === this.unit.id){
                                    unit.name = this.unit.name;
                                    return true;
                                }
                            });
                        }else this.units.unshift({
                            id:res.id,
                            name:res.name,
                            created_at:res.created_at,
                        });

                        $("#modal").modal("hide");
                        return msg;
                    },true);
                },
                dragover(e, isAllow = true){
                    e.preventDefault();
                    e.stopPropagation();
                    if (isAllow) e.currentTarget.after(document.getElementById("dragover-container"))
                },
                dragstart(id){
                    $("#unit-"+id).after($("#dragover-container"));
                    this.dragoverId = id;
                    this.isDragover = true;
                },
                drop(e){
                    e.preventDefault();
                    e.stopPropagation();
                    $("#dragover-container").after($("#unit-"+this.dragoverId));
                    this.dragoverId = "";
                    this.isDragover = false;
                    this.isSaveSort = true;
                },
                sort(){
                    let parent = document.getElementById("parent").children;
                    let update = [["id","sequence"]];
                    for (let i=0;i<parent.length;i++){
                        let order = parent[i].getAttribute("data-order");
                        let id = parent[i].getAttribute("data-id");
                        if (id && order !== i+1)update.push({id:id,sequence:i+1});
                    }
                    if (update.length > 1){
                        let url = "{{url('maintenance/unit/sort')}}";
                        window.tempTip.postBasicRequest(url,{"update":update},res=>{
                            this.isSaveSort = false;
                            return "";
                        });
                    }else this.isSaveSort = false;
                },
            }
        });
    </script>
@endsection