条件布局适配

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>
@ -57,178 +61,241 @@
删除 删除
</button> </button>
</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>
{{# } }} {{# } }}
</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>
{{# } }} {{# } }}
</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'
table.render({ },
elem: '#user-table', {
url: '../../admin/data/user.json', title: '性别',
page: true , field: 'sex',
cols: cols , align: 'center',
skin: 'line', width: 80,
toolbar: '#user-toolbar', templet: '#user-sex'
defaultToolbar: [{ },
layEvent: 'refresh', {
icon: 'layui-icon-refresh', title: '电话',
}, 'filter', 'print', 'exports'] field: 'phone',
}); align: 'center'
},
table.on('tool(user-table)', function(obj){ {
if(obj.event === 'remove'){ title: '启用',
window.remove(obj); field: 'enable',
} else if(obj.event === 'edit'){ align: 'center',
window .edit(obj); templet: '#user-enable'
} },
}); {
title: '登录',
table.on('toolbar(user-table)', function(obj){ field: 'login',
if(obj.event === 'add'){ align: 'center',
window.add(); templet: '#user-login'
} else if(obj.event === 'refresh'){ },
window.refresh(); {
} else if(obj.event === 'batchRemove'){ title: '注册',
window.batchRemove(obj); field: 'createTime',
} align: 'center',
}); templet: '#user-createTime'
},
form.on('submit(user-query)', function(data){ {
table.reload('user-table',{where:data.field}) title: '操作',
return false; toolbar: '#user-bar',
}); align: 'center',
width: 130
form.on('switch(user-enable)', function(obj){ }
layer.tips(this.value + ' ' + this.name + ''+ obj.elem.checked, obj.othis); ]
}); ]
window.add = function(){ table.render({
layer.open({ elem: '#user-table',
type: 2, url: '../../admin/data/user.json',
title: '新增', page: true,
shade: 0.1, cols: cols,
area: ['500px', '400px'], skin: 'line',
content: MODULE_PATH + 'add.html' toolbar: '#user-toolbar',
}); defaultToolbar: [{
} layEvent: 'refresh',
icon: 'layui-icon-refresh',
window.edit = function(obj){ }, 'filter', 'print', 'exports']
layer.open({ });
type: 2,
title: '修改', table.on('tool(user-table)', function(obj) {
shade: 0.1, if (obj.event === 'remove') {
area: ['500px', '400px'], window.remove(obj);
content: MODULE_PATH + 'edit.html' } else if (obj.event === 'edit') {
}); window.edit(obj);
} }
});
window.remove = function(obj){
layer.confirm('确定要删除该用户', {icon: 3, title:'提示'}, function(index){ table.on('toolbar(user-table)', function(obj) {
layer.close(index); if (obj.event === 'add') {
let loading = layer.load(); window.add();
$.ajax({ } else if (obj.event === 'refresh') {
url: MODULE_PATH+"remove/"+obj.data['userId'], window.refresh();
dataType:'json', } else if (obj.event === 'batchRemove') {
type:'delete', window.batchRemove(obj);
success:function(result){ }
layer.close(loading); });
if(result.success){
layer.msg(result.msg,{icon:1,time:1000},function(){ form.on('submit(user-query)', function(data) {
obj.del(); table.reload('user-table', {
}); where: data.field
}else{ })
layer.msg(result.msg,{icon:2,time:1000}); return false;
} });
}
}) form.on('switch(user-enable)', function(obj) {
}); layer.tips(this.value + ' ' + this.name + '' + obj.elem.checked, obj.othis);
} });
window.batchRemove = function(obj){ window.add = function() {
let data = table.checkStatus(obj.config.id).data; layer.open({
if(data.length === 0){ type: 2,
layer.msg("未选中数据",{icon:3,time:1000}); title: '新增',
return false; shade: 0.1,
} area: ['500px', '400px'],
let ids = ""; content: MODULE_PATH + 'add.html'
for(let i = 0;i<data.length;i++){ });
ids += data[i].userId+","; }
}
ids = ids.substr(0,ids.length-1); window.edit = function(obj) {
layer.confirm('确定要删除这些用户', {icon: 3, title:'提示'}, function(index){ layer.open({
layer.close(index); type: 2,
let loading = layer.load(); title: '修改',
$.ajax({ shade: 0.1,
url: MODULE_PATH+"batchRemove/"+ids, area: ['500px', '400px'],
dataType:'json', content: MODULE_PATH + 'edit.html'
type:'delete', });
success:function(result){ }
layer.close(loading);
if(result.success){ window.remove = function(obj) {
layer.msg(result.msg,{icon:1,time:1000},function(){ layer.confirm('确定要删除该用户', {
table.reload('user-table'); icon: 3,
}); title: '提示'
}else{ }, function(index) {
layer.msg(result.msg,{icon:2,time:1000}); layer.close(index);
} let loading = layer.load();
} $.ajax({
}) url: MODULE_PATH + "remove/" + obj.data['userId'],
}); dataType: 'json',
} type: 'delete',
success: function(result) {
window.refresh = function(param){ layer.close(loading);
table.reload('user-table'); if (result.success) {
} layer.msg(result.msg, {
}) icon: 1,
time: 1000
}, function() {
obj.del();
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
window.batchRemove = function(obj) {
let data = table.checkStatus(obj.config.id).data;
if (data.length === 0) {
layer.msg("未选中数据", {
icon: 3,
time: 1000
});
return false;
}
let ids = "";
for (let i = 0; i < data.length; i++) {
ids += data[i].userId + ",";
}
ids = ids.substr(0, ids.length - 1);
layer.confirm('确定要删除这些用户', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "batchRemove/" + ids,
dataType: 'json',
type: 'delete',
success: function(result) {
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) {
table.reload('user-table');
}
})
</script> </script>
</body> </body>
</html> </html>