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

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

@section('content')
    <div id="nav2">
        @component('maintenance.menu')
        @endcomponent
        @component('maintenance.role.menu')
                <li class="nav-item">
                    <a class="nav-link" href="{{URL::current()}}" :class="{active:isActive('edit',4)}">修改</a>
                </li>
        @endcomponent
    </div>
    <div class="container-fluid" id="editPanel">
        <div class="card">
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}！</div>
                @endif
                <form method="POST" action='{{url("maintenance/role/{$role->id}")}}'>
                    @csrf
                    @method('PUT')
                    <div class="form-group row">
                        <label for="name" class="col-2 col-form-label text-right">角色名称</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('name') is-invalid @enderror"
                                   name="name" autocomplete="off" value="@if(old('name')){{old('name')}}@else{{$role->name}}@endif" required>
                            @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="authority" class="col-2 col-form-label text-md-right">允许权限</label>
                        <div class="col-8">
                            <input @keydown.enter.prevent="false" type="text"  class="form-control tooltipTarget" placeholder="定位权限"
                                   @input="seekAuthority($event)" title="输入关键词快速定位下拉列表"></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-2"></label>
                        <div class="col-5">
                            <input name="authority" hidden   v-model="authorities" >
                            <div class="input-group" style="max-height: 245px; overflow-y: scroll;border-radius:5px;opacity:0.5;text-align: center;">
                                <ul class="list-group" style="width: 100%" onselectstart="return false;">
                                    <li  :data-original-title="authority.style ? '双击删除权限' :'双击添加权限'"    v-for="authority in authoritiesFilterAll" v-if="authority.permission=='允许'" :id="authority.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedAuthority(authority)" :class="authority.style ? 'active' :''"><span style="cursor: default;" :id="authority.name"> @{{ authority.name }} </span></li>
                                </ul>
                            </div>
                            @error('authority')
                            <span class="invalid-feedback">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                        <div class="col-3" v-if="authoritiesList.length>0">
                            <div class="input-group" style="max-height: 245px; overflow-y: scroll;border-radius:5px;text-align: center;">
                                <ul class="list-group tooltipTarget" style="width: 100%"  onselectstart="return false;">
                                    <li  title="双击删除权限"    v-for="authority in authoritiesList" v-if="authority.permission=='允许'" class=" list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedAuthority(authority)"><span style="cursor: default;"> @{{ authority.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="authority" class="col-2 col-form-label text-md-right">禁止权限</label>
                        <div class="col-8">
                            <input @keydown.enter.prevent="false" type="text"  class="form-control tooltipTarget" placeholder="定位权限"
                                   @input="seekAuthority($event)" title="输入关键词快速定位下拉列表"></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-2"></label>
                        <div class="col-5">
                            <input name="authority" hidden   v-model="authorities" >
                            <div class="input-group" style="max-height: 150px; overflow-y: scroll;border-radius:5px;opacity:0.5;text-align: center;">
                                <ul class="list-group" style="width: 100%" >
                                    <li  :data-original-title="authority.style ? '双击删除权限' :'双击添加权限'"    v-for="authority in authoritiesAll" v-if="authority.permission=='禁止'" :id="authority.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedAuthority(authority)" :class="authority.style ? 'active' :''"><span style="cursor: default;" :id="authority.name"> @{{ authority.name }} </span></li>
                                </ul>
                            </div>
                            @error('authority')
                            <span class="invalid-feedback">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                        <div class="col-3" v-if="authoritiesList.length>0">
                            <div class="input-group" style="max-height: 150px; overflow-y: scroll;border-radius:5px;text-align: center;">
                                <ul class="list-group tooltipTarget" style="width: 100%"  >
                                    <li  title="双击删除权限"    v-for="authority in authoritiesList" v-if="authority.permission=='禁止'" class=" list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedAuthority(authority)"><span style="cursor: default;"> @{{ authority.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-8 offset-2">
                            <input type="submit" class="btn btn-outline-dark form-control">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection


@section('lastScript')
    <script>
        let vueList=new Vue({
            el:"#editPanel",
            data:{
                authoritiesAll:[
                    @foreach( $authoritiesAll as $authority )
                    {id:'{{$authority->id}}',name:'{{$authority->alias_name}}',style:false,permission:'{{$authority->permission}}'},
                    @endforeach
                ],
                authoritiesFilterAll:[
                    @foreach( $authoritiesAll as $authority )
                    {id:'{{$authority->id}}',name:'{{$authority->alias_name}}',style:false,permission:'{{$authority->permission}}'},
                    @endforeach
                ],
                authorities:[
                    @if(old('authority'))
                        {{ old('authority') }}
                    @else
                        @foreach( $authorities as $authority )
                        {{$authority->id}},
                        @endforeach
                    @endif
                ],
                authoritiesList:[],
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                if (this.authorities.length>0){
                    let authoritiesList=this.authoritiesList;
                    let authoritiesAll=this.authoritiesAll;
                    let authorities=this.authorities;
                    for (let i = 0; i < authorities.length; i++) {
                        authoritiesAll.every(function (authorityAll) {
                            if (authorityAll.id == authorities[i]) {
                                authorityAll.style = true;
                                authoritiesList.push({'id':authorityAll.id,'name':authorityAll.name,'permission':authorityAll.permission});
                                return false;
                            }
                            return true;
                        });
                    }
                }
            },
            methods:{
                selectedAuthority:function (e) {
                    let authorities=this.authorities;
                    let authoritiesAll=this.authoritiesAll;
                    let authoritiesList=this.authoritiesList;
                    let isAuthorty=true;
                    if (authorities) {
                        for (let i = 0; i < authorities.length; i++) {
                            if (authorities[i] == e.id) {
                                authorities.splice(i,1);
                                authoritiesAll.every(function (authorityAll) {
                                    if (authorityAll.id == e.id) {
                                        authorityAll.style = false;
                                        return false;
                                    }
                                    return true;
                                });
                                authoritiesList.every(function (authority,i) {
                                    if (authority.id==e.id){
                                        authoritiesList.splice(i,1);
                                        return false;
                                    }
                                    return  true;
                                });
                                isAuthorty= false;
                                break;
                            }
                            isAuthorty= true;
                        }
                    }
                    if (isAuthorty || !authorities){
                        authorities.push(e.id);
                        authoritiesAll.every(function (authorityAll) {
                            if (authorityAll.id==e.id){
                                authorityAll.style=true;
                                authoritiesList.push({'id':authorityAll.id,'name':authorityAll.name,'permission':authorityAll.permission});
                                return false;
                            }
                            return  true;
                        });
                    }
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },10)
                },
                seekAuthority:function (e) {
                    let $val=e.target.value;
                    let authoritiesAll=this.authoritiesAll;
                    let authoritiesFilterAll = this.authoritiesFilterAll;
                    let bool = false;
                    authoritiesAll.every(function (authorities) {
                        let name=authorities.name;
                        if (name.includes($val)){
                            bool = true;
                            return false;
                        }
                        return  true;
                    });
                    console.log(bool);
                    if($val === '' ){
                        this.authoritiesFilterAll = this.authoritiesAll;
                    }else if(bool) {
                        this.authoritiesFilterAll = [];
                        for (let i = 0; i < authoritiesAll.length; i++) {
                            let authorities = authoritiesAll[i];
                            let name = authorities.name;
                            if (name.includes($val)) {
                                this.authoritiesFilterAll.push(authorities);
                            }
                        }
                    }
                },
            },
        });

    </script>
@endsection