diff --git a/catchAdmin/permissions/PermissionsMiddleware.php b/catchAdmin/permissions/PermissionsMiddleware.php
new file mode 100644
index 0000000..b3d9bbc
--- /dev/null
+++ b/catchAdmin/permissions/PermissionsMiddleware.php
@@ -0,0 +1 @@
+<?php
diff --git a/catchAdmin/permissions/view/permissions/create.html b/catchAdmin/permissions/view/permissions/create.html
new file mode 100644
index 0000000..2709599
--- /dev/null
+++ b/catchAdmin/permissions/view/permissions/create.html
@@ -0,0 +1,26 @@
+{$form|raw}
+<script>
+    layui.use(['layer', 'form', 'admin', 'formX'], function () {
+        var $ = layui.jquery;
+        var layer = layui.layer;
+        var form = layui.form;
+        var admin = layui.admin;
+        var mUser = admin.getLayerData('#role');  // 列表页面传递的数据，#modelUserForm这个只要写弹窗内任意一个元素的id即可
+        // 回显数据
+        form.val('role', mUser);
+        // 表单提交事件
+        form.on('submit(submitRole)', function (data) {
+            admin.req('{:url("role")}', data.field, function (response) {
+                layer.closeAll('loading');
+                if (response.code === 10000) {
+                    layer.msg(response.msg, {icon: 1});
+                    admin.putLayerData('formOk', true, '#role');  // 设置操作成功的标识，#modelUserForm这个只要写弹窗内任意一个元素的id即可
+                    admin.closeDialog('#role');  // 关闭页面层弹窗
+                } else {
+                    layer.msg(response.msg, {icon: 2});
+                }
+            }, 'post');
+            return false;
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/catchAdmin/permissions/view/permissions/edit.html b/catchAdmin/permissions/view/permissions/edit.html
new file mode 100644
index 0000000..d8669bc
--- /dev/null
+++ b/catchAdmin/permissions/view/permissions/edit.html
@@ -0,0 +1,25 @@
+{$form|raw}
+<script>
+    layui.use(['layer', 'form', 'admin', 'formX'], function () {
+        var $ = layui.jquery;
+        var layer = layui.layer;
+        var form = layui.form;
+        var admin = layui.admin;
+        var mUser = admin.getLayerData('#role');  // 列表页面传递的数据，#modelUserForm这个只要写弹窗内任意一个元素的id即可
+        // 回显数据
+        form.val('role', mUser);
+        // 表单提交事件
+        form.on('submit(submitRole)', function (data) {
+            admin.req('role/'+ "{$role_id}", data.field, function (response) {
+                if (response.code === 10000) {
+                    layer.msg(response.msg, {icon: 1});
+                    admin.putLayerData('formOk', true, '#role');  // 设置操作成功的标识，#modelUserForm这个只要写弹窗内任意一个元素的id即可
+                    admin.closeDialog('#role');  // 关闭页面层弹窗
+                } else {
+                    layer.msg(response.msg, {icon: 2});
+                }
+            }, 'put');
+            return false;
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/catchAdmin/permissions/view/permissions/index.html b/catchAdmin/permissions/view/permissions/index.html
new file mode 100644
index 0000000..938e029
--- /dev/null
+++ b/catchAdmin/permissions/view/permissions/index.html
@@ -0,0 +1,178 @@
+{extend name="../../../view/layout"}
+{block name="title"}角色管理{/block}
+{block name="search"}
+<div class="layui-form toolbar">
+    <div class="layui-form-item">
+        <!--<div class="layui-inline">
+            <div class="layui-input-inline mr0">
+                <input id="edtSearchAuth" class="layui-input" type="text" placeholder="输入角色名称"/>
+            </div>
+        </div>
+        <div class="layui-inline">
+            <button id="btnSearchAuth" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索
+            </button>-->
+            <button id="btnAddAuth" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
+        <!--</div>-->
+    </div>
+</div>
+{/block}
+{block name="table"}
+<table class="layui-table" id="tableRole"></table>
+<!-- 表格操作列 -->
+<script type="text/html" id="tableBarAuth">
+    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
+    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增子角色</a>
+    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
+</script>
+{/block}
+{block name="script"}
+<script>
+    layui.use(['layer', 'form', 'table', 'admin', 'util', 'treeTable'], function () {
+        var $ = layui.jquery;
+        var layer = layui.layer;
+        var form = layui.form;
+        var table = layui.table;
+        var util = layui.util;
+        var admin = layui.admin;
+        var treeTable = layui.treeTable;
+
+        var treeTb = treeTable.render({
+            tree: {
+                arrowType: 'arrow2',
+                iconIndex: 1,  // 折叠图标显示在第几列
+                idName: 'id',  // 自定义id字段的名称
+                childName: 'children', // 自定义标识是否还有子节点的字段名称
+                pidName: 'parent_id',
+                isPidData: true,
+                getIcon: function(d) {  // 自定义图标
+                    // d是当前行的数据
+                    if (d.children.length) {  // 判断是否有子集
+                        return '<i class="ew-tree-icon ew-tree-icon-folder"></i>';
+                    } else {
+                        return '<i class="ew-tree-icon ew-tree-icon-file"></i>';
+                    }
+                }
+            },
+            elem: '#tableRole',
+            cellMinWidth: 100,
+            cols: [
+                {type: 'numbers', title: '#'},
+                {field: 'role_name', title: '角色名称', minWidth: 100},
+                {field: 'description', title: '角色描述'},
+                {
+                    field: 'created_at', sort: true, templet: function (d) {
+                        return util.toDateString(d.created_at);
+                    }, title: '创建时间', maxWidth: 100
+                },
+                {templet: '#tableBarAuth', title: '操作', align: 'center', minWidth: 120}
+            ],
+            reqData: function(data, callback) {
+                // 在这里写ajax请求，通过callback方法回调数据
+                $.get('{:url("roles")}', function (res) {
+                    callback(res.data);  // 参数是数组类型
+                });
+            }
+        });
+
+        // 添加按钮点击事件
+        $('#btnAddAuth').click(function () {
+            showEditModel();
+        });
+
+        // 工具条点击事件
+        treeTable.on('tool(tableRole)', function (obj) {
+            var data = obj.data;
+            var layEvent = obj.event;
+            if (layEvent === 'edit') { // 修改
+                showEditModel(data);
+            } else if (layEvent === 'del') { // 删除
+                doDel(obj);
+            } else {
+                showEditModel(data, true);
+            }
+        });
+
+        // 删除
+        function doDel(obj) {
+            layer.confirm('确定要删除“' + obj.data.role_name + '”吗？', {
+                skin: 'layui-layer-admin',
+                shade: .1
+            }, function (index) {
+                layer.close(index);
+                admin.req('/role/'+ obj.data.id, {}, function (response) {
+                    if (response.code === 10000) {
+                        layer.msg(response.msg, {icon: 1});
+                        obj.del()
+                    } else {
+                        layer.msg(response.msg, {icon: 2});
+                    }
+                }, 'delete');
+            });
+        }
+
+        // 显示表单弹窗
+        // 显示表单弹窗
+        function showEditModel(mRole, addRole = false) {
+            var layIndex = admin.open({
+                title: addRole ? '新增子角色' : ((mRole ? '修改' : '添加') + '角色'),
+                url: addRole ? '/role/create' + '?id='+mRole.id : (mRole ? '/role/'+mRole.id + '/edit': '/role/create'),
+                data: addRole ? '' : mRole,     // 传递数据到表单页面
+                end: function () {
+                    if (admin.getLayerData(layIndex, 'formOk')) {  // 判断表单操作成功标识
+                        if (addRole) {
+                           treeTb.reload();
+                            setTimeout(function () {
+                                treeTb.expand(mRole.id)
+                            }, 200)
+
+                        } else {
+                            if (mRole) {
+                                treeTb.reload();
+                                setTimeout(function () {
+                                    treeTb.expand(mRole.id)
+                                }, 200)
+                            } else {
+                                treeTb.reload();  // 成功刷新表格
+                            }
+                        }
+                    }
+                },
+                success: function (layero, dIndex) {
+                    // 弹窗超出范围不出现滚动条
+                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
+                }
+            });
+        }
+
+        // 搜索按钮点击事件
+        $('#btnSearchAuth').click(function () {
+            $('#edtSearchAuth').removeClass('layui-form-danger');
+            var keyword = $('#edtSearchAuth').val();
+            var $tds = $('#tableAuth').next('.treeTable').find('.layui-table-body tbody tr td');
+            $tds.css('background-color', 'transparent');
+            if (!keyword) {
+                layer.tips('请输入关键字', '#edtSearchAuth', {tips: [1, '#ff4c4c']});
+                $('#edtSearchAuth').addClass('layui-form-danger');
+                $('#edtSearchAuth').focus();
+                return;
+            }
+            var searchCount = 0;
+            $tds.each(function () {
+                if ($(this).text().indexOf(keyword) >= 0) {
+                    $(this).css('background-color', '#FAE6A0');
+                    if (searchCount == 0) {
+                        $('body,html').stop(true);
+                        $('body,html').animate({scrollTop: $(this).offset().top - 150}, 500);
+                    }
+                    searchCount++;
+                }
+            });
+            if (searchCount == 0) {
+                layer.msg("没有匹配结果", {icon: 5, anim: 6});
+            } else {
+                treetable.expandAll('#tableAuth');
+            }
+        });
+    });
+</script>
+{/block}
\ No newline at end of file
diff --git a/catchAdmin/permissions/view/roles/edit.html b/catchAdmin/permissions/view/roles/edit.html
new file mode 100644
index 0000000..566549b
--- /dev/null
+++ b/catchAdmin/permissions/view/roles/edit.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/catchAdmin/user/controller/User.php b/catchAdmin/user/controller/User.php
index 0f570ca..6fe2b42 100644
--- a/catchAdmin/user/controller/User.php
+++ b/catchAdmin/user/controller/User.php
@@ -2,14 +2,16 @@
 namespace catchAdmin\user\controller;
 
 use app\Request;
+use catchAdmin\permissions\model\Roles;
 use catchAdmin\user\model\Users;
 use catchAdmin\user\request\CreateRequest;
 use catchAdmin\user\request\UpdateRequest;
-use catcher\base\BaseController;
+use catcher\base\CatchController;
 use catcher\CatchForm;
 use catcher\CatchResponse;
+use catcher\Tree;
 
-class User extends BaseController
+class User extends CatchController
 {
     protected $user;
 
@@ -49,6 +51,7 @@ class User extends BaseController
         $form->text('email', '邮箱')->verify('email')->placeholder('请输入邮箱');
         $form->password('password', '密码')->id('pwd')->verify('required|psw')->placeholder('请输入密码');
         $form->password('passwordConfirm', '确认密码')->verify('required|equalTo', ['pwd', '两次密码输入不一致'])->placeholder('请再次输入密码');
+        $form->dom('<div id="roles"></div>', '角色');
         $form->formBtn('submitUser');
 
         return $this->fetch([
@@ -64,7 +67,12 @@ class User extends BaseController
      */
     public function save(CreateRequest $request)
     {
-        return CatchResponse::success($this->user->storeBy($request->post()));
+        $uid = $this->user->storeBy($request->post());
+
+        if (!empty($request->param('roleids'))) {
+            $this->user->attach($request->param('roleids'));
+        }
+        return CatchResponse::success();
     }
 
     /**
@@ -88,6 +96,7 @@ class User extends BaseController
         $form->text('email', '邮箱')->verify('email')->default($user->email)->placeholder('请输入邮箱');
         $form->password('password', '密码')->id('pwd')->placeholder('请输入密码');
         $form->password('passwordConfirm', '确认密码')->verify('equalTo', ['pwd', '两次密码输入不一致'])->placeholder('请再次输入密码');
+        $form->dom('<div id="roles"></div>', '角色');
         $form->formBtn('submitUser');
 
         return $this->fetch([
@@ -152,4 +161,29 @@ class User extends BaseController
 
        return CatchResponse::success($this->user->recover($id));
     }
+
+    /**
+     *
+     * @time 2019年12月11日
+     * @param Request $request
+     * @param Roles $roles
+     * @return \think\response\Json
+     */
+    public function getRoles(Request $request, Roles $roles): \think\response\Json
+    {
+        $roles = Tree::done($roles->getList());
+
+        $roleIds = [];
+        if ($request->param('uid')) {
+            $userHasRoles = $this->user->findBy($request->param('uid'))->getRoles();
+            foreach ($userHasRoles as $role) {
+                $roleIds[] = $role->pivot->role_id;
+            }
+        }
+
+        return CatchResponse::success([
+            'roles' => $roles,
+            'hasRoles' => $roleIds,
+        ]);
+    }
 }
\ No newline at end of file
diff --git a/catchAdmin/user/model/Users.php b/catchAdmin/user/model/Users.php
index db2b8f0..1d6b3d7 100644
--- a/catchAdmin/user/model/Users.php
+++ b/catchAdmin/user/model/Users.php
@@ -2,9 +2,9 @@
 namespace catchAdmin\user\model;
 
 use catchAdmin\permissions\model\HasRolesTrait;
-use catcher\base\BaseModel;
+use catcher\base\CatchModel;
 
-class Users extends BaseModel
+class Users extends CatchModel
 {
     use HasRolesTrait;
 
@@ -46,7 +46,9 @@ class Users extends BaseModel
      */
     public function getList($search): \think\Paginator
     {
-        return (($search['trash'] ?? false) ? static::onlyTrashed() : $this)->when($search['username'] ?? false, function ($query) use ($search){
+        return (($search['trash'] ?? false) ? static::onlyTrashed() : $this)
+                    ->field(['id', 'username', 'email', 'status','last_login_time','last_login_ip', 'created_at', 'updated_at'])
+                    ->when($search['username'] ?? false, function ($query) use ($search){
                         return $query->whereLike('username', $search['username']);
                     })
                     ->when($search['email'] ?? false, function ($query) use ($search){
diff --git a/catchAdmin/user/request/CreateRequest.php b/catchAdmin/user/request/CreateRequest.php
index 89b6f7a..23abb95 100644
--- a/catchAdmin/user/request/CreateRequest.php
+++ b/catchAdmin/user/request/CreateRequest.php
@@ -2,9 +2,9 @@
 namespace catchAdmin\user\request;
 
 use catchAdmin\user\model\Users;
-use catcher\base\BaseRequest;
+use catcher\base\CatchRequest;
 
-class CreateRequest extends BaseRequest
+class CreateRequest extends CatchRequest
 {
 
     protected function rules(): array
diff --git a/catchAdmin/user/request/UpdateRequest.php b/catchAdmin/user/request/UpdateRequest.php
index 992720e..b82758b 100644
--- a/catchAdmin/user/request/UpdateRequest.php
+++ b/catchAdmin/user/request/UpdateRequest.php
@@ -2,9 +2,9 @@
 namespace catchAdmin\user\request;
 
 use catchAdmin\user\model\Users;
-use catcher\base\BaseRequest;
+use catcher\base\CatchRequest;
 
-class UpdateRequest extends BaseRequest
+class UpdateRequest extends CatchRequest
 {
     protected function rules(): array
     {
diff --git a/catchAdmin/user/route.php b/catchAdmin/user/route.php
index 0dc963b..cf9137a 100644
--- a/catchAdmin/user/route.php
+++ b/catchAdmin/user/route.php
@@ -6,3 +6,4 @@ $router->get('users', '\catchAdmin\user\controller\User/list');
 // 切换状态
 $router->put('user/switch/status/<id>', '\catchAdmin\user\controller\User/switchStatus');
 $router->put('user/recover/<id>', '\catchAdmin\user\controller\User/recover');
+$router->get('user/get/roles', '\catchAdmin\user\controller\User/getRoles');
diff --git a/catchAdmin/user/validate/CreateValidate.php b/catchAdmin/user/validate/CreateValidate.php
deleted file mode 100644
index 59b1666..0000000
--- a/catchAdmin/user/validate/CreateValidate.php
+++ /dev/null
@@ -1,17 +0,0 @@
-<?php
-namespace catchAdmin\user\validate;
-
-use catcher\base\BaseValidate;
-
-class CreateValidate extends BaseValidate
-{
-    protected function getRules(): array
-    {
-        // TODO: Implement getRules() method.
-        return [
-            'username|用户名' => 'require|max:20',
-            'password|密码' => 'require|max:20',
-            'email|邮箱'    => 'require|email'
-        ];
-    }
-}
diff --git a/catchAdmin/user/validate/UpdateValidate.php b/catchAdmin/user/validate/UpdateValidate.php
deleted file mode 100644
index c7b7d78..0000000
--- a/catchAdmin/user/validate/UpdateValidate.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<?php
-namespace catchAdmin\user\validate;
-
-use catchAdmin\user\model\Users;
-use catcher\base\BaseValidate;
-
-class UpdateValidate extends BaseValidate
-{
-    protected function getRules(): array
-    {
-        // TODO: Implement getRules() method.
-        return [
-            'username|用户名' => 'require|max:20',
-            'password|密码' => 'require|max:20',
-            'email|邮箱'    => 'require|email|unique:'.Users::class.',email,'.request()->route('user').',id',
-        ];
-    }
-}
diff --git a/catchAdmin/user/view/create.html b/catchAdmin/user/view/create.html
index 0f2bdb1..a0a6480 100644
--- a/catchAdmin/user/view/create.html
+++ b/catchAdmin/user/view/create.html
@@ -1,28 +1,42 @@
 {$form|raw}
 <script>
-layui.use(['layer', 'form', 'admin', 'formX'], function () {
+layui.use(['layer', 'form', 'admin', 'formX','authtree'], function () {
 var $ = layui.jquery;
 var layer = layui.layer;
 var form = layui.form;
 var admin = layui.admin;
+var authtree = layui.authtree;
 var mUser = admin.getLayerData('#userForm');  // 列表页面传递的数据，#modelUserForm这个只要写弹窗内任意一个元素的id即可
 // 回显数据
 form.val('userForm', mUser);
+
 // 表单提交事件
 form.on('submit(submitUser)', function (data) {
     layer.load(2);
     var url = mUser ? '{:url("user")}' : '{:url("user")}';
-    $.post(url, data.field, function (response) {
+    admin.req(url, data.field, function (response) {
         layer.closeAll('loading');
-        if (response.code == 10000) {
+        if (response.code === 10000) {
             layer.msg(response.msg, {icon: 1});
             admin.putLayerData('formOk', true, '#userForm');  // 设置操作成功的标识，#modelUserForm这个只要写弹窗内任意一个元素的id即可
             admin.closeDialog('#userForm');  // 关闭页面层弹窗
         } else {
             layer.msg(response.msg, {icon: 2});
         }
-    }, 'json');
+    }, 'post');
     return false;
 });
+    admin.req('{:url("/user/get/roles")}',{}, function (response) {
+        authtree.render('#roles', response.data.roles,{
+            inputname: 'roleids[]',
+            layfilter: 'lay-check-auth',
+            autowidth: true,
+            nameKey: 'role_name',
+            valueKey: 'id',
+            childKey: 'children',
+            collapseLeafNode: true,
+            theme: 'auth-skin-default',
+        });
+    });
 });
 </script>
\ No newline at end of file
diff --git a/catchAdmin/user/view/edit.html b/catchAdmin/user/view/edit.html
index c709ea9..1aafbe0 100644
--- a/catchAdmin/user/view/edit.html
+++ b/catchAdmin/user/view/edit.html
@@ -1,14 +1,30 @@
 {$form|raw}
 <script>
-    layui.use(['layer', 'form', 'admin', 'formX'], function () {
+    layui.use(['layer', 'form', 'admin', 'formX', 'authtree'], function () {
         var $ = layui.jquery;
         var layer = layui.layer;
         var form = layui.form;
         var admin = layui.admin;
+        var authtree = layui.authtree;
         var mUser = admin.getLayerData('#userForm');  // 列表页面传递的数据，#modelUserForm这个只要写弹窗内任意一个元素的id即可
         // 回显数据
         form.val('userForm', mUser);
         var uid = "{$uid}";
+        admin.req('{:url("/user/get/roles")}',{uid:uid}, function (response) {
+            authtree.render('#roles', response.data.roles, {
+                inputname: 'roleids[]',
+                primaryKey: 'id',
+                parentKey: 'parent_id',
+                layfilter: 'lay-check-auth',
+                autowidth: true,
+                nameKey: 'role_name',
+                valueKey: 'id',
+                childKey: 'children',
+                collapseLeafNode: true,
+                theme: 'auth-skin-default',
+                checkedKey: response.data.hasRoles
+            });
+        });
         // 表单提交事件
         form.on('submit(submitUser)', function (data) {
             admin.req('/user/' + uid, data.field, function (response) {
diff --git a/extend/catcher/Tree.php b/extend/catcher/Tree.php
new file mode 100644
index 0000000..b3d9bbc
--- /dev/null
+++ b/extend/catcher/Tree.php
@@ -0,0 +1 @@
+<?php
diff --git a/extend/catcher/base/BaseController.php b/extend/catcher/base/CatchController.php
similarity index 100%
rename from extend/catcher/base/BaseController.php
rename to extend/catcher/base/CatchController.php
diff --git a/extend/catcher/base/BaseModel.php b/extend/catcher/base/CatchModel.php
similarity index 100%
rename from extend/catcher/base/BaseModel.php
rename to extend/catcher/base/CatchModel.php
diff --git a/extend/catcher/base/BaseRequest.php b/extend/catcher/base/CatchRequest.php
similarity index 100%
rename from extend/catcher/base/BaseRequest.php
rename to extend/catcher/base/CatchRequest.php
diff --git a/extend/catcher/base/BaseValidate.php b/extend/catcher/base/CatchValidate.php
similarity index 100%
rename from extend/catcher/base/BaseValidate.php
rename to extend/catcher/base/CatchValidate.php
diff --git a/extend/catcher/exceptions/FailedException.php b/extend/catcher/exceptions/FailedException.php
new file mode 100644
index 0000000..b3d9bbc
--- /dev/null
+++ b/extend/catcher/exceptions/FailedException.php
@@ -0,0 +1 @@
+<?php
diff --git a/public/catch-admin/assets/module/authtree/authtree.js b/public/catch-admin/assets/module/authtree/authtree.js
new file mode 100755
index 0000000..a33181c
--- /dev/null
+++ b/public/catch-admin/assets/module/authtree/authtree.js
@@ -0,0 +1,731 @@
+/*
+* @Author: Jeffrey Wang
+* @Date:   2018-03-16 18:24:47
+* @Version: v1.2.4
+* @Last Modified by:   Jeffrey Wang
+* @Last Modified time: 2019-04-29 14:33:00
+*/
+// 节点树
+layui.define(['jquery', 'form'], function (exports) {
+    var $ = layui.jquery;
+    var form = layui.form;
+    var MOD_NAME = 'authtree';
+
+    var obj = {
+        // 渲染 + 绑定事件
+        openIconContent: '',
+        closeIconContent: '',
+        // 表单类型 checkbox: 多选，radio：单选
+        checkType: 'checkbox',
+        // 选中、半选中、未选中
+        checkedIconContent: '',
+        halfCheckedIconContent: '',
+        notCheckedIconContent: '',
+        // 保存节点数据
+        checkedNode: {},
+        notCheckedNode: {},
+        // 临时保存最新操作影响的节点
+        lastCheckedNode: {},
+        lastNotCheckedNode: {},
+        // 已经渲染过的树，可用来获取配置，{ dst: {trees: '树的节点数据', opt: '配置'} }
+        renderedTrees: {},
+        // 使用 layui 的监听事件
+        on: function (events, callback) {
+            return layui.onevent.call(this, MOD_NAME, events, callback);
+        },
+        /**
+         * 渲染DOM并绑定事件
+         * @param  {[type]} dst       [目标ID，如：#test1]
+         * @param  {[type]} trees     [数据，格式：{}]
+         * @param  {[type]} inputname [上传表单名]
+         * @param  {[type]} layfilter [lay-filter的值]
+         * @param  {[type]} openall [是否展开全部]
+         * @return {[type]}           [description]
+         */
+        render: function (dst, trees, opt) {
+            // 表单名称配置
+            var inputname = opt.inputname ? opt.inputname : 'menuids[]';
+            opt.inputname = inputname;
+            // lay-filter 配置
+            var layfilter = opt.layfilter ? opt.layfilter : 'checkauth';
+            opt.layfilter = layfilter;
+            // 默认展开全部 配置
+            var openall = opt.openall ? opt.openall : false;
+            opt.openall = openall;
+            // 双击展开此层配置
+            var dblshow = opt.dblshow ? opt.dblshow : false;
+            opt.dblshow = dblshow;
+            // 双击时间差 - 不能设置过长，否则单击延迟很感人
+            var dbltimeout = opt.dbltimeout ? opt.dbltimeout : 120;
+            opt.dbltimeout = dbltimeout;
+            // 默认展开有选中数据的层
+            var openchecked = typeof opt.openchecked !== 'undefined' ? opt.openchecked : true;
+            opt.openchecked = openchecked;
+            // 自动取消选中
+            var autoclose = typeof opt.autoclose !== 'undefined' ? opt.autoclose : true;
+            opt.autoclose = autoclose;
+            // 自动选择直属父级节点
+            var autochecked = typeof opt.autochecked !== 'undefined' ? opt.autochecked : true;
+            opt.autochecked = autochecked;
+            // 是否隐藏左侧 单选/多选的选框 -- 特殊需求，一般用于单选树并且不用
+            var hidechoose = typeof opt.hidechoose !== 'undefined' ? opt.hidechoose : false;
+            opt.hidechoose = hidechoose;
+            // 是否开启半选
+            var halfchoose = typeof opt.halfchoose !== 'undefined' ? opt.halfchoose : false;
+            opt.halfchoose = halfchoose;
+            // 收起叶子节点（排列于一行）
+            var collapseLeafNode = typeof opt.collapseLeafNode !== 'undefined' ? opt.collapseLeafNode : false;
+            opt.collapseLeafNode = collapseLeafNode;
+            // 有子节点的前显字符配置
+            opt.prefixChildStr = opt.prefixChildStr ? opt.prefixChildStr : '├─';
+            // 单选、多选配置
+            opt.checkType = opt.checkType ? opt.checkType : 'checkbox';
+            this.checkType = opt.checkType;
+            // 皮肤可选择
+            opt.checkSkin = opt.checkSkin ? opt.checkSkin : 'primary';
+            // 主题定制
+            opt.theme = opt.theme ? opt.theme : '';
+            opt.themePath = opt.themePath ? opt.themePath : 'layui_exts/tree_themes/';
+            // 展开、折叠节点的前显字符配置
+            opt.openIconContent = opt.openIconContent ? opt.openIconContent : '&#xe625;';
+            this.openIconContent = opt.openIconContent;
+            opt.closeIconContent = opt.closeIconContent ? opt.closeIconContent : '&#xe623;';
+            this.closeIconContent = opt.closeIconContent;
+            // 选中、半选中、未选中节点的图标配置
+            opt.checkedIconContent = opt.checkedIconContent ? opt.checkedIconContent : '\e605';
+            this.checkedIconContent = opt.checkedIconContent;
+            opt.halfCheckedIconContent = opt.halfCheckedIconContent ? opt.halfCheckedIconContent : '\e605';
+            this.halfCheckedIconContent = opt.halfCheckedIconContent;
+            opt.notCheckedIconContent = opt.notCheckedIconContent ? opt.notCheckedIconContent : '&#xe605;';
+            this.notCheckedIconContent = opt.notCheckedIconContent;
+            // 渲染配置参数
+            opt.checkedKey = opt.checkedKey ? opt.checkedKey : 'checked';
+            opt.childKey = opt.childKey ? opt.childKey : 'list';
+            opt.disabledKey = opt.disabledKey ? opt.disabledKey : 'disabled';
+            opt.nameKey = opt.nameKey ? opt.nameKey : 'name';
+            opt.valueKey = opt.valueKey ? opt.valueKey : 'value';
+
+            // 不启用双击展开，单击不用延迟
+            var dblisten = true;
+            if (dblshow) {
+                // 开启双击展开，双击事件默认为120s
+            } else {
+                // 未开启双击展开且 dbltimeout <= 0，则说明不用监听双击事件
+                if (opt.dbltimeout <= 0) {
+                    dblisten = false;
+                }
+                dbltimeout = 0;
+                // opt.dbltimeout = dbltimeout;
+            }
+
+            // 记录渲染过的树
+            obj.renderedTrees[dst] = {trees: trees, opt: opt};
+
+            // 主题定制
+            if (typeof opt.theme === 'string' && opt.theme !== '') {
+                $(dst).addClass(opt.theme)
+                layui.link(opt.themePath + opt.theme + '.css')
+            }
+            if (opt.hidechoose) {
+                $(dst).addClass('auth-tree-hidechoose');
+            }
+            $(dst).html(obj.renderAuth(trees, 0, {
+                inputname: inputname,
+                layfilter: layfilter,
+                openall: openall,
+                openchecked: openchecked,
+                checkType: this.checkType,
+                prefixChildStr: opt.prefixChildStr,
+                // 配置参数
+                checkedKey: opt.checkedKey,
+                childKey: opt.childKey,
+                disabledKey: opt.disabledKey,
+                nameKey: opt.nameKey,
+                valueKey: opt.valueKey,
+                collapseLeafNode: opt.collapseLeafNode,
+            }));
+            if (openchecked) {
+                obj.showChecked(dst);
+            }
+            form.render();
+            // 变动则存一下临时状态
+            obj._saveNodeStatus(dst);
+
+            // 开启自动宽度优化
+            obj.autoWidthAll();
+            // 备注：如果使用form.on('checkbox()')，外部就无法使用form.on()监听同样的元素了（LAYUI不支持重复监听了）。
+            // form.on('checkbox('+layfilter+')', function(data){
+            // 	/*属下所有权限状态跟随，如果选中，往上走全部选中*/
+            // 	var childs = $(data.elem).parent().next().find('input[type="checkbox"]').prop('checked', data.elem.checked);
+            // 	if(data.elem.checked){
+            // 		/*查找child的前边一个元素，并将里边的checkbox选中状态改为true。*/
+            // 		$(data.elem).parents('.auth-child').prev().find('input[type="checkbox"]').prop('checked', true);
+            // 	}
+            // 	/*console.log(childs);*/
+            // 	form.render('checkbox');
+            // });
+
+            // 解决单击和双击冲突问题的 timer 变量
+            var timer = 0;
+            $(dst).find('.auth-single:first').unbind('click').on('click', '.layui-form-checkbox,.layui-form-radio', function (event) {
+                // window.event? window.event.cancelBubble = true : event.stopPropagation();
+                var that = this;
+                clearTimeout(timer);
+                // 双击判断需要的延迟处理
+                timer = setTimeout(function () {
+                    var elem = $(that).prev();
+                    var checked = elem.is(':checked');
+
+                    if (autochecked) {
+                        if (checked) {
+                            /*查找child的前边一个元素，并将里边的checkbox选中状态改为true。*/
+                            elem.parents('.auth-child').prev().find('.authtree-checkitem:not(:disabled)[type="checkbox"]').prop('checked', true);
+                        }
+                        elem.parent().next().find('.authtree-checkitem:not(:disabled)[type="checkbox"]').prop('checked', checked);
+                    }
+                    if (autoclose) {
+                        if (checked) {
+                            // pass
+                        } else {
+                            // 自动关闭父级选中节点
+                            obj._autoclose($(that).parent());
+                        }
+                    }
+                    form.render('checkbox');
+                    form.render('radio');
+                    // 变动则存一下临时状态
+                    obj._saveNodeStatus(dst);
+                    // 触发 change 事件
+                    obj._triggerEvent(dst, 'change', {
+                        othis: $(that),
+                        oinput: elem,
+                        value: elem.val(),
+                    });
+                    obj.autoWidthAll();
+                }, dbltimeout);
+                return false;
+            });
+            /*动态绑定展开事件*/
+            $(dst).unbind('click').on('click', '.auth-icon', function () {
+                obj.iconToggle(dst, this);
+            });
+            /*双击展开*/
+            $(dst).find('.auth-single:first').unbind('dblclick').on('dblclick', '.layui-form-checkbox,.layui-form-radio', function (e) {
+                // 触发时间 > 0，才触发双击事件
+                // opt.dbltimeout 是用户真实设定的超时时间，与 dbltimeout 不一样
+                // if (opt.dbltimeout > 0) {
+                obj._triggerEvent(dst, 'dblclick', {
+                    othis: $(this),
+                    elem: $(this).prev(),
+                    value: $(this).prev().val(),
+                });
+                // }
+                if (dblshow) {
+                    clearTimeout(timer);
+                    obj.iconToggle(dst, $(this).prevAll('.auth-icon:first'));
+                }
+            }).on('selectstart', function () {
+                // 屏蔽双击选中文字
+                return false;
+            });
+        },
+        // 自动关闭 - 如果兄弟节点均没选中，递归取消上级元素选中状态，传入的是 .auth-status 节点，递归 .auth-status 上级节点
+        _autoclose: function (obj) {
+            var single = $(obj).parent().parent();
+            var authStatus = single.parent().prev();
+
+            if (!authStatus.hasClass('auth-status')) {
+                return false;
+            }
+            // 仅一层
+            if (single.find('div>.auth-status>input.authtree-checkitem:not(:disabled)[type="checkbox"]:checked').length === 0) {
+                authStatus.find('.authtree-checkitem:not(:disabled)[type="checkbox"]').prop('checked', false);
+                this._autoclose(authStatus);
+            }
+        },
+        // 以 icon 的维度，切换显示下级空间
+        iconToggle: function (dst, iconobj) {
+            var origin = $(iconobj);
+            var child = origin.parent().parent().find('.auth-child:first');
+            if (origin.is('.active')) {
+                /*收起*/
+                origin.removeClass('active').html(obj.closeIconContent);
+                child.slideUp('fast');
+            } else {
+                /*展开*/
+                origin.addClass('active').html(obj.openIconContent);
+                child.slideDown('fast');
+            }
+            obj._triggerEvent(dst, 'deptChange');
+            return false;
+        },
+        // 递归创建格式
+        renderAuth: function (tree, dept, opt) {
+            var inputname = opt.inputname;
+            var layfilter = opt.layfilter;
+            var openall = opt.openall;
+            var str = '<div class="auth-single">';
+
+            // 参数配置
+            var childKey = opt.childKey;
+            var nameKey = opt.nameKey;
+            var valueKey = opt.valueKey;
+
+            var _this = this;
+            layui.each(tree, function (index, item) {
+                var hasChild = (item[childKey] && (item[childKey].length || !$.isEmptyObject(item[childKey].length))) ? 1 : 0;
+                // 注意：递归调用时，this的环境会改变！
+                var append = hasChild ? obj.renderAuth(item[childKey], dept + 1, opt) : '';
+                var openstatus = openall || (opt.openchecked && item.checked);
+                var isChecked = _this._getStatusByDynamicKey(item, opt.checkedKey, opt.valueKey);
+                var isDisabled = _this._getStatusByDynamicKey(item, opt.disabledKey, opt.valueKey);
+
+                var rowFlag = !hasChild && opt.collapseLeafNode;
+                if (rowFlag) {
+                    str += '<div class="auth-row auth-skin"><div class="auth-row-item auth-status" style="display: flex;flex-direction: row;align-items: flex-end;">' +
+                        (hasChild ? '' : '<i class="layui-icon auth-leaf" style="opacity:0;color: transparent;">&#xe626;</i>');
+                } else {
+                    // '+new Array(dept * 4).join('&nbsp;')+'
+                    str += '<div class="auth-skin"><div class="auth-status" style="display: flex;flex-direction: row;align-items: flex-end;"> ' +
+                        (hasChild ? '<i class="layui-icon auth-icon ' + (openstatus ? 'active' : '') + '" style="cursor:pointer;">' + (openstatus ? obj.openIconContent : obj.closeIconContent) + '</i>' : '<i class="layui-icon auth-leaf" style="opacity:0;color: transparent;">&#xe626;</i>') +
+                        (dept > 0 ? ('<span class="auth-prefix">' + opt.prefixChildStr + ' </span>') : '');
+                }
+                str +=
+                    '<input class="authtree-checkitem" type="' + opt.checkType + '" name="' + inputname + '" title="' + item[nameKey] + '" value="' + item[valueKey] + '" lay-skin="primary" lay-filter="' + layfilter + '" ' +
+                    (isChecked ? ' checked="checked"' : '') +
+                    (isDisabled ? ' disabled' : '') +
+                    '> </div>' +
+                    ' <div class="auth-child" style="' + (openstatus ? '' : 'display:none;') + '"> ' + append + '</div></div>'
+            });
+            str += '</div>';
+            return str;
+        },
+        // 通过动态key，获取状态信息，dynamicKey支持：数字/字符时直接取属性，对象时查看是否在数组中
+        _getStatusByDynamicKey: function (item, dynamicKey, valueKey) {
+            var isChecked = false;
+            if (typeof dynamicKey === "string" || typeof dynamicKey === 'number') {
+                isChecked = item[dynamicKey];
+            } else if (typeof dynamicKey === 'object') {
+                isChecked = $.inArray(item[valueKey], dynamicKey) !== -1;
+            } else {
+                isChecked = false;
+            }
+            return isChecked;
+        },
+        /**
+         * 显示到已选中的最高层级
+         * @param  {[type]} dst [description]
+         * @return {[type]}     [description]
+         */
+        showChecked: function (dst) {
+            $(dst).find('.authtree-checkitem:checked').parents('.auth-child').show();
+        },
+        /**
+         * 将普通列表无限递归转换为树
+         * @param  {[type]} list       [普通的列表，必须包括 opt.primaryKey 指定的键和 opt.parentKey 指定的键]
+         * @param {[type]} opt [配置参数，支持 primaryKey(主键 默认id) parentKey(父级id对应键 默认pid) nameKey(节点标题对应的key 默认name) valueKey(节点值对应的key 默认id) checkedKey、disabledKey(节点是否选中的字段 默认checked，传入数组则判断主键是否在此数组中) startPid(第一层扫描的PID 默认0) currentDept(当前层 默认0) maxDept(最大递归层 默认100) childKey(递归完成后子节点对应键 默认list) deptPrefix(根据层级重复的前缀 默认'')]
+         * @return {[type]}            [description]
+         */
+        listConvert: function (list, opt) {
+            opt.primaryKey = opt.primaryKey ? opt.primaryKey : 'id';
+            opt.parentKey = opt.parentKey ? opt.parentKey : 'pid';
+            opt.startPid = opt.startPid ? opt.startPid : 0;
+            opt.authType = opt.authType ? opt.authType : 'type';
+            opt.currentDept = opt.currentDept ? parseInt(opt.currentDept) : 0;
+            opt.maxDept = opt.maxDept ? opt.maxDept : 100;
+            opt.childKey = opt.childKey ? opt.childKey : 'list';
+            opt.checkedKey = opt.checkedKey ? opt.checkedKey : 'checked';
+            opt.disabledKey = opt.disabledKey ? opt.disabledKey : 'disabled';
+            opt.nameKey = opt.nameKey ? opt.nameKey : 'name';
+            opt.valueKey = opt.valueKey ? opt.valueKey : 'id';
+            return this._listToTree(list, opt.startPid, opt.currentDept, opt);
+        },
+        // 实际的递归函数，将会变化的参数抽取出来
+        _listToTree: function (list, startPid, currentDept, opt) {
+            if (opt.maxDept < currentDept) {
+                return [];
+            }
+            var child = [];
+            for (var index in list) {
+                if (list.hasOwnProperty(index)) {
+                    // 筛查符合条件的数据（主键 = startPid）
+                    var item = list[index];
+                    if (typeof item[opt.parentKey] !== 'undefined' && item[opt.parentKey] === startPid) {
+                        // 满足条件则递归
+                        var nextChild = this._listToTree(list, item[opt.primaryKey], currentDept + 1, opt);
+                        // 节点信息保存
+                        var node = {};
+                        if (nextChild.length > 0) {
+                            node[opt.childKey] = nextChild;
+                        }
+                        node['name'] = item[opt.nameKey];
+                        node['value'] = item[opt.valueKey];
+                        node['type'] = item[opt.authType] || 0;
+                        // 禁用/选中节点的两种渲染方式
+                        node['checked'] = this._getStatusByDynamicKey(item, opt.checkedKey, opt.valueKey);
+                        node['disabled'] = this._getStatusByDynamicKey(item, opt.disabledKey, opt.valueKey);
+                        child.push(node);
+                    }
+                }
+            }
+            return child;
+        },
+        /**
+         * 将树转为单选可用的 select，如果后台返回列表数据，可以先转换为 tree
+         * @param  {[type]} tree [description]
+         * @param  {[type]} opt  [description]
+         * @return {[type]}      [description]
+         */
+        treeConvertSelect: function (tree, opt) {
+            if (typeof tree.length !== 'number' || tree.length <= 0) {
+                return [];
+            }
+            // 初始化层级
+            opt.currentDept = opt.currentDept ? parseInt(opt.currentDept) : 0;
+            // 子节点列表的Key
+            opt.childKey = opt.childKey ? opt.childKey : 'list';
+            // 名称的key
+            opt.nameKey = opt.valueKey ? opt.valueKey : 'name';
+            // 值的key
+            opt.valueKey = opt.valueKey ? opt.valueKey : 'value';
+            // 选中的key - 仅支持字符串
+            opt.checkedKey = opt.checkedKey ? opt.checkedKey : 'checked';
+            // 禁用的key
+            opt.disabledKey = opt.disabledKey ? opt.disabledKey : 'disabled';
+            // 有子节点的前缀
+            opt.prefixChildStr = opt.prefixChildStr ? opt.prefixChildStr : '├─ ';
+            // 没有子节点的前缀
+            opt.prefixNoChildStr = opt.prefixNoChildStr ? opt.prefixNoChildStr : '● ';
+            // 树的深度影响的子节点数据
+            opt.prefixDeptStr = opt.prefixDeptStr ? opt.prefixDeptStr : '　';
+            // 如果第一列就存在没有子节点的情况，加的特殊前缀
+            opt.prefixFirstEmpty = opt.prefixFirstEmpty ? opt.prefixFirstEmpty : '　　'
+
+            return this._treeToSelect(tree, opt.currentDept, opt);
+        },
+        // 实际处理递归的函数
+        _treeToSelect: function (tree, currentDept, opt) {
+            var ansList = [];
+            var prefix = '';
+
+            for (var i = 0; i < currentDept; i++) {
+                prefix += opt.prefixDeptStr;
+            }
+
+            for (var index in tree) {
+                if (!tree.hasOwnProperty(index)) {
+                    continue;
+                }
+                var child_flag = 0;
+                var item = tree[index];
+                if (opt.childKey in item && item[opt.childKey] && item[opt.childKey].length > 0) {
+                    child_flag = 1;
+                }
+                var name = item[opt.nameKey];
+                if (child_flag) {
+                    name = opt.prefixChildStr + name;
+                } else {
+                    if (currentDept > 1) {
+                        name = opt.prefixNoChildStr + name;
+                    } else {
+                        name = opt.prefixFirstEmpty + name;
+                    }
+                }
+                ansList.push({
+                    name: prefix + name,
+                    value: item[opt.valueKey],
+                    checked: this._getStatusByDynamicKey(item, opt.checkedKey, opt.valueKey),
+                    disabled: this._getStatusByDynamicKey(item, opt.disabledKey, opt.valueKey),
+                });
+                // 添加子节点
+                if (child_flag) {
+                    var child = this._treeToSelect(item[opt.childKey], currentDept + 1, opt);
+                    // apply 的骚操作，使用第二个参数可以用于合并两个数组
+                    ansList.push.apply(ansList, child);
+                }
+            }
+            return ansList;
+        },
+        autoWidthAll: function () {
+            for (var dst in this.renderedTrees) {
+                if (this.renderedTrees.hasOwnProperty(dst)) {
+                    this.autoWidth(dst)
+                }
+            }
+        },
+        // 自动调整宽度以解决 form.render()生成元素兼容性问题，如果用户手动调用 form.render() 之后也需要调用此方法
+        autoWidth: function (dst) {
+            var tree = this.getRenderedInfo(dst);
+            var opt = tree.opt;
+            $(dst).css({
+                'whiteSpace': 'nowrap',
+                'maxWidth': '100%',
+            });
+            // 自动刷新多选框半选状态
+            // this.autoNodeRender(dst)
+            // 自动宽度调整的逻辑
+            $(dst).find('.layui-form-checkbox,.layui-form-radio,.layui-form-audio').each(function (index, item) {
+                var width = $(this).find('span').width() + $(this).find('i').width() + 25;
+                if ($(this).is(':hidden')) {
+                    // 比较奇葩的获取隐藏元素宽度的手法，请见谅
+                    $('body').append('<div id="layui-authtree-get-width">' + $(this).html() + '</div>');
+                    width = $('#layui-authtree-get-width').find('span').width() + $('#layui-authtree-get-width').find('i').width() + 29;
+                    $('#layui-authtree-get-width').remove();
+                } else {
+                }
+
+                //$(this).width(width);
+                // 隐藏 单选/多选的左侧选框隐藏
+                if (opt.hidechoose) {
+                    $(this).prevAll('i').css({
+                        zIndex: 2,
+                    });
+                    $(this).css({
+                        position: 'relative'
+                        , left: function () {
+                            return '-' + $(this).css('padding-left');// 避免点击抖动的骚操作
+                        }
+                    }).find('i').hide();
+                }
+            });
+        },
+        // 自动刷新多选框半选状态
+        autoNodeRender: function (dst) {
+            var tree = this.getRenderedInfo(dst);
+            var opt = tree.opt;
+            if (opt.halfchoose) {
+                this._nodeRenderByParent($(dst).find('.auth-single'))
+            }
+            document.styleSheets[0].addRule(dst + ' .layui-icon-ok:before', 'content: ' + this.checkedIconContent)
+        },
+        _nodeRenderByParent: function (leaf) {
+        },
+        // 触发自定义事件
+        _triggerEvent: function (dst, events, other) {
+            var tree = this.getRenderedInfo(dst);
+            var origin = $(dst);
+            if (tree) {
+                var opt = tree.opt;
+                var data = {
+                    opt: opt,
+                    tree: tree.trees,
+                    dst: dst,
+                    othis: origin,
+                };
+                if (other && typeof other === 'object') {
+                    data = $.extend(data, other);
+                }
+                // 支持 dst 和 用户的配置的 layfilter 监听
+                layui.event.call(origin, MOD_NAME, events + '(' + dst + ')', data);
+                layui.event.call(origin, MOD_NAME, events + '(' + opt.layfilter + ')', data);
+            } else {
+                return false;
+            }
+        },
+        // 获取渲染过的信息
+        getRenderedInfo: function (dst) {
+            return this.renderedTrees[dst];
+        },
+        // 动态获取最大深度
+        getMaxDept: function (dst) {
+            var next = $(dst);
+            var dept = 0;
+            while (next.length && dept < 100000) {
+                next = this._getNext(next);
+                if (next.length) {
+                    dept++;
+                } else {
+                    break;
+                }
+            }
+            return dept;
+        },
+        // 全选
+        checkAll: function (dst) {
+            var origin = $(dst);
+
+            origin.find('.authtree-checkitem:not(:disabled):not(:checked)').prop('checked', true);
+            form.render('checkbox');
+            form.render('radio');
+            obj.autoWidthAll();
+            // 变动则存一下临时状态
+            obj._saveNodeStatus(dst);
+            obj._triggerEvent(dst, 'change');
+            obj._triggerEvent(dst, 'checkAll');
+        },
+        // 全不选
+        uncheckAll: function (dst) {
+            var origin = $(dst);
+            origin.find('.authtree-checkitem:not(:disabled):checked').prop('checked', false);
+            form.render('checkbox');
+            form.render('radio');
+            obj.autoWidthAll();
+            // 变动则存一下临时状态
+            obj._saveNodeStatus(dst);
+            obj._triggerEvent(dst, 'change');
+            obj._triggerEvent(dst, 'uncheckAll');
+        },
+        // 显示整个树
+        showAll: function (dst) {
+            this.showDept(dst, this.getMaxDept(dst));
+        },
+        // 关闭整颗树
+        closeAll: function (dst) {
+            this.closeDept(dst, 1);
+        },
+        // 切换整颗树的显示/关闭
+        toggleAll: function (dst) {
+            if (this._shownDept(2)) {
+                this.closeDept(dst);
+            } else {
+                this.showAll(dst);
+            }
+        },
+        // 显示到第 dept 层
+        showDept: function (dst, dept) {
+            var next = $(dst);
+            for (var i = 1; i < dept; i++) {
+                next = this._getNext(next);
+                if (next.length) {
+                    this._showSingle(next);
+                } else {
+                    break;
+                }
+            }
+            obj._triggerEvent(dst, 'deptChange', {dept: dept});
+        },
+        // 第 dept 层之后全部关闭
+        closeDept: function (dst, dept) {
+            var next = $(dst);
+            for (var i = 0; i < dept; i++) {
+                next = this._getNext(next);
+            }
+            while (next.length) {
+                this._closeSingle(next);
+                next = this._getNext(next);
+            }
+            obj._triggerEvent(dst, 'deptChange', {dept: dept});
+        },
+        // 临时保存所有节点信息状态
+        _saveNodeStatus: function (dst) {
+            var currentChecked = this.getChecked(dst);
+            var currentNotChecked = this.getNotChecked(dst);
+            // 保存新信息前，最新选择的信息
+            this.lastCheckedNode[dst] = this._getLastChecked(dst, currentChecked, currentNotChecked);
+            this.lastNotCheckedNode[dst] = this._getLastNotChecked(dst, currentChecked, currentNotChecked);
+            this.checkedNode[dst] = currentChecked;
+            this.notCheckedNode[dst] = currentNotChecked;
+
+            // console.log('保存节点信息', this.checkedNode[dst], this.notCheckedNode[dst], this.lastCheckedNode[dst], this.lastNotCheckedNode[dst]);
+        },
+        // 判断某一层是否显示
+        _shownDept: function (dst, dept) {
+            var next = $(dst);
+            for (var i = 0; i < dept; i++) {
+                next = this._getNext(next);
+            }
+            return !next.is(':hidden');
+        },
+        // 获取
+        _getNext: function (dst) {
+            return $(dst).find('.auth-single:first>div>.auth-child');
+        },
+        // 显示某层 single
+        _showSingle: function (dst) {
+            layui.each(dst, function (index, item) {
+                var origin = $(item).find('.auth-single:first');
+                var parentChild = origin.parent();
+                var parentStatus = parentChild.prev();
+                if (!parentStatus.find('.auth-icon').hasClass('active')) {
+                    parentChild.show();
+                    // 显示上级的 .auth-child节点，并修改.auth-status的折叠状态
+                    parentStatus.find('.auth-icon').addClass('active').html(obj.openIconContent);
+                }
+            });
+        },
+        // 关闭某层 single
+        _closeSingle: function (dst) {
+            var origin = $(dst).find('.auth-single:first');
+            var parentChild = origin.parent();
+            var parentStatus = parentChild.prev();
+            if (parentStatus.find('.auth-icon').hasClass('active')) {
+                parentChild.hide();
+                // 显示上级的 .auth-child节点，并修改.auth-status的折叠状态
+                parentStatus.find('.auth-icon').removeClass('active').html(obj.closeIconContent);
+            }
+        },
+        // 获取选中叶子结点
+        getLeaf: function (dst) {
+            var leafs = $(dst).find('.auth-leaf').parent().find('.authtree-checkitem:checked');
+            var data = [];
+            leafs.each(function (index, item) {
+                // console.log(item);
+                data.push(item.value);
+            });
+            // console.log(data);
+            return data;
+        },
+        // 获取所有节点数据
+        getAll: function (dst) {
+            var inputs = $(dst).find('.authtree-checkitem');
+            var data = [];
+            inputs.each(function (index, item) {
+                data.push(item.value);
+            });
+            // console.log(data);
+            return data;
+        },
+        // 获取最新选中（之前取消-现在选中）
+        getLastChecked: function (dst) {
+            return this.lastCheckedNode[dst] || [];
+        },
+        // (逻辑)最新选中（之前取消-现在选中）
+        _getLastChecked: function (dst, currentChecked, currentNotChecked) {
+            var lastCheckedNode = currentChecked;
+
+            var data = [];
+            for (var i in lastCheckedNode) {
+                if ($.inArray(lastCheckedNode[i], this.notCheckedNode[dst]) !== -1) {
+                    data.push(lastCheckedNode[i]);
+                }
+            }
+            return data;
+        },
+        // 获取所有选中的数据
+        getChecked: function (dst) {
+            var inputs = $(dst).find('.authtree-checkitem:checked');
+            var data = [];
+            inputs.each(function (index, item) {
+                data.push(item.value);
+            });
+            return data;
+        },
+        // 获取最新取消（之前取消-现在选中）
+        getLastNotChecked: function (dst) {
+            return this.lastNotCheckedNode[dst] || [];
+        },
+        // (逻辑)最新取消（之前选中-现在取消）
+        _getLastNotChecked: function (dst, currentChecked, currentNotChecked) {
+            var lastNotCheckedNode = currentNotChecked;
+
+            var data = [];
+            for (var i in lastNotCheckedNode) {
+                if ($.inArray(lastNotCheckedNode[i], this.checkedNode[dst]) !== -1) {
+                    data.push(lastNotCheckedNode[i]);
+                }
+            }
+            return data;
+        },
+        // 获取未选中数据
+        getNotChecked: function (dst) {
+            var inputs = $(dst).find('.authtree-checkitem:not(:checked)');
+            var data = [];
+            inputs.each(function (index, item) {
+                data.push(item.value);
+            });
+            // console.log(data);
+            return data;
+        }
+    };
+    exports('authtree', obj);
+});
diff --git a/public/catch-admin/assets/module/authtree/tree_themes/auth-skin-default.css b/public/catch-admin/assets/module/authtree/tree_themes/auth-skin-default.css
new file mode 100755
index 0000000..ad2d858
--- /dev/null
+++ b/public/catch-admin/assets/module/authtree/tree_themes/auth-skin-default.css
@@ -0,0 +1,108 @@
+/**
+Author: Jeffrey Wang
+Email: admin@wj2015.com
+Name: auth-skin-default
+Comment: 默认主题，感谢lipengfei886@qq.com提供的基础样式
+Version: v1.0.0
+*/
+
+/*请在js中的.auth-status前的div加一个class属性auth-skin*/
+.auth-skin-default .auth-status {
+    margin-top: -12px;
+}
+.auth-skin-default .auth-status > i.layui-icon {
+    width: 18px;
+    font-size: 18px;
+    text-align: center;
+}
+.auth-skin-default .auth-status > div {
+    position: relative;
+    top: 6px;
+    padding-left: 17px;
+}
+.auth-skin-default .auth-status > div.layui-form-radio {
+    padding-left: 5px;
+}
+/*美化的多选框/单选框DOM*/
+.auth-skin-default .auth-status > div > span {
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    display: inline-block;
+    padding: 3px 8px;
+    text-decoration: none;
+
+    position: relative;
+    top: -3px;
+}
+
+.auth-skin-default .auth-skin {
+    list-style-type: none;
+    margin: 0;
+    padding: 13px 5px 0 5px;
+    position: relative;
+    color: #009688;
+}
+
+.auth-skin-default .auth-skin::before, .auth-skin-default .auth-skin::after {
+    content: '';
+    left: -10px;
+    position: absolute;
+    right: auto
+}
+
+.auth-skin-default .auth-skin::before {
+    border-left: 1px dashed #009688;
+    bottom: 50px;
+    height: 100%;
+    top: 0;
+    width: 1px
+}
+
+.auth-skin-default .auth-skin::after {
+    border-top: 1px dashed #009688;
+    height: 20px;
+    top: 25px;
+    width: 25px
+}
+/*解决多层数据中，auth-child缩进长度的问题*/
+.auth-skin-default > .auth-single .auth-single {
+    margin-left: 36px;
+}
+.auth-skin-default > .auth-single > .auth-skin > .auth-child .auth-child {
+    margin-left: 18px;
+}
+.auth-skin-default > .auth-single > .auth-skin {
+}
+
+.auth-skin-default > .auth-single > .auth-skin::before, .auth-skin-default > .auth-single > .auth-skin::after {
+    border: 0
+}
+
+.auth-skin-default > .auth-single > .auth-skin:last-child::before {
+    height: 30px
+}
+/*隐藏左侧操作的特殊样式*/
+.auth-skin-default.auth-tree-hidechoose .auth-status > span {
+    display: none;
+}
+.auth-skin-default.auth-tree-hidechoose .auth-status > div > span {
+    padding-left: 3px;
+}
+.auth-skin-default.auth-tree-hidechoose .auth-status  > i {
+    position: relative;
+    top: 4px;
+}
+
+/*放于同一行的样式*/
+.auth-skin-default .auth-row {
+    display: inline-block;
+    margin-left: 5px;
+}
+.auth-skin-default > .auth-single .auth-child .auth-row {
+    margin-left: -22px;
+}
+.auth-skin-default .auth-row.auth-skin::before, .auth-skin-default .auth-row.auth-skin::after {
+    content: '';
+    border: 0;
+}
diff --git a/public/catch-admin/assets/module/authtree/tree_themes/auth-skin-universal.css b/public/catch-admin/assets/module/authtree/tree_themes/auth-skin-universal.css
new file mode 100755
index 0000000..66df3e1
--- /dev/null
+++ b/public/catch-admin/assets/module/authtree/tree_themes/auth-skin-universal.css
@@ -0,0 +1,127 @@
+/**
+Author: lipengfei886
+Email: lipengfei886@qq.com
+Name: auth-skin-universal
+Comment: lipengfei886@qq.com提供的绿色背景样式
+Version: v1.0.0
+*/
+
+/*请在js中的.auth-status前的div加一个class属性auth-skin*/
+.auth-skin-universal .auth-status {
+    margin-top: -12px;
+}
+.auth-skin-universal .auth-status > div {
+    position: relative;
+    top: 6px;
+    padding-left: 17px;
+}
+.auth-skin-universal .auth-status > div.layui-form-radio {
+    padding-left: 5px;
+}
+/*美化的多选框/单选框DOM*/
+.auth-skin-universal .auth-status > div > span {
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    display: inline-block;
+    padding: 3px 8px;
+    text-decoration: none;
+
+    position: relative;
+    top: -3px;
+    left: 5px;
+}
+
+.auth-skin-universal .auth-status >.layui-form-checkbox > span{
+    display:inline-block;
+    padding:3px 8px;
+    text-decoration:none;
+    color: #FFFFFF;
+    background-color: #009688 !important;
+
+}
+.auth-skin-universal .auth-status >.layui-form-radio > div{
+    display:inline-block;
+    border-radius: 5px;
+    padding:3px 8px;
+    text-decoration:none;
+    color: #FFFFFF;
+    background-color: #009688 !important;
+
+}
+.auth-skin-universal .auth-status >.layui-form-radio{
+    line-height: normal!important;
+}
+
+
+.auth-skin-universal .auth-skin {
+    list-style-type: none;
+    margin: 0;
+    padding: 13px 5px 0 5px;
+    position: relative;
+    color: #009688;
+}
+
+.auth-skin-universal .auth-skin::before, .auth-skin-universal .auth-skin::after {
+    content: '';
+    left: -32.5px;
+    position: absolute;
+    right: auto
+}
+
+.auth-skin-universal .auth-skin::before {
+    border-left: 1px dashed #009688;
+    bottom: 50px;
+    height: 100%;
+    top: -4px;
+    width: 1px
+}
+
+.auth-skin-universal .auth-skin::after {
+    border-top: 1px dashed #009688;
+    height: 20px;
+    top: 24px; /*radio时 改为24px checkbox时改为27px*/
+    width: 40px
+}
+
+/*解决多层数据中，auth-child缩进长度的问题*/
+.auth-skin-universal > .auth-single .auth-single {
+    margin-left: 58px;
+}
+.auth-skin-universal > .auth-single > .auth-skin > .auth-child .auth-child {
+    margin-left: 18px;
+}
+.auth-skin-universal > .auth-single > .auth-skin {
+}
+
+.auth-skin-universal > .auth-single > .auth-skin::before, .auth-skin-universal > .auth-single > .auth-skin::after {
+    border: 0
+}
+
+.auth-skin-universal > .auth-single > .auth-skin:last-child::before {
+    height: 30px
+}
+/*隐藏左侧操作的特殊样式*/
+.auth-skin-universal.auth-tree-hidechoose .auth-status > span {
+    display: none;
+}
+.auth-skin-universal.auth-tree-hidechoose .auth-status > div > span {
+    padding-left: 3px;
+}
+.auth-skin-universal.auth-tree-hidechoose .auth-status  > i {
+    position: relative;
+    top: 4px;
+}
+
+/*放于同一行的样式*/
+.auth-skin-universal .auth-row {
+    display: inline-block;
+    margin-left: 5px;
+}
+.auth-skin-universal > .auth-single .auth-child .auth-row {
+    margin-left: 20px;
+}
+.auth-skin-universal .auth-row.auth-skin::before, .auth-skin-universal .auth-row.auth-skin::after {
+    content: '';
+    border: 0;
+}
diff --git a/public/catch-admin/assets/module/authtree/tree_themes/template.css b/public/catch-admin/assets/module/authtree/tree_themes/template.css
new file mode 100755
index 0000000..f15e12b
--- /dev/null
+++ b/public/catch-admin/assets/module/authtree/tree_themes/template.css
@@ -0,0 +1,16 @@
+/**
+Author: Jeffrey Wang
+Email: admin@wj2015.com
+Name: authtree主题模板
+Comment: 备注，用于该主题的描述
+Version: v1.0
+*/
+
+/**
+主题开发规范：
+- 主题的名称均按照 auth-skin-自定义名称 的规则进行，禁止中文，因为会造成部分服务器加载失败，比如 auth-skin-bob、auth-skin-shark、auth-skin-deepblue
+- 主题的文件均放在 layui_exts/tree_themes/ 目录下，主题的名称与CSS的名称需要完全一致，否则主题文件自动加载会失效，比如名称叫做 auth-skin-bob，样式文件路径为 layui_exts/tree_themes/auth-skin-bob
+- 每个主题样式必须指定作用域，作用域均为 .auth-skin-自定义名称，比如 auth-skin-bob主题需要改造字体颜色为 #666 即可写为 .auth-skin-bob .auth-status > div > span {color: #666;}
+- 每个主题需要适配左侧有单选/多选框以及隐藏的情况，两者的区别在于顶级作用域多了一个 .auth-tree-hidechoose 类，比如 .auth-skin-bob.auth-tree-hidechoose .auth-status {color: #666}
+- 主题开发完毕后可以在GitHub上提 Pull Request，或者私聊 admin@wj2015.com，我会更新到文档中以供用户选择
+ */
diff --git a/public/catch-admin/assets/module/treetable-lay/treetable.css b/public/catch-admin/assets/module/treetable-lay/treetable.css
deleted file mode 100755
index a5eb1dd..0000000
--- a/public/catch-admin/assets/module/treetable-lay/treetable.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.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/public/catch-admin/assets/module/treetable-lay/treetable.js b/public/catch-admin/assets/module/treetable-lay/treetable.js
deleted file mode 100755
index da98ccf..0000000
--- a/public/catch-admin/assets/module/treetable-lay/treetable.js
+++ /dev/null
@@ -1,206 +0,0 @@
-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-lay/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);
-});