第二章 项目搭建
三.前端搭建
5.用户功能模块
在page的目录下对应创建smt（系统功能），在smt目录下创建smtRole（用户管理）。其文件下引入三个文件:
edit.html代表创建用户界面
index.html代表主题信息界面
right.html代表角色权限设置界面
1）edit.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="../../../css/public.css" media="all">
<style>
body {
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="layui-form layuimini-form">
<input type="text" name="id" id="editid" value="" class="layui-input layui-hide">
<div class="layui-input-block layui-hide">
<select name="roletype" id="edtroletype" lay-filter="aihao">
<option value="1">系统</option>
<option value="2" selected="">用户</option>
</select>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">角色名称</label>
<div class="layui-input-block">
<input type="text" name="rolename" id="edtrolename" lay-verify="required" lay-reqtext="角色名称不能为空" placeholder="请输入角色名称" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="remark" id="edtremark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" onclick="closeThis();">返回</button>
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</div>
</div>
</div>
<script src="../../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script src="../../../api/serverAddress.js" charset="utf-8"></script>
<script src="../../../js/request.js" charset="utf-8"></script>
<script>
layui.use(['form', 'layer'], function () {
var form = layui.form,
layer = layui.layer,
$ = layui.$;
//监听提交
form.on('submit(saveBtn)', function (data) {
var url;
if (layui.$("#editid").val() !== ""){
url = "/smtRole/update";
}else{
url = "/smtRole/create";
}
var loadIndex = layer.load(2,{shade: [0.3, '#333']});
var options = {
type: "POST",
url: url,
params: data.field,
loginHref: "../../../page/login.html"
}
var res = layui.request.do(options);
layer.close(loadIndex);
if (res == null){
layer.msg("访问服务器失败！", function () { });
return false;
}
if (res.code === 200) {
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layui.table.reload('currentTableId');
parent.layer.close(iframeIndex);
} else {
layer.msg(res.msg, function () {});
}
return false;
});
});
function setValues(data, isEdit){
layui.$("input").val(null);
if (isEdit === true){
var fields = Object.keys(data);
for (var i = 0; i < fields.length; i++) {
var input = layui.$("#edt" + fields[i]);
input.val(data[fields[i]]);
}
}
layui.form.render('select');
};
function closeThis(){
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
};
</script>
</body>
</html>
2）index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="../../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add" id="btnAdd"> 添加</button>
<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete" id="btnDelete"> 删除</button>
</div>
</script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
{{# if(rightValue.substr(2, 1) === "1"){}}
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
{{# } }}
{{# if(rightValue.substr(4, 1) === "1"){}}
<a class="layui-btn layui-btn-xs data-count-delete" lay-event="roleright" title="私有权限">权限</a>
{{# } }}
</script>
</div>
</div>
<script src="../../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../../api/serverAddress.js" charset="utf-8"></script>
<script src="../../../js/request.js" charset="utf-8"></script>
<script src="../../../js/lay-module/treetable-lay/treetable.js" charset="utf-8"></script>
<script>
var rightValue = window.parent.getMenuRightvalue("SmtRole");
// alert(rightValue);
layui.use(['form', 'table'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table;
var tabDelRows = [];
var isToolbarHide = ((rightValue.substr(2, 1) === '0') && (rightValue.substr(4, 1) === '0')) ? true : false;
table.render({
elem: '#currentTableId',
url: baseUrl + '/smtRole/queryAllByLimit',
headers: {token: layui.data('userInfo').data.currentUserToken},
where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
sort: 'rolename' //排序字段
, ordertype: '' //排序方式
},
parseData: function (res) {
if (res.code === 5000) { //token认证错误
layer.msg('当前用户已失效，请重新登录！', function () {
layui.data('userInfo', null);
window.location.href = "../../login.html";
});
}else{
layui.data('userInfo',
{
key: 'data',
value: {'currentUserToken': res.data.newtoken.token, 'currentUserId': res.data.newtoken.id,
'currentUserName': res.data.newtoken.username, 'currentUserCompany':res.data.newtoken.usercompany,
'currentUserCompanyType': res.data.newtoken.usercompanytype, 'currentUserDept':res.data.newtoken.userdept}
});
if (res.code === 200) {
return {
"code": 0, //解析接口状态
"msg": (res.data.total === 0)? "无数据":res.msg, //解析提示文本
"count": res.data.total, //解析数据长度
"data": res.data.data //解析数据列表
};
}
}
},
done:function(res, curr, count){
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].roletype === 1) { //为系统角色
$(".layui-table tr[data-index=" + i + "] input[type='checkbox']").prop('disabled', true);
$(".layui-table tr[data-index=" + i + "] input[type='checkbox']").next().addClass('layui-btn-disabled');
$('.layui-table tr[data-index=' + i + '] input[type="checkbox"]').prop('name', 'caib');
}
}
setRight(rightValue);
},
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type: "checkbox", width: 50, fixed: 'left'},
{field: 'id', width: 80, title: 'ID', hide: true},
{field: 'rolename', width: 200, title: '角色名称', fixed: 'left', sort: true},
{
field: 'roletype', width: 120, title: '角色类型', sort: true, align: "center", templet: function (d) {
return (d.roletype === 1) ? '系统' : '用户'
}
},
{field: 'remark', title: '备注'},
{field: 'edtbyusername', title: '操作人', width: 100},
{field: 'edttime', title: '操作时间', width: 160, sort: true},
{title: '操作', width: 150, toolbar: '#currentTableBar', align: "center", fixed: 'right', hide: isToolbarHide}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true,
autoSort: false,
skin: 'line',
title: '角色表'
});
/**
* toolbar监听事件
*/
table.on('toolbar(currentTableFilter)', function (obj) {
if (obj.event === 'add') { // 监听添加操作
var index = layer.open({
title: '添加角色',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['100%', '100%'],
content: 'edit.html',
success: function (layero, index) {
// var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']];
iframeWin.setValues(null, false);
}
});
$(window).on("resize", function () {
layer.full(index);
});
} else if (obj.event === 'delete') { // 监听删除操作
var checkStatus = table.checkStatus('currentTableId')
, data = checkStatus.data;
if(data.length<=0){
layer.msg('最少选择一行');
return;
}
layer.confirm('真的删除选择行吗？', function (index) {
layer.close(index);
layui.use('layer', function () {
var ids = [];
for (var i = 0; i < data.length; i++) {
ids.push(data[i].id);
}
var loadIndex = layer.load(2, {shade: [0.3, '#333']});
var options = {
type: "POST",
url: "/smtRole/delete",
params: ids,
loginHref: "../../../page/login.html"
}
var res = layui.request.do(options);
if (res == null) {
layer.msg("访问服务器失败！", function () { });
return false;
}
if (res.code === 200) {
//无刷新删除
for (var i=tabDelRows.length-1;i>=0;i--){
tabDelRows[i].del();
tabDelRows.splice(i, 1);
}
} else {
layer.msg(res.msg, function () {
});
}
layer.close(loadIndex);
});
});
}
});
//监听表格复选框选择
table.on('checkbox(currentTableFilter)', function (obj) {
if (obj.checked) {
tabDelRows.push(obj);
}
else {
for (var i = tabDelRows.length - 1; i >= 0; i--) {
if (tabDelRows[i].data.Id === obj.data.Id) {
tabDelRows.splice(i, 1);
break;
}
}
}
});
table.on('tool(currentTableFilter)', function (obj) {
if (obj.event === 'edit') {
var index = layer.open({
title: '编辑角色',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['100%', '100%'],
content: 'edit.html',
success: function (layero, index) {
// var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']];
iframeWin.setValues(obj.data, true);
},
jump: function (obj) {
console.log(obj)
}
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
} else if (obj.event === 'roleright') {
var params = {"roleId": obj.data["id"]};
var options = {
type: "GET",
url: "/smtRole/getRight",
params: params,
loginHref: "../../login.html"
}
var res = layui.request.do(options);
if (res == null) {
layer.msg("访问服务器失败！", function () { });
return false;
}
if (res.code === 200) {
var index = layer.open({
title: '编辑权限【'+ obj.data["rolename"] +'】',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['100%', '100%'],
content: 'right.html',
success: function (layero, index) {
var iframeWin = window[layero.find('iframe')[0]['name']];
iframeWin.setValues("smtRole", obj.data, res.data);
},
jump: function (obj) {
console.log(obj)
}
});
$(window).on("resize", function () {
layer.full(index);
});
}
return false;
}
});
//触发排序事件
table.on('sort(currentTableFilter)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
// console.log(obj.field); //当前排序的字段名
// console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
// console.log(this); //当前排序的 th 对象
//尽管我们的 table 自带排序功能，但并没有请求服务端。
//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
table.reload('currentTableId', {
initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
, where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
sort: obj.field //排序字段
, ordertype: obj.type //排序方式
}
});
// layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
});
setRight(rightValue); //根据权限值设置按钮可用
});
function setRight(rightValue){
if (rightValue.substr(1, 1) === "1")
layui.$("#btnAdd").removeClass("layui-hide");
else
layui.$("#btnAdd").addClass("layui-hide");
if (rightValue.substr(3, 1) === "1")
layui.$("#btnDelete").removeClass("layui-hide");
else
layui.$("#btnDelete").addClass("layui-hide");
}
</script>
</body>
</html>
3）right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="../../../css/public.css" media="all">
<style>
.layui-table-cell {
height:auto;
}
</style>
</head>
<body>
<div class="layuimini-container">
<input type="text" name="rightType" id="edtRightType" value="" class="layui-input layui-hide">
<form class="layui-form" action="" lay-filter="example">
<input type="text" name="id" id="editid" value="" class="layui-input layui-hide">
<div class="layuimini-main">
<script type="text/html" id="tabMenuRightToolbar">
<div class="layui-btn-container">
</div>
</script>
<table class="layui-hide" id="tabMenuRight" lay-filter="tabMenuRightFilter"></table>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" onclick="closeThis();">返回</button>
<button id="btnSave" class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</div>
</form>
</div>
<script src="../../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../../api/serverAddress.js" charset="utf-8"></script>
<script src="../../../js/request.js" charset="utf-8"></script>
<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
layui.use(['form', 'table', 'treetable'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table;
//监听提交
form.on('submit(saveBtn)', function (data) {
tbData = layui.table.cache["tabMenuRight"];
rights = [];
for (var i = 0; i < tbData.length; i++) {
if (tbData[i].parentid === "###") continue;
var roleRight = {};
if (layui.$("#edtRightType").val() === 'smtRole')
roleRight["roleid"] = layui.$("#editid").val();
else
roleRight["userid"] = layui.$("#editid").val();
roleRight["menuid"] = tbData[i].id;
var rightValue = "";
layui.$("input:checkbox[name='chk" + tbData[i].id + "']").each(function () {
rightValue = rightValue + ((layui.$(this)[0]["checked"] === true) ? "1" : "0");
}
);
roleRight["rightvalue"] = rightValue;
rights.push(roleRight);
}
var loadIndex = layer.load(2, {shade: [0.3, '#333']});
var options = {
type: "POST",
url: "/" + layui.$("#edtRightType").val() + "/setRight",
params: rights,
loginHref: "../../../page/login.html"
}
var res = layui.request.do(options);
layer.close(loadIndex);
if (res == null) {
layer.msg("访问服务器失败！", function () {
});
return false;
}
if (res.code === 200) {
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
} else {
layer.msg(res.msg, function () {
});
}
return false;
});
//监听表格复选框选择
table.on('checkbox(tabMenuRightFilter)', function (obj) {
if (obj.type === 'all'){
layui.$("input:checkbox").each(function () {
layui.$(this)[0].checked = obj.checked;
});
}else if (obj.data.parentid === '###'){
tbData = layui.table.cache["tabMenuRight"];
for (var i=0; i<tbData.length; i++){
if (tbData[i].parentid === obj.data.id){
layui.$("input:checkbox[name='chk" + tbData[i].id + "']").each(function () {
layui.$(this)[0].checked = obj.checked;
});
}
}
}else {
layui.$("input:checkbox[name='chk" + obj.data.id + "']").each(function () {
layui.$(this)[0].checked = obj.checked;
});
}
layui.form.render('checkbox');
});
});
function setValues(rightType, data, tabData) {
layui.$("input").val(null);
layui.$("#edtRightType").val(rightType)
var fields = Object.keys(data);
for (var i = 0; i < fields.length; i++) {
var input = layui.$("#edt" + fields[i]);
input.val(data[fields[i]]);
}
if (tabData.is_allright === true) layui.$("#btnSave").addClass("layui-hide");
initTable(tabData.data);
layui.form.render('checkbox');
};
function initTable(menuInfo) {
layui.treetable.render({
elem: '#tabMenuRight',
data: menuInfo,
// data: [],
treeSpid: '###',
treeColIndex: 3, //树形图标显示在第几列
treeIdName: 'id', //id字段的名称
treePidName: 'parentid', //父级节点字段
treeDefaultClose: false, //是否默认折叠
treeLinkage: false, //父级展开时是否自动展开所有子级
toolbar: '#tabMenuRightToolbar',
defaultToolbar: ['exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type: "checkbox", width: 50},
{field: 'id', width: 80, title: 'ID', hide: true},
{field: 'parentid', width: 80, title: 'ParentId', hide: true},
{field: 'menuname', width: 190, title: '菜单名称'},
{
field: 'smtMenuRightitems', title: '权限', templet: function (d) {
var data = '<div class="layui-input-inline">';
for (var i = 0; i < d.smtMenuRightitems.length; i++) {
data = data + '<input type="checkbox" style="align-content: center;" name="chk' + d.id + '" lay-skin="primary"' + (d.smtMenuRightitems[i].ischeck ? ' checked = ""' : ' ') + ' title="      ' + d.smtMenuRightitems[i].itemname + '">  ';
if (i === 10) data = data + '<br/>';
}
data = data + '</div>';
return data;
}
}
]],
done:function(res, curr, count){
// for (var i = 0; i < res.data.length; i++) {
// layui.$('.layui-table tr[data-index=' + i + '] input[type="checkbox"]')[0].prop('name', 'chk' + res.data[i].id);
// }
layui.layer.closeAll('loading'); //关闭加载
},
page: false,
totalRow: true,
skin: 'line',
title: '菜单表'
});
};
function closeThis() {
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
};
</script>
</body>
</html>
557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
