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

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

@section('content')
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.user.menu')@endcomponent
    </span>
    <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">
                    <table class="table table-bordered table-sm d-none" id="headerRoll"></table>
                    <table class="table table-striped table-sm" id="headerParent">
                        <tr id="header"></tr>
                        <tr v-for="user in users">
                            <td class="text-muted">@{{user.id}}</td>
                            <td>@{{user.name}}</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.carriers.length>0" class="list-group">
                                    <li v-for="carrier in user.carriers" style="list-style: none">@{{ carrier.name }}</li>
                                </ul>
                            </td>
                            <td>@{{user.email}}</td>
                            <td class="text-muted">@{{user.created_at}}</td>
                            <td>
                                @can('用户-编辑')
                                <button class="btn btn-sm btn-outline-primary" @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 type="text/javascript" src="{{asset('js/queryForm/queryForm200818a.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/header200819.js')}}"></script>
    <script>
        new Vue({
            el:"#list",
            data:{
                users:[
                    @foreach( $users as $user )
                    {id:'{{$user->id}}',name:'{{$user->name}}',email:'{{$user->email}}',
                        isSuperAdmin:'{{$user->isSuperAdmin}}',
                        roles:{!! $user->roles !!},carriers:{!! $user->carriers !!},workgroup:{!! $user->userWorkgroups !!},created_at:'{{$user->created_at}}'},
                    @endforeach
                ],
                form:'',
            },
            mounted:function(){
                let data = [[{name:'name',type:'input',tip:'用户名：可在两侧添加百分号(%)进行模糊搜索',placeholder:'用户名'},
                    {name:'role',type:'input',tip:'角色名：可在两侧添加百分号(%)进行模糊搜索',placeholder:'角色名'}]];
                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:'email',value: '邮件地址'},
                    {name:'created_at',value: '创建时间'},
                    {name:'operation',value: '操作', neglect: true},
                ];
                let header = new Header({
                    column: column,
                    data: this.users,
                    restorationColumn: 'id',
                    is_restorationColumn_asc:true,
                });
                header.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)
                        });
                },
            }
        });
    </script>
@endsection