条件布局适配

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,26 +20,26 @@
<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">
<div class="layui-form-item layui-inline">
<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"> <input type="text" name="realName" placeholder="" class="layui-input">
</div> </div>
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="organizationname" placeholder="" class="layui-input">
</div> </div>
<label class="layui-form-label">地点</label> <div class="layui-form-item layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline"> <div class="layui-input-inline">
<select name="city" lay-verify="required"> <input type="text" name="realName" placeholder="" class="layui-input">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div> </div>
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="organization-query"> </div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</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">
<i class="layui-icon layui-icon-search"></i> <i class="layui-icon layui-icon-search"></i>
查询 查询
</button> </button>
@ -48,6 +48,7 @@
重置 重置
</button> </button>
</div> </div>
</div>
</form> </form>
</div> </div>
</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

@ -10,25 +10,25 @@
<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">
<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"> <input type="text" name="realName" placeholder="" class="layui-input">
</div> </div>
<label class="layui-form-label">权限标识</label>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="" class="layui-input">
</div> </div>
<label class="layui-form-label">地点</label> <div class="layui-form-item layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline"> <div class="layui-input-inline">
<select name="city" lay-verify="required"> <input type="text" name="realName" placeholder="" class="layui-input">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div> </div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</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>
查询 查询
@ -38,6 +38,7 @@
重置 重置
</button> </button>
</div> </div>
</div>
</form> </form>
</div> </div>
</div> </div>

View File

@ -10,26 +10,26 @@
<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">
<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"> <input type="text" name="realName" placeholder="" class="layui-input">
</div> </div>
<label class="layui-form-label">角色标识</label>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="" class="layui-input">
</div> </div>
<label class="layui-form-label">地点</label> <div class="layui-form-item layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline"> <div class="layui-input-inline">
<select name="city" lay-verify="required"> <input type="text" name="realName" placeholder="" class="layui-input">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div> </div>
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="role-query"> </div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</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">
<i class="layui-icon layui-icon-search"></i> <i class="layui-icon layui-icon-search"></i>
查询 查询
</button> </button>
@ -38,6 +38,7 @@
重置 重置
</button> </button>
</div> </div>
</div>
</form> </form>
</div> </div>
</div> </div>

View File

@ -4,31 +4,34 @@
<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">
<div class="layui-form-item layui-inline">
<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"> <input type="text" name="realName" placeholder="" class="layui-input">
</div> </div>
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="" class="layui-input">
</div> </div>
<label class="layui-form-label">地点</label> <div class="layui-form-item layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline"> <div class="layui-input-inline">
<select name="city" lay-verify="required"> <input type="text" name="realName" placeholder="" class="layui-input">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div> </div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</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>
查询 查询
@ -38,6 +41,7 @@
重置 重置
</button> </button>
</div> </div>
</div>
</form> </form>
</div> </div>
</div> </div>
@ -90,7 +94,7 @@
<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;
@ -98,24 +102,64 @@
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: [{
@ -124,34 +168,36 @@
}, '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', {
where: data.field
})
return false; 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: '新增',
@ -161,7 +207,7 @@
}); });
} }
window.edit = function(obj){ window.edit = function(obj) {
layer.open({ layer.open({
type: 2, type: 2,
title: '修改', title: '修改',
@ -171,61 +217,82 @@
}); });
} }
window.remove = function(obj){ window.remove = function(obj) {
layer.confirm('确定要删除该用户', {icon: 3, title:'提示'}, function(index){ layer.confirm('确定要删除该用户', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index); layer.close(index);
let loading = layer.load(); let loading = layer.load();
$.ajax({ $.ajax({
url: MODULE_PATH+"remove/"+obj.data['userId'], url: MODULE_PATH + "remove/" + obj.data['userId'],
dataType:'json', dataType: 'json',
type:'delete', type: 'delete',
success:function(result){ success: function(result) {
layer.close(loading); layer.close(loading);
if(result.success){ if (result.success) {
layer.msg(result.msg,{icon:1,time:1000},function(){ layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
obj.del(); obj.del();
}); });
}else{ } else {
layer.msg(result.msg,{icon:2,time:1000}); 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("未选中数据", {
icon: 3,
time: 1000
});
return false; return false;
} }
let ids = ""; let ids = "";
for(let i = 0;i<data.length;i++){ for (let i = 0; i < data.length; i++) {
ids += data[i].userId+","; ids += data[i].userId + ",";
} }
ids = ids.substr(0,ids.length-1); ids = ids.substr(0, ids.length - 1);
layer.confirm('确定要删除这些用户', {icon: 3, title:'提示'}, function(index){ layer.confirm('确定要删除这些用户', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index); layer.close(index);
let loading = layer.load(); let loading = layer.load();
$.ajax({ $.ajax({
url: MODULE_PATH+"batchRemove/"+ids, url: MODULE_PATH + "batchRemove/" + ids,
dataType:'json', dataType: 'json',
type:'delete', type: 'delete',
success:function(result){ success: function(result) {
layer.close(loading); layer.close(loading);
if(result.success){ if (result.success) {
layer.msg(result.msg,{icon:1,time:1000},function(){ layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
table.reload('user-table'); table.reload('user-table');
}); });
}else{ } else {
layer.msg(result.msg,{icon:2,time:1000}); layer.msg(result.msg, {
icon: 2,
time: 1000
});
} }
} }
}) })
}); });
} }
window.refresh = function(param){ window.refresh = function(param) {
table.reload('user-table'); table.reload('user-table');
} }
}) })