<%--
  Created by IntelliJ IDEA.
  User: mrz
  Date: 2017/10/21
  Time: 下午9:51
  To change this template use File | Settings | File Templates.
--%>
<%@include file="/common/CHeader.jsp" %>
<%@page pageEncoding="UTF-8" %>
<body>
    <div id="app" class="container-fluid">

        <div class="row-fluid">
            <!-- block -->
            <div class="col-md-12" style="margin-bottom: 10px;padding-left: 0px;">

                                <a href="<%=basePath %>role/add">
                                    <button class="btn btn-primary btn-sm">添加角色</button>
                                </a>

            </div>
        </div>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th></th>
                <th><spring:message code="role.name"/></th>
                <th><spring:message code="role.description"/></th>
                <th><spring:message code="role.code"/></th>
                <th formatter="editFormat"><spring:message code="opt.edit"/></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(role,index) in roles">
                <td>{{index+1}}</td>
                <td>{{role.roleName}}</td>
                <td>{{role.description}}</td>
                <td>{{role.roleSign}}</td>
                <td><a v-bind:href="'<%=basePath %>permission/list?roleId='+role.roleId"><span class="label label-primary">权限</span></a>
                    <a href="#" @click="deleteUser(role.roleId)"><span class="label label-primary">删除</span></a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</body>

<script>

    var vm = new Vue({
        el: '#app',
//需要注入的模板的父元素
        data: {
            roles: [],
            pages: [],
            currentPage: [],
            username:[],
            mobilephone:[],
            pageLength:'2',
            pageOptions:[
                {text:'每页2条',value:'2'},
                {text:'每页4条',value:'4'},
                {text:'每页10条',value:'10'},
                {text:'每页50条',value:'50'},
                {text:'每页100条',value:'100'}
            ]
        }, //end data
        created: function () {
            $.post("list.json", {"begin": 0, "length": this.pageLength}, function (data) {
                vm.pages = data.page;
//总页码
                vm.roles = data.model;
//循环内容
                vm.currentPage = data.page.current;
//当前页(添加高亮样式)
            });
//end post
        }, //created
        methods: {

        }
    }); //end vue

</script>
</html>