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

@extends('layouts.app')
@section('title')编辑用户@endsection

@section('content')
    <div id="nav2">
        @component('maintenance.menu')
        @endcomponent
        @component('maintenance.user.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/user/{$user->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{{$user->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="email" class="col-2 col-form-label text-right">邮箱</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('email') is-invalid @enderror"
                                   name="email" autocomplete="off" value="@if(old('email')){{old('email')}}@else{{$user->email}}@endif" required>
                            @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="userWorkGroup" class="col-2 col-form-label text-right">工作组</label>
                        <div class="col-8">
                            <select class="form-control" name="userWorkGroupID" id="userWorkGroupID" v-model="userWorkGroupID">
                                <option v-for="userWorkGroup in userWorkGroups" :value="userWorkGroup.id">@{{ userWorkGroup.name }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="role" class="col-md-3 col-form-label text-md-right">角色</label>
                        <div class="col-md-7">
                            <input type="text"  class="form-control tooltipTarget" placeholder="定位角色"
                                   @input="seekRole($event)" title="输入关键词快速定位"></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3"></label>
                        <div class="col-md-4">
                            <input name="role" hidden    v-model="roles" >
                            <div class="input-group" style="max-height: 150px; 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="role.style ? '双击删除角色' :'双击添加角色'"    v-for="role in rolesAll" :id="role.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedRole(role)" :class="role.style ? 'active' :''"><span style="cursor: default;" :id="role.name"> @{{ role.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="input-group" style="max-height: 150px; overflow-y: scroll;border-radius:5px;text-align: center;">
                                <ul class="list-group" style="width: 100%" onselectstart="return false;">
                                    <li  title="双击删除角色"    v-for="role in rolesList" :id="role.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedRole(role)" ><span style="cursor: default;" > @{{ role.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <hr class="col-8 offset-2 border-info">
                    {{--承运商--}}
                    <div class="form-group row">
                        <label for="carrier" class="col-md-3 col-form-label text-md-right">可见承运商</label>
                        <div class="col-md-7">
                            <input type="text"  class="form-control tooltipTarget" placeholder="定位承运商"
                                   @input="seekCarrier($event)" title="输入关键词快速定位"></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3"></label>
                        <div class="col-md-4">
                            <input name="carrier" hidden   v-model="carriers" >
                            <div class="input-group" style="max-height: 150px; 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="carrier.style ? '双击删除承运商' :'双击添加承运商'"    v-for="carrier in carriersAll" :id="carrier.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedCarrier(carrier)" :class="carrier.style ? 'active' :''"><span style="cursor: default;" > @{{ carrier.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <input name="carrier" hidden   v-model="carriers" >
                            <div class="input-group" style="max-height: 150px; overflow-y: scroll;border-radius:5px;text-align: center;">
                                <ul class="list-group" style="width: 100%" onselectstart="return false;">
                                    <li  title="双击删除承运商"    v-for="carrier in carriersList"  class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedCarrier(carrier)" ><span style="cursor: default;" > @{{ carrier.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <hr class="col-8 offset-2 border-info">
                    <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:{
                userWorkGroupID:'{{old('userWorkGroupID')??($userWorkGroup?$userWorkGroup->id:'')}}',
                userWorkGroups:[
                    @foreach($userWorkGroups as $userWorkGroup)
                    {!! $userWorkGroup !!},
                    @endforeach
                ],
                rolesAll:[
                        @foreach( $rolesAll as $role )
                    {id:'{{$role->id}}',name:'{{$role->name}}',style:false},
                    @endforeach
                ],
                roles:[
                    @if(old('role'))
                        {{ old('role') }}
                    @else
                        @foreach( $roles as $role )
                        {{$role->id}},
                        @endforeach
                    @endif
                ],
                rolesList:[],
                carriersAll:[
                    @foreach($carriers as $carrier)
                    {id:'{{$carrier->id}}',name:'{{$carrier->name}}',style:false},
                    @endforeach
                ],
                carriers:[
                    @if(old('carrier'))
                        {{ old('carrier') }}
                    @else
                        @foreach( $carrierUser as $carrier )
                        {{$carrier->id}},
                        @endforeach
                    @endif
                ],
                carriersList:[],
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                if (this.roles.length>0){
                    let rolesAll=this.rolesAll;
                    let roles=this.roles;
                    let rolesList=this.rolesList;
                    for (let i = 0; i < roles.length; i++) {
                        rolesAll.every(function (roleAll) {
                            if (roleAll.id == roles[i]) {
                                roleAll.style = true;
                                rolesList.push({'id':roleAll.id,'name':roleAll.name});
                                return false;
                            }
                            return true;
                        });
                    }
                }
                if (this.carriers.length>0){
                    let carriersAll=this.carriersAll;
                    let carriers=this.carriers;
                    let carriersList=this.carriersList;
                    for (let i = 0; i < carriers.length; i++) {
                        carriersAll.every(function (carrierAll) {
                            if (carrierAll.id == carriers[i]) {
                                carrierAll.style = true;
                                carriersList.push({'id':carrierAll.id,'name':carrierAll.name});
                                return false;
                            }
                            return true;
                        });
                    }
                }
            },
            methods:{
                selectedCarrier:function (e) {
                    let carriers=this.carriers;
                    let carriersAll=this.carriersAll;
                    let carriersList=this.carriersList;
                    let isCarrier=true;
                    if (carriers&&carriersAll) {
                        for (let i = 0; i < carriers.length; i++) {
                            if (carriers[i] == e.id) {
                                carriers.splice(i,1);
                                carriersAll.every(function (carrierAll) {
                                    if (carrierAll.id == e.id) {
                                        carrierAll.style = false;
                                        return false;
                                    }
                                    return true;
                                });
                                carriersList.every(function (carrier,i) {
                                    if (carrier.id==e.id){
                                        carriersList.splice(i,1);
                                        return false;
                                    }
                                    return true;
                                });
                                isCarrier= false;
                                break;
                            }
                            isCarrier= true;
                        }
                    }
                    if (isCarrier || !carriers){
                        carriers.push(e.id);
                        carriersAll.every(function (carrierAll) {
                            if (carrierAll.id==e.id){
                                carrierAll.style=true;
                                carriersList.push({'id':carrierAll.id,'name':carrierAll.name});
                                return false;
                            }
                            return  true;
                        });
                    }
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },10)
                },
                seekCarrier:function (e) {
                    let $val=e.target.value;
                    let carriersAll=this.carriersAll;
                    carriersAll.every(function (carrierAll) {
                        let name=carrierAll.name;
                        if (name.includes($val)){
                            location.href="#"+carrierAll.name;
                            return false;
                        }
                        return  true;
                    });
                    $(e.target).focus();
                },
                selectedRole:function (e) {
                    let roles=this.roles;
                    let rolesAll=this.rolesAll;
                    let rolesList=this.rolesList;
                    let isRole=true;
                    if (roles&&rolesAll) {
                        for (let i = 0; i < roles.length; i++) {
                            if (roles[i] == e.id) {
                                roles.splice(i,1);
                                rolesAll.every(function (roleAll) {
                                    if (roleAll.id == e.id) {
                                        roleAll.style = false;
                                        return false;
                                    }
                                    return true;
                                });
                                rolesList.every(function (role,i) {
                                    if (role.id==e.id){
                                        rolesList.splice(i,1);
                                        return false;
                                    }
                                    return true;
                                });
                                isRole= false;
                                break;
                            }
                            isRole= true;
                        }
                    }
                    if (isRole || !roles){
                        roles.push(e.id);
                        rolesAll.every(function (roleAll) {
                            if (roleAll.id==e.id){
                                roleAll.style=true;
                                rolesList.push({'id':roleAll.id,'name':roleAll.name});
                                return false;
                            }
                            return  true;
                        });
                    }
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },10)
                },
                seekRole:function (e) {
                    let $val=e.target.value;
                    let rolesAll=this.rolesAll;
                    rolesAll.every(function (roleAll) {
                        let name=roleAll.name;
                        if (name.includes($val)){
                            location.href="#"+roleAll.name;
                            return false;
                        }
                        return  true;
                    });
                    $(e.target).focus();
                },
            },
        });

    </script>
@endsection