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

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

@section('content')
    <div class="container-fluid" id="container" @drop="drop($event)" @dragover="dragover($event, false)">
        @include("maintenance.menu._modal")
        <div class="card" id="content">
            <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
                <div class="row text-nowrap">
                    <ul class="list-group col-9 offset-1" style="cursor: move;">
                        <li class="list-group-item" v-for="menu in menus" draggable="true" :id="'menu-'+menu.id"
                            :data-order="menu.sequence" :data-id="menu.id" :data-parent="menu.parent_id" :data-level="menu.level"
                            @drop="drop($event)" @dragover="dragover($event)" @dragstart.stop="dragstart(menu.id)">
                            <i v-if="menu.font" :class="menu.font" :style="menu.font_style"></i>&nbsp;@{{ menu.name }}
                            <span class="fa fa-close pull-right text-danger" style="cursor: pointer"></span>
                            <span class="fa fa-edit pull-right text-primary mr-2" style="cursor: pointer"></span>
                            <div class="row" v-if="menu.child.length>0">
                                <ul class="list-group col-9 offset-1">
                                    <li class="list-group-item" v-for="menu2 in menu.child" draggable="true" :id="'menu-'+menu2.id"
                                        :data-order="menu2.sequence" :data-id="menu2.id" :data-parent="menu2.parent_id" :data-level="menu2.level"
                                        @drop="drop($event)" @dragover="dragover($event,dragoverId!=menu.id)" @dragstart.stop="dragstart(menu2.id)">
                                        @{{ menu2.name }}
                                        <div class="row" v-if="menu2.child.length>0">
                                            <ul class="list-group col-9 offset-1">
                                                <li class="list-group-item" v-for="menu3 in menu2.child" draggable="true" :id="'menu-'+menu3.id"
                                                    :data-order="menu3.sequence" :data-id="menu3.id" :data-parent="menu3.parent_id" :data-level="menu3.level"
                                                    @drop="drop($event)" @dragover="dragover($event,dragoverId!=menu2.id && dragoverId!=menu.id)" @dragstart.stop="dragstart(menu3.id)">
                                                    @{{ menu3.name }}
                                                    <div class="row" v-if="menu3.child.length>0">
                                                        <ul class="list-group col-9 offset-1">
                                                            <li class="list-group-item" v-for="menu4 in menu3.child" draggable="true" :id="'menu-'+menu4.id"
                                                                :data-order="menu4.sequence" :data-id="menu4.id" :data-parent="menu4.parent_id" :data-level="menu4.level"
                                                                @drop="drop($event)" @dragover="dragover($event,dragoverId!=menu3.id && dragoverId!=menu2.id && dragoverId!=menu.id)" @dragstart.stop="dragstart(menu4.id)">
                                                                @{{ menu4.name }}
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <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>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#container",
            data:{
                menus:[],
                unit:{},
                errors:{},
                dragoverId:"",
                isDragover : false,
                isSaveSort : false,
                menuList:[],
                icons:[],
            },
            mounted(){
                let menus = [@foreach($menus as $menu)@json($menu),@endforeach];
                let menuMap = {};
                menus.forEach(menu=>{
                    menu["child"] = [];
                    menuMap["_"+menu.id] = menu;
                });
                menus.forEach(menu=>{
                    if (menu.parent_id){
                        menuMap["_"+menu.parent_id].child.push(menu);
                        delete menuMap["_"+menu.id];
                    }
                });
                this.menus = menuMap;
                this._formatSelected();
            },
            methods:{
                _formatSelected(){
                    new Promise(()=>{
                        this.menuList = this._mergeArray(this.menus);
                        this._getIcons()
                    });
                },
                _getIcons(){
                    let url = "{{url('')}}"+"/js/utilities/icons.json";
                    let request = new XMLHttpRequest();
                    request.open("get", url);
                    request.send(null);
                    request.onload = function () {
                        if (request.status == 200) {
                            this.icons = JSON.parse(request.responseText);
                        }
                    }
                },
                _mergeArray(obj,arr=[]){
                    for (let key in obj){
                        let name = "";
                        for (let i=1;i<obj[key]["level"];i++){
                            name += "  ";
                        }
                        if (obj[key]['level']!==1)name += "└─";
                        name += obj[key]["name"];
                        arr.push({name:name,id:obj[key]["id"],level:obj[key]["level"]});
                        if (obj[key].child)arr = this._mergeArray(obj[key].child,arr);
                    }
                    return arr;
                },
                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){
                    $("#menu-"+id).after($("#dragover-container"));
                    this.dragoverId = id;
                    this.isDragover = true;
                },
                drop(e){
                    e.preventDefault();
                    e.stopPropagation();
                    $("#dragover-container").after($("#menu-"+this.dragoverId));
                    this.handleDrag(this.dragoverId);
                    this.dragoverId = "";
                    this.isDragover = false;
                    this.isSaveSort = true;
                },
                handleDrag(id){
                    return new Promise(()=>{
                        let params = {};
                        let dom = document.getElementById("menu-"+id);
                        let oldParent = dom.getAttribute("data-parent");
                        let parent = dom.parentElement;
                        let newParent = function () {
                            while (parent && parent.tagName!=='LI')parent = parent.parentElement;
                            return parent ? parent.getAttribute("data-id") : null;
                        }();
                        if (oldParent!==newParent){
                            dom.setAttribute("data-parent",newParent);
                            params.id = id;
                            params.parent_id = newParent;
                            let oldLevel = dom.getAttribute("data-level");
                            let newLevel = parent ? Number(parent.getAttribute("data-level"))+1 : 1;
                            let diff = oldLevel-newLevel;
                            if (diff!=0){
                                dom.setAttribute("data-level",newLevel);
                                params.level = newLevel;
                                let child = dom.getElementsByTagName("LI");
                                if (child.length>0){
                                    params.diff = diff;
                                    params.child = [];
                                    for (let i=0;i<child.length;i++){
                                        params.child.push(child[i].getAttribute("data-id"));
                                        let level = child[i].getAttribute("data-level")-diff;
                                        child[i].setAttribute("data-level",level);
                                    }
                                }
                            }
                            if (JSON.stringify(params)!=='{}'){
                                window.tempTip.postBasicRequest("{{url('maintenance/menu/update')}}",params,()=>{});
                            }
                        }
                    });
                },
                sort(){
                    let nodes = document.getElementById("content").getElementsByTagName("LI");
                    let update = [["id","sequence"]];
                    let index = 1;
                    for (let i=0;i<nodes.length;i++){
                        let id = nodes[i].getAttribute("data-id");
                        if (!id)continue;
                        let oldOrder = nodes[i].getAttribute("data-order");
                        if (oldOrder != index){
                            nodes[i].setAttribute("data-order",index);
                            update.push({id:id,sequence:index});
                        }
                        index++;
                    }
                    if (update.length > 1){
                        let url = "{{url('maintenance/menu/sort')}}";
                        window.tempTip.postBasicRequest(url,{"update":update},()=>{
                            this.isSaveSort = false;
                        });
                    }else this.isSaveSort = false;
                },
            }
        });
    </script>
@endsection