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

@extends('layouts.app')
@section('title')新建用户@endsection

@section('content')
    <div id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.user.menu')@endcomponent
    </div>
    <div class="container" id="editPanel">
        <div class="row justify-content-center">
            @if(Session::has('successTip'))
                <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
            @endif
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">录入用户</div>

                    <div class="card-body">
                        <form method="POST" action="{{ route('register') }}">
                            @csrf

                            <div class="form-group row">
                                <label for="name" class="col-md-3 col-form-label text-md-right">姓名</label>

                                <div class="col-md-7">
                                    <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                                    @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-md-3 col-form-label text-md-right">Email地址</label>

                                <div class="col-md-7">
                                    <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">

                                    @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password" class="col-md-3 col-form-label text-md-right">密码</label>

                                <div class="col-md-7">
                                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

                                    @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password-confirm" class="col-md-3 col-form-label text-md-right">重输密码</label>

                                <div class="col-md-7">
                                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                                </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="tooltipTarget list-group-item list-group-item-action pt-0 pb-0"
                                                  @dblclick="selectedRole(role)" :class="role.style ? 'active' :''"><span style="cursor: default;" > @{{ 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>
                            <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="tooltipTarget 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>

                            <input type="hidden" name="headTo" value="{{url('maintenance/user/create')}}">
                            <div class="form-group row mb-0">
                                <div class="col-md-7 offset-md-4">
                                    <button type="submit" class="btn btn-primary">
                                        录入
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let vueList=new Vue({
            el:"#editPanel",
            data:{
                rolesAll:[
                    @foreach( $rolesAll as $role )
                    {id:'{{$role->id}}',name:'{{$role->name}}',style:false},
                    @endforeach
                ],
                roles:[{{old('role')}}],
                rolesList:[],
                carriersAll:[
                    @foreach($carriers as $carrier)
                    {id:'{{$carrier->id}}',name:'{{$carrier->name}}',style:false},
                    @endforeach
                ],
                carriers:[{{old('carrier')}}],
                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