WebContent/WEB-INF/jsp/pc/autoresponse/autoresponse.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>自动回复</title>
		<link rel="stylesheet" href="/zzhnc/res/plugins/layui/css/layui.css">
		<link rel="stylesheet" href="/zzhnc/res/css/basic.css">
	</head>

	<body class="wrap">
		<div class="layui-form">
			<div class="layui-form-item searchbox" style="margin-bottom: 0px;">
				<div class="layui-input-inline" style="width: 200px;">
					<input type="text" class="layui-input" name="keyword" placeholder="关键字" />
				</div>
				<button class="layui-btn" lay-submit lay-filter="querybtn">查询</button>
				<button class="layui-btn layui-btn-primary resetBtn">重置</button>
				<a class="layui-btn layui-btn-warm createBtn" href="#"><i class="layui-icon">&#xe61f;</i> 添加关键字</a>
				<a class="layui-btn publicBtn" href="#"><i class="layui-icon">&#xe609;</i> 发布</a>
			</div>
		</div>
		<table class="layui-table">
			<thead>
				<tr>
					<th>No</th>
					<th>关键字</th>
					<th>回复内容</th>
					<th>操作</th>
				</tr>
			</thead>

			<tbody id="tablelist">
			</tbody>
		</table>
		<div class="nodata">暂无数据</div>
		<div id="page"></div>

	</body>
	<div class="popupbox" style="display:none;">
		<div class="popupbos">
			<div class="layui-form">
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="redrequired">*</i>关键词：</label>
					<div class="layui-input-block">
						<input type="text" name="keywords" lay-verify="required" placeholder="关键词" class="layui-input">
					</div>
					
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"></label>
					<div class="layui-word-aux">注：多个关键词请用英文“ | ”分隔</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="redrequired">*</i>回复内容：</label>
					<div class="layui-input-block">
						<textarea class="layui-textarea" name="content" lay-verify="required" placeholder="请输入内容" style="height:150px; "></textarea>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src='/zzhnc/res/js/jquery.min.js'></script>
	<script src="/zzhnc/res/plugins/layui/layui.js" charset="utf-8"></script>
	<script src="/zzhnc/res/js/me.js"></script>
	<script>
		layui.use(['form', 'element', 'layer', 'laypage'], function() {
			var form = layui.form,
				element = layui.element,
				layer = layui.layer,
				laypage = layui.laypage;

			//查询条件
			var queryObj = {
				page: 1,
				size: 10,
				keyword: null
			}
			
			//页面初始化
			function initdata(queryObj) {
				$.get("/zzhnc/autoreply/getAutoreplyList", queryObj, function(data) {
					data = data.data;
					console.log(data)
					
					var str = "";
					if(data.rows.length < 1) {
						$(".nodata").show();
						$("#page").hide();
					} else {
						$(".nodata").hide();
						$("#page").show();
						for(var i = 0; i < data.rows.length; i++) {
							str += '<tr data-id=' + data.rows[i].id + '>' +
								'<td>' + ((data.page - 1) * data.pageSize + i + 1) + '</td>' +
								'<td style="text-align:left;">' + data.rows[i].keywords + '</td>' +
								'<td style="text-align:left;">' + data.rows[i].contents + '</td>' +
								'<td>' +
								'<a href="#" class="layui-btn layui-btn-sm updataBtn">修改</a>' +
								'<a href="#" class="layui-btn layui-btn-sm deleteBtn">删除</a>' +
								'</td>' +
								'</tr>';
						}
					}

					$("#tablelist").html(str);
					
					laypage.render({
						elem: 'page',
						count: data.total, 
						limit: queryObj.size,
						curr: queryObj.page,
						skip: true,
						jump: function(obj, first) {
							if(!first) {
								queryObj.page = obj.curr
								initdata(queryObj);
							}
						}
					});

				})
			}
			
			//初始化数据
			initdata(queryObj);

			//查询操作
			form.on('submit(querybtn)', function(data) {
				queryObj = data.field;
				queryObj.page = 1;
				initdata(queryObj);
				form.render();
			});

			//重置操作
			$(".resetBtn").on("click", function() {
				$("input[name=keyword]").val("");
				form.render();
				queryObj.keyword = null;
				initdata(queryObj);
			})

			//发布操作
			$(".publicBtn").on("click", function() {
				$.get("/zzhnc/autoreply/publish", function(data) {
					console.log(data)
					if(data.code == 0) {
						top.layer.msg("发布成功！");
					} else {
						top.layer.msg(data.msg);
					}
				})
			})
			
			//发布按钮提示信息
			$(".publicBtn").on("mouseenter", function() {
				layer.tips('添加或修改完关键字后，需要进行发布，以使新添加或修改的关键字生效。', ".publicBtn", {
					tips: [1, '#3595CC'],
					time: 4000
				});
			})
			
			//添加关键字
			$(document).on("click", ".createBtn", function() {
				layer.open({
					type: 1,
					title: '添加关键字',
					area: ["550px", "400px"],
					content: $(".popupbox"),
					btnAlign: "c",
					btn: ["提交", "取消"],
					scrollbar: false,
					yes: function(index, layero) {
						var keywords = $("input[name=keywords]").val();
						if(keywords == "") {
							top.layer.msg("请填写关键词");
							return false;
						}
						var content = $("textarea[name=content]").val();
						if(content == "") {
							top.layer.msg("请填写回复内容");
							return false;
						}
						$.post("/zzhnc/autoreply/addAutoreply", {
							keywords: keywords,
							content: content
						}, function(data) {
							if(data.code == 0) {
								top.layer.msg("添加成功");
								layer.close(index);
								queryObj.page = 1;
								initdata(queryObj);
								$("[name=keywords]").val("");
								$("[name=content]").val("");
							}
						});
						form.render();
					},
					btn2: function(index, layero) {
						layer.close(index);
					},
					cancel: function(index, layero) {
						layer.close(index);
					}
				})
			})

			//修改关键字
			$(document).on("click", ".updataBtn", function() {
				var id = $(this).parents("tr").attr("data-id");
				layer.open({
					type: 1,
					title: '修改关键字',
					area: ["550px", "400px"],
					content: $(".popupbox"),
					btnAlign: "c",
					btn: ["提交", "取消"],
					scrollbar: false,
					yes: function(index, layero) {
						var keywords = $("input[name=keywords]").val();
						if(keywords == "") {
							top.layer.msg("请填写关键词");
							return false;
						}
						var content = $("textarea[name=content]").val();
						if(content == "") {
							top.layer.msg("请填写回复内容");
							return false;
						}
						$.post("/zzhnc/autoreply/updateAutoreply", {
							id: id,
							keywords: keywords,
							content: content
						}, function(data) {
							if(data.code == 0) {
								top.layer.msg("修改成功");
								layer.close(index);
								queryObj.page = 1;
								initdata(queryObj);
							}
						});
						form.render();
					},
					success: function(){
						$.get("/zzhnc/autoreply/getAutoReply", {
							id: id
						}, function(data) {
							console.log(data)
							$("input[name=keywords]").val(data.data.keywords);
							$("textarea[name=content]").val(data.data.contents);
							form.render();
						})
					}
				})
			})

			//删除关键字
			$(document).on("click", ".deleteBtn", function() {
				var id = $(this).parents("tr").attr("data-id");
				layer.confirm('您确定要删除该关键字吗？', {
					btn: ['确定', '取消']
				}, function(index, layero) {
					$.post("/zzhnc/autoreply/deleteAutoreply", {
						id: id
					}, function(data) {
						console.log(data)
						if(data.code == 0) {
							top.layer.msg("删除成功");
							queryObj.page = 1;
							initdata(queryObj);
							layer.close(index);
						} else {
							top.layer.msg(data.msg);
						}
					})
				}, function(index, layero) {
					layer.close(index);
				});
			});

		})
	</script>

</html>