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 mt-3" 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-md-3 col-form-label text-md-right">权限</label>

                        <div class="col-md-7">
                            <input name="authority" type="hidden" v-model="authoritiesStr" required>
                            <div class="input-group">
                                <select id="authorityAddingItem" class="form-control">
                                    <option :value="authority.id" v-for="authority in authoritiesAll">@{{ authority.name }}</option>
                                </select>
                                <span class="input-group-append">
                                            <span class="input-group-text btn-outline-info" style="cursor: pointer;" @click="addRole">
                                                添加左边的权限
                                            </span>
                                        </span>
                            </div>
                            <select size="8" class="form-control @error('authority') is-invalid @enderror "
                                    :class="authoritiesStr?'tooltipTarget':''" title="两次点击移除目标">
                                <option :value="authority.id" v-for="authority in authorities" @click="clickingRoleOption">@{{ authority.name }}</option>
                            </select>
                            @error('authority')
                            <span class="invalid-feedback" authority="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </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}}',},
                    @endforeach
                ],
                authorities:[
                        @foreach( $authorities as $authority )
                    {id:'{{$authority->id}}',name:'{{$authority->alias_name}}',},
                    @endforeach
                ],
                authoritiesStr:'{{ old('authority') }}'
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                this.authoritiesCompileToStr()
            },
            methods:{
                addRole:function () {
                    let $authorityAddingItem = $('#authorityAddingItem');
                    let val=$authorityAddingItem.val();
                    let authorityName = $authorityAddingItem.find("option:selected").text();
                    let isLackOf=this.authorities.every(function(authority){
                        return authority.id !== val;
                    });
                    if(isLackOf){
                        this.authorities.push({id:val,name: authorityName});
                        this.authoritiesCompileToStr()
                    }else{
                        tempTip.setDuration(1500);
                        tempTip.show('已添加'+authorityName)
                    }
                },
                clickingRoleOption:function(e){
                    let target = $(e.target);
                    if(typeof target.attr('data-clicked')=='undefined'||target.attr('data-clicked')==='0'){
                        target.attr('data-clicked',1);
                        setTimeout(function(){target.attr('data-clicked','0');},1500)
                    }
                    else{
                        target.attr('data-clicked',parseInt(target.attr('data-clicked'))+1);
                        this.removeRole(target.val(),target.find("option:selected").text())
                    }
                },
                removeRole:function(id,name){
                    let _this=this;
                    tempTip.confirm('确定要删除权限' + name + '吗？',function () {
                        for(let i=0;i<_this.authorities.length;i++){
                            if(_this.authorities[i].id===id){
                                _this.authorities.splice(i, 1);
                                _this.authoritiesCompileToStr();
                                break;
                            }
                        }
                    });
                },
                authoritiesCompileToStr:function(){
                    let ids=this.authorities.map(function(authority){
                        return authority.id;
                    });
                    this.authoritiesStr=ids.join(',');
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },20);
                }
            },
        });

    </script>
@endsection