<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="./layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" href="./style/admin.css" th:href="@{/style/admin.css}" media="all">
    <link rel="stylesheet" href="./style/myself.css" th:href="@{/style/myself.css}" media="all">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="./js/html5.min.js" th:src="@{/js/html5.min.js}"></script>
    <script src="./js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
    <![endif]-->
    <script type="text/javascript" charset="utf-8" th:inline="javascript">
        var ctxPath = /*[[@{/}]]*/'';
    </script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    角色筛选
                </div>
                <div class="layui-inline">
                    <select name="roleId" lay-filter="LAY-user-role-type">
                        <option value="">全部角色</option>
                        <option th:each="role,roleStat:${roles}" th:value="${role.id}" th:text="${role.roleName}">
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="LAY-user-role" lay-filter="LAY-user-role"></table>
            <script type="text/html" id="list-table-toolbar"></script>
        </div>
    </div>
</div>
<script src="./js/common.js" th:src="@{/js/common.js}" charset="utf-8"></script>
<script src="./layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script charset="utf-8" th:inline="javascript">
    layui.config({
        base: ctxPath //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function () {
        var form = layui.form, table = layui.table;
        table.render({
            elem: '#LAY-user-role',
            url: ctxPath + 'role/get-monitor-role-list',
            toolbar: '#list-table-toolbar',
            request: {
                pageName: 'current',//页码的参数名称，默认：page
                limitName: 'size' //每页数据量的参数名，默认：limit
            },
            response: {
                statusName: 'code', //规定数据状态的字段名称，默认：code
                statusCode: 200,//规定成功的状态码，默认：0
                msgName: 'msg',//规定状态信息的字段名称，默认：msg
                countName: 'count', //规定数据总数的字段名称，默认：count
                dataName: 'data' //规定数据列表的字段名称，默认：data
            },
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    'code': res.code, //解析接口状态
                    'msg': res.msg, //解析提示文本
                    'count': res.data.total, //解析数据长度
                    'data': res.data.records //解析数据列表
                };
            },
            cols: [
                [{
                    field: 'id',
                    width: 100,
                    title: 'ID',
                    sort: !0,
                    hide: true
                }, {
                    field: 'roleName',
                    title: '角色',
                    minWidth: 100,
                    sort: !0
                }, {
                    field: 'createTime',
                    title: '创建时间',
                    minWidth: 170,
                    sort: !0
                }, {
                    field: 'updateTime',
                    title: '更新时间',
                    minWidth: 170,
                    sort: !0
                }]
            ],
            page: !0,
            limit: 15,
            limits: [10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100],
            height: 'full-150'
        });
        //监听搜索
        form.on('select(LAY-user-role-type)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('LAY-user-role', {
                where: {
                    roleId: data.value
                }
            });
        });
        // 点击表头排序
        table.on('sort(LAY-user-role)', function (obj) {
            table.reload('LAY-user-role', {
                initSort: obj
            });
        });
    });
</script>
</body>
</html>

