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

@extends('layouts.app')
@section('title')权限@endsection

@section('content')
    <div class="container-fluid" id="container">
        @include('maintenance.authority._add')
        @include('maintenance.authority._edit')
        <div class="card">
            <div class="card-body">
                <div class="w-100 mb-5">
                    <div class="btn-group pull-left">
                        <button class="btn btn-outline-primary" data-toggle="modal" data-target="#addModal"><span class="fa fa-plus"></span>&nbsp;新&nbsp;&nbsp;增</button>
                        <button class="btn btn-outline-info" @click="openEditModal()"><span class="fa fa-edit"></span>&nbsp;修&nbsp;&nbsp;改</button>
                        <button class="btn btn-outline-danger" @click="deleteAuthority()"><span class="fa fa-close"></span>&nbsp;删&nbsp;&nbsp;除</button>
                    </div>
                    <div class="btn-group pull-right">
                        <button class="btn border btn-primary" @click="expand(true)">展开全部</button>
                        <button class="btn border btn-primary" @click="expand(false)">收起全部</button>
                    </div>
                </div>
                <div class="w-100" id="tree">
                    <tree class="offset-2 h5 font-weight-bold" :list="list" :column="'name'"></tree>
                </div>
            </div>
        </div>
    </div>
@stop

@section('lastScript')
    <script type="text/javascript">
        new Vue({
            el:"#container",
            data:{
                list:[@foreach($authorities as $authority)@json($authority),@endforeach],
                parentList:[],
                authority:{parent_id:"",name:"",alias_name:"",permission:"允许"},
                errors:{},
                updateArr:[],
            },
            components:{
                'tree':"url:{{asset("js/vue/tree.vue")}}"
            },
            mounted(){
                this.parentList = this._mergeArray(this.list);
            },
            methods:{
                expand(isExpand){
                    if (isExpand) $(".up").slideDown();
                    else $(".up").slideUp();
                },
                _mergeArray(arr,result = [],before = '&nbsp;'){
                    if (!arr)return result;
                    for (let i=0;i<arr.length;i++){
                        result.push({id:arr[i].id,name:before+'└─'+arr[i].name});
                        if (arr[i].child && arr[i].child.length>0)this._mergeArray(arr[i].child,result,before+'&nbsp;&nbsp;&nbsp;')
                    }
                    return result;
                },
                submitAuthority(){
                    window.tempTip.postBasicRequest("{{url('maintenance/authority/store')}}",this.authority,res=>{
                        if (res.errors){this.errors = res.errors;return;}
                        this._pushToParent(this.list,res.parent_id,{id:res.id,parent_id:res.parent_id,name:res.name,alias_name:res.alias_name,child:[]});//推进父级
                        setTimeout(()=>{
                            this.parentList = this._mergeArray(this.list);//异步重构元素，先行返回
                        });
                        this.authority = {parent_id:"",name:"",alias_name:"",permission:"允许"};//重置列表
                        //$("#addModal").modal('hide');
                        return "录入成功";
                    },true);
                },
                //推进父级
                _pushToParent(arr,id,result){
                    let target = this._seekTarget(arr,id);
                    if (!target.child)target.child = [];
                    target.child.push(result);
                },
                _seekTarget(arr,id){
                    if (!arr)return null;
                    for (let i=0;i<arr.length;i++){
                        if (arr[i].id==id)return arr[i];
                        let result = this._seekTarget(arr[i].child,id);
                        if (result)return result;
                    }
                    return null;
                },
                openEditModal(){
                    let inputs = document.getElementById("tree").getElementsByTagName("INPUT");
                    this.updateArr = [];
                    for (let i=0;i<inputs.length;i++){
                        if (inputs[i].checked)this.updateArr.push(this._seekTarget(this.list,inputs[i].value));
                    }
                    $("#editModal").modal('show');
                },
                updateAuthority(){
                    let nodes = document.getElementsByName("authorityName");
                    let updateList = [];
                    let params=[];
                    for(let i=0;i<nodes.length;i++){
                        if (nodes[i].value!==this.updateArr[i].name){
                            params.push({id:this.updateArr[i].id,name:nodes[i].value});
                            updateList.push(i);
                        }
                    }
                    if (params.length<1)return;
                    window.tempTip.postBasicRequest("{{url('maintenance/authority/update')}}",{list:params},()=>{
                        for (let i=0;i<updateList.length;i++){
                            this.updateArr[updateList[i]].name = nodes[updateList[i]].value;
                        }
                        setTimeout(()=>{
                            this.parentList = this._mergeArray(this.list);//异步重构元素，先行返回
                        });
                        $("#editModal").modal('hide');
                        return "修改成功";
                    },true);
                },
                deleteAuthority(){
                    window.tempTip.confirm("确定要删除选中的权限吗？存在子级时无论是否被选中均会跟随父级被删除",()=>{
                        let inputs = document.getElementById("tree").getElementsByTagName("INPUT");
                        let destroy = [];
                        for (let i=0;i<inputs.length;i++){
                            if (!inputs[i].checked)continue;
                            let id = inputs[i].value;
                            destroy.push(id);
                            let dom = document.getElementById('item-'+id);
                            if (dom){
                                let nodes = dom.getElementsByClassName("custom-control-input");
                                for(let j=0;j<nodes.length;j++)destroy.push(nodes[j].value);
                            }
                        }
                        window.tempTip.postBasicRequest("{{url('maintenance/authority/destroy')}}",{ids:destroy},()=>{
                            for (let i=0;i<destroy.length;i++){
                                let dom = document.getElementById("li-"+destroy[i]);
                                if (dom)dom.remove();
                            }
                            return "删除成功";
                        })
                    });
                },
            },
        })
    </script>
@stop