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="userWorkgroupID" class="col-md-3 col-form-label text-md-right">工作组</label>

                                <div class="col-md-7">
                                    <select class="form-control" name="userWorkgroupID" id="userWorkgroupID">
                                        <option></option>
                                        <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: 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="role.style ? '双击删除角色' : '双击添加角色'"
                                                v-for="role in rolesFilter" :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: 190px; 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">
                                    <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 carriersFilter" :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" 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: {
                userWorkgroups: [
                    @foreach($userWorkgroups as $userWorkgroup)
                    {!! $userWorkgroup !!},
                    @endforeach
                ],
                rolesAll: [
                        @foreach( $rolesAll as $role )
                    {
                        id: '{{$role->id}}', name: '{{$role->name}}', style: false
                    },
                    @endforeach
                ],
                rolesFilter: [
                        @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
                ],
                carriersFilter: [
                        @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;
                    let bool = false;
                    carriersAll.every(function (carrierAll) {
                        let name = carrierAll.name;
                        if (name.includes($val)) {
                            bool = true;
                            return false;
                        }
                        return true;
                    });
                    if($val==='' && !bool){
                        this.carriersFilter = this.carriersAll;
                    }else if(bool){
                        this.carriersFilter= [];
                        for (let i = 0; i < carriersAll.length; i++) {
                            let carries = carriersAll[i];
                            let name = carries.name;
                            if(name.includes($val)){
                                this.carriersFilter.push(carries);
                            }
                        }
                    }
                },
                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;
                    let rolesFilter = this.rolesFilter;
                    let bool = false;
                    rolesAll.every(function (roleAll) {
                        let name = roleAll.name;
                        if (name.includes($val)) {
                            bool = true;
                            return false;
                        }
                        return true;
                    });
                    console.log(bool);
                    if ($val === '' && bool) {
                        this.rolesFilter = this.rolesAll;
                    } else if (bool) {
                        this.rolesFilter = [];
                        for (let i = 0; i < rolesAll.length; i++) {
                            let role = rolesAll[i];
                            console.log(role);
                            let name = role.name;
                            if (name.includes($val)) {
                                console.log(name);
                                this.rolesFilter.push(role);
                            }
                        }
                    }

                },
            },
        });

    </script>
@endsection