Merge branch 'v2.0' of https://gitee.com/bobi1234/ok-admin into v2.0
zhizou
commit
f77e4028a6
33
README.md
33
README.md
|
|
@ -23,19 +23,32 @@
|
|||
| ok-admin v1.0 | http://ok-admin-v1.xlbweb.cn |
|
||||
| ok-admin v2.0 | http://ok-admin.xlbweb.cn |
|
||||
|
||||
### 效果预览
|
||||
### PC端效果预览
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 手机端效果预览
|
||||
|
||||
<div align="center">
|
||||
<img src="https://images.gitee.com/uploads/images/2019/0928/133918_d3f06692_1152471.png" height="500" width="250" alt="手机端-控制台"/>
|
||||
<img src="https://images.gitee.com/uploads/images/2019/0928/133958_d693ec3d_1152471.png" height="500" width="250" alt="手机端-控制台一"/>
|
||||
<img src="https://images.gitee.com/uploads/images/2019/0928/134037_044ce556_1152471.png" height="500" width="250" alt="手机端-左侧菜单"/>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
<img src="https://images.gitee.com/uploads/images/2019/0928/134101_88527de9_1152471.png" height="500" width="250" alt="手机端-用户列表"/>
|
||||
<img src="https://images.gitee.com/uploads/images/2019/0928/134122_9505f727_1152471.png" height="500" width="250" alt="手机端-添加用户"/>
|
||||
<img src="https://images.gitee.com/uploads/images/2019/0928/140051_e8dc01fa_1152471.png" height="500" width="250" alt="登陆页面"/>
|
||||
</div>
|
||||
|
||||
### 开源协议
|
||||
|
||||
|
|
|
|||
16
index.html
16
index.html
|
|
@ -19,13 +19,14 @@
|
|||
<i class="layui-icon layui-icon-shrink-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- <li class="ok-nav-item ok-hide-md">-->
|
||||
<!-- <!– 天气信息 –>-->
|
||||
<!-- <div class="weather-ok">-->
|
||||
<!-- <iframe frameborder="0" scrolling="no" class="iframe-style" src="pages/weather.html" frameborder="0"></iframe>-->
|
||||
<!-- </div>-->
|
||||
<!-- </li>-->
|
||||
<!--天气信息-->
|
||||
<!--
|
||||
<li class="ok-nav-item ok-hide-md">
|
||||
<div class="weather-ok">
|
||||
<iframe frameborder="0" scrolling="no" class="iframe-style" src="pages/weather.html" frameborder="0"></iframe>
|
||||
</div>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
<ul class="layui-nav layui-layout-right">
|
||||
<li class="layui-nav-item ok-input-search">
|
||||
|
|
@ -65,6 +66,7 @@
|
|||
<dd><a lay-id="u-1" href="javascript:" data-url="pages/member/user.html">个人中心<span class="layui-badge-dot"></span></a></dd>
|
||||
<dd><a lay-id="u-2" href="javascript:" data-url="pages/member/user-info.html">基本资料</a></dd>
|
||||
<dd><a lay-id="u-3" href="javascript:" data-url="pages/member/user-pwd.html">安全设置</a></dd>
|
||||
<dd><a lay-id="u-4" href="javascript:" id="alertSkin">皮肤动画</a></dd>
|
||||
<dd>
|
||||
<hr/>
|
||||
</dd>
|
||||
|
|
|
|||
|
|
@ -52,30 +52,30 @@ layui.use(["okUtils", "table", "countUp", "okMock"], function () {
|
|||
function userList() {
|
||||
table.render({
|
||||
method: "get",
|
||||
url: okMock.api.user.list2,
|
||||
url: okMock.api.user.list,
|
||||
elem: '#userData',
|
||||
height: 340,
|
||||
page: true,
|
||||
limit: 7,
|
||||
cols: [[
|
||||
{field: "id", title: "id", width: 50},
|
||||
{field: "u_name", title: "姓名"},
|
||||
{field: "u_sex", title: "性别", width: 80},
|
||||
{field: "u_email", title: "邮箱"},
|
||||
{field: "u_endtime", title: "时间",},
|
||||
{field: "u_grade", title: "等级"}
|
||||
{field: "id", title: "ID", width: 180},
|
||||
{field: "username", title: "账号", width: 100},
|
||||
{field: "password", title: "密码", width: 80},
|
||||
{field: "email", title: "邮箱", width: 200},
|
||||
{field: "createTime", title: "创建时间", width: 180},
|
||||
{field: "logins", title: "登录次数", width: 100}
|
||||
]],
|
||||
parseData: function (res) {
|
||||
res.data.list.forEach(function (i, j) {
|
||||
var dateTime = new Date(i.u_endtime);
|
||||
i.u_endtime = dateTime.getFullYear() + "-" + dateTime.getMonth() + "-" + dateTime.getDay();
|
||||
});
|
||||
return {
|
||||
"code": res.code,
|
||||
"count": res.data.count,
|
||||
"data": res.data.list
|
||||
}
|
||||
}
|
||||
// parseData: function (res) {
|
||||
// res.data.list.forEach(function (i, j) {
|
||||
// var dateTime = new Date(i.u_endtime);
|
||||
// i.u_endtime = dateTime.getFullYear() + "-" + dateTime.getMonth() + "-" + dateTime.getDay();
|
||||
// });
|
||||
// return {
|
||||
// "code": res.code,
|
||||
// "count": res.data.count,
|
||||
// "data": res.data.list
|
||||
// }
|
||||
// }
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -262,7 +262,7 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () {
|
|||
"壮三山五岳，叠古风姿；九经三史，彰现华韵。<br/>" +
|
||||
"豪客泼墨，贤士铺卷，放歌九州富丽妍。<br/>" +
|
||||
"泰山脊，领风骚环宇，有谁堪比？<br/>" +
|
||||
"ok-admin v2.0 祝您国庆节快乐！<br/>祝福伟大的祖国，越来越强大。<br/>祖国强大的祖国，一直屹立于世界东方！(^し^)";
|
||||
"ok-admin v2.0 祝您国庆节快乐！<br/>祝福伟大的祖国，越来越强大。<br/>祝福强大的祖国，一直屹立于世界东方！(^し^)";
|
||||
} else {
|
||||
content = "ok-admin v2.0上线啦(^し^)<br/>" +
|
||||
"在此郑重承诺该模板<span style='color:#5cb85c'>永久免费</span>为大家提供<br/>" +
|
||||
|
|
@ -300,6 +300,13 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () {
|
|||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 弹窗皮肤
|
||||
*/
|
||||
$("#alertSkin").click(function () {
|
||||
okLayer.open("皮肤动画", "pages/system/alertSkin.html", "50%", "45%", function (layero) {}, function () {});
|
||||
});
|
||||
|
||||
/**
|
||||
* 退出操作
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
"use strict";
|
||||
layui.define(["layer"], function (exports) {
|
||||
var okLayer = {
|
||||
let okLayer = {
|
||||
/**
|
||||
* confirm()函数二次封装
|
||||
* @param content
|
||||
* @param yesFunction
|
||||
*/
|
||||
confirm: function (content, yesFunction) {
|
||||
var options = {skin: okLayer.skinChoose(), icon: 3, title: "提示", anim: okLayer.animChoose()};
|
||||
let options = {skin: okLayer.skinChoose(), icon: 3, title: "提示", anim: okLayer.animChoose()};
|
||||
layer.confirm(content, options, yesFunction);
|
||||
},
|
||||
/**
|
||||
|
|
@ -17,7 +17,7 @@ layui.define(["layer"], function (exports) {
|
|||
* @param width
|
||||
* @param height
|
||||
* @param successFunction
|
||||
* @param endFunction
|
||||
* @param endFunction
|
||||
*/
|
||||
open: function (title, content, width, height, successFunction, endFunction) {
|
||||
layer.open({
|
||||
|
|
@ -30,7 +30,7 @@ layui.define(["layer"], function (exports) {
|
|||
content: content,
|
||||
zIndex: layer.zIndex,
|
||||
skin: okLayer.skinChoose(),
|
||||
success: successFunction,
|
||||
success: successFunction,
|
||||
end: endFunction
|
||||
});
|
||||
},
|
||||
|
|
@ -42,37 +42,37 @@ layui.define(["layer"], function (exports) {
|
|||
time: 1000,
|
||||
// 绿色勾
|
||||
greenTick: function (content, callbackFunction) {
|
||||
var options = {icon: 1, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 1, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
},
|
||||
// 红色叉
|
||||
redCross: function (content, callbackFunction) {
|
||||
var options = {icon: 2, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 2, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
},
|
||||
// 黄色问号
|
||||
yellowQuestion: function (content, callbackFunction) {
|
||||
var options = {icon: 3, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 3, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
},
|
||||
// 灰色锁
|
||||
grayLock: function (content, callbackFunction) {
|
||||
var options = {icon: 4, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 4, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
},
|
||||
// 红色哭脸
|
||||
redCry: function (content, callbackFunction) {
|
||||
var options = {icon: 5, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 5, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
},
|
||||
// 绿色笑脸
|
||||
greenLaugh: function (content, callbackFunction) {
|
||||
var options = {icon: 6, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 6, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
},
|
||||
// 黄色感叹号
|
||||
yellowSigh: function (content, callbackFunction) {
|
||||
var options = {icon: 7, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 7, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
}
|
||||
},
|
||||
|
|
@ -81,8 +81,8 @@ layui.define(["layer"], function (exports) {
|
|||
* @returns {string}
|
||||
*/
|
||||
skinChoose: function () {
|
||||
var storage = window.localStorage;
|
||||
var skin = storage.getItem("skin");
|
||||
let storage = window.localStorage;
|
||||
let skin = storage.getItem("skin");
|
||||
if (skin == 1) {
|
||||
// 灰白色
|
||||
return "";
|
||||
|
|
@ -94,7 +94,7 @@ layui.define(["layer"], function (exports) {
|
|||
return "layui-layer-lan";
|
||||
} else if (!skin || skin == 4) {
|
||||
// 随机颜色
|
||||
var skinArray = ["", "layui-layer-molv", "layui-layer-lan"];
|
||||
var skinArray = ["", "layui-layer-molv", "layui-layer-lan"];
|
||||
return skinArray[Math.floor(Math.random() * skinArray.length)];
|
||||
}
|
||||
},
|
||||
|
|
@ -103,11 +103,11 @@ layui.define(["layer"], function (exports) {
|
|||
* @returns {number}
|
||||
*/
|
||||
animChoose: function () {
|
||||
var storage = window.localStorage;
|
||||
var anim = storage.getItem("anim");
|
||||
var animArray = ["0", "1", "2", "3", "4", "5", "6"];
|
||||
let storage = window.localStorage;
|
||||
let anim = storage.getItem("anim");
|
||||
let animArray = ["0", "1", "2", "3", "4", "5", "6"];
|
||||
if (animArray.indexOf(anim) > -1) {
|
||||
// 用户选择的动画
|
||||
// 用户选择的动画
|
||||
return anim;
|
||||
} else if (!anim || anim == 7) {
|
||||
// 随机动画
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ layui.define([], function(exprots) {
|
|||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/menu/list"
|
||||
},
|
||||
user: {
|
||||
list: "https://www.easy-mock.com/mock/5d5d0dd46cfcbd1b8627bf1d/ok-admin-v2.0/user/list",
|
||||
list: "http://rap2api.taobao.org/app/mock/233041/user/list",
|
||||
list2: "https://www.easy-mock.com/mock/5d5d0dd46cfcbd1b8627bf1d/ok-admin-v2.0/user/list2",
|
||||
batchNormal: "https://www.easy-mock.com/mock/5d5d0dd46cfcbd1b8627bf1d/ok-admin-v2.0/user/batchNormal",
|
||||
batchStop: "https://www.easy-mock.com/mock/5d5d0dd46cfcbd1b8627bf1d/ok-admin-v2.0/user/batchStop",
|
||||
|
|
|
|||
|
|
@ -133,6 +133,32 @@ layui.define(["layer"], function (exprots) {
|
|||
if (new RegExp("(" + k + ")").test(fmt))
|
||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||||
return fmt;
|
||||
},
|
||||
number: {
|
||||
/**
|
||||
* 判断是否为一个正常的数字
|
||||
* @param num
|
||||
*/
|
||||
isNumber: function (num) {
|
||||
if (num && !isNaN(num)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* 判断一个数字是否包括在某个范围
|
||||
* @param num
|
||||
* @param begin
|
||||
* @param end
|
||||
*/
|
||||
isNumberWith: function (num, begin, end) {
|
||||
if (this.isNumber(num)) {
|
||||
if (num >= begin && num <= end) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
exprots("okUtils", okUtils);
|
||||
|
|
|
|||
|
|
@ -105,11 +105,12 @@
|
|||
<!--js逻辑-->
|
||||
<script src="../../lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
|
||||
var form = layui.form;
|
||||
var laydate = layui.laydate;
|
||||
var okLayer = layui.okLayer;
|
||||
var okUtils = layui.okUtils;
|
||||
layui.use(["element", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
|
||||
let form = layui.form;
|
||||
let laydate = layui.laydate;
|
||||
let okLayer = layui.okLayer;
|
||||
let okUtils = layui.okUtils;
|
||||
let okMock = layui.okMock;
|
||||
|
||||
laydate.render({elem: "#birthday", type: "datetime"});
|
||||
|
||||
|
|
@ -118,7 +119,7 @@
|
|||
});
|
||||
|
||||
form.on("submit(add)", function (data) {
|
||||
okUtils.ajax(okUtils.mockApi.user.add, "post", data.field).done(function (response) {
|
||||
okUtils.ajax(okMock.api.user.add, "post", data.field, true).done(function (response) {
|
||||
console.log(response);
|
||||
okLayer.msg.greenTick("添加成功", function () {
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
|
|
|
|||
|
|
@ -22,9 +22,9 @@
|
|||
<!--模糊搜索区域-->
|
||||
<div class="layui-row">
|
||||
<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="endTime">
|
||||
<input class="layui-input" placeholder="请输入用户名" autocomplete="off">
|
||||
<input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
|
||||
<input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
|
||||
<input class="layui-input" placeholder="账号" autocomplete="off" name="username">
|
||||
<button class="layui-btn" lay-submit="" lay-filter="search">
|
||||
<i class="layui-icon"></i>
|
||||
</button>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
size: "sm",
|
||||
cols: [[
|
||||
{type: "checkbox", fixed: "left"},
|
||||
{field: "guid", title: "GUID", width: 280, sort: true},
|
||||
{field: "id", title: "ID", width: 160, sort: true},
|
||||
{field: "username", title: "账号", width: 100},
|
||||
{field: "password", title: "密码", width: 100},
|
||||
{field: "reallyName", title: "姓名", width: 100},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>皮肤动画</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="../../css/oksub.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="ok-body">
|
||||
<!--面包屑导航区域-->
|
||||
<div class="ok-body-breadcrumb">
|
||||
<span class="layui-breadcrumb">
|
||||
<a><cite>顶部导航</cite></a>
|
||||
<a><cite>皮肤动画</cite></a>
|
||||
</span>
|
||||
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!--form表单-->
|
||||
<form class="layui-form ok-form" lay-filter="filter">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">弹窗皮肤</label>
|
||||
<div class="layui-input-block" id="skin">
|
||||
<input type="radio" name="skin" value="1" title="灰白色">
|
||||
<input type="radio" name="skin" value="2" title="墨绿色">
|
||||
<input type="radio" name="skin" value="3" title="天蓝色">
|
||||
<input type="radio" name="skin" value="4" title="随机" checked>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">弹窗动画</label>
|
||||
<div class="layui-input-block" id="anim">
|
||||
<input type="radio" name="anim" value="0" title="平滑放大">
|
||||
<input type="radio" name="anim" value="1" title="从上掉落">
|
||||
<input type="radio" name="anim" value="2" title="从底部往上滑入">
|
||||
<input type="radio" name="anim" value="3" title="从左滑入">
|
||||
<input type="radio" name="anim" value="4" title="从左翻滚">
|
||||
<input type="radio" name="anim" value="5" title="渐显">
|
||||
<input type="radio" name="anim" value="6" title="抖动">
|
||||
<input type="radio" name="anim" value="7" title="随机" checked>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!--js逻辑-->
|
||||
<script src="../../lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(["element", "form", "okLayer", "okUtils"], function () {
|
||||
let form = layui.form;
|
||||
let $ = layui.jquery;
|
||||
let okLayer = layui.okLayer;
|
||||
let okUtils = layui.okUtils;
|
||||
|
||||
// 单选框控件默认选中
|
||||
let storage = window.localStorage;
|
||||
let skin = storage.getItem("skin");
|
||||
let anim = storage.getItem("anim");
|
||||
let _skin = okUtils.number.isNumberWith(skin, 1, 4) ? skin : 4;
|
||||
$("#skin").find("input").each(function () {
|
||||
let val = $(this).val();
|
||||
if (val == _skin) {
|
||||
$(this).prop("checked", true);
|
||||
}
|
||||
});
|
||||
|
||||
let _anim = okUtils.number.isNumberWith(anim, 0, 7) ? anim : 7;
|
||||
$("#anim").find("input").each(function () {
|
||||
let val = $(this).val();
|
||||
if (val == _anim) {
|
||||
$(this).prop("checked", true);
|
||||
}
|
||||
});
|
||||
|
||||
form.render()
|
||||
|
||||
form.on("submit(edit)", function (data) {
|
||||
// 持久化skin和anim
|
||||
let storage = window.localStorage;
|
||||
storage.skin = data.field.skin;
|
||||
storage.anim = data.field.anim;
|
||||
okLayer.msg.greenTick("设置成功", function () {
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
return false;
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue