条件布局适配

develop
就眠仪式 2020-08-12 00:33:07 +08:00
parent 1dc3d23585
commit c3bfcbad63
5 changed files with 322 additions and 253 deletions

View File

@ -20,33 +20,34 @@
<div class="layui-card-body"> <div class="layui-card-body">
<form class="layui-form" action=""> <form class="layui-form" action="">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">用户名</label> <div class="layui-form-item layui-inline">
<div class="layui-input-inline"> <label class="layui-form-label">用户名</label>
<input type="text" name="realName" placeholder="" class="layui-input"> <div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div> </div>
<label class="layui-form-label">账号</label> <div class="layui-form-item layui-inline">
<div class="layui-input-inline"> <label class="layui-form-label">性别</label>
<input type="text" name="organizationname" placeholder="" class="layui-input"> <div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div> </div>
<label class="layui-form-label">地点</label> <div class="layui-form-item layui-inline">
<div class="layui-input-inline"> <label class="layui-form-label">邮箱</label>
<select name="city" lay-verify="required"> <div class="layui-input-inline">
<option value=""></option> <input type="text" name="realName" placeholder="" class="layui-input">
<option value="0">北京</option> </div>
<option value="1">上海</option> </div>
<option value="2">广州</option> <div class="layui-form-item layui-inline">
<option value="3">深圳</option> <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<option value="4">杭州</option> <i class="layui-icon layui-icon-search"></i>
</select> 查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div> </div>
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="organization-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div> </div>
</form> </form>
</div> </div>

View File

@ -51,7 +51,6 @@
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<div class="layui-tab-content"> <div class="layui-tab-content">
<div class="layui-tab-item layui-show"> <div class="layui-tab-item layui-show">
<div class="layui-row layui-col-space10" style="margin: 15px;"> <div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1"> <div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" /> <img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />

View File

@ -9,35 +9,36 @@
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-body"> <div class="layui-card-body">
<form class="layui-form" action=""> <form class="layui-form" action="">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">权限名称</label> <div class="layui-form-item layui-inline">
<div class="layui-input-inline"> <label class="layui-form-label">用户名</label>
<input type="text" name="realName" placeholder="" class="layui-input"> <div class="layui-input-inline">
</div> <input type="text" name="realName" placeholder="" class="layui-input">
<label class="layui-form-label">权限标识</label> </div>
<div class="layui-input-inline"> </div>
<input type="text" name="username" placeholder="" class="layui-input"> <div class="layui-form-item layui-inline">
</div> <label class="layui-form-label">性别</label>
<label class="layui-form-label">地点</label> <div class="layui-input-inline">
<div class="layui-input-inline"> <input type="text" name="realName" placeholder="" class="layui-input">
<select name="city" lay-verify="required"> </div>
<option value=""></option> </div>
<option value="0">北京</option> <div class="layui-form-item layui-inline">
<option value="1">上海</option> <label class="layui-form-label">邮箱</label>
<option value="2">广州</option> <div class="layui-input-inline">
<option value="3">深圳</option> <input type="text" name="realName" placeholder="" class="layui-input">
<option value="4">杭州</option> </div>
</select> </div>
</div> <div class="layui-form-item layui-inline">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query"> <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i> <i class="layui-icon layui-icon-search"></i>
查询 查询
</button> </button>
<button type="reset" class="pear-btn pear-btn-md"> <button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i> <i class="layui-icon layui-icon-refresh"></i>
重置 重置
</button> </button>
</div> </div>
</div>
</form> </form>
</div> </div>
</div> </div>

View File

@ -10,33 +10,34 @@
<div class="layui-card-body"> <div class="layui-card-body">
<form class="layui-form" action=""> <form class="layui-form" action="">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">角色名称</label> <div class="layui-form-item layui-inline">
<div class="layui-input-inline"> <label class="layui-form-label">用户名</label>
<input type="text" name="realName" placeholder="" class="layui-input"> <div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div> </div>
<label class="layui-form-label">角色标识</label> <div class="layui-form-item layui-inline">
<div class="layui-input-inline"> <label class="layui-form-label">性别</label>
<input type="text" name="username" placeholder="" class="layui-input"> <div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div> </div>
<label class="layui-form-label">地点</label> <div class="layui-form-item layui-inline">
<div class="layui-input-inline"> <label class="layui-form-label">邮箱</label>
<select name="city" lay-verify="required"> <div class="layui-input-inline">
<option value=""></option> <input type="text" name="realName" placeholder="" class="layui-input">
<option value="0">北京</option> </div>
<option value="1">上海</option> </div>
<option value="2">广州</option> <div class="layui-form-item layui-inline">
<option value="3">深圳</option> <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<option value="4">杭州</option> <i class="layui-icon layui-icon-search"></i>
</select> 查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div> </div>
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="role-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div> </div>
</form> </form>
</div> </div>

View File

@ -4,39 +4,43 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>用户管理</title> <title>用户管理</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" /> <link rel="stylesheet" href="../../component/pear/css/pear.css" />
<style>
</style>
</head> </head>
<body class="pear-container"> <body class="pear-container">
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-body"> <div class="layui-card-body">
<form class="layui-form" action=""> <form class="layui-form" action="">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">用户名</label> <div class="layui-form-item layui-inline">
<div class="layui-input-inline"> <label class="layui-form-label">用户名</label>
<input type="text" name="realName" placeholder="" class="layui-input"> <div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div> </div>
<label class="layui-form-label">账号</label> <div class="layui-form-item layui-inline">
<div class="layui-input-inline"> <label class="layui-form-label">性别</label>
<input type="text" name="username" placeholder="" class="layui-input"> <div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div> </div>
<label class="layui-form-label">地点</label> <div class="layui-form-item layui-inline">
<div class="layui-input-inline"> <label class="layui-form-label">邮箱</label>
<select name="city" lay-verify="required"> <div class="layui-input-inline">
<option value=""></option> <input type="text" name="realName" placeholder="" class="layui-input">
<option value="0">北京</option> </div>
<option value="1">上海</option> </div>
<option value="2">广州</option> <div class="layui-form-item layui-inline">
<option value="3">深圳</option> <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<option value="4">杭州</option> <i class="layui-icon layui-icon-search"></i>
</select> 查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div> </div>
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div> </div>
</form> </form>
</div> </div>
@ -48,7 +52,7 @@
</div> </div>
<script type="text/html" id="user-toolbar"> <script type="text/html" id="user-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add"> <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i> <i class="layui-icon layui-icon-add-1"></i>
新增 新增
</button> </button>
@ -59,16 +63,16 @@
</script> </script>
<script type="text/html" id="user-bar"> <script type="text/html" id="user-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button> <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button> <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script> </script>
<script type="text/html" id="user-enable"> <script type="text/html" id="user-enable">
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.enable == 0 ? 'true' : 'false' }}"> <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.enable == 0 ? 'true' : 'false' }}">
</script> </script>
<script type="text/html" id="user-sex"> <script type="text/html" id="user-sex">
{{#if (d.sex == 1) { }} {{#if (d.sex == 1) { }}
<span></span> <span></span>
{{# }else if(d.sex == 2){ }} {{# }else if(d.sex == 2){ }}
<span></span> <span></span>
@ -76,7 +80,7 @@
</script> </script>
<script type="text/html" id="user-login"> <script type="text/html" id="user-login">
{{#if (d.login == 0) { }} {{#if (d.login == 0) { }}
<span>在线</span> <span>在线</span>
{{# }else if(d.sex == 1){ }} {{# }else if(d.sex == 1){ }}
<span>离线</span> <span>离线</span>
@ -84,151 +88,214 @@
</script> </script>
<script type="text/html" id="user-createTime"> <script type="text/html" id="user-createTime">
{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}} {{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
</script> </script>
<script src="../../component/layui/layui.js"></script> <script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script> <script src="../../component/pear/pear.js"></script>
<script> <script>
layui.use(['table','form','jquery'],function () { layui.use(['table', 'form', 'jquery'], function() {
let table = layui.table; let table = layui.table;
let form = layui.form; let form = layui.form;
let $ = layui.jquery; let $ = layui.jquery;
let MODULE_PATH = "operate/"; let MODULE_PATH = "operate/";
let cols = [ let cols = [
[ [{
{type:'checkbox'}, type: 'checkbox'
{title: '账号', field: 'username', align:'center', width:100}, },
{title: '姓名', field: 'realName', align:'center'}, {
{title: '性别', field: 'sex', align:'center', width:80, templet:'#user-sex'}, title: '账号',
{title: '电话', field: 'phone', align:'center'}, field: 'username',
{title: '启用', field: 'enable', align:'center', templet:'#user-enable'}, align: 'center',
{title: '登录', field: 'login', align:'center', templet:'#user-login'}, width: 100
{title: '注册', field: 'createTime', align:'center',templet:'#user-createTime'}, },
{title: '操作', toolbar: '#user-bar', align:'center', width:130} {
] title: '姓名',
] field: 'realName',
align: 'center'
},
{
title: '性别',
field: 'sex',
align: 'center',
width: 80,
templet: '#user-sex'
},
{
title: '电话',
field: 'phone',
align: 'center'
},
{
title: '启用',
field: 'enable',
align: 'center',
templet: '#user-enable'
},
{
title: '登录',
field: 'login',
align: 'center',
templet: '#user-login'
},
{
title: '注册',
field: 'createTime',
align: 'center',
templet: '#user-createTime'
},
{
title: '操作',
toolbar: '#user-bar',
align: 'center',
width: 130
}
]
]
table.render({ table.render({
elem: '#user-table', elem: '#user-table',
url: '../../admin/data/user.json', url: '../../admin/data/user.json',
page: true , page: true,
cols: cols , cols: cols,
skin: 'line', skin: 'line',
toolbar: '#user-toolbar', toolbar: '#user-toolbar',
defaultToolbar: [{ defaultToolbar: [{
layEvent: 'refresh', layEvent: 'refresh',
icon: 'layui-icon-refresh', icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports'] }, 'filter', 'print', 'exports']
}); });
table.on('tool(user-table)', function(obj){ table.on('tool(user-table)', function(obj) {
if(obj.event === 'remove'){ if (obj.event === 'remove') {
window.remove(obj); window.remove(obj);
} else if(obj.event === 'edit'){ } else if (obj.event === 'edit') {
window .edit(obj); window.edit(obj);
} }
}); });
table.on('toolbar(user-table)', function(obj){ table.on('toolbar(user-table)', function(obj) {
if(obj.event === 'add'){ if (obj.event === 'add') {
window.add(); window.add();
} else if(obj.event === 'refresh'){ } else if (obj.event === 'refresh') {
window.refresh(); window.refresh();
} else if(obj.event === 'batchRemove'){ } else if (obj.event === 'batchRemove') {
window.batchRemove(obj); window.batchRemove(obj);
} }
}); });
form.on('submit(user-query)', function(data){ form.on('submit(user-query)', function(data) {
table.reload('user-table',{where:data.field}) table.reload('user-table', {
return false; where: data.field
}); })
return false;
});
form.on('switch(user-enable)', function(obj){ form.on('switch(user-enable)', function(obj) {
layer.tips(this.value + ' ' + this.name + ''+ obj.elem.checked, obj.othis); layer.tips(this.value + ' ' + this.name + '' + obj.elem.checked, obj.othis);
}); });
window.add = function(){ window.add = function() {
layer.open({ layer.open({
type: 2, type: 2,
title: '新增', title: '新增',
shade: 0.1, shade: 0.1,
area: ['500px', '400px'], area: ['500px', '400px'],
content: MODULE_PATH + 'add.html' content: MODULE_PATH + 'add.html'
}); });
} }
window.edit = function(obj){ window.edit = function(obj) {
layer.open({ layer.open({
type: 2, type: 2,
title: '修改', title: '修改',
shade: 0.1, shade: 0.1,
area: ['500px', '400px'], area: ['500px', '400px'],
content: MODULE_PATH + 'edit.html' content: MODULE_PATH + 'edit.html'
}); });
} }
window.remove = function(obj){ window.remove = function(obj) {
layer.confirm('确定要删除该用户', {icon: 3, title:'提示'}, function(index){ layer.confirm('确定要删除该用户', {
layer.close(index); icon: 3,
let loading = layer.load(); title: '提示'
$.ajax({ }, function(index) {
url: MODULE_PATH+"remove/"+obj.data['userId'], layer.close(index);
dataType:'json', let loading = layer.load();
type:'delete', $.ajax({
success:function(result){ url: MODULE_PATH + "remove/" + obj.data['userId'],
layer.close(loading); dataType: 'json',
if(result.success){ type: 'delete',
layer.msg(result.msg,{icon:1,time:1000},function(){ success: function(result) {
obj.del(); layer.close(loading);
}); if (result.success) {
}else{ layer.msg(result.msg, {
layer.msg(result.msg,{icon:2,time:1000}); icon: 1,
} time: 1000
} }, function() {
}) obj.del();
}); });
} } else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
window.batchRemove = function(obj){ window.batchRemove = function(obj) {
let data = table.checkStatus(obj.config.id).data; let data = table.checkStatus(obj.config.id).data;
if(data.length === 0){ if (data.length === 0) {
layer.msg("未选中数据",{icon:3,time:1000}); layer.msg("未选中数据", {
return false; icon: 3,
} time: 1000
let ids = ""; });
for(let i = 0;i<data.length;i++){ return false;
ids += data[i].userId+","; }
} let ids = "";
ids = ids.substr(0,ids.length-1); for (let i = 0; i < data.length; i++) {
layer.confirm('确定要删除这些用户', {icon: 3, title:'提示'}, function(index){ ids += data[i].userId + ",";
layer.close(index); }
let loading = layer.load(); ids = ids.substr(0, ids.length - 1);
$.ajax({ layer.confirm('确定要删除这些用户', {
url: MODULE_PATH+"batchRemove/"+ids, icon: 3,
dataType:'json', title: '提示'
type:'delete', }, function(index) {
success:function(result){ layer.close(index);
layer.close(loading); let loading = layer.load();
if(result.success){ $.ajax({
layer.msg(result.msg,{icon:1,time:1000},function(){ url: MODULE_PATH + "batchRemove/" + ids,
table.reload('user-table'); dataType: 'json',
}); type: 'delete',
}else{ success: function(result) {
layer.msg(result.msg,{icon:2,time:1000}); layer.close(loading);
} if (result.success) {
} layer.msg(result.msg, {
}) icon: 1,
}); time: 1000
} }, function() {
table.reload('user-table');
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
window.refresh = function(param){ window.refresh = function(param) {
table.reload('user-table'); table.reload('user-table');
} }
}) })
</script> </script>
</body> </body>
</html> </html>