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

@extends('layouts.app')
@section('title')角色@endsection

@section('content')
    <div class="container-fluid d-none" id="container">
        <div class="row">
            <div class="col-5 card">
                <div class="card-header">
                    <label class="pull-left h5 font-weight-bold">角色列表<i class="fa fa-plus cursor-pointer" @click="addRole()"></i></label>
                    <label class="pull-right"><input type="text" class="form-control form-control-sm rounded-pill" placeholder="检索" @keydown.enter="seekRole($event)"></label>
                </div>
                <div class="card-body p-0" style="cursor: pointer;overflow-y: auto;max-height: 1000px">
                    <ul class="list-group">
                        <li class="list-group-item" :class="selectedRole==role.id ? 'bg-info' : ''" v-for="(role,i) in roles" v-show="!role.hide" @click="loadRelevance(role.id)">
                            @{{ role.name }}
                            <span class="fa fa-close pull-right text-danger" style="cursor: pointer" @click.stop="delMenu(role.id,i)"></span>
                            <span class="fa fa-edit pull-right text-primary mr-2" style="cursor: pointer" @click.stop="openModal(role)"></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-7 card card-body pt-0">
                <div class="card">
                    <div class="card-header row">
                        <div class="col-4">
                            <div class="pull-left h5 font-weight-bold mr-3">权限</div>
                            <div class="pull-left text-muted">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="check-authorities" @change="hideNoSelected('authority',$event.target.checked)">
                                    <label class="custom-control-label ml-0" for="check-authorities">已拥有</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="btn-group">
                                <button class="btn border btn-primary" @click="expand(true)">展开全部</button>
                                <button class="btn border btn-primary" @click="expand(false)">收起全部</button>
                            </div>
                        </div>
                        <div class="col-3">
                            <button class="pull-right btn btn-outline-success" @click="saveAuthority()">保存</button>
                        </div>
                    </div>
                    <div class="card-body overflow-scrollbar-200" style="max-height: 400px" id="authority">
                        <tree :list="authorities" :column="'name'"></tree>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header row">
                        <div class="col-4">
                            <div class="pull-left h5 font-weight-bold mr-3">货主</div>
                            <div class="pull-left text-muted">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="check-owners" @change="hideNoSelected('owner',$event.target.checked)">
                                    <label class="custom-control-label ml-0" for="check-owners">已拥有</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <input class="form-control form-control-sm rounded-pill" placeholder="检索" @keydown.enter="seekOwner($event)">
                        </div>
                        <div class="col-3">
                            <button class="pull-right btn btn-outline-success" @click="saveOwner()">保存</button>
                        </div>
                    </div>
                    <div class="card-body overflow-scrollbar-200 p-0">
                        <ul class="list-group">
                            <li class="list-group-item" v-for="owner in owners" v-show="!owner.hide">
                                <div class="form-check">
                                    <label class="form-check-label w-100">
                                        <input type="checkbox" class="form-check-input" v-model="check.owner" :value="owner.id">@{{ owner.name }}
                                    </label>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <div class="pull-left h5 font-weight-bold mr-3">工作组</div>
                        <div class="pull-left text-muted">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="check-userWorkGroups" @change="hideNoSelected('userWorkGroup',$event.target.checked)">
                                <label class="custom-control-label ml-0" for="check-userWorkGroups">已拥有</label>
                            </div>
                        </div>
                        <button class="pull-right btn btn-outline-success" @click="saveUserWorkGroup()">保存</button>
                    </div>
                    <div class="card-body overflow-scrollbar-200 p-0">
                        <ul class="list-group">
                            <li class="list-group-item" v-for="userWorkGroup in userWorkGroups" v-show="!userWorkGroup.hide">
                                <div class="form-check">
                                    <label class="form-check-label w-100">
                                        <input type="checkbox" class="form-check-input" v-model="check.userWorkGroup" :value="userWorkGroup.id">@{{ userWorkGroup.name }}
                                    </label>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        @include("maintenance.role._modal")
    </div>
@stop

@section("lastScript")
    <script type="text/javascript">
        new Vue({
            el:"#container",
            data:{
                roles:[@foreach($roles as $role)@json($role),@endforeach],
                authorities:[@foreach($authorities as $authority)@json($authority),@endforeach],
                owners:[@foreach($owners as $owner)@json($owner),@endforeach],
                userWorkGroups:[@foreach($userWorkGroups as $userWorkGroup)@json($userWorkGroup),@endforeach],
                selectedRole:"",
                role:{name:""},
                errors:{},
                check:{
                    owner:[],
                    userWorkGroup:[],
                }
            },
            components:{
                'tree':"url:{{asset("js/vue/tree.vue")}}"
            },
            mounted(){
                $("#container").removeClass("d-none");
            },
            methods:{
                expand(isExpand){
                    if (isExpand) $("#authority .up").slideDown();
                    else $("#authority .up").slideUp();
                },
                seekRole(e){
                    let val = e.target.value;
                    this.roles.forEach((role,i)=>{
                        if (role.name.indexOf(val)===-1)this.$set(this.roles[i],'hide',true);
                        else this.$set(this.roles[i],'hide',false);
                    });
                },
                addRole(){
                    this.role = {name:""};
                    $("#modal").modal("show");
                },
                openModal(role){
                    this.role = {name:role.name,id:role.id};
                    $("#modal").modal("show");
                },
                delMenu(id,index){
                    window.tempTip.confirm("确定要删除该角色吗？",()=>{
                        window.tempTip.postBasicRequest("{{url("maintenance/role/destroy")}}",{id:id},()=>{
                            this.$delete(this.roles,index);
                            return "删除成功";
                        })
                    });
                },
                submitRole(){
                    if (!this.role.name){
                        this.errors = {name:["角色名称不可为空"]};
                        return;
                    }
                    for (let i=0;i<this.roles.length;i++){
                        if (this.roles[i].name === this.role.name && this.roles[i].id!=this.role.id){
                            this.errors = {name:["角色名称已存在"]};
                            return;
                        }
                    }
                    window.tempTip.postBasicRequest("{{url('maintenance/role/save')}}",this.role,res=>{
                        let msg =  "录入成功";
                        if (this.role.id){
                             this.roles.some((role,i)=>{
                                 if (role.id==this.role.id){
                                     this.$set(this.roles[i],"name",this.role.name);
                                     return true;
                                 }
                             });
                             msg = "修改成功";
                        }else this.roles.unshift(res);
                        $("#modal").modal("hide");
                        return msg;
                    },true);
                },
                loadRelevance(id){
                    if (id==this.selectedRole)return;
                    this.selectedRole=id;
                    window.tempTip.postBasicRequest("{{url('maintenance/role/loadRelevance')}}",{id:id},res=>{
                        let nodes = document.getElementById("authority").getElementsByTagName("INPUT");
                        for (let i=0;i<nodes.length;i++){
                            let checked = this._includes(res.authorities,nodes[i].value);
                            if (nodes[i].checked!==checked)nodes[i].checked = checked;
                        }
                        this.check.owner = res.owners;
                        this.check.userWorkGroup = res.userWorkGroups;
                    });
                },
                _includes(arr,id){
                    return !(arr.every(data=>{
                        return !(data==id);
                    }));
                },
                saveAuthority(){
                    if (!this.selectedRole){
                        window.tempTip.show("未选定角色");
                        return;
                    }
                    let authorities = [];
                    let nodes = document.getElementById("authority").getElementsByTagName("INPUT");
                    for (let i=0;i<nodes.length;i++)if (nodes[i].checked)authorities.push(nodes[i].value);
                    window.tempTip.postBasicRequest("{{url('maintenance/role/saveAuthority')}}",{id:this.selectedRole,authorities:authorities},()=>{
                        return "保存成功";
                    });
                },
                saveOwner(){
                    if (!this.selectedRole){
                        window.tempTip.show("未选定角色");
                        return;
                    }
                    window.tempTip.postBasicRequest("{{url('maintenance/role/saveOwner')}}",{id:this.selectedRole,owners:this.check.owner},()=>{
                        return "保存成功";
                    });
                },
                saveUserWorkGroup(){
                    if (!this.selectedRole){
                        window.tempTip.show("未选定角色");
                        return;
                    }
                    window.tempTip.postBasicRequest("{{url('maintenance/role/saveUserWorkGroup')}}",{id:this.selectedRole,userWorkGroups:this.check.userWorkGroup},()=>{
                        return "保存成功";
                    });
                },
                hideNoSelected(type,isHide = true){
                    if (!this.selectedRole) return;
                    switch (type) {
                        case "authority":
                            let nodes = document.getElementById("authority").getElementsByTagName("INPUT");
                            for (let i=0;i<nodes.length;i++){
                                if (!nodes[i].checked && isHide)nodes[i].parentElement.parentElement.className = "d-none";
                                else nodes[i].parentElement.parentElement.className = "";
                            }
                            break;
                        case "owner":
                            this.owners.forEach((owner,i)=>{
                                let check =  !this._includes(this.check.owner,owner.id) && isHide;
                                if (owner.hide !== check)this.$set(this.owners[i],"hide",check);
                            });
                            break;
                        case "userWorkGroup":
                            this.userWorkGroups.forEach((userWorkGroup,i)=>{
                                let check =  !this._includes(this.check.userWorkGroup,userWorkGroup.id) && isHide;
                                if (userWorkGroup.hide !== check)this.$set(this.userWorkGroups[i],"hide",check);
                            });
                            break;
                    }
                },
                seekOwner(e){
                    let val = e.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);
                    });
                }
            },
        });
    </script>
@stop