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

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

@section('content')
    <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">
                        <label for="laborCompany" class="col-2 col-form-label text-md-right">劳务所</label>
                        <div class="col-8">
                            <input type="text"  class="form-control tooltipTarget" placeholder="定位劳务所"
                                   @input="seekLaborCompany($event)" title="输入关键词快速定位"></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-2"></label>
                        <div class="col-5">
                            <input name="laborCompany" hidden v-model="laborCompanies" >
                            <div class="input-group" style="max-height: 190px; overflow-y: scroll;border-radius:5px;opacity:0.5;text-align: center;">
                                <ul class="list-group tooltipTarget" style="width: 100%" onselectstart="return false;">
                                    <li  :data-original-title="laborCompany.style ? '双击删除劳务所' :'双击添加劳务所'"    v-for="laborCompany in laborCompaniesFilter" :id="laborCompany.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedLaborCompany(laborCompany)" :class="laborCompany.style ? 'active' :''"><span style="cursor: default;" :id="laborCompany.name"> @{{ laborCompany.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="input-group" style="max-height: 190px; overflow-y: scroll;border-radius:5px;text-align: center;">
                                <ul class="list-group" style="width: 100%" onselectstart="return false;">
                                    <li  title="双击删除劳务所"    v-for="laborCompany in laborCompaniesList" :id="laborCompany.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedLaborCompany(laborCompany)" ><span style="cursor: default;" > @{{ laborCompany.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:[],

                laborCompaniesAll: [
                        @foreach($laborCompanies as $laborCompany)
                    {
                        id: '{{$laborCompany->id}}', name: '{{$laborCompany->name}}', style: false
                    },
                    @endforeach
                ],
                laborCompaniesFilter: [
                        @foreach($laborCompanies as $laborCompany)
                    {
                        id: '{{$laborCompany->id}}', name: '{{$laborCompany->name}}', style: false
                    },
                    @endforeach
                ],
                laborCompanies: [
                    @if(old('laborCompany'))
                    {{ old('laborCompany') }}
                    @else
                    @foreach( $laborCompaniesRole as $laborCompany )
                    {{$laborCompany->id}},
                    @endforeach
                    @endif
                ],
                laborCompaniesList: [],
            },
            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;
                        });
                    }
                }
                if (this.laborCompanies.length>0){
                    let laborCompaniesAll=this.laborCompaniesAll;
                    let laborCompanies=this.laborCompanies;
                    let laborCompaniesList=this.laborCompaniesList;
                    for (let i = 0; i < laborCompanies.length; i++) {
                        laborCompaniesAll.every(function (laborCompanyAll) {
                            if (laborCompanyAll.id == laborCompanies[i]) {
                                laborCompanyAll.style = true;
                                laborCompaniesList.push({'id':laborCompanyAll.id,'name':laborCompanyAll.name});
                                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)
                },
                selectedLaborCompany:function (e) {
                    let laborCompanies=this.laborCompanies;
                    let laborCompaniesAll=this.laborCompaniesAll;
                    let laborCompaniesList=this.laborCompaniesList;
                    let isLaborCompany=true;
                    if (laborCompanies&&laborCompaniesAll) {
                        for (let i = 0; i < laborCompanies.length; i++) {
                            if (laborCompanies[i] == e.id) {
                                laborCompanies.splice(i,1);
                                laborCompaniesAll.every(function (laborCompanyAll) {
                                    if (laborCompanyAll.id == e.id) {
                                        laborCompanyAll.style = false;
                                        return false;
                                    }
                                    return true;
                                });
                                laborCompaniesList.every(function (laborCompany,i) {
                                    if (laborCompany.id==e.id){
                                        laborCompaniesList.splice(i,1);
                                        return false;
                                    }
                                    return true;
                                });
                                isLaborCompany= false;
                                break;
                            }
                            isLaborCompany= true;
                        }
                    }
                    if (isLaborCompany || !laborCompanies){
                        laborCompanies.push(e.id);
                        laborCompaniesAll.every(function (laborCompanyAll) {
                            if (laborCompanyAll.id==e.id){
                                laborCompanyAll.style=true;
                                laborCompaniesList.push({'id':laborCompanyAll.id,'name':laborCompanyAll.name});
                                return false;
                            }
                            return  true;
                        });
                    }
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },10)
                },
                seekLaborCompany:function (e) {
                    let $val=e.target.value;
                    let laborCompaniesAll=this.laborCompaniesAll;
                    let bool = false;
                    laborCompaniesAll.every(function (laborCompanyAll) {
                        let name=laborCompanyAll.name;
                        if (name.includes($val)){
                            bool = true;
                            return false;
                        }
                        return  true;
                    });
                    if($val === '' ){
                        this.laborCompaniesFilter = this.laborCompaniesAll;
                    }else if(bool){
                        this.laborCompaniesFilter = [];
                        for (let i = 0; i <laborCompaniesAll.length ; i++) {
                            let laborCompany = laborCompaniesAll[i];
                            if(laborCompany.name.includes($val)){
                                this.laborCompaniesFilter.push(laborCompany);
                            }
                        }
                    }
                },
                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