baoshi-was/resources/views/maintenance/role/index.blade.bak.php

@extends('layouts.app')
@section('title')查询-角色@endsection

@section('content')
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.role.menu')@endcomponent
    </span>
    <div class="container-fluid">
        <div class="card">
            <div id="form_div"></div>
            <div class="card-body" id="list">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <table class="table table-striped table-sm td-min-width-80" id="table">
                    <tr v-for="(role,i) in roles"  @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                        <td class="text-muted">@{{role.id}}</td>
                        <td>@{{role.name}}</td>
                        <td>
                            <div style="max-height: 130px;overflow-y: scroll;border: solid 1px #ddd;" v-if="role.authorities.length>0">
                                <ul class="list-group">
                                    <li v-for="authority in role.authorities" v-if="authority.permission=='允许'"  style="list-style: none">@{{ authority.alias_name }}</li>
                                </ul>
                            </div>
                        </td>
                        <td>
                            <div style="max-height: 130px;overflow-y: scroll;border: solid 1px #ddd;" v-if="role.authorities.length>0">
                                <ul class="list-group">
                                    <li v-for="authority in role.authorities" v-if="authority.permission=='禁止'"  style="list-style: none">@{{ authority.alias_name }}</li>
                                </ul>
                            </div>
                        </td>
                        <td class="text-muted">@{{role.created_at}}</td>
                        <td>
                            @can('角色-编辑')
                            <button class="btn btn-sm btn-outline-primary" @click="edit(role.id)">改</button> @endcan
                            @can('角色-删除')
                            <button class="btn btn-sm btn-outline-dark" @click="destroy(role)">删</button> @endcan
                        </td>
                    </tr>
                </table>
                {{$roles->links()}}
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版--}}
    <script>
        new Vue({
            el:"#list",
            data:{
                roles:[
                        @foreach( $roles as $role )
                    {id:'{{$role->id}}',name:'{{$role->name}}',
                        authorities:{!! $role->authorities !!},created_at:'{{$role->created_at}}',
                    },
                    @endforeach
                ],
                form:'',
                selectTr:0
            },
            mounted:function(){
                let data = [[
                    {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:'alias_name',value: '允许权限', neglect: true},
                    {name:'alias_name_false',value: '禁止权限', neglect: true},
                    {name:'created_at',value: '创建时间'},
                    {name:'operation',value: '操作', neglect: true},
                ];
                new Header({
                    el:"table",
                    name:"role",
                    column: column,
                    data: this.roles,
                    fixedTop: ($('#form_div').height())+2,
                }).init();
            },
            methods:{
                edit:function(id){
                    location.href = "{{url('maintenance/role')}}/"+id+"/edit";
                },
                destroy:function(role){
                    if(!confirm('确定要删除角色“' + role.name + '”吗？')){return};
                    let data=this;
                    let url = "{{url('maintenance/role')}}/"+role.id;
                    axios.delete(url,{id:role.id})
                        .then(function (response) {
                            if(response.data.success){
                                for (let i = 0; i < data.roles.length; i++) {
                                    if (data.roles[i].id===role.id){
                                        data.roles.splice(i,1);
                                        break;
                                    }
                                }
                                tempTip.setDuration(1000);
                                tempTip.showSuccess('删除角色"'+role.name+'"成功!')
                            }else{
                                tempTip.setDuration(1000);
                                tempTip.show('删除角色"'+role.name+'"失败!')
                            }
                        })
                        .catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('删除角色失败!'+'网络错误：' + err)
                        });
                },
            }
        });
    </script>
@endsection