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

@extends('layouts.app')
@section('title')权限-基础设置@endsection

@section('content')
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.authority.menu')@endcomponent
    </span>
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <table class="table table-striped table-sm" id="list">
                    <tr>
                        <th>ID</th>
                        <th>权限名</th>
                        <th>上级</th>
                        <th>许可状态</th>
                        <th>注释</th>
                        <th>类别</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="authority in authorities" @click="selectTr===authority.id?selectTr=0:selectTr=authority.id" :class="selectTr==authority.id ? 'focusing' : ''">
                        <td class="text-muted">@{{authority.id}}</td>
                        <td>@{{authority.name}}</td>
                        <td></td>
                        <td>@{{authority.permission}}</td>
                        <td>@{{authority.remark}}</td>
                        <td>@{{authority.type}}</td>
                        <td class="text-muted">@{{authority.created_at}}</td>
                        <td>
{{--                            @can('权限-编辑')--}}
{{--                            <button class="btn btn-sm btn-outline-primary" @click="edit(authority.id)">改</button> @endcan--}}
{{--                            @can('权限-删除')--}}
{{--                            <button class="btn btn-sm btn-outline-dark" @click="destroy(authority)">删</button> @endcan--}}
                        </td>
                    </tr>
                </table>
                {{$authorities->links()}}
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#list",
            data:{
                authorities:[
                    @foreach( $authorities as $authority )
                    {id:'{{$authority->id}}',name:'{{$authority->alias_name}}',type:'{{$authority->type}}',remark:'{{$authority->remark}}',created_at:'{{$authority->created_at}}',
                        permission:'{{$authority->permission}}'},
                    @endforeach
                ],
                selectTr:''
            },
            methods:{
                edit:function(id){
                    location.href = "{{url('maintenance/authority')}}/"+id+"/edit";
                },
                destroy:function(authority){
                    if(!confirm('确定要删除权限“' + authority.name + '”吗？')){return};
                    let data=this;
                    let url = "{{url('maintenance/authority')}}/"+authority.id;
                    axios.delete(url,{id:authority.id})
                        .then(function (response) {
                            if(response.data.success){
                                for (let i = 0; i < data.authorities.length; i++) {
                                    if (data.authorities[i].id===authority.id){
                                        data.authorities.splice(i,1);
                                        break;
                                    }
                                }
                                tempTip.setDuration(1000);
                                tempTip.showSuccess('删除权限"'+authority.name+'"成功!')
                            }else{
                                tempTip.setDuration(1000);
                                tempTip.show('删除权限"'+authority.name+'"失败!')
                            }
                        })
                        .catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('删除权限失败!'+'网络错误：' + err)
                        });
                },
            }
        });
    </script>
@endsection