baoshi-was/resources/views/maintenance/user/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/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="email" class="col-2 col-form-label text-right">手机号</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('phone') is-invalid @enderror"
                                   name="phone" autocomplete="off" value="@if(old('phone')){{old('phone')}}@else{{$user->userDetail ? $user->userDetail->mobile_phone : ''}}@endif">
                            @error('phone')
                            <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: 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="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: 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>
                    <hr class="col-8 offset-2 border-info">
                    {{--承运商--}}
                    <div class="form-group row">
                        <label for="logistic" 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="seekLogistic($event)" title="输入关键词快速定位"></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3"></label>
                        <div class="col-md-4">
                            <input name="logistic" hidden   v-model="logistics" >
                            <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="logistic.style ? '双击删除承运商' :'双击添加承运商'"    v-for="logistic in logisticsFilter" :id="logistic.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedLogistic(logistic)" :class="logistic.style ? 'active' :''"><span style="cursor: default;" > @{{ logistic.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <input name="logistic" hidden   v-model="logistics" >
                            <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="logistic in logisticsList"  class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedLogistic(logistic)" ><span style="cursor: default;" > @{{ logistic.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <hr class="col-8 offset-2 border-info">
                    <div class="form-group row">
                        <label for="supplier" 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="seekSupplier($event)" title="输入关键词快速定位"></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3"></label>
                        <div class="col-md-4">
                            <input name="supplier" hidden    v-model="suppliers" >
                            <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="supplier.style ? '双击删除供应商' :'双击添加供应商'"    v-for="supplier in suppliersFilter" :id="supplier.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedSupplier(supplier)" :class="supplier.style ? 'active' :''"><span style="cursor: default;" :id="supplier.name"> @{{ supplier.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="supplier in suppliersList" :id="supplier.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedSupplier(supplier)" ><span style="cursor: default;" > @{{ supplier.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    {{-- 工作组、项目组开始  --}}
                    <hr class="col-8 offset-2 border-info">
                    <div class="col-8 offset-2 border-info">
                        <div class="form-group row ">
                            <div class="col-6">
                                <div class="card-header row">
                                    <div class="col-4">
                                        <div class="pull-left h5 font-weight-bold mr-3">工作组</div>
                                        <div class="pull-left text-muted">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="check-works" @change="hideNoSelected('workGroup',$event.target.checked)">
                                                <label class="custom-control-label ml-0" for="check-works">已拥有</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <div class="btn-group">
                                            <a class="btn border btn-primary" @click="expand(true)">展开全部</a>
                                            <a class="btn border btn-primary" @click="expand(false)">收起全部</a>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <a class="pull-right btn btn-outline-success" @click="saveWorkGroups()">保存</a>
                                    </div>
                                </div>
                                <div class="card-body overflow-scrollbar-200" style="max-height: 400px" id="workGroup">
                                    <tree :list="workGroup" :column="'name'" ></tree>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card-header row">
                                    <div class="pull-left h5 font-weight-bold mr-3">项目组</div>
                                    <div class="pull-left text-muted">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="check-ownerGroups" @change="hideNoSelected('ownerGroup',$event.target.checked)">
                                            <label class="custom-control-label ml-0" for="check-ownerGroups">已拥有</label>
                                        </div>
                                    </div>
                                    <a class="pull-right btn btn-outline-success" @click="saveOwnerGroups()">保存</a>
                                </div>
                                <div class="card-body overflow-scrollbar-200" style="max-height: 400px">
                                    <ul class="list-group">
                                        <li class="list-group-item" v-for="owner in ownerGroup" v-show="!owner.hide">
                                            <div class="form-check">
                                                <label class="form-check-label w-100">
                                                    <input type="checkbox" class="form-check-input" name="ownerGroup[]" v-model="ownerGroups"  :value="owner.id">@{{ owner.name }}
                                                </label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </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
                ],
                rolesFilter:[
                        @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:[],

                logisticsAll:[
                    @foreach($logistics as $logistic)
                    {id:'{{$logistic->id}}',name:'{{$logistic->name}}',style:false},
                    @endforeach
                ],
                logistics:[
                    @if(old('logistic'))
                        {{ old('logistic') }}
                    @else
                        @foreach( $logisticUser as $logistic )
                        {{$logistic->id}},
                        @endforeach
                    @endif
                ],
                logisticsFilter:[
                    @foreach($logistics as $logistic)
                    {id:'{{$logistic->id}}',name:'{{$logistic->name}}',style:false},
                    @endforeach
                ],
                logisticsList:[],

                suppliersAll: [
                        @foreach($suppliers as $supplier)
                    {id: '{{$supplier->id}}', name: '{{$supplier->name}}', style: false},
                    @endforeach
                ],
                suppliersFilter: [
                        @foreach($suppliers as $supplier)
                    {id: '{{$supplier->id}}', name: '{{$supplier->name}}', style: false},
                    @endforeach
                ],
                suppliers: [
                    @if(old('supplier'))
                    {{ old('supplier') }}
                    @else
                    @foreach( $supplierUser as $supplier )
                    {{$supplier->id}},
                    @endforeach
                    @endif
                ],
                suppliersList: [],

                workGroup: [@foreach($workGroup as $wg)@json($wg),@endforeach],
                workGroups: [@foreach($workGroups as $wgs)@json($wgs),@endforeach],

                ownerGroup: [@foreach($ownerGroup as $group)@json($group),@endforeach],
                ownerGroups: [@foreach($ownerGroups as $groups){!! "'".$groups."'" !!},@endforeach],
                isFirst:0,
            },
            components:{
                'tree':"url:{{asset("js/vue/tree.vue")}}"
            },
            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.logistics.length>0){
                    let logisticsAll=this.logisticsAll;
                    let logistics=this.logistics;
                    let logisticsList=this.logisticsList;
                    for (let i = 0; i < logistics.length; i++) {
                        logisticsAll.every(function (logisticAll) {
                            if (logisticAll.id == logistics[i]) {
                                logisticAll.style = true;
                                logisticsList.push({'id':logisticAll.id,'name':logisticAll.name});
                                return false;
                            }
                            return true;
                        });
                    }
                }
                if (this.suppliers.length>0){
                    let suppliersAll=this.suppliersAll;
                    let suppliers=this.suppliers;
                    let suppliersList=this.suppliersList;
                    for (let i = 0; i < suppliers.length; i++) {
                        suppliersAll.every(function (supplierAll) {
                            if (supplierAll.id == suppliers[i]) {
                                supplierAll.style = true;
                                suppliersList.push({'id':supplierAll.id,'name':supplierAll.name});
                                return false;
                            }
                            return true;
                        });
                    }
                }
            },
            methods:{
                selectedLogistic:function (e) {
                    let logistics=this.logistics;
                    let logisticsAll=this.logisticsAll;
                    let logisticsList=this.logisticsList;
                    let isLogistic=true;
                    if (logistics&&logisticsAll) {
                        for (let i = 0; i < logistics.length; i++) {
                            if (logistics[i] == e.id) {
                                logistics.splice(i,1);
                                logisticsAll.every(function (logisticAll) {
                                    if (logisticAll.id == e.id) {
                                        logisticAll.style = false;
                                        return false;
                                    }
                                    return true;
                                });
                                logisticsList.every(function (logistic,i) {
                                    if (logistic.id==e.id){
                                        logisticsList.splice(i,1);
                                        return false;
                                    }
                                    return true;
                                });
                                isLogistic= false;
                                break;
                            }
                            isLogistic= true;
                        }
                    }
                    if (isLogistic || !logistics){
                        logistics.push(e.id);
                        logisticsAll.every(function (logisticAll) {
                            if (logisticAll.id==e.id){
                                logisticAll.style=true;
                                logisticsList.push({'id':logisticAll.id,'name':logisticAll.name});
                                return false;
                            }
                            return  true;
                        });
                    }
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },10)
                },
                selectedSupplier:function (e) {
                    let suppliers=this.suppliers;
                    let suppliersAll=this.suppliersAll;
                    let suppliersList=this.suppliersList;
                    let isSupplier=true;
                    if (suppliers&&suppliersAll) {
                        for (let i = 0; i < suppliers.length; i++) {
                            if (suppliers[i] == e.id) {
                                suppliers.splice(i,1);
                                suppliersAll.every(function (supplierAll) {
                                    if (supplierAll.id == e.id) {
                                        supplierAll.style = false;
                                        return false;
                                    }
                                    return true;
                                });
                                suppliersList.every(function (supplier,i) {
                                    if (supplier.id==e.id){
                                        suppliersList.splice(i,1);
                                        return false;
                                    }
                                    return true;
                                });
                                isSupplier= false;
                                break;
                            }
                            isSupplier= true;
                        }
                    }
                    if (isSupplier || !suppliers){
                        suppliers.push(e.id);
                        suppliersAll.every(function (supplierAll) {
                            if (supplierAll.id==e.id){
                                supplierAll.style=true;
                                suppliersList.push({'id':supplierAll.id,'name':supplierAll.name});
                                return false;
                            }
                            return  true;
                        });
                    }
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },10)
                },
                seekLogistic:function (e) {
                    let $val=e.target.value;
                    let logisticsAll=this.logisticsAll;
                    let bool = false;
                    logisticsAll.every(function (logisticsAll) {
                        let name=logisticsAll.name;
                        if (name.includes($val)){
                            bool = true;
                            return false;
                        }
                        return  true;
                    });
                    if($val === '' ){
                        this.rolesFilter = this.rolesAll;
                    }else if(bool){
                        this.logisticsFilter = [];
                        for (let i = 0; i <logisticsAll.length ; i++) {
                            let logistic = logisticsAll[i];
                            if(logistic.name.includes($val)){
                                this.logisticsFilter.push(logistic);
                            }
                        }
                    }
                },
                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(Number(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 bool = false;
                    rolesAll.every(function (roleAll) {
                        let name=roleAll.name;
                        if (name.includes($val)){
                            bool = true;
                            return false;
                        }
                        return  true;
                    });
                    if($val === '' ){
                        this.rolesFilter = this.rolesAll;
                    }else if(bool){
                        this.rolesFilter = [];
                        for (let i = 0; i <rolesAll.length ; i++) {
                            let role = rolesAll[i];
                            if(role.name.includes($val)){
                                this.rolesFilter.push(role);
                            }
                        }
                    }
                },
                seekSupplier:function (e) {
                    let $val=e.target.value;
                    let suppliersAll=this.suppliersAll;
                    let bool = false;
                    suppliersAll.every(function (supplierAll) {
                        let name=supplierAll.name;
                        if (name.includes($val)){
                            bool = true;
                            return false;
                        }
                        return  true;
                    });
                    if($val === '' ){
                        this.suppliersFilter = this.suppliersAll;
                    }else if(bool){
                        this.suppliersFilter = [];
                        for (let i = 0; i <suppliersAll.length ; i++) {
                            let supplier = suppliersAll[i];
                            if(supplier.name.includes($val)){
                                this.suppliersFilter.push(supplier);
                            }
                        }
                    }
                },

                hideNoSelected(type,isHide = true){
                    switch (type) {
                        case "ownerGroup":
                            this.owners.forEach((owner,i)=>{
                                let check =  !this._includes(ownerGroups,owner.id) && isHide;
                                if (owner.hide !== check)this.$set(this.owners[i],"hide",check);
                            });
                            break;
                        case "workGroup":
                            let nodes = document.getElementById("workGroup").getElementsByTagName("INPUT");
                            for (let i=0;i<nodes.length;i++){
                                if (!nodes[i].checked && isHide)nodes[i].parentElement.parentElement.className = "d-none";
                                else nodes[i].parentElement.parentElement.className = "";
                            }
                            break;
                        default: break;
                    }
                },
                expand(isExpand){
                    if (isExpand) $("#workGroup .up").slideDown();
                    else $("#workGroup .up").slideUp();
                },
                _includes(arr,id){
                    return !(arr.every(data=>{
                        return !(data==id);
                    }));
                },
                saveWorkGroups(){
                    let workGroups = [];
                    let nodes = document.getElementById("workGroup").getElementsByTagName("INPUT");
                    for (let i=0;i<nodes.length;i++)if (nodes[i].checked)workGroups.push(nodes[i].value);
                    window.tempTip.postBasicRequest("{{url('maintenance/user/saveWorkGroups')}}",{id:"{{$user->id}}",workGroups:workGroups},()=>{
                        return "保存成功";
                    });
                },
                saveOwnerGroups(){
                    window.tempTip.postBasicRequest("{{url('maintenance/user/saveOwnerGroups')}}",{id:"{{$user->id}}",ownerGroups:this.ownerGroups},()=>{
                        return "保存成功";
                    });
                },
            },
            updated() {
                if (this.isFirst == 0){
                    let nodes = document.getElementById("workGroup").getElementsByTagName("INPUT");
                    for (let i=0;i<nodes.length;i++){
                        let checked = this._includes(this.workGroups,nodes[i].value);
                        if (nodes[i].checked!==checked)nodes[i].checked = checked;
                        this.isFirst = 1;
                    }
                }

            }
        });

    </script>
@endsection