diff --git a/data/permission.json b/data/permission.json
new file mode 100644
index 0000000..e14d00e
--- /dev/null
+++ b/data/permission.json
@@ -0,0 +1,254 @@
+{
+  "code": 0,
+  "msg": "",
+  "count": 19,
+  "data": [
+    {
+      "authorityId": 1,
+      "authorityName": "系统管理",
+      "orderNumber": 1,
+      "menuUrl": null,
+      "menuIcon": "layui-icon-set",
+      "createTime": "2018/06/29 11:05:41",
+      "authority": null,
+      "checked": 0,
+      "updateTime": "2018/07/13 09:13:42",
+      "isMenu": 0,
+      "parentId": -1
+    },
+    {
+      "authorityId": 2,
+      "authorityName": "用户管理",
+      "orderNumber": 2,
+      "menuUrl": "system/user",
+      "menuIcon": null,
+      "createTime": "2018/06/29 11:05:41",
+      "authority": null,
+      "checked": 0,
+      "updateTime": "2018/07/13 09:13:42",
+      "isMenu": 0,
+      "parentId": 1
+    },
+    {
+      "authorityId": 3,
+      "authorityName": "查询用户",
+      "orderNumber": 3,
+      "menuUrl": "",
+      "menuIcon": "",
+      "createTime": "2018/07/21 13:54:16",
+      "authority": "user:view",
+      "checked": 0,
+      "updateTime": "2018/07/21 13:54:16",
+      "isMenu": 1,
+      "parentId": 2
+    },
+    {
+      "authorityId": 4,
+      "authorityName": "添加用户",
+      "orderNumber": 4,
+      "menuUrl": null,
+      "menuIcon": null,
+      "createTime": "2018/06/29 11:05:41",
+      "authority": "user:add",
+      "checked": 0,
+      "updateTime": "2018/07/13 09:13:42",
+      "isMenu": 1,
+      "parentId": 2
+    },
+    {
+      "authorityId": 5,
+      "authorityName": "修改用户",
+      "orderNumber": 5,
+      "menuUrl": null,
+      "menuIcon": null,
+      "createTime": "2018/06/29 11:05:41",
+      "authority": "user:edit",
+      "checked": 0,
+      "updateTime": "2018/07/13 09:13:42",
+      "isMenu": 1,
+      "parentId": 2
+    },
+    {
+      "authorityId": 6,
+      "authorityName": "删除用户",
+      "orderNumber": 6,
+      "menuUrl": null,
+      "menuIcon": null,
+      "createTime": "2018/06/29 11:05:41",
+      "authority": "user:delete",
+      "checked": 0,
+      "updateTime": "2018/07/13 09:13:42",
+      "isMenu": 1,
+      "parentId": 2
+    },
+    {
+      "authorityId": 7,
+      "authorityName": "角色管理",
+      "orderNumber": 7,
+      "menuUrl": "system/role",
+      "menuIcon": null,
+      "createTime": "2018/06/29 11:05:41",
+      "authority": null,
+      "checked": 0,
+      "updateTime": "2018/07/13 09:13:42",
+      "isMenu": 0,
+      "parentId": 1
+    },
+    {
+      "authorityId": 8,
+      "authorityName": "查询角色",
+      "orderNumber": 8,
+      "menuUrl": "",
+      "menuIcon": "",
+      "createTime": "2018/07/21 13:54:59",
+      "authority": "role:view",
+      "checked": 0,
+      "updateTime": "2018/07/21 13:54:58",
+      "isMenu": 1,
+      "parentId": 7
+    },
+    {
+      "authorityId": 9,
+      "authorityName": "添加角色",
+      "orderNumber": 9,
+      "menuUrl": "",
+      "menuIcon": "",
+      "createTime": "2018/06/29 11:05:41",
+      "authority": "role:add",
+      "checked": 0,
+      "updateTime": "2018/07/13 09:13:42",
+      "isMenu": 1,
+      "parentId": 7
+    },
+    {
+      "authorityId": 10,
+      "authorityName": "修改角色",
+      "orderNumber": 10,
+      "menuUrl": "",
+      "menuIcon": "",
+      "createTime": "2018/06/29 11:05:41",
+      "authority": "role:edit",
+      "checked": 0,
+      "updateTime": "2018/07/13 09:13:42",
+      "isMenu": 1,
+      "parentId": 7
+    },
+    {
+      "authorityId": 11,
+      "authorityName": "删除角色",
+      "orderNumber": 11,
+      "menuUrl": "",
+      "menuIcon": "",
+      "createTime": "2018/06/29 11:05:41",
+      "authority": "role:delete",
+      "checked": 0,
+      "updateTime": "2018/07/13 09:13:42",
+      "isMenu": 1,
+      "parentId": 7
+    },
+    {
+      "authorityId": 12,
+      "authorityName": "角色权限管理",
+      "orderNumber": 12,
+      "menuUrl": "",
+      "menuIcon": "",
+      "createTime": "2018/06/29 11:05:41",
+      "authority": "role:auth",
+      "checked": 0,
+      "updateTime": "2018/07/13 15:27:18",
+      "isMenu": 1,
+      "parentId": 7
+    },
+    {
+      "authorityId": 13,
+      "authorityName": "权限管理",
+      "orderNumber": 13,
+      "menuUrl": "system/authorities",
+      "menuIcon": null,
+      "createTime": "2018/06/29 11:05:41",
+      "authority": null,
+      "checked": 0,
+      "updateTime": "2018/07/13 15:45:13",
+      "isMenu": 0,
+      "parentId": 1
+    },
+    {
+      "authorityId": 14,
+      "authorityName": "查询权限",
+      "orderNumber": 14,
+      "menuUrl": "",
+      "menuIcon": "",
+      "createTime": "2018/07/21 13:55:57",
+      "authority": "authorities:view",
+      "checked": 0,
+      "updateTime": "2018/07/21 13:55:56",
+      "isMenu": 1,
+      "parentId": 13
+    },
+    {
+      "authorityId": 15,
+      "authorityName": "添加权限",
+      "orderNumber": 15,
+      "menuUrl": "",
+      "menuIcon": "",
+      "createTime": "2018/06/29 11:05:41",
+      "authority": "authorities:add",
+      "checked": 0,
+      "updateTime": "2018/06/29 11:05:41",
+      "isMenu": 1,
+      "parentId": 13
+    },
+    {
+      "authorityId": 16,
+      "authorityName": "修改权限",
+      "orderNumber": 16,
+      "menuUrl": "",
+      "menuIcon": "",
+      "createTime": "2018/07/13 09:13:42",
+      "authority": "authorities:edit",
+      "checked": 0,
+      "updateTime": "2018/07/13 09:13:42",
+      "isMenu": 1,
+      "parentId": 13
+    },
+    {
+      "authorityId": 17,
+      "authorityName": "删除权限",
+      "orderNumber": 17,
+      "menuUrl": "",
+      "menuIcon": "",
+      "createTime": "2018/06/29 11:05:41",
+      "authority": "authorities:delete",
+      "checked": 0,
+      "updateTime": "2018/06/29 11:05:41",
+      "isMenu": 1,
+      "parentId": 13
+    },
+    {
+      "authorityId": 18,
+      "authorityName": "登录日志",
+      "orderNumber": 18,
+      "menuUrl": "system/loginRecord",
+      "menuIcon": null,
+      "createTime": "2018/06/29 11:05:41",
+      "authority": null,
+      "checked": 0,
+      "updateTime": "2018/06/29 11:05:41",
+      "isMenu": 0,
+      "parentId": 1
+    },
+    {
+      "authorityId": 19,
+      "authorityName": "查询登录日志",
+      "orderNumber": 19,
+      "menuUrl": "",
+      "menuIcon": "",
+      "createTime": "2018/07/21 13:56:43",
+      "authority": "loginRecord:view",
+      "checked": 0,
+      "updateTime": "2018/07/21 13:56:43",
+      "isMenu": 1,
+      "parentId": 18
+    }
+  ]
+}
\ No newline at end of file
diff --git a/lib/layui/lay/modules/treetable/treetable.css b/lib/layui/lay/modules/treetable/treetable.css
new file mode 100644
index 0000000..584b2f8
--- /dev/null
+++ b/lib/layui/lay/modules/treetable/treetable.css
@@ -0,0 +1,18 @@
+.treeTable-empty {
+    width: 20px;
+    display: inline-block;
+}
+
+.treeTable-icon {
+    cursor: pointer;
+}
+
+.treeTable-icon .layui-icon-triangle-d:before {
+    content: "\e623";
+}
+
+.treeTable-icon.open .layui-icon-triangle-d:before {
+    content: "\e625";
+    background-color: transparent;
+}
+
diff --git a/lib/layui/lay/modules/treetable/treetable.js b/lib/layui/lay/modules/treetable/treetable.js
new file mode 100644
index 0000000..3e28568
--- /dev/null
+++ b/lib/layui/lay/modules/treetable/treetable.js
@@ -0,0 +1,206 @@
+layui.define(['layer', 'table'], function (exports) {
+    var $ = layui.jquery;
+    var layer = layui.layer;
+    var table = layui.table;
+
+    var treetable = {
+        // 渲染树形表格
+        render: function (param) {
+            // 检查参数
+            if (!treetable.checkParam(param)) {
+                return;
+            }
+            // 获取数据
+            if (param.data) {
+                treetable.init(param, param.data);
+            } else {
+                $.getJSON(param.url, param.where, function (res) {
+                    treetable.init(param, res.data);
+                });
+            }
+        },
+        // 渲染表格
+        init: function (param, data) {
+            var mData = [];
+            var doneCallback = param.done;
+            var tNodes = data;
+            // 补上id和pid字段
+            for (var i = 0; i < tNodes.length; i++) {
+                var tt = tNodes[i];
+                if (!tt.id) {
+                    if (!param.treeIdName) {
+                        layer.msg('参数treeIdName不能为空', {icon: 5});
+                        return;
+                    }
+                    tt.id = tt[param.treeIdName];
+                }
+                if (!tt.pid) {
+                    if (!param.treePidName) {
+                        layer.msg('参数treePidName不能为空', {icon: 5});
+                        return;
+                    }
+                    tt.pid = tt[param.treePidName];
+                }
+            }
+
+            // 对数据进行排序
+            var sort = function (s_pid, data) {
+                for (var i = 0; i < data.length; i++) {
+                    if (data[i].pid == s_pid) {
+                        var len = mData.length;
+                        if (len > 0 && mData[len - 1].id == s_pid) {
+                            mData[len - 1].isParent = true;
+                        }
+                        mData.push(data[i]);
+                        sort(data[i].id, data);
+                    }
+                }
+            };
+            sort(param.treeSpid, tNodes);
+
+            // 重写参数
+            param.url = undefined;
+            param.data = mData;
+            param.page = {
+                count: param.data.length,
+                limit: param.data.length
+            };
+            param.cols[0][param.treeColIndex].templet = function (d) {
+                var mId = d.id;
+                var mPid = d.pid;
+                var isDir = d.isParent;
+                var emptyNum = treetable.getEmptyNum(mPid, mData);
+                var iconHtml = '';
+                for (var i = 0; i < emptyNum; i++) {
+                    iconHtml += '<span class="treeTable-empty"></span>';
+                }
+                if (isDir) {
+                    iconHtml += '<i class="layui-icon layui-icon-triangle-d"></i> <i class="layui-icon layui-icon-layer"></i>';
+                } else {
+                    iconHtml += '<i class="layui-icon layui-icon-file"></i>';
+                }
+                iconHtml += '&nbsp;&nbsp;';
+                var ttype = isDir ? 'dir' : 'file';
+                var vg = '<span class="treeTable-icon open" lay-tid="' + mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">';
+                return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '</span>'
+            };
+
+            param.done = function (res, curr, count) {
+                $(param.elem).next().addClass('treeTable');
+                $('.treeTable .layui-table-page').css('display', 'none');
+                $(param.elem).next().attr('treeLinkage', param.treeLinkage);
+                // 绑定事件换成对body绑定
+                /*$('.treeTable .treeTable-icon').click(function () {
+                    treetable.toggleRows($(this), param.treeLinkage);
+                });*/
+                if (param.treeDefaultClose) {
+                    treetable.foldAll(param.elem);
+                }
+                if (doneCallback) {
+                    doneCallback(res, curr, count);
+                }
+            };
+
+            // 渲染表格
+            table.render(param);
+        },
+        // 计算缩进的数量
+        getEmptyNum: function (pid, data) {
+            var num = 0;
+            if (!pid) {
+                return num;
+            }
+            var tPid;
+            for (var i = 0; i < data.length; i++) {
+                if (pid == data[i].id) {
+                    num += 1;
+                    tPid = data[i].pid;
+                    break;
+                }
+            }
+            return num + treetable.getEmptyNum(tPid, data);
+        },
+        // 展开/折叠行
+        toggleRows: function ($dom, linkage) {
+            var type = $dom.attr('lay-ttype');
+            if ('file' == type) {
+                return;
+            }
+            var mId = $dom.attr('lay-tid');
+            var isOpen = $dom.hasClass('open');
+            if (isOpen) {
+                $dom.removeClass('open');
+            } else {
+                $dom.addClass('open');
+            }
+            $dom.closest('tbody').find('tr').each(function () {
+                var $ti = $(this).find('.treeTable-icon');
+                var pid = $ti.attr('lay-tpid');
+                var ttype = $ti.attr('lay-ttype');
+                var tOpen = $ti.hasClass('open');
+                if (mId == pid) {
+                    if (isOpen) {
+                        $(this).hide();
+                        if ('dir' == ttype && tOpen == isOpen) {
+                            $ti.trigger('click');
+                        }
+                    } else {
+                        $(this).show();
+                        if (linkage && 'dir' == ttype && tOpen == isOpen) {
+                            $ti.trigger('click');
+                        }
+                    }
+                }
+            });
+        },
+        // 检查参数
+        checkParam: function (param) {
+            if (!param.treeSpid && param.treeSpid != 0) {
+                layer.msg('参数treeSpid不能为空', {icon: 5});
+                return false;
+            }
+
+            if (!param.treeColIndex && param.treeColIndex != 0) {
+                layer.msg('参数treeColIndex不能为空', {icon: 5});
+                return false;
+            }
+            return true;
+        },
+        // 展开所有
+        expandAll: function (dom) {
+            $(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
+                var $ti = $(this).find('.treeTable-icon');
+                var ttype = $ti.attr('lay-ttype');
+                var tOpen = $ti.hasClass('open');
+                if ('dir' == ttype && !tOpen) {
+                    $ti.trigger('click');
+                }
+            });
+        },
+        // 折叠所有
+        foldAll: function (dom) {
+            $(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
+                var $ti = $(this).find('.treeTable-icon');
+                var ttype = $ti.attr('lay-ttype');
+                var tOpen = $ti.hasClass('open');
+                if ('dir' == ttype && tOpen) {
+                    $ti.trigger('click');
+                }
+            });
+        }
+    };
+
+    layui.link(layui.cache.base + 'treetable/treetable.css');
+
+    // 给图标列绑定事件
+    $('body').on('click', '.treeTable .treeTable-icon', function () {
+        var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage');
+        if ('true' == treeLinkage) {
+            treetable.toggleRows($(this), true);
+        } else {
+            treetable.toggleRows($(this), false);
+        }
+    });
+
+    exports('treetable', treetable);
+});
diff --git a/permission.html b/permission.html
index dff2b10..5b13139 100644
--- a/permission.html
+++ b/permission.html
@@ -1,10 +1,193 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
     <meta charset="UTF-8">
     <title>权限列表</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" href="lib/layui/css/layui.css">
+    <link rel="stylesheet" href="css/scroll-bar.css">
+    <link rel="stylesheet" href="css/sub-page.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_693759_wytlyqhtdtj1nhfr.css">
+    <link rel="stylesheet" href="lib/nprogress/nprogress.css">
 </head>
 <body>
-    <h1>权限列表</h1>
+<div class="ok-body">
+    <!--面包屑导航区域-->
+    <div class="ok-body-breadcrumb">
+            <span class="layui-breadcrumb">
+                <a><cite>首页</cite></a>
+                <a><cite>常用页面</cite></a>
+                <a><cite>权限列表</cite></a>
+            </span>
+        <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
+            <i class="layui-icon layui-icon-refresh"></i>
+        </a>
+    </div>
+    <!--模糊搜索区域-->
+    <div class="layui-row">
+        <form class="layui-form layui-col-md12 ok-search">
+            <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime">
+            <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
+            <input class="layui-input" placeholder="请输入权限名" autocomplete="off">
+            <button class="layui-btn" lay-submit="" lay-filter="search">
+                <i class="layui-icon layui-icon-search"></i>
+            </button>
+        </form>
+    </div>
+    <!--工具栏-->
+    <okToolbar>
+        <button class="layui-btn layui-btn-danger" id="batchDel">
+            <i class="layui-icon layui-icon-delete"></i>批量删除
+        </button>
+        <button class="layui-btn" id="addPermission">
+            <i class="layui-icon">&#xe61f;</i>添加权限
+        </button>
+        <span>共有数据：<i id="countNum"></i> 条</span>
+    </okToolbar>
+    <!--数据表格-->
+    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
+</div>
+<!--js逻辑-->
+<script src="lib/layui/layui.js"></script>
+<script src="lib/nprogress/nprogress.js"></script>
+<script>
+    NProgress.start();
+    window.onload = function () {
+        NProgress.done();
+    }
+
+    layui.config({
+        base: 'lib/layui/lay/modules/'
+    }).extend({
+        treetable: 'treetable/treetable'
+    }).use(['element', 'table', 'form', 'jquery', 'laydate', 'treetable'], function () {
+        var element = layui.element;
+        var form = layui.form;
+        var table = layui.table;
+        var $ = layui.jquery;
+        var laydate = layui.laydate;
+        var treetable = layui.treetable;
+
+        laydate.render({
+            elem: '#startTime',
+            type: "datetime"
+        });
+
+        laydate.render({
+            elem: '#endTime',
+            type: "datetime"
+        });
+
+        layer.load(2);
+        treetable.render({
+            treeColIndex: 1,
+            treeSpid: -1,
+            treeIdName: 'authorityId',
+            treePidName: 'parentId',
+            elem: '#tableId',
+            url: 'data/permission.json',
+            page: false,
+            cols: [[
+                {type: 'numbers'},
+                {field: 'authorityName', minWidth: 200, title: '权限名称'},
+                {field: 'authority', title: '权限标识'},
+                {field: 'menuUrl', title: '菜单url'},
+                {field: 'orderNumber', width: 80, align: 'center', title: '排序号'},
+                {
+                    field: 'isMenu', width: 80, align: 'center', templet: function (d) {
+                        if (d.isMenu == 1) {
+                            return '<span class="layui-badge layui-bg-gray">按钮</span>';
+                        }
+                        if (d.parentId == -1) {
+                            return '<span class="layui-badge layui-bg-blue">目录</span>';
+                        } else {
+                            return '<span class="layui-badge-rim">菜单</span>';
+                        }
+                    }, title: '类型'
+                },
+                {templet: '#operationTpl', width: 120, align: 'center', title: '操作'}
+            ]],
+            done: function (res, curr, count) {
+                layer.closeAll('loading');
+                $("#countNum").text(count);
+            }
+        });
+
+        form.on('submit(search)', function () {
+            layer.msg('正在查询，请稍后...');
+            return false;
+        });
+
+        table.on('tool(tableFilter)', function (obj) {
+            var data = obj.data;
+            console.log("id值：" + data.id);
+            var layEvent = obj.event;
+            if (layEvent === 'edit') {
+                layer.open({
+                    title: '编辑权限',
+                    type: 2,
+                    shade: false,
+                    maxmin: true,
+                    shade: 0.5,
+                    area: ['90%', '90%'],
+                    content: 'permission-edit.html?id' + data.id,
+                    zIndex: layer.zIndex,
+                    end: function () {
+                        $(".layui-laypage-btn")[0].click();
+                    }
+                });
+            } else if (layEvent === 'del') {
+                layer.confirm("确定要删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
+                    layer.msg("操作成功！", {icon: 1, time: 1000});
+                });
+            }
+        });
+
+        $("#batchDel").click(function () {
+            layer.confirm("确定要批量删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
+                var checkStatus = table.checkStatus('tableId');
+                var rows = checkStatus.data.length;
+                if (rows > 0) {
+                    var idsStr = "";
+                    for (var i = 0; i < checkStatus.data.length; i++) {
+                        idsStr += checkStatus.data[i].id + ',';
+                    }
+                    console.log("选择的id-->" + idsStr);
+                    layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
+                        $(".layui-laypage-btn")[0].click();
+                    });
+                } else {
+                    layer.msg('未选择有效数据', {
+                        offset: 't',
+                        anim: 6
+                    });
+                }
+            });
+        })
+
+        $("#addPermission").click(function () {
+            layer.open({
+                title: '添加权限',
+                type: 2,
+                shade: false,
+                maxmin: true,
+                shade: 0.5,
+                anim: 4,
+                area: ['90%', '90%'],
+                content: 'permission-add.html',
+                zIndex: layer.zIndex,
+                // skin: 'layui-layer-molv',
+                end: function () {
+                    $(".layui-laypage-btn")[0].click();
+                }
+            });
+        })
+    })
+</script>
+<!--模板-->
+<script type="text/html" id="operationTpl">
+    <a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
+    <a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
+</script>
 </body>
 </html>
\ No newline at end of file