master

分支 (1)

管理

管理

master

blog-ms
/
product_list.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>信息列表</title>
		<!-- 日期控件 -->
		<script src="layDate-v5.3.1/laydate/laydate.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="layui/css/global.css">
		<link rel="stylesheet" href="css/manage.css">
		<script src="./js/vue.js"></script>
		<script src="layui/layui.js"></script>

	</head>

	<body>
		<div id="app">

			<form class="layui-form" action="product_query.do" method="post">
				<div class="layui-inline">
					<label class="layui-form-label">查询条件</label>
					<div class="layui-input-block">
						<input type="text" id="queryTxt" name="keyword" style="width: 200px;" placeholder="请输入标题" autocomplete="off"
						 class="layui-input">
					</div>
				</div>

				<div class="layui-inline">
					<select name="status" id="queryStatus" lay-filter="level" lay-search="">
						<option value="">选择状态</option>
						<option value="0">禁用</option>
						<option value="1">正常</option>
					</select>
				</div>

				<div class="layui-inline">
					<select name="label" id="queryLabel" lay-filter="level" lay-search="">
						<option value="">选择标签</option>
					</select>
				</div>

				<div class="layui-inline">
					<input type="text" id="queryDate" name="keyword" style="width: 200px;" placeholder="请选择日期" autocomplete="off"
					 class="layui-input">
				</div>

				<div class="layui-inline">
					<input type="button" id="selectBtn" class="layui-btn" data-type="reload" value="查询">
				</div>
				<div class="layui-inline">
					<input type="button" id="addBtn" class="layui-btn" value="添加">
				</div>

			</form>

			<!-- 信息列表 -->
			<!-- 2.数据表格 -->
			<table border="1" width="80%" align="center" class="layui-table" id="table" lay-filter="table">
			</table>

			<!-- 3.表格工具条 -->
			<!-- lay-event:自定义layui事件 -->
			<script type="text/text" id="optionBar">
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
				<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="show">修改</a>
				<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详细</a>
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="jinyong">禁用</a>
			</script>

			<!-- 自定义弹出层 -->
			<!-- 4.修改表单开始 -->
			<div id="updateContainer" style="display: none">
				<form class="layui-form" id="updateForm" lay-filter="example" style="margin: 1rem">

					<div>

						<!-- 左边修改表 -->
						<div style="width: 400px;float: left;">

							<div class="layui-form-item">
								<label class="layui-form-label">标题</label>
								<div class="layui-input-block">
									<input type="text" id="modify-title" name="title" autocomplete="off" class="layui-input" />
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">状态类型</label>
								<div class="layui-input-block">
									<select name="status" id="modify-status" lay-filter="level" lay-search="">
										<option value="">状态</option>
										<option value="0">禁用</option>
										<option value="1">正常</option>
									</select>
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">是否置顶</label>
								<div class="layui-input-block">
									<select name="istop" id="modify-top" lay-filter="level" lay-search="">
										<option value="">选择是否置顶</option>
										<option value="1">置顶</option>
										<option value="0">否</option>
									</select>
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">是否评论</label>
								<div class="layui-input-block">
									<select name="iscomment" id="modify-comment" lay-filter="level" lay-search="">
										<option value="">是否允许评论</option>
										<option value="1">允许</option>
										<option value="0">否</option>
									</select>
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">标签</label>
								<div class="layui-input-block">
									<select multiple id="modify-label" name="labelList" lay-filter="level" lay-search="">
										<option value="">选择文章标签</option>
									</select>
								</div>
							</div>

						</div>

						<!-- 右边修改 -->
						<div style="width: 400px;float: left;margin: 15px;">

							<label class="layui-form-label">文章图片</label>
							<img v-if="image==null" id="pic" :src=`http://localhost:9999/layui/file/head/default.jpg` style="width:200px;height:200px;" />
							<br />
							<button type="button" class="layui-btn" id="" style="margin-left: 150px;margin-top: 10px;">
								<i class="layui-icon" style="align-items: center;">&#xe67c;</i>浏览图片
							</button>
						</div>

					</div>

					<!-- 隐藏域 -->
					<input type="hidden" name="id" value="" id="update-id">
				</form>
			</div>
			<!-- 修改表单结束 -->
		</div>

		<script>
			//日期加载
			laydate.render({
				elem: '#queryDate',
				format: 'yyyy/MM/dd'
			});

			// 加载layui相关的模块
			layui.use(['jquery', 'table', 'layer', 'form'], function() {

				// 1.获取各个模块的实例
				var $ = layui.jquery;
				var table = layui.table;
				var layer = layui.layer;
				var form = layui.form;

				// 2.加载用户角色（非必须）
				$.ajax({
					url: 'http://localhost:9999/layui/api/user/level',
					type: 'get',
					beforeSend: function(xhr) {
						let token = localStorage.getItem("token");
						// 使用请求头的方式传递
						xhr.setRequestHeader("Authorization", "Bearer " + token)
					},
					success: function(res) {
						// 没有权限，则返回登录页面
						if (res.code == 401) {
							location.href = "index.html";
							return;
						}

						// 循环遍历角色，并回显到页面中下拉列表框中
						if (res.code == 200) {
							$.each(res.data, function(index, level) {
								// 搜索表单初始化数据
								$('#level').append('<option value="' + level + '">' + level + '</option>');

								// 修改表单初始化数据
								$('#update-level').append('<option value="' + level + '">' + level + '</option>');
							});

							// 重新渲染
							form.render('select');
						}
					}
				});


				// 3.动态加载表格数据
				table.render({
					// 绑定table节点
					elem: '#table',
					// 命名table，便于后期调用
					id: 'tableReload',
					// 定义请求头
					headers: {
						// Authorization: "Bearer " + localStorage.getItem("token")
						Authorization: "Bearer " + "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJKV1RfQVVUSCIsInVrVXNlclVpZCI6IjMzMyIsImlzcyI6ImNvbS54eHgiLCJleHAiOjE2NDE5NzA2OTIsImlhdCI6MTY0MTg4NDI5Mn0.ulSzE2vZIA1QW75MxuxmJA2cFZeB-ZKr_5TAqYzhxcw"
					},
					// 定义请求URL
					url: 'http://127.0.0.1:8080/BlogServer/api/articlevo/laypage',
					// 定义标题
					title: '用户列表',
					// 定义表格各个列
					// field:字段名称，必须与响应的实体对象的属性同名
					// title:列名
					// width:指定列的宽度
					// templet:控制数据显示的格式
					// toolbar：指定工具条 -> 通过script定义工具条

					cols: [
						[{
							field: 'articleTitle',
							title: '标题',
							width: '18%',
							templet: function(res) {
								return res.article.articleTitle;
							}
						}, {
							field: 'labelList',
							title: '标签',
							width: '13%',
							templet: function(res) {
								let arr = res.labelList;

								if(!arr.length){
									return " - ";
								}

								let labelStr = arr[0].labelName;
								for (let i = 1; i < arr.length; i++) {
									labelStr += " | " + arr[i].labelName;
								}
								return labelStr;
							}
						}, {
							field: 'articleDate',
							title: '发布时间',
							width: '12%',
							templet: function(res) {
								return layui.util.toDateString(res.article.articleDate, 'yyyy-MM-dd');
							}
						}, {
							field: 'articleViews',
							title: '浏览量',
							width: '8%',
							templet: function(res) {
								return res.article.articleViews;
							}
						}, {
							field: 'commentCount',
							title: '评论数',
							width: '8%',
							templet: function(res) {
								return res.commentCount;
							}
						}, {
							field: 'articleIsTop',
							title: '是否置顶',
							width: '8%',
							templet: function(res) {
								if (res.article.articleIsTop == 1) {
									return '置顶';
								} else {
									return '否';
								}
							}
						}, {
							field: 'articleIsComment',
							title: '是否评论',
							width: '8%',
							templet: function(res) {
								if (res.article.articleIsComment == 1) {
									return '允许';
								} else {
									return '否';
								}
							}
						}, {
							field: 'articleStatus',
							title: '状态',
							width: '6%',
							templet: function(res) {
								if (res.article.articleStatus == 1) {
									return '正常';
								} else {
									return '<span style="color:red">禁用</span>';
								}
							}
						}, {
							fixed: 'right',
							title: '操作',
							toolbar: '#optionBar'
						}]
					],
					// 开启分页
					page: true,
					// 设置每页显示的记录数
					limit: 8,
					limits: [8, 16, 24],
					// 设置响应数据的格式  -- 解决API接口响应数据与Layui要求的数据格式不一致

					parseData: function(res) {
						console.log("res>>>", res);
						console.log("data>>>", res.data);
						// console.log("data>>>", res.data);
						return {
							"code": res.code == 200 ? 0 : res.code, // 解析接口状态
							"msg": res.msg, // 解析提示文本
							"count": res.count, // 解析数据长度
							"data": res.data // 解析数据列表
						};
					}
				});

				// 4.查询并重新加载表格active.reload === active[reload]
				let active = {

					reload: function() {
						// 执行重载
						table.reload('tableReload', {
							// 指定当前页
							page: {
								curr: 1 // 重新从第 1 页开始
							},
							// 指定查询条件
							where: {
								//标题
								articleTitle: $('#queryTxt').val(),
								//状态
								articleStatus: $('#queryStatus').val(),
								//标签
								labelId: $('#queryLabel').val(),
								//日期
								articleDate: $('#queryDate').val()
							}
						});
					}
				};

				// 5.绑定查询按钮
				$('#selectBtn').on('click', function() {
					// 获取当前节点中的自定义属性 -- reload
					let type = $(this).data('type');

					active[type] ? active[type].call(this) : '';
				});

				// 6.监听table行工具事件
				table.on('tool(table)', function(obj) {
					// 单击按钮所在行的数据 -- 当前行的数据
					let currentRow = obj.data;

					// 单击按钮中的自定义事件
					let layuiEvent = obj.event;

					// 删除数据
					if (layuiEvent === 'del') {

						// 弹出确认框，如果按了“确定”，则执行回调函数，如果按了“取消”，则默认确认框，什么也不做
						// index：确认框的索引，便于通过此索引关闭确认框
						layer.confirm('是否确认删除此条目？', function(index) {

							// 发起异步请求，删除数据
							$.ajax({
								url: 'http://localhost:9999/layui/api/user/del',
								type: 'GET',
								beforeSend: function(xhr) {
									xhr.setRequestHeader("Authorization", "Bearer " + localStorage.getItem("token"))
								},
								data: {
									'id': currentRow.id
								},
								success: function(data) {
									if (data.code == 200) {
										// 删除当前行
										obj.del();

										// 重载表格数据
										table.reload('tableReload', {
											page: {
												curr: 1
											}
										});
										// 关闭确认框
										layer.close(index);
									} else {
										layer.msg(data.msg);
									}
								}
							});
						});

					} else if (layuiEvent === 'show') {

						// 修改操作
						// 1.回显当前行的数据
						$("#modify-id").val(currentRow.article.pkArticleId); //编号
						$('#modify-title').val(currentRow.article.articleTitle); //标题
						//状态
						$('#modify-status').find("option").each(function() {
							// 判断需要对那个选项进行回显
							if (this.value == currentRow.article.articleStatus) {
								// 进行回显
								$(this).prop("selected", "selected");
								// 重新渲染
								form.render('select');
							}
						});
						//置顶
						$('#modify-top').find("option").each(function() {
							// 判断需要对那个选项进行回显
							if (this.value == currentRow.article.articleIsTop) {
								// 进行回显
								$(this).prop("selected", "selected");
								// 重新渲染
								form.render('select');
							}
						});
						//评论
						$('#modify-comment').find("option").each(function() {
							// 判断需要对那个选项进行回显
							if (this.value == currentRow.article.articleIsTop) {
								// 进行回显
								$(this).prop("selected", "selected");
								// 重新渲染
								form.render('select');
							}
						});

						// 所有标签
						let labelList = [];
						$.get({
							url: "http://localhost:8080/BlogServer/api/label/laypage",
							data: null,
							dataType: "json",
							success: function(res) {
								labelList = res.data;

								console.log(labelList)

								// 文章标签
								let articleLabelList = currentRow.labelList;
								let optionStr = "";
								for (let i = 0; i < labelList.length; i++) {
									let flag = false;
									for (let j = 0; j < articleLabelList.length; j++) {
										if (articleLabelList[j].pkLabelId == labelList[i].label.pkLabelId) {
											flag = true;
										}
									}
									optionStr += '<option ' + (flag ? "selected" : "") + ' value="' + labelList[i].label.pkLabelId + '">' +
										labelList[i].label.labelName + '</option>';
								}
								$('#modify-label').append(optionStr);
								$('#queryLabel').append(optionStr);
							}
						})

						// 2.重新渲染表单
						form.render();

						// 3.弹出修改表单
						layer.open({
							// 类型
							type: 1,
							// 标题
							title: '修改',
							// 设置宽、高
							area: ['80%', '30em'],
							// 是否改变大小
							resize: false,
							// 指定弹出层的内容--上面必须定义好一个DIV
							content: $("#updateContainer"),
							// 定义弹出层的按钮
							btn: ['确认', '取消'],

							// btn1:响应弹出层的第一个按钮，依次类推，btn2,btn3...
							btn1: function(index) {
								// 4.验证数据的合法性
								if ($('#update-phone').val() == '') {
									layer.msg("手机不能为空");
									$('#update-phone').focus();
									return false;
								}

								// 5.修改数据
								$.ajax({
									url: 'http://localhost:9999/layui/api/user/update',
									type: 'post',
									data: $('#updateForm').serialize(),
									dataType: 'json',
									beforeSend: function(xhr) {
										// 使用请求头的方式传递
										xhr.setRequestHeader("Authorization", "Bearer " + localStorage.getItem("token"))
									},
									success: function(data) {
										if (data.code == 200) {
											// 重载表格
											table.reload('tableReload', {
												page: {
													curr: 1
												}
											});

											// 关闭层
											layer.close(index);
										} else {
											layer.msg(data.msg);
										}
									}
								});
							}
						});

					}
				});


			});

		</script>

	</body>
</html>