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

@extends('layouts.app')
@section('title')查询-用户@endsection

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div id="form_div"></div>
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <div id="list">
                    @include("maintenance.user._resetPwd")
                    @include("maintenance.user._allocationOwner")
                    <table class="table table-striped table-sm td-min-width-80" id="table">
                        <tr v-for="(user,i) in users"  @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                            <td class="text-muted"><span>@{{user.id}}</span></td>
                            <td><span>@{{user.name}}</span></td>
                            <td>
                                <span class="text-danger" v-if="user.isSuperAdmin">超级管理员</span>
                                <ul v-if="user.roles.length>0" class="list-group">
                                    <li v-for="role in user.roles" style="list-style: none">@{{ role.name }}</li>
                                </ul>
                            </td>
                            <td><span v-if="user.workgroup&&user.workgroup.length>0">@{{ user.workgroup[0].name }}</span></td>
                            <td>
                                <ul v-if="user.logistics.length>0" class="list-group">
                                    <li v-for="logistic in user.logistics" style="list-style: none">@{{ logistic.name }}</li>
                                </ul>
                            </td>
                            <td>
                                <ul v-if="user.suppliers.length>0" class="list-group">
                                    <li v-for="supplier in user.suppliers" style="list-style: none">@{{ supplier.name }}</li>
                                </ul>
                            </td>
                            <td><span>@{{user.email}}</span></td>
                            <td class="text-muted"><span>@{{user.created_at}}</span></td>
                            <td>
                                @can('用户-编辑')
                                <button class="btn btn-sm btn-warning" @click="openResetPwdModal(user)">重置密码</button>
                                <button class="btn btn-sm btn-info ml-1" @click="allocationOwner(user)">分配货主</button>
                                <button class="btn btn-sm btn-outline-primary ml-1" @click="edit(user.id)">改</button> @endcan
                                @can('用户-删除')
                                <button class="btn btn-sm btn-outline-dark" @click="destroy(user)">删</button> @endcan
                            </td>
                        </tr>
                    </table>
                    {{$users->links()}}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>

    </script>
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        new Vue({
            el:"#list",
            data:{
                users:{!! $users->toJson() !!}['data'],
                form:'',
                owners:[
                        @foreach($owners as $owner)
                    {name:'{{$owner->id}}',value:'{{$owner->name}}'},
                    @endforeach
                ],
                selectTr:0,
                user:{},
                switchStatus:false,
                switchOwner:[],
            },
            mounted:function(){
                let data = [
                    [{name:'name',type:'input',tip:'用户名：可在两侧添加百分号(%)进行模糊搜索',placeholder:'用户名'},
                    {name:'role',type:'input',tip:'可支持多角色名,模糊搜索可在两侧添加百分号(%)进行',placeholder:'角色名'},
                        {name:'owners',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的客户'],
                            placeholder:['货主','定位或多选货主'],data:this.owners},
                    ]
                ];
                this.form = new query({
                    el: '#form_div',
                    condition: data,
                });
                this.form.init();
                let column = [
                    {name:'id',value: 'ID'},
                    {name:'name',value: '用户名'},
                    {name:'role_name',value: '角色', neglect: true},
                    {name:'workgroup_name',value: '工作组', neglect: true},
                    {name:'carrier_name',value: '配置承运商', neglect: true},
                    {name:'supplier_name',value: '配置供应商', neglect: true},
                    {name:'email',value: '邮件地址'},
                    {name:'created_at',value: '创建时间'},
                    {name:'operation',value: '操作', neglect: true},
                ];
                new Header({
                    el:"table",
                    name:"user",
                    column: column,
                    data: this.users,
                    fixedTop: ($('#form_div').height())+2,
                    isRestorationColumnAsc:true,
                    isCheckAllBox:false,
                }).init();
            },
            methods:{
                edit:function(id){
                    location.href = "{{url('maintenance/user')}}/"+id+"/edit";
                },
                destroy:function(user){
                    if(!confirm('确定要删除用户“' + user.name + '”吗？'))return;
                    let data=this;
                    let url = "{{url('maintenance/user')}}/"+user.id;
                    axios.delete(url,{id:user.id})
                        .then(function (response) {
                            if(response.data.success){
                                for (let i = 0; i < data.users.length; i++) {
                                    if (data.users[i].id===user.id){
                                        data.users.splice(i,1);
                                        break;
                                    }
                                }
                                tempTip.setDuration(1000);
                                tempTip.showSuccess('删除用户"'+user.name+'"成功!')
                            }else{
                                tempTip.setDuration(1000);
                                tempTip.show('删除用户"'+user.name+'"失败!')
                            }
                        })
                        .catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('删除用户失败!'+'网络错误：' + err)
                        });
                },
                openResetPwdModal(user){
                    this.user = user;
                    $("#modal").modal("show");
                },
                resetPwd(){
                    window.tempTip.setIndex(1099);
                    window.tempTip.setDuration(3000);
                    if (this.user.pwd.length<6){
                        window.tempTip.show("密码最少为六位");
                        return;
                    }
                    if (this.user.pwd!==this.user.rePwd){
                        window.tempTip.show("两次密码输入不一致");
                        return;
                    }
                    window.tempTip.postBasicRequest("{{url('maintenance/user/resetPassword')}}",this.user,()=>{
                        $("#modal").modal("hide");
                        return "已重置用户：“"+this.user.name+"”的密码";
                    },true);
                },
                allocationOwner(user){
                    this.switchOwner = [];
                    this._updateOwnerShow(this.switchStatus);
                    this.user = user;
                    if (!user.owners){
                        window.tempTip.postBasicRequest("{{url('maintenance/user/getOwners')}}", {id:user.id},res=>{
                            this.user.owners = res;
                            this.switchOwner = res;
                        });
                    }else{
                        this.switchOwner = user.owners;
                    }
                    $("#allocation-owner").modal('show');
                },
                changeSwitchStatus(){
                    if (!this.user.owners || this.user.owners.length===0){
                        this._updateOwnerShow(!this.switchStatus);
                    }else{
                        this.owners.forEach(owner=>{
                            owner.hide = this.isExist(this.user.owners,owner.name) && this.switchStatus;
                        });
                        this.$forceUpdate();
                    }
                },
                _updateOwnerShow(isHide){
                    this.owners.forEach(owner=>{
                        owner.hide = isHide;
                    })
                    this.$forceUpdate();
                },
                seekOwner(e){
                    let val = e.target.value;
                    this.owners.forEach(owner=>{
                        if (owner.value.indexOf(val) > -1){
                            owner.hide = !((this.switchStatus && !this.isExist(this.user.owners,owner.name)) || !this.switchStatus);
                        }else{
                            owner.hide = true;
                        }
                    })
                    this.$forceUpdate();
                },
                executeAllocation(){
                    window.tempTip.postBasicRequest("{{url('maintenance/user/bindOwner')}}", {id:this.user.id,owners:this.switchOwner},()=>{
                        this.user.owners = this.switchOwner;
                        return "绑定成功";
                    },true);
                },
                isExist(arr, tar){
                    return arr.some(val=>{
                        return val == tar;
                    });
                },
            }
        });
    </script>
@endsection