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

@extends('layouts.app')

@section('content')
    <div id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.user.menu')@endcomponent
    </div>
    <div class="container-fluid mt-3" 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 name="role" type="hidden" v-model="rolesStr" required>
                                    <div class="input-group">
                                        <select id="roleAddingItem" class="form-control">
                                            <option :value="role.id" v-for="role in rolesAll">@{{ role.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('role') is-invalid @enderror "
                                            :class="rolesStr?'tooltipTarget':''" title="两次点击移除目标">
                                        <option :value="role.id" v-for="role in roles" @click="clickingRoleOption">@{{ role.name }}</option>
                                    </select>
                                    @error('role')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </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}}',},
                    @endforeach
                ],
                roles:[],
                rolesStr:'{{ old('role') }}'
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
            },
            methods:{
                addRole:function () {
                    let $roleAddingItem = $('#roleAddingItem');
                    let val=$roleAddingItem.val();
                    let roleName = $roleAddingItem.find("option:selected").text();
                    let isLackOf=this.roles.every(function(role){
                        return role.id !== val;
                    });
                    if(isLackOf){
                        this.roles.push({id:val,name: roleName})
                        this.rolesCompileToStr()
                    }else{
                        tempTip.setDuration(1500);
                        tempTip.show('已添加'+roleName)
                    }
                },
                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.roles.length;i++){
                            if(_this.roles[i].id===id){
                                _this.roles.splice(i, 1);
                                _this.rolesCompileToStr();
                                break;
                            }
                        }
                    });
                },
                rolesCompileToStr:function(){
                    let ids=this.roles.map(function(role){
                        return role.id;
                    });
                    this.rolesStr=ids.join(',');
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },20);
                }
            },
        });

    </script>
@endsection