root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化文章列表页面

v1.0
bobi 2019-05-15 23:27:44 +08:00
parent 92a29e1541
commit c73918d6a8
5 changed files with 156 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
pages/article/article-add.html
View File

@ -60,7 +60,7 @@
<div class="layui-form-item layui-form-text"> <div class="layui-form-item layui-form-text">
<label class="layui-form-label">内容</label> <label class="layui-form-label">内容</label>
<div class="layui-input-block"> <div class="layui-input-block">
<textarea name="content" placeholder="请输入文章内容" class="layui-textarea" lay-verify="required"></textarea> <textarea id="content" name="content" style="display: none;"></textarea>
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
@ -74,14 +74,28 @@
<!--js逻辑--> <!--js逻辑-->
<script src="../../lib/layui/layui.js"></script> <script src="../../lib/layui/layui.js"></script>
<script> <script>
layui.use(["element", "form", "jquery"], function () { layui.config({
base: "../../lib/layui_plugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
}).use(["element", "form", "layedit", "okLayer", "okUtils"], function () {
var form = layui.form; var form = layui.form;
var $ = layui.jquery; var layedit = layui.layedit;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
// TODO layedit内容校验
layedit.build("content", {});
form.on("submit(add)", function (data) { form.on("submit(add)", function (data) {
console.log(data.field); okUtils.ajax("/article/add", "post", data.field).done(function (response) {
layer.msg("添加成功！", {icon: 6, time: 1000, anim: 4}, function () { console.log(response)
parent.layer.close(parent.layer.getFrameIndex(window.name)); okLayer.msg.greenTick("添加成功", function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
}).fail(function (error) {
console.log(error)
}); });
return false; return false;
}); });

26
pages/article/article-edit.html
View File

@ -60,7 +60,7 @@
<div class="layui-form-item layui-form-text"> <div class="layui-form-item layui-form-text">
<label class="layui-form-label">内容</label> <label class="layui-form-label">内容</label>
<div class="layui-input-block"> <div class="layui-input-block">
<textarea name="content" placeholder="请输入文章内容" class="layui-textarea" lay-verify="required"></textarea> <textarea id="content" name="content" style="display: none;"></textarea>
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
@ -74,14 +74,28 @@
<!--js逻辑--> <!--js逻辑-->
<script src="../../lib/layui/layui.js"></script> <script src="../../lib/layui/layui.js"></script>
<script> <script>
layui.use(["element", "form", "jquery"], function () { layui.config({
base: "../../lib/layui_plugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
}).use(["element", "form", "layedit", "okLayer", "okUtils"], function () {
var form = layui.form; var form = layui.form;
var $ = layui.jquery; var layedit = layui.layedit;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
// TODO layedit内容校验
layedit.build("content", {});
form.on("submit(edit)", function (data) { form.on("submit(edit)", function (data) {
console.log(data.field); okUtils.ajax("/article/edit", "post", data.field).done(function (response) {
layer.msg("编辑成功！", {icon: 6, time: 1000, anim: 4}, function () { console.log(response)
parent.layer.close(parent.layer.getFrameIndex(window.name)); okLayer.msg.greenTick("编辑成功", function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
}).fail(function (error) {
console.log(error)
}); });
return false; return false;
}); });

213
pages/article/article.html
View File

@ -22,52 +22,43 @@
<!--模糊搜索区域--> <!--模糊搜索区域-->
<div class="layui-row"> <div class="layui-row">
<form class="layui-form layui-col-md12 ok-search"> <form class="layui-form layui-col-md12 ok-search">
<input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime"> <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
<input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime"> <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
<input class="layui-input" placeholder="请输入标题" autocomplete="off"> <input class="layui-input" placeholder="请输入标题" autocomplete="off" name="title">
<button class="layui-btn" lay-submit="" lay-filter="search"> <button class="layui-btn" lay-submit="" lay-filter="search">
<i class="layui-icon layui-icon-search"></i> <i class="layui-icon layui-icon-search"></i>
</button> </button>
</form> </form>
</div> </div>
<!--工具栏-->
<okToolbar>
<button class="layui-btn layui-btn-normal" id="batchEnabled">
<i class="iconfont icon-shangsheng"></i>批量上架
</button>
<button class="layui-btn layui-btn-warm" id="batchDisabled">
<i class="iconfont icon-web-icon-"></i>批量下架
</button>
<button class="layui-btn layui-btn-danger" id="batchDel">
<i class="layui-icon layui-icon-delete"></i>批量删除
</button>
<button class="layui-btn" id="addUser">
<i class="layui-icon">&#xe61f;</i>添加文章
</button>
<span>共有数据：<i id="countNum"></i> 条</span>
</okToolbar>
<!--数据表格--> <!--数据表格-->
<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table> <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div> </div>
<!--js逻辑--> <!--js逻辑-->
<script src="../../lib/layui/layui.js"></script> <script src="../../lib/layui/layui.js"></script>
<script> <script>
// layui相关 layui.config({
layui.use(["element", "table", "form", "jquery", "laydate"], function () { base: "../../lib/layui_plugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
}).use(["element", "table", "form", "laydate", "okLayer", "okUtils"], function () {
var table = layui.table; var table = layui.table;
var form = layui.form; var form = layui.form;
var $ = layui.jquery; var $ = layui.jquery;
var laydate = layui.laydate; var laydate = layui.laydate;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
laydate.render({elem: "#startTime", type: "datetime"}); laydate.render({elem: "#startTime", type: "datetime"});
laydate.render({elem: "#endTime", type: "datetime"}); laydate.render({elem: "#endTime", type: "datetime"});
table.render({ var articleTable = table.render({
elem: "#tableId", elem: "#tableId",
url: "../../data/article.json", url: "../../data/article.json",
limit: 10, limit: 10,
page: true, page: true,
even: true, even: true,
toolbar: "#toolbarTpl",
cols: [[ cols: [[
{type: "checkbox"}, {type: "checkbox"},
{field: "id", title: "ID", width: 80, sort: true}, {field: "id", title: "ID", width: 80, sort: true},
@ -80,116 +71,125 @@
{title: "操作", width: 200, align: "center", templet: "#operationTpl"} {title: "操作", width: 200, align: "center", templet: "#operationTpl"}
]], ]],
done: function (res, curr, count) { done: function (res, curr, count) {
$("#countNum").text(count); console.log(res, curr, count)
} }
}); });
form.on("submit(search)", function () { form.on("submit(search)", function () {
layer.msg("正在查询，请稍后..."); articleTable.reload({
where: data.field,
page: {curr: 1}
});
return false; return false;
}); });
table.on("toolbar(tableFilter)", function (obj) {
switch (obj.event) {
case "batchEnabled":
batchEnabled();
break;
case "batchDisabled":
batchDisabled();
break;
case "batchDel":
batchDel();
break;
case "add":
add();
break;
}
});
table.on("tool(tableFilter)", function (obj) { table.on("tool(tableFilter)", function (obj) {
var data = obj.data; var data = obj.data;
var layEvent = obj.event; switch (obj.event) {
if (layEvent === "edit") { case "edit":
layer.open({ edit(data.id);
title: "编辑用户", break;
type: 2, case "del":
shade: false, del(data.id);
maxmin: true, break;
shade: 0.5,
area: ["90%", "90%"],
content: "article-edit.html",
zIndex: layer.zIndex,
end: function () {
$(".layui-laypage-btn")[0].click();
}
});
} else if (layEvent === "del") {
layer.confirm("确定要删除吗？", {skin: "layui-layer-lan", icon: 2, title: "提示", anim: 6}, function () {
layer.msg("操作成功！", {icon: 1, time: 1000});
});
} }
}); });
$("#batchEnabled").click(function () { function batchEnabled() {
layer.confirm("确定要批量上架吗？", {skin: "layui-layer-lan", icon: 3, title: "提示", anim: 1}, function () { okLayer.confirm("确定要批量上架吗？", function (index) {
var checkStatus = table.checkStatus("tableId"); layer.close(index);
var rows = checkStatus.data.length; var idsStr = okUtils.table.batchCheck(table);
if (rows > 0) { if (idsStr) {
var idsStr = ""; okUtils.ajax("/article/batchNormal", "post", {idsStr: idsStr}).done(function (response) {
for (var i = 0; i < checkStatus.data.length; i++) { console.log(response)
idsStr += checkStatus.data[i].id + ","; okUtils.table.successMsg("批量上架成功");
} }).fail(function (error) {
console.log("选择的id-->" + idsStr); console.log(error)
layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
$(".layui-laypage-btn")[0].click();
}); });
} else {
layer.msg("未选择有效数据", {offset: "t", anim: 6});
} }
}); });
}) }
$("#batchDisabled").click(function () { function batchDisabled(){
layer.confirm("确定要批量下架吗？", {skin: "layui-layer-lan", icon: 3, title: "提示", anim: 2}, function () { okLayer.confirm("确定要批量下架吗？", function (index) {
var checkStatus = table.checkStatus("tableId"); layer.close(index);
var rows = checkStatus.data.length; var idsStr = okUtils.table.batchCheck(table);
if (rows > 0) { if (idsStr) {
var idsStr = ""; okUtils.ajax("/article/batchStop", "post", {idsStr: idsStr}).done(function (response) {
for (var i = 0; i < checkStatus.data.length; i++) { console.log(response)
idsStr += checkStatus.data[i].id + ","; okUtils.table.successMsg("批量下架成功");
} }).fail(function (error) {
console.log("选择的id-->" + idsStr); console.log(error)
layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
$(".layui-laypage-btn")[0].click();
}); });
} else {
layer.msg("未选择有效数据", {offset: "t", anim: 6});
} }
}); });
}) }
$("#batchDel").click(function () { function batchDel(){
layer.confirm("确定要批量删除吗？", {skin: "layui-layer-lan", icon: 2, title: "提示", anim: 6}, function () { okLayer.confirm("确定要批量删除吗？", function (index) {
var checkStatus = table.checkStatus("tableId"); layer.close(index);
var rows = checkStatus.data.length; var idsStr = okUtils.table.batchCheck(table);
if (rows > 0) { if (idsStr) {
var idsStr = ""; okUtils.ajax("/article/batchDel", "post", {idsStr: idsStr}).done(function (response) {
for (var i = 0; i < checkStatus.data.length; i++) { console.log(response)
idsStr += checkStatus.data[i].id + ","; okUtils.table.successMsg("批量删除成功");
} }).fail(function (error) {
console.log("选择的id-->" + idsStr); console.log(error)
layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
$(".layui-laypage-btn")[0].click();
}); });
} else {
layer.msg("未选择有效数据", {offset: "t", anim: 6});
} }
}); });
}) }
$("#addUser").click(function () { function add () {
layer.open({ okLayer.open("添加文章", "article-add.html", "90%", "90%", function () {
title: "添加文章", articleTable.reload();
type: 2, })
shade: false, }
maxmin: true,
shade: 0.5, function edit (id) {
anim: 4, okLayer.open("编辑文章", "article-edit.html?id=" + id, "90%", "90%", function () {
area: ["90%", "90%"], articleTable.reload();
content: "article-add.html", })
zIndex: layer.zIndex, }
// skin: 'layui-layer-molv',
end: function () { function del (id) {
$(".layui-laypage-btn")[0].click(); okLayer.confirm("确定要删除吗？", function () {
} okUtils.ajax("/article/batchDel", "post", {idsStr: id}).done(function (response) {
}); console.log(response)
}) okUtils.table.successMsg("删除成功");
}).fail(function (error) {
console.log(error)
});
})
}
}) })
</script> </script>
<!--模板--> <!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="batchEnabled"><i class="iconfont icon-shangsheng"></i>批量上架</button>
<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="batchDisabled"><i class="iconfont icon-web-icon-"></i>批量下架</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe61f;</i>添加文章</button>
</div>
</script>
<script type="text/html" id="urlTpl"> <script type="text/html" id="urlTpl">
<a href="{{d.url}}" target="_blank">{{d.url}}</a> <a href="{{d.url}}" target="_blank">{{d.url}}</a>
</script> </script>
@ -199,6 +199,7 @@
<script type="text/html" id="statusTpl"> <script type="text/html" id="statusTpl">
<input type="checkbox" name="top" value="{{d.status}}" lay-skin="switch" lay-text="上架|下架" {{ d.status== true ? 'checked' : ''}}> <input type="checkbox" name="top" value="{{d.status}}" lay-skin="switch" lay-text="上架|下架" {{ d.status== true ? 'checked' : ''}}>
</script> </script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl"> <script type="text/html" id="operationTpl">
<a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a> <a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
<a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a> <a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>

9
pages/user/user-add.html
View File

@ -112,7 +112,6 @@
okUtils: "okUtils/okUtils" okUtils: "okUtils/okUtils"
}).use(["element", "form", "laydate", "okLayer", "okUtils"], function () { }).use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
var form = layui.form; var form = layui.form;
var $ = layui.jquery;
var laydate = layui.laydate; var laydate = layui.laydate;
var okLayer = layui.okLayer; var okLayer = layui.okLayer;
var okUtils = layui.okUtils; var okUtils = layui.okUtils;
@ -126,12 +125,12 @@
form.on("submit(add)", function (data) { form.on("submit(add)", function (data) {
okUtils.ajax("/user/add", "post", data.field).done(function (response) { okUtils.ajax("/user/add", "post", data.field).done(function (response) {
console.log(response) console.log(response)
layer.msg("添加成功", {icon: 6, time: 1000, anim: 4}, function () { okLayer.msg.greenTick("添加成功", function () {
parent.layer.close(parent.layer.getFrameIndex(window.name)); parent.layer.close(parent.layer.getFrameIndex(window.name));
}); });
}).fail(function (error) { }).fail(function (error) {
console.log(error) console.log(error)
}); });
return false; return false;
}); });
}) })

11
pages/user/user-edit.html
View File

@ -112,7 +112,6 @@
okUtils: "okUtils/okUtils" okUtils: "okUtils/okUtils"
}).use(["element", "form", "laydate", "okLayer", "okUtils"], function () { }).use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
var form = layui.form; var form = layui.form;
var $ = layui.jquery;
var laydate = layui.laydate; var laydate = layui.laydate;
var okLayer = layui.okLayer; var okLayer = layui.okLayer;
var okUtils = layui.okUtils; var okUtils = layui.okUtils;
@ -124,14 +123,14 @@
}); });
form.on("submit(edit)", function (data) { form.on("submit(edit)", function (data) {
okUtils.ajax("/user/add", "post", data.field).done(function (response) { okUtils.ajax("/user/edit", "post", data.field).done(function (response) {
console.log(response) console.log(response)
layer.msg("添加成功", {icon: 6, time: 1000, anim: 4}, function () { okLayer.msg.greenTick("编辑成功", function () {
parent.layer.close(parent.layer.getFrameIndex(window.name)); parent.layer.close(parent.layer.getFrameIndex(window.name));
}); });
}).fail(function (error) { }).fail(function (error) {
console.log(error) console.log(error)
}); });
return false; return false;
}); });
}) })