<!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="/layui/css/layui.css">
<link rel="stylesheet" href="/css/scroll-bar.css">
<link rel="stylesheet" href="/css/sub-page.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_693759_dgsnpaj0hzk.css">
<link rel="stylesheet" href="/css/nprogress.css">
<style>
#city_1 select{
height: 38px;
line-height: 38px;
border-width: 1px;
border-style: solid;
background-color: #fff;
border-radius: 2px;
border-color: #e4dddd;
width: 192px;
margin-right: 4px;
}
</style>
</head>
<body>
<div class="ok-body">
<!--模糊搜索区域-->
<div class="layui-row ">
<div class="layui-form layui-col-md12 ok-search">
<input class="layui-input" placeholder="账号" autocomplete="off" id="username">
<input class="layui-input" placeholder="手机号" autocomplete="off" id="mdn" >
<input class="layui-input" placeholder="真实姓名" autocomplete="off" id="realname">
<button class="layui-btn layui-btn-normal" data-type="reload">
精确查询
</button>
</div>
</div>
<div class="layui-form-item layui-form" style="margin-top:20px">
<div class="layui-input-inline">
<select name="interest" lay-filter="aihao" placeholder="用户角色" id="roleld">
<option value="1">集团管理员</option>
<option value="2">省级管理员</option>
<option value="3">市级管理员</option>
<option value="4">待定</option>
</select>
</div>
<div class="layui-input-inline" id="city_1" style="width:auto">
<select class="prov"id="province" placeholder="所属省份" lay-ignore></select>
<select class="city" id="city" placeholder="所属地市" lay-ignore></select>
</div>
<button class="layui-btn layui-btn-normal" data-type="reload1" id="batch">
批量查询
</button>
</div>
<div class="layui-row">
<button data-method="offset" class="layui-btn layui-btn-normal" type="button" id="addRole">角色权限设置</button>
</div>
<!--数据表格-->
<div class="tablebox tableOne" >
<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--数据表格-->
<div class="tablebox tableTwo" style="display:none">
<table class="layui-hide" id="tableSr" lay-filter="tableRoles" ></table>
</div>
</div>
<!--js逻辑-->
<script type="text/javascript" src="/layui/layui.js"></script>
<script src="/js/nprogress.js"></script>
<script src="/js/jquery-2.1.0.js"></script>
<script src="/js/jquery.cityselect.js"></script>
<script>
NProgress.start();
window.onload = function () {
NProgress.done();
}
layui.use(['element', 'table', 'form', 'jquery', 'laydate'], function () {
var element = layui.element;
var table = layui.table;
var form = layui.form;
var $ = layui.jquery;
table.render({
elem: '#tableId',
url: '/role/findRoles',
limit: 10,
page: true,
height:480,
cols: [
[
{type: 'checkbox'},
{field: 'userName', title: '账号', width: 150, sort: true},
{field: 'userPhone', title: '注册手机号', width: 150},
{field: 'userEmail', title: '注册邮箱号', width: 150},
{field: 'role', title: '角色', width: 100},
{field: 'userProvince', title: '所属省份', width: 150},
{field: 'userCity', title: '所属地市', width: 150},
{title: '操作', width: 80, templet: '#operationTpl', align: 'center'}
]
],
done: function (res, curr, count) {
$("#countNum").text(count);
}
});
table.render({
elem: '#tableSr',
limit: 10,
page: true,
height:480,
cols: [
[
{type: 'checkbox'},
{field: 'userName', title: '账号', width: 150, sort: true},
{field: 'userPhone', title: '注册手机号', width: 150},
{field: 'userEmail', title: '注册邮箱号', width: 150},
{field: 'role', title: '角色', width: 100},
{field: 'userProvince', title: '所属省份', width: 150},
{field: 'userCity', title: '所属地市', width: 150},
{title: '操作', width: 80, templet: '#operationTpl', align: 'center'}
]
],
done: function (res, curr, count) {
$("#countNum").text(count);
}
});
//精确查询
(function(){
var $ = layui.$, active = {
reload: function(){
var userName = $('#username').val();
var userMdn = $('#mdn').val();
var realName = $('#realname').val();
table.reload('tableId', {
where:{
username:userName,
mdn:userMdn,
realname:realName
}
});
},
};
$('.ok-search .layui-btn').on('click', function(){
$(".tableOne").addClass("show");
$(".tableTwo").addClass("hide");
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
})();
(function(){
var $ = layui.$, active = {
reload1: function(){
var roleId = $('#roleld').val();
var userProvince = $('#province').val();
var realCity = $('#city').val();
table.reload('tableSr', {
url: '/role/searchRoles',
where:{
roleId:roleId,
province:userProvince,
city:realCity
}
});
}
};
$('#batch').on('click', function(){
$(".tableOne").addClass("hide");
$(".tableTwo").addClass("show");
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
})();
//用户角色审批
table.on('tool(tableFilter)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'edit') {
json = JSON.stringify(data);
layer.open({
title: '用户角色审批',
type: 2,
shade: false,
maxmin: true,
shade: 0.5,
area: ['50%', '90%'],
content: 'roleEdit',
zIndex: layer.zIndex,
success : function(layero, index){
var body = layui.layer.getChildFrame('body', index);
},
end: function () {
$(".layui-laypage-btn")[0].click();
}
});
}
});
//角色权限编辑
$("#addRole").click(function () {
layer.open({
title: '角色权限编辑',
type: 2,
shade: false,
maxmin: true,
shade: 0.5,
anim: 4,
area: ['50%', '90%'],
content: 'roleAdd',
zIndex: layer.zIndex,
end: function () {
$(".layui-laypage-btn")[0].click();
}
});
})
//省市
$(function() {
$("#city_1").citySelect({
nodata: "none",
required: false
});
});
})
</script>
<!--模板-->
<script type="text/html" id="operationTpl">
<a href="javascript:;" title="用户角色审批" lay-event="edit"><i class="iconfont icon-jiaoseshouquan"></i></a>
</script>
</body>
</html>
相关文章：