From c99783f6f229884c3745b398a11dd45608696aa5 Mon Sep 17 00:00:00 2001
From: Jmysy <854085467@qq.com>
Date: Sat, 18 Apr 2020 15:30:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Pear Admin v 2.0/admin/css/pearCommon.css     |   4 +-
 Pear Admin v 2.0/admin/css/pearLoad.css       |   6 +
 Pear Admin v 2.0/admin/data/menu.json         | 104 ++--
 .../component/layui/lay/extends/pearTab.js    |   4 -
 Pear Admin v 2.0/index.html                   |   3 +-
 .../view/common/senior/table.html             | 338 +++++++-----
 .../view/common/senior/treeTable.html         | 480 ++++++------------
 Pear Admin v 2.0/view/console/console.html    |   3 +-
 8 files changed, 418 insertions(+), 524 deletions(-)

diff --git a/Pear Admin v 2.0/admin/css/pearCommon.css b/Pear Admin v 2.0/admin/css/pearCommon.css
index d7e2818..40c2779 100644
--- a/Pear Admin v 2.0/admin/css/pearCommon.css	
+++ b/Pear Admin v 2.0/admin/css/pearCommon.css	
@@ -19,7 +19,9 @@
 .layui-table-tool .layui-inline{border-radius: 3px!important;width: 30px!important;height: 30px!important;line-height: 20px!important;}
 .layui-table-view .layui-table[lay-skin=line]{border: none!important;}
 
-
+.layui-elem-quote{
+	border-left: 5px solid #5FB878!important;
+}
 
 
 .pear-btn {
diff --git a/Pear Admin v 2.0/admin/css/pearLoad.css b/Pear Admin v 2.0/admin/css/pearLoad.css
index 36e0f2d..63c2737 100644
--- a/Pear Admin v 2.0/admin/css/pearLoad.css	
+++ b/Pear Admin v 2.0/admin/css/pearLoad.css	
@@ -57,6 +57,12 @@
     animation: spin 1.5s linear infinite;
 }
 
+.preloader .preloader-message {
+    display: block;
+    position: relative;
+    left: 50%;
+    top: 50%;
+}
 
 @keyframes spin {
     0% {
diff --git a/Pear Admin v 2.0/admin/data/menu.json b/Pear Admin v 2.0/admin/data/menu.json
index 3991d6d..f32e091 100644
--- a/Pear Admin v 2.0/admin/data/menu.json	
+++ b/Pear Admin v 2.0/admin/data/menu.json	
@@ -23,6 +23,42 @@
 			"spread": true
 		}]
 	},
+	{
+		"id": 4,
+		"title": "系统管理",
+		"icon": "layui-icon layui-icon-face-cry",
+		"type": 0,
+		"href": "",
+		"spread": true,
+		"children": [{
+				"id": 41,
+				"title": "用户管理",
+				"icon": "layui-icon layui-icon-username",
+				"type": 1,
+				"openType": "_iframe",
+				"href": "view/system/user.html",
+				"spread": true
+			},
+			{
+				"id": 42,
+				"title": "角色管理",
+				"icon": "layui-icon layui-icon-user",
+				"type": 1,
+				"openType": "_iframe",
+				"href": "view/system/role.html",
+				"spread": true
+			},
+			{
+				"id": 43,
+				"title": "权限管理",
+				"icon": "layui-icon layui-icon-user",
+				"type": 1,
+				"openType": "_iframe",
+				"href": "view/system/power.html",
+				"spread": true
+			}
+		]
+	},
 	{
 		"id": 2,
 		"title": "扩展组件",
@@ -151,74 +187,10 @@
 		"type": 0,
 		"href": "",
 		"spread": true,
-		"children": [{
-				"id": 31,
-				"title": "数据统计",
-				"icon": "layui-icon layui-icon-face-smile",
-				"type": 0,
-				"openType": "_iframe",
-				"href": "view/error/403.html",
-				"spread": true,
-				"children": []
-			},
-			{
-				"id": 32,
-				"title": "数据表格",
-				"icon": "layui-icon layui-icon-face-cry",
-				"type": 0,
-				"openType": "_iframe",
-				"href": "view/error/404.html",
-				"spread": true,
-				"children": []
-			},
-
-			{
-				"id": 33,
-				"title": "卡片列表",
-				"icon": "layui-icon layui-icon-face-cry",
-				"type": 0,
-				"openType": "_iframe",
-				"href": "view/error/500.html",
-				"children": []
-			}
+		"children": [
 		]
 	},
-	{
-		"id": 4,
-		"title": "系统管理",
-		"icon": "layui-icon layui-icon-face-cry",
-		"type": 0,
-		"href": "",
-		"spread": true,
-		"children": [{
-				"id": 41,
-				"title": "用户管理",
-				"icon": "layui-icon layui-icon-username",
-				"type": 1,
-				"openType": "_iframe",
-				"href": "view/system/user.html",
-				"spread": true
-			},
-			{
-				"id": 42,
-				"title": "角色管理",
-				"icon": "layui-icon layui-icon-user",
-				"type": 1,
-				"openType": "_iframe",
-				"href": "view/system/role.html",
-				"spread": true
-			},
-			{
-				"id": 43,
-				"title": "权限管理",
-				"icon": "layui-icon layui-icon-user",
-				"type": 1,
-				"openType": "_iframe",
-				"href": "view/system/power.html",
-				"spread": true
-			}
-		]
-	}, {
+	 {
 		"id": "error",
 		"title": "错误页面",
 		"icon": "layui-icon layui-icon-face-cry",
diff --git a/Pear Admin v 2.0/component/layui/lay/extends/pearTab.js b/Pear Admin v 2.0/component/layui/lay/extends/pearTab.js
index 64227eb..13728ce 100644
--- a/Pear Admin v 2.0/component/layui/lay/extends/pearTab.js	
+++ b/Pear Admin v 2.0/component/layui/lay/extends/pearTab.js	
@@ -195,11 +195,7 @@ layui.define(['jquery', 'element'], function (exports) {
 		
 		  }
 	    }
-		
 		element.tabChange(elem,opt.id);
-		
-		
-		
 	}
 	
 	
diff --git a/Pear Admin v 2.0/index.html b/Pear Admin v 2.0/index.html
index 23631f6..7828465 100644
--- a/Pear Admin v 2.0/index.html	
+++ b/Pear Admin v 2.0/index.html	
@@ -73,6 +73,7 @@
 		<!-- 初始加载 动画-->
 		<div class="preloader">
 			<div class="preloader-inner"></div>
+			<div class="preloader-message">系统初始化...</div>
 		</div>
 
 		<script src="component/layui/layui.js"></script>
@@ -87,7 +88,7 @@
 				 * 框架初始化配置
 				 * */
 				var config = {
-					keepLoad: false, // 主 页 加 载 过 度 时 长 可为 false
+					keepLoad: 1200, // 主 页 加 载 过 度 时 长 可为 false
 					muiltTab: true, // 是 否 开 启 多 标 签 页 true 开启 false 关闭
 					control: false, // 是 否 开 启 多 系 统 菜 单 true 开启 false 关闭
 					theme: "dark-theme", // 默 认 主 题 样 式 dark-theme 默认主题 light-theme 亮主题
diff --git a/Pear Admin v 2.0/view/common/senior/table.html b/Pear Admin v 2.0/view/common/senior/table.html
index c062053..639bfe7 100644
--- a/Pear Admin v 2.0/view/common/senior/table.html	
+++ b/Pear Admin v 2.0/view/common/senior/table.html	
@@ -2,138 +2,224 @@
 <html>
 	<head>
 		<meta charset="utf-8">
-		<title>数据表格</title>
-		<link href="../../../assets/css/pearone.css" rel="stylesheet" />
+		<title></title>
 		<link href="../../../component/layui/css/layui.css" rel="stylesheet" />
-		<link href="../../../component/font-awesome/css/font-awesome.css" rel="stylesheet" />
-		<link href="../../../admin/css/pearButton.css" rel="stylesheet"/>
-		<link href="../../../admin/css/pearTable.css" rel="stylesheet"/>
-		<style>
-			body{
-				margin:10px;
-				background: whitesmoke;
-			}
-			
-		</style>
+		<link href="../../../admin/css/pearCommon.css" rel="stylesheet" />
 	</head>
 	<body>
-		<div class="layui-card">
-			<div class="layui-card-header">数据表格封装</div>
-			<div class="layui-card-body">
-				
-				<table class="layui-hide" id="demo" lay-filter="test"></table>
-
-				<script type="text/html" id="barDemo">
-				  <a class="pear-btn  pear-btn-sm" lay-event="detail">查看</a>
-				  <a class="pear-btn pear-btn-primary pear-btn-sm" plain lay-event="edit">编辑</a>
-				  <a class="pear-btn pear-btn-danger pear-btn-sm" plain lay-event="del">删除</a>
-				</script>
-
-			</div>
-		</div>
+		<body class="pear-container">
+		    <div class="layui-card">
+		        <div class="layui-card-body">
+		            <form class="layui-form" action="">
+		                <div class="layui-form-item">
+		                    <label class="layui-form-label">用户名</label>
+		                    <div class="layui-input-inline">
+		                        <input type="text" name="realName" placeholder="" class="layui-input">
+		                    </div>
+		                    <label class="layui-form-label">账号</label>
+		                    <div class="layui-input-inline">
+		                        <input type="text" name="username" placeholder="" class="layui-input">
+		                    </div>
+		                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
+		                        <i class="layui-icon layui-icon-search"></i>
+		                        查询
+		                    </button>
+		                    <button type="reset" class="pear-btn pear-btn-md">
+		                        <i class="layui-icon layui-icon-refresh"></i>
+		                        重置
+		                    </button>
+		                </div>
+		            </form>
+		        </div>
+		    </div>
+		    <div class="layui-card">
+		        <div class="layui-card-body">
+		            <table id="user-table" lay-filter="user-table"></table>
+		        </div>
+		    </div>
+		</body>
 
+		<script type="text/html" id="user-toolbar">
+		    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
+		        <i class="layui-icon layui-icon-add-1"></i>
+		        新增
+		    </button>
+		    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
+		        <i class="layui-icon layui-icon-delete"></i>
+		        删除
+		    </button>
+		</script>
+		
+		<script type="text/html" id="user-bar">
+		    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
+		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
+		</script>
+		
+		<script type="text/html" id="user-enable">
+		    <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.enable == 0 ? 'true' : 'false' }}">
+		</script>
+		
+		<script type="text/html" id="user-sex">
+		    {{#if (d.sex == 1) { }}
+		    <span>男</span>
+		    {{# }else if(d.sex == 2){ }}
+		    <span>女</span>
+		    {{# } }}
+		</script>
+		
+		<script type="text/html" id="user-login">
+		    {{#if (d.login == 0) { }}
+		    <span>在线</span>
+		    {{# }else if(d.sex == 1){ }}
+		    <span>离线</span>
+		    {{# } }}
+		</script>
+		
+		<script type="text/html" id="user-createTime">
+		    {{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
+		</script>
+		
 		<script src="../../../component/layui/layui.js"></script>
 		<script>
-			layui.config({
-				version: '1575404972583' //为了更新 js 缓存，可忽略
-			});
-
-			layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider','jquery'], function() {
-				var laydate = layui.laydate //日期
-					,laypage = layui.laypage //分页
-					,layer = layui.layer //弹层
-					,table = layui.table //表格
-					,carousel = layui.carousel //轮播
-					,upload = layui.upload //上传
-					,element = layui.element //元素操作
-					,slider = layui.slider //滑块
-					,$ = layui.jquery //jquery
-
-
-				//执行一个 table 实例
-				table.render({
-					 elem: '#demo',
-					 url: '../../../admin/data/table.json' //数据接口
-					,title: '用户表'
-					,page: true //开启分页
-					,toolbar: "default" //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
-					,totalRow: false //开启合计行
-					,cols: [
-						[ //表头
-							{
-								type: 'checkbox',
-								fixed: 'left'
-							}, {
-								field: 'id',
-								title: 'ID',
-								width: 80,
-								sort: true,
-								fixed: 'left',
-								totalRowText: '合计：'
-							}, {
-								field: 'username',
-								title: '用户名'
-							}, {
-								field: 'experience',
-								title: '积分'
-							}, {
-								fixed: 'right',
-								width: 220,
-								align: 'center',
-								toolbar: '#barDemo'
-							}
-						]
-					]
-				});
-
-				//监听头工具栏事件
-				table.on('toolbar(test)', function(obj) {
-					var checkStatus = table.checkStatus(obj.config.id),
-						data = checkStatus.data; //获取选中的数据
-					switch (obj.event) {
-						case 'add':
-							layer.msg('添加');
-							break;
-						case 'update':
-							if (data.length === 0) {
-								layer.msg('请选择一行');
-							} else if (data.length > 1) {
-								layer.msg('只能同时编辑一个');
-							} else {
-								layer.alert('编辑 [id]：' + checkStatus.data[0].id);
-							}
-							break;
-						case 'delete':
-							if (data.length === 0) {
-								layer.msg('请选择一行');
-							} else {
-								layer.msg('删除');
-							}
-							break;
-					};
-				});
-
-				//监听行工具事件
-				table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
-					var data = obj.data //获得当前行数据
-						,
-						layEvent = obj.event; //获得 lay-event 对应的值
-					if (layEvent === 'detail') {
-						layer.msg('查看操作');
-					} else if (layEvent === 'del') {
-						layer.confirm('真的删除行么', function(index) {
-							obj.del(); //删除对应行（tr）的DOM结构
-							layer.close(index);
-							//向服务端发送删除指令
-						});
-					} else if (layEvent === 'edit') {
-						layer.msg('编辑操作');
-					}
-				});
-				
-
-
-			});
+		    layui.use(['table','form','jquery'],function () {
+		        let table = layui.table;
+		        let form = layui.form;
+		        let $ = layui.jquery;
+		
+		        let MODULE_PATH = "/system/user/";
+		
+		        let cols = [
+		            [
+		                {type:'checkbox'},
+		                {title: '账号', field: 'username', align:'center', width:100},
+		                {title: '姓名', field: 'realName', align:'center'},
+		                {title: '性别', field: 'sex', align:'center', width:80, templet:'#user-sex'},
+		                {title: '电话', field: 'phone', align:'center'},
+		                {title: '启用', field: 'enable', align:'center', templet:'#user-enable'},
+		                {title: '登录', field: 'login', align:'center', templet:'#user-login'},
+		                {title: '注册', field: 'createTime', align:'center',templet:'#user-createTime'},
+		                {title: '操作', toolbar: '#user-bar', align:'center', width:130}
+		            ]
+		        ]
+		
+		        table.render({
+		            elem: '#user-table',
+		            url: '../../../admin/data/user.json',
+		            page: true ,
+		            cols: cols ,
+		            skin: 'line',
+		            toolbar: '#user-toolbar',
+		            defaultToolbar: [{
+		                layEvent: 'refresh',
+		                icon: 'layui-icon-refresh',
+		            }, 'filter', 'print', 'exports']
+		        });
+		
+		        table.on('tool(user-table)', function(obj){
+		            if(obj.event === 'remove'){
+		                window.remove(obj);
+		            } else if(obj.event === 'edit'){
+		                window .edit(obj);
+		            }
+		        });
+		
+		        table.on('toolbar(user-table)', function(obj){
+		            if(obj.event === 'add'){
+		                window.add();
+		            } else if(obj.event === 'refresh'){
+		                window.refresh();
+		            } else if(obj.event === 'batchRemove'){
+		                window.batchRemove(obj);
+		            }
+		        });
+		
+		        form.on('submit(user-query)', function(data){
+		            table.reload('user-table',{where:data.field})
+		            return false;
+		        });
+		
+		        form.on('switch(user-enable)', function(obj){
+		            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
+		        });
+		
+		        window.add = function(){
+		            layer.open({
+		                type: 2,
+		                title: '新增',
+		                shade: 0.1,
+		                area: ['500px', '400px'],
+		                content: MODULE_PATH + 'add'
+		            });
+		        }
+		
+		        window.edit = function(obj){
+		            layer.open({
+		                type: 2,
+		                title: '修改',
+		                shade: 0.1,
+		                area: ['500px', '400px'],
+		                content: MODULE_PATH + 'edit?userId='+obj.data['userId']
+		            });
+		        }
+		
+		        window.remove = function(obj){
+		            layer.confirm('确定要删除该用户', {icon: 3, title:'提示'}, function(index){
+		                layer.close(index);
+		                let loading = layer.load();
+		                $.ajax({
+		                    url: MODULE_PATH+"remove/"+obj.data['userId'],
+		                    dataType:'json',
+		                    type:'delete',
+		                    success:function(result){
+		                        layer.close(loading);
+		                        if(result.success){
+		                            layer.msg(result.msg,{icon:1,time:1000},function(){
+		                                obj.del();
+		                            });
+		                        }else{
+		                            layer.msg(result.msg,{icon:2,time:1000});
+		                        }
+		                    }
+		                })
+		            });
+		        }
+		
+		        window.batchRemove = function(obj){
+		            let data = table.checkStatus(obj.config.id).data;
+		            if(data.length === 0){
+		                layer.msg("未选中数据",{icon:3,time:1000});
+		                return false;
+		            }
+		            let ids = "";
+		            for(let i = 0;i<data.length;i++){
+		                ids += data[i].userId+",";
+		            }
+		            ids = ids.substr(0,ids.length-1);
+		            layer.confirm('确定要删除这些用户', {icon: 3, title:'提示'}, function(index){
+		                layer.close(index);
+		                let loading = layer.load();
+		                $.ajax({
+		                    url: MODULE_PATH+"batchRemove/"+ids,
+		                    dataType:'json',
+		                    type:'delete',
+		                    success:function(result){
+		                        layer.close(loading);
+		                        if(result.success){
+		                            layer.msg(result.msg,{icon:1,time:1000},function(){
+		                                table.reload('user-table');
+		                            });
+		                        }else{
+		                            layer.msg(result.msg,{icon:2,time:1000});
+		                        }
+		                    }
+		                })
+		            });
+		        }
+		
+		        window.refresh = function(param){
+		            table.reload('user-table');
+		        }
+		    })
 		</script>
 	</body>
 </html>
diff --git a/Pear Admin v 2.0/view/common/senior/treeTable.html b/Pear Admin v 2.0/view/common/senior/treeTable.html
index 95fca5b..94db235 100644
--- a/Pear Admin v 2.0/view/common/senior/treeTable.html	
+++ b/Pear Admin v 2.0/view/common/senior/treeTable.html	
@@ -2,344 +2,176 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Layui树形表格2.x演示</title>
-    <link rel="stylesheet" href="../../../component/layui/css/layui.css"/>
-	<link rel="stylesheet" href="../../../admin/css/treeTable.css"/>
-    <style>
-		.pear-container{
-			margin: 10px;
-			background-color: whitesmoke;
-		}
-	</style>
+    <title>Title</title>
+    <link rel="stylesheet" href="../../../admin/css/pearCommon.css" />
+    <link rel="stylesheet" href="../../../component/layui/css/layui.css" />
 </head>
 <body class="pear-container">
-    <div class="layui-card">
-		<div class="layui-card-header"></div>
-		<div class="layui-card-body">
-			<div class="page-wrapper">
-			 
-			    <div class="layui-btn-container" style="display: inline-block;">
-			        <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
-			            <i class="layui-icon">&#xe668;</i>展开全部
-			        </button>
-			        <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
-			            <i class="layui-icon">&#xe66b;</i>折叠全部
-			        </button>
-			        <button id="btnExpand" class="layui-btn layui-btn-sm layui-btn-primary">
-			            <i class="layui-icon">&#xe625;</i>展开2
-			        </button>
-			        <button id="btnFold" class="layui-btn layui-btn-sm layui-btn-primary">
-			            <i class="layui-icon">&#xe623;</i>折叠2
-			        </button>
-			        <button id="btnChecked" class="layui-btn layui-btn-sm layui-btn-primary">
-			            <i class="layui-icon">&#xe605;</i>勾选1_1_2
-			        </button>
-			    </div>
-			    <input class="layui-input" id="edtSearch" value="1_1_2" placeholder="输入关键字"
-			           style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
-			    <div class="layui-btn-container" style="display: inline-block;">
-			        <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
-			            <i class="layui-icon">&#xe615;</i>搜索
-			        </button>
-			        <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
-			            <i class="layui-icon">&#x1006;</i>清除搜索
-			        </button>
-			    </div>
-			    <div class="layui-btn-container" style="display: inline-block;">
-			        <a href="async.html" class="layui-btn layui-btn-sm layui-btn-primary" lay-tips="千呼万唤始出来~"
-			           style="position: relative;">
-			            <i class="layui-icon">&#xe64d;</i>异步加载&nbsp;&nbsp;
-			            <span class="layui-badge-dot" style="position: absolute;right: 3px;top: 3px;"></span>
-			        </a>
-			        <a href="fixed.html" class="layui-btn layui-btn-sm layui-btn-primary">
-			            <i class="layui-icon">&#xe62d;</i>固定表头
-			        </a>
-			        <a href="edit.html" class="layui-btn layui-btn-sm layui-btn-primary">
-			            <i class="layui-icon">&#xe642;</i>单元格编辑
-			        </a>
-			        <a href="icon.html" class="layui-btn layui-btn-sm layui-btn-primary">
-			            <i class="layui-icon">&#xe639;</i>自定义图标
-			        </a>
-			        <a href="big.html" class="layui-btn layui-btn-sm layui-btn-primary">
-			            <i class="layui-icon">&#xe62c;</i>数据量测试
-			        </a>
-			        <a href="../../1.x/demo/index.html" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank">
-			            回顾1.x
-			        </a>
-			        <a href="https://whvse.gitee.io/treetable/" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank">
-			            bom表格
-			        </a>
-			    </div>
-			
-			    <table id="demoTreeTable1"></table>
-			</div>
-		</div>
-	</div>
-
-
-
-<!--<div class="right-desc">
-    <div class="layui-text desc-item">
-        treeTable时隔一年进行了彻底重构，不再基于数据表格table，从零开始，
-        实现了数据表格的大部分功能，在使用方法上与数据表格一致，
-        并且支持懒加载、复选框联动、折叠状态记忆等功能，
-        <a href="https://gitee.com/whvse/treetable-lay" target="_blank">码云下载</a>。
+<div class="layui-card">
+    <div class="layui-card-body">
+        <form class="layui-form" action="">
+            <div class="layui-form-item">
+                <label class="layui-form-label">权限名称</label>
+                <div class="layui-input-inline">
+                    <input type="text" name="realName" placeholder="" class="layui-input">
+                </div>
+                <label class="layui-form-label">权限标识</label>
+                <div class="layui-input-inline">
+                    <input type="text" name="username" placeholder="" class="layui-input">
+                </div>
+                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
+                    <i class="layui-icon layui-icon-search"></i>
+                    查询
+                </button>
+                <button type="reset" class="pear-btn pear-btn-md">
+                    <i class="layui-icon layui-icon-refresh"></i>
+                    重置
+                </button>
+            </div>
+        </form>
     </div>
-    <div class="layui-text desc-item" style="padding: 0;overflow: hidden;">
-        <img src="https://s2.ax1x.com/2019/08/23/msiO78.png" width="100%"/>
-        <div style="padding: 5px 10px;">
-            EasyWeb管理系统模板
-            <a href="https://demo.easyweb.vip/iframe/" style="float: right;" target="_blank">前往查看</a>
-        </div>
-    </div>
-</div>-->
-
-<!-- 表格操作列 -->
-<script type="text/html" id="demoTreeTableBar1">
-    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
-    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
-</script>
-
-<!-- 表格状态列 -->
-<script type="text/html" id="demoTreeTableState1">
-    <input type="checkbox" lay-filter="ckState" value="{{d.id}}" lay-skin="switch"
-           lay-text="正常|锁定" {{d.state==0?'checked':''}}/>
-</script>
-
-<div class="page-loading">
-    <div class="ball-loader sm">
-        <span></span><span></span><span></span><span></span>
+</div>
+<div class="layui-card">
+    <div class="layui-card-body">
+        <table id="power-table" lay-filter="power-table"></table>
     </div>
 </div>
 
+<script type="text/html" id="power-toolbar">
+    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
+        <i class="layui-icon layui-icon-add-1"></i>
+        新增
+    </button>
+    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
+        <i class="layui-icon layui-icon-delete"></i>
+        删除
+    </button>
+</script>
+
+<script type="text/html" id="power-bar">
+    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
+    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
+</script>
+
+<script type="text/html" id="power-type">
+    {{#if (d.powerType == '0') { }}
+    <span>目录</span>
+    {{# }else if(d.powerType == '1'){ }}
+    <span>菜单</span>
+    {{# }else if(d.powerType == '2'){ }}
+    <span>按钮</span>
+    {{# } }}
+</script>
+
+<script type="text/html" id="power-enable">
+    <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.id == 10003 ? 'true' : 'false' }}">
+</script>
+
+<script type="text/html" id="icon">
+    <i class="layui-icon {{d.icon}}"></i>
+</script>
+
+</body>
+
 <script src="../../../component/layui/layui.js"></script>
 <script>
-    layui.use(['layer', 'util', 'treeTable'], function () {
-        var $ = layui.jquery;
-        var layer = layui.layer;
-        var util = layui.util;
-        var treeTable = layui.treeTable;
-        var data = [{
-            id: "1",
-            name: "xxx",
-            state: 0,
-            createTime: "2019/11/18 10:44:00",
-            children: [{
-                id: "1_1",
-                name: "xxx",
-                state: 0,
-                createTime: "2019/11/18 10:44:00",
-                children: [{
-                    id: "1_1_1",
-                    name: "xxx",
-                    state: 0,
-                    createTime: "2019/11/18 10:44:00",
-                    children: []
-                }, {
-                    id: "1_1_2",
-                    name: "xxx",
-                    state: 0,
-                    createTime: "2019/11/18 10:44:00",
-                    children: []
-                }, {
-                    id: "1_1_3",
-                    name: "xxx",
-                    state: 0,
-                    createTime: "2019/11/18 10:44:00",
-                    children: []
-                }]
-            }, {
-                id: "1_2",
-                name: "xxx",
-                state: 0,
-                createTime: "2019/11/18 10:44:00",
-                children: [{
-                    id: "1_2_1",
-                    name: "xxx",
-                    state: 0,
-                    createTime: "2019/11/18 10:44:00",
-                    children: []
-                }, {
-                    id: "1_2_2",
-                    name: "xxx",
-                    state: 0,
-                    createTime: "2019/11/18 10:44:00",
-                    children: []
-                }, {
-                    id: "1_2_3",
-                    name: "xxx",
-                    state: 0,
-                    createTime: "2019/11/18 10:44:00",
-                    children: []
-                }]
-            }, {
-                id: "1_3",
-                name: "xxx",
-                state: 0,
-                createTime: "2019/11/18 10:44:00",
-                children: []
-            }]
-        }, {
-            id: "2",
-            name: "xxx",
-            state: 0,
-            createTime: "2019/11/18 10:44:00",
-            children: [{
-                id: "2_1",
-                name: "xxx",
-                state: 0,
-                createTime: "2019/11/18 10:44:00",
-                children: [{
-                    id: "2_1_1",
-                    name: "xxx",
-                    state: 0,
-                    createTime: "2019/11/18 10:44:00",
-                    children: []
-                }, {
-                    id: "2_1_2",
-                    name: "xxx",
-                    state: 0,
-                    createTime: "2019/11/18 10:44:00",
-                    children: []
-                }, {
-                    id: "2_1_3",
-                    name: "xxx",
-                    state: 0,
-                    createTime: "2019/11/18 10:44:00",
-                    children: []
-                }]
-            }, {
-                id: "2_2",
-                name: "xxx",
-                state: 0,
-                createTime: "2019/11/18 10:44:00",
-                children: []
-            }, {
-                id: "2_3",
-                name: "xxx",
-                state: 0,
-                createTime: "2019/11/18 10:44:00",
-                children: []
-            }]
-        }, {
-            id: "3",
-            name: "xxx",
-            state: 0,
-            createTime: "2019/11/18 10:44:00",
-            children: [{
-                id: "3_1",
-                name: "xxx",
-                state: 0,
-                createTime: "2019/11/18 10:44:00",
-                children: []
-            }, {
-                id: "3_2",
-                name: "xxx",
-                state: 0,
-                createTime: "2019/11/18 10:44:00",
-                children: []
-            }, {
-                id: "3_3",
-                name: "xxx",
-                state: 0,
-                createTime: "2019/11/18 10:44:00",
-                children: []
-            }]
-        }, {
-            id: "4",
-            name: "xxx",
-            state: 0,
-            createTime: "2019/11/18 10:44:00",
-            children: []
-        }, {
-            id: "5",
-            name: "xxx",
-            state: 0,
-            createTime: "2019/11/18 10:44:00",
-            children: []
-        }];
+    layui.use(['table','form','jquery','treetable'],function () {
+        let table = layui.table;
+        let form = layui.form;
+        let $ = layui.jquery;
+        let treetable = layui.treetable;
 
-        // 渲染表格
-        var insTb = treeTable.render({
-            elem: '#demoTreeTable1',
-            data: data,
-            tree: {
-                iconIndex: 2
-            },
-            cols: [
-                {type: 'numbers'},
-                {type: 'checkbox'},
-                {field: 'id', title: 'ID'},
-                {field: 'name', title: 'name', width: 160},
-                {
-                    field: 'createTime', title: '创建时间', templet: function (d) {
-                        return util.toDateString(d.createTime);
-                    }, width: 180
-                },
-                {templet: '#demoTreeTableState1', title: '状态', width: 100},
-                {align: 'center', toolbar: '#demoTreeTableBar1', title: '操作', width: 120}
-            ],
-            style: 'margin-top:0;'
-        });
+        let MODULE_PATH = "/system/power/";
 
-        treeTable.on('tool(demoTreeTable1)', function (obj) {
-            var event = obj.event;
-            if (event == 'del') {
-                layer.msg('点击了删除', {icon: 1});
-            } else if (event == 'edit') {
-                layer.msg('点击了修改', {icon: 1});
-                obj.update({name: 'newname'});
+        window.render = function(){
+            treetable.render({
+                treeColIndex: 1,
+                treeSpid: 0,
+                treeIdName: 'powerId',
+                treePidName: 'parentId',
+                skin:'line',
+                method:'post',
+                treeDefaultClose: true,
+                toolbar:'#power-toolbar',
+                elem: '#power-table',
+                url: '../../../admin/data/power.json',
+                page: false,
+                cols: [
+                    [
+                    {type: 'checkbox'},
+                    {field: 'powerName', minWidth: 200, title: '权限名称'},
+                    {field: 'icon', title: '图标',templet:'#icon'},
+                    {field: 'powerType', title: '权限类型',templet:'#power-type'},
+                    {field: 'enable', title: '是否可用',templet:'#power-enable'},
+                    {field: 'sort', title: '排序'},
+                    {title: '操作',templet: '#power-bar', width: 150, align: 'center'}
+                    ]
+                ]
+            });
+        }
+
+        render();
+
+        table.on('tool(power-table)',function(obj){
+            if (obj.event === 'remove') {
+                window.remove(obj);
+            } else if (obj.event === 'edit') {
+                window.edit(obj);
+            }
+        })
+
+
+        table.on('toolbar(power-table)', function(obj){
+            if(obj.event === 'add'){
+                window.add();
+            } else if(obj.event === 'refresh'){
+                window.refresh();
+            } else if(obj.event === 'batchRemove'){
+                window.batchRemove(obj);
             }
         });
 
-        // 全部展开
-        $('#btnExpandAll').click(function () {
-            insTb.expandAll();
-        });
+        window.add = function(){
+            layer.open({
+                type: 2,
+                title: '新增',
+                shade: 0.1,
+                area: ['450px', '500px'],
+                content: MODULE_PATH + 'add'
+            });
+        }
 
-        // 全部折叠
-        $('#btnFoldAll').click(function () {
-            insTb.foldAll();
-        });
+        window.edit = function(obj){
+            layer.open({
+                type: 2,
+                title: '修改',
+                shade: 0.1,
+                area: ['450px', '500px'],
+                content: MODULE_PATH + 'edit?powerId='+obj.data['powerId']
+            });
+        }
+        window.remove = function(obj){
+            layer.confirm('确定要删除该权限', {icon: 3, title:'提示'}, function(index){
+                layer.close(index);
+                let loading = layer.load();
+                $.ajax({
+                    url: MODULE_PATH+"remove/"+obj.data['powerId'],
+                    dataType:'json',
+                    type:'delete',
+                    success:function(result){
+                        layer.close(loading);
+                        if(result.success){
+                            layer.msg(result.msg,{icon:1,time:1000},function(){
+                                obj.del();
+                            });
+                        }else{
+                            layer.msg(result.msg,{icon:2,time:1000});
+                        }
+                    }
+                })
+            });
+        }
 
-        $('#btnExpand').click(function () {
-            insTb.expand('2');
-        });
-
-        $('#btnFold').click(function () {
-            insTb.fold('2');
-        });
-
-        $('#btnChecked').click(function () {
-            insTb.expand('1_1_2');
-            insTb.setChecked(['1_1_2']);
-        });
-
-        $('#btnSearch').click(function () {
-            var keywords = $('#edtSearch').val();
-            if (keywords) {
-                insTb.filterData(keywords);
-            } else {
-                insTb.clearFilter();
-            }
-        });
-
-        $('#btnClearSearch').click(function () {
-            insTb.clearFilter();
-        });
-
-        $(document).on('mouseenter', '*[lay-tips]', function () {
-            layer.tips($(this).attr('lay-tips'), this, {tips: [1, '#FF5722'], time: -1});
-        }).on('mouseleave', '*[lay-tips]', function () {
-            layer.closeAll('tips');
-        });
-
-        setTimeout(function () {
-            $('body').children('.page-loading').hide();
-            $('body').removeClass('page-no-scroll');
-        }, 150);
-
-    });
+    })
 </script>
-</body>
 </html>
\ No newline at end of file
diff --git a/Pear Admin v 2.0/view/console/console.html b/Pear Admin v 2.0/view/console/console.html
index 8ed2271..9531f1e 100644
--- a/Pear Admin v 2.0/view/console/console.html	
+++ b/Pear Admin v 2.0/view/console/console.html	
@@ -7,8 +7,7 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 		<link rel="stylesheet" href="../../component/layui/css/layui.css" media="all">
-
-		<style>
+        <style>
 			.top-panel {
 				border-radius: 4px;
 				text-align: center;