From 761a426337a457f3e6a98c15eab88147b0e873d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com>
Date: Mon, 20 Jul 2020 23:02:49 +0800
Subject: [PATCH] add table component and table document

---
 admin/data/menu.json                     |  15 ++
 admin/data/table.json                    | 182 +++++++++++++++
 component/pear/css/pear-module/form.css  |  13 +-
 component/pear/css/pear-module/table.css |  66 ++++++
 setting.json                             |   0
 view/document/table.html                 | 276 +++++++++++++++++++++++
 6 files changed, 549 insertions(+), 3 deletions(-)
 create mode 100644 admin/data/table.json
 create mode 100644 setting.json
 create mode 100644 view/document/table.html

diff --git a/admin/data/menu.json b/admin/data/menu.json
index d1ebecd..4841d26 100644
--- a/admin/data/menu.json
+++ b/admin/data/menu.json
@@ -18,6 +18,13 @@
 			"type": 1,
 			"openType": "_iframe",
 			"href": "view/console/console2.html"
+		}, {
+			"id": 14,
+			"title": "百度一下",
+			"icon": "layui-icon layui-icon-console",
+			"type": 1,
+			"openType": "_blank",
+			"href": "http://www.baidu.com"
 		}]
 	},
 	{
@@ -105,6 +112,14 @@
 				"type": 1,
 				"openType": "_iframe",
 				"href": "view/document/iconPicker.html"
+			},
+			{
+				"id": 211,
+				"title": "数据表格",
+				"icon": "layui-icon layui-icon-face-cry",
+				"type": 1,
+				"openType": "_iframe",
+				"href": "view/document/table.html"
 			}
 		]
 	},
diff --git a/admin/data/table.json b/admin/data/table.json
new file mode 100644
index 0000000..195e315
--- /dev/null
+++ b/admin/data/table.json
@@ -0,0 +1,182 @@
+{
+	"createTime": null,
+	"createBy": null,
+	"updateTime": null,
+	"updateBy": null,
+	"remark": null,
+	"code": 0,
+	"msg": "...",
+	"count": 3,
+	"data": [{
+		"createTime": null,
+		"createBy": null,
+		"updateTime": null,
+		"updateBy": null,
+		"remark": null,
+		"userId": "1",
+		"username": "admin",
+		"password": "$2a$10$1K7E1.IYCrsoZVCb6utOo.5jENtfOzhdKWhc49t2lk.UQd7Oam4FG",
+		"salt": null,
+		"status": null,
+		"realName": "超级管理员",
+		"email": "8540854@qq.com",
+		"avatar": null,
+		"sex": "1",
+		"phone": "15543526531",
+		"enable": "1",
+		"login": "1",
+		"roleIds": null
+	}, {
+		"createTime": null,
+		"createBy": null,
+		"updateTime": null,
+		"updateBy": null,
+		"remark": null,
+		"userId": "442488661347536896",
+		"username": "854085467",
+		"password": null,
+		"salt": null,
+		"status": null,
+		"realName": "就眠仪式",
+		"email": null,
+		"avatar": null,
+		"sex": "1",
+		"phone": "1555324324234",
+		"enable": "1",
+		"login": "1",
+		"roleIds": null
+	}, {
+		"createTime": null,
+		"createBy": null,
+		"updateTime": null,
+		"updateBy": null,
+		"remark": null,
+		"userId": "442492965651353600",
+		"username": "970796069",
+		"password": null,
+		"salt": null,
+		"status": null,
+		"realName": "王二麻子",
+		"email": null,
+		"avatar": null,
+		"sex": "1",
+		"phone": "1555324324234",
+		"enable": "1",
+		"login": "1",
+		"roleIds": null
+	},{
+		"createTime": null,
+		"createBy": null,
+		"updateTime": null,
+		"updateBy": null,
+		"remark": null,
+		"userId": "1",
+		"username": "admin",
+		"password": "$2a$10$1K7E1.IYCrsoZVCb6utOo.5jENtfOzhdKWhc49t2lk.UQd7Oam4FG",
+		"salt": null,
+		"status": null,
+		"realName": "超级管理员",
+		"email": "8540854@qq.com",
+		"avatar": null,
+		"sex": "1",
+		"phone": "15543526531",
+		"enable": "1",
+		"login": "1",
+		"roleIds": null
+	}, {
+		"createTime": null,
+		"createBy": null,
+		"updateTime": null,
+		"updateBy": null,
+		"remark": null,
+		"userId": "442488661347536896",
+		"username": "854085467",
+		"password": null,
+		"salt": null,
+		"status": null,
+		"realName": "就眠仪式",
+		"email": null,
+		"avatar": null,
+		"sex": "1",
+		"phone": "1555324324234",
+		"enable": "1",
+		"login": "1",
+		"roleIds": null
+	}, {
+		"createTime": null,
+		"createBy": null,
+		"updateTime": null,
+		"updateBy": null,
+		"remark": null,
+		"userId": "442492965651353600",
+		"username": "970796069",
+		"password": null,
+		"salt": null,
+		"status": null,
+		"realName": "王二麻子",
+		"email": null,
+		"avatar": null,
+		"sex": "1",
+		"phone": "1555324324234",
+		"enable": "1",
+		"login": "1",
+		"roleIds": null
+	},{
+		"createTime": null,
+		"createBy": null,
+		"updateTime": null,
+		"updateBy": null,
+		"remark": null,
+		"userId": "1",
+		"username": "admin",
+		"password": "$2a$10$1K7E1.IYCrsoZVCb6utOo.5jENtfOzhdKWhc49t2lk.UQd7Oam4FG",
+		"salt": null,
+		"status": null,
+		"realName": "超级管理员",
+		"email": "8540854@qq.com",
+		"avatar": null,
+		"sex": "1",
+		"phone": "15543526531",
+		"enable": "1",
+		"login": "1",
+		"roleIds": null
+	}, {
+		"createTime": null,
+		"createBy": null,
+		"updateTime": null,
+		"updateBy": null,
+		"remark": null,
+		"userId": "442488661347536896",
+		"username": "854085467",
+		"password": null,
+		"salt": null,
+		"status": null,
+		"realName": "就眠仪式",
+		"email": null,
+		"avatar": null,
+		"sex": "1",
+		"phone": "1555324324234",
+		"enable": "1",
+		"login": "1",
+		"roleIds": null
+	}, {
+		"createTime": null,
+		"createBy": null,
+		"updateTime": null,
+		"updateBy": null,
+		"remark": null,
+		"userId": "442492965651353600",
+		"username": "970796069",
+		"password": null,
+		"salt": null,
+		"status": null,
+		"realName": "王二麻子",
+		"email": null,
+		"avatar": null,
+		"sex": "1",
+		"phone": "1555324324234",
+		"enable": "1",
+		"login": "1",
+		"roleIds": null
+	}]
+}
diff --git a/component/pear/css/pear-module/form.css b/component/pear/css/pear-module/form.css
index fee0c13..578a6d6 100644
--- a/component/pear/css/pear-module/form.css
+++ b/component/pear/css/pear-module/form.css
@@ -1,3 +1,10 @@
-.layui-input, .layui-textarea{
-	border-radius: 4px;
-}
\ No newline at end of file
+.layui-form-item {
+	margin-bottom: 0px !important;
+	margin-top: 5px !important;
+}
+
+.layui-input {
+	height: 34px !important;
+	line-height: 34px !important;
+	border-radius: 3px !important;
+}
diff --git a/component/pear/css/pear-module/table.css b/component/pear/css/pear-module/table.css
index e69de29..44bab83 100644
--- a/component/pear/css/pear-module/table.css
+++ b/component/pear/css/pear-module/table.css
@@ -0,0 +1,66 @@
+.layui-table-tool-panel {
+	margin-top: 10px !important;
+}
+
+.layui-table-tool {
+	background-color: white !important;
+	border-bottom: none !important;
+	padding-bottom: 10px !important;
+}
+
+.layui-table-header,
+.layui-table-header th {
+	background-color: white !important;
+}
+
+.layui-table-view {
+	border: none !important;
+}
+
+.layui-table-cell {
+	height: 34px !important;
+	line-height: 34px !important;
+}
+
+.layui-laypage .layui-laypage-curr .layui-laypage-em {
+	border-radius: 50px !important;
+	background-color: #5FB878 !important;
+}
+
+.layui-laypage-limits,
+.layui-laypage-skip {
+	display: none !important;
+}
+
+.layui-table tr {
+	height: 34px !important;
+	line-height: 34px !important;
+}
+
+.layui-table-cell {
+	padding-top: 1px !important;
+}
+
+.layui-table-box * {
+	font-size: 13px !important;
+}
+
+.layui-table-box button {
+	font-size: 15px !important;
+}
+
+.layui-table-page {
+	height: 45px !important;
+	padding-top: 10px !important;
+}
+
+.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;
+}
diff --git a/setting.json b/setting.json
new file mode 100644
index 0000000..e69de29
diff --git a/view/document/table.html b/view/document/table.html
new file mode 100644
index 0000000..f575cfd
--- /dev/null
+++ b/view/document/table.html
@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+	</head>
+	<body>
+		<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 src="../../component/pear/pear.js"></script>
+		<script>
+			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/table.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.msg("新增");
+				}
+
+				window.edit = function(obj) {
+					layer.msg("修改");
+				}
+
+				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>