Skip to content

G
guns-vip
Commit ac7e9916 by fengshuonan
Options

修改用户管理表单的样式

parent 1474f47c
Showing with 291 additions and 148 deletions
guns-base-support/guns-sys/src/main/webapp/assets/common/js/common.js
......@@ -85,6 +85,24 @@ Feng.zTreeCheckedNodes = function (zTreeId) {
Feng.closeAllLoading = function () {
layer.closeAll('loading');
};
Feng.getClientHeight = function () {
let clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
} else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
return clientHeight;
};
Feng.getClientHeightPx = function () {
let clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
} else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
return clientHeight + 'px';
};
// 以下代码是配置layui扩展模块的目录，每个页面都需要引入
layui.config({
......
guns-base-support/guns-sys/src/main/webapp/assets/expand/css/form.css 0 → 100644
/*表单页面*/
.layui-form-item {
margin-bottom: 0;
margin-top: 20px;
}
.layui-form-item .layui-inline {
margin-bottom: 25px;
margin-right: 0;
}
.form-group-bottom {
z-index: 9999;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #F2F2F2;
padding: 10px 20px;
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
}
.layui-card-body {
padding-right: 55px;
}
\ No newline at end of file
guns-base-support/guns-sys/src/main/webapp/assets/modular/system/user/user.js
......@@ -64,6 +64,7 @@ layui.use(['layer', 'form', 'table', 'ztree', 'laydate', 'admin', 'ax'], functio
MgrUser.openAddUser = function () {
admin.putTempData('formOk', false);
top.layui.admin.open({
area: ['1000px', Feng.getClientHeightPx()],
type: 2,
title: '添加用户',
content: Feng.ctxPath + '/mgr/user_add',
......@@ -74,6 +75,24 @@ layui.use(['layer', 'form', 'table', 'ztree', 'laydate', 'admin', 'ax'], functio
};
/**
* 点击编辑用户按钮时
*
* @param data 点击按钮时候的行数据
*/
MgrUser.onEditUser = function (data) {
admin.putTempData('formOk', false);
top.layui.admin.open({
area: ['1000px', Feng.getClientHeightPx()],
type: 2,
title: '编辑用户',
content: Feng.ctxPath + '/mgr/user_edit?userId=' + data.userId,
end: function () {
admin.getTempData('formOk') && table.reload(MgrUser.tableId);
}
});
};
/**
* 导出excel按钮
*/
MgrUser.exportExcel = function () {
......@@ -86,15 +105,6 @@ layui.use(['layer', 'form', 'table', 'ztree', 'laydate', 'admin', 'ax'], functio
};
/**
* 点击编辑用户按钮时
*
* @param data 点击按钮时候的行数据
*/
MgrUser.onEditUser = function (data) {
window.location.href = Feng.ctxPath + "/mgr/user_edit?userId=" + data.userId;
};
/**
* 点击删除用户按钮
*
* @param data 点击按钮时候的行数据
......@@ -204,8 +214,7 @@ layui.use(['layer', 'form', 'table', 'ztree', 'laydate', 'admin', 'ax'], functio
// 添加按钮点击事件
$('#btnAdd').click(function () {
//MgrUser.openAddUser();
window.location.href = Feng.ctxPath + "/mgr/user_add";
MgrUser.openAddUser();
});
// 导出excel
......
guns-base-support/guns-sys/src/main/webapp/assets/modular/system/user/user_add.js
......@@ -29,7 +29,6 @@ layui.use(['layer', 'form', 'admin', 'laydate', 'ax', 'formSelects'], function (
area: ['300px', '400px'],
content: Feng.ctxPath + '/system/commonTree?formName=' + formName + "&formId=" + formId + "&treeUrl=" + treeUrl,
end: function () {
console.log(UserInfoDlg.data);
$("#deptId").val(UserInfoDlg.data.deptId);
$("#deptName").val(UserInfoDlg.data.deptName);
}
......@@ -55,7 +54,12 @@ layui.use(['layer', 'form', 'admin', 'laydate', 'ax', 'formSelects'], function (
form.on('submit(btnSubmit)', function (data) {
var ajax = new $ax(Feng.ctxPath + "/mgr/add", function (data) {
Feng.success("添加成功！");
window.location.href = Feng.ctxPath + "/mgr";
//传给上个页面，刷新table用
admin.putTempData('formOk', true);
//关掉对话框
admin.closeThisDialog();
}, function (data) {
Feng.error("添加失败！" + data.responseJSON.message)
......@@ -67,11 +71,6 @@ layui.use(['layer', 'form', 'admin', 'laydate', 'ax', 'formSelects'], function (
return false;
});
//返回按钮
$("#backupPage").click(function () {
window.location.href = Feng.ctxPath + "/mgr";
});
//初始化所有的职位列表
formSelects.config('selPosition', {
searchUrl: Feng.ctxPath + "/position/listPositions",
......
guns-base-support/guns-sys/src/main/webapp/assets/modular/system/user/user_edit.js
......@@ -61,8 +61,11 @@ layui.use(['layer', 'form', 'admin', 'laydate', 'ax', 'formSelects'], function (
var ajax = new $ax(Feng.ctxPath + "/mgr/edit", function (data) {
Feng.success("修改成功！");
//跳转列表页面并刷新
window.location.href = Feng.ctxPath + "/mgr";
//传给上个页面，刷新table用
admin.putTempData('formOk', true);
//关掉对话框
admin.closeThisDialog();
}, function (data) {
Feng.error("修改失败！" + data.responseJSON.message)
......@@ -73,11 +76,6 @@ layui.use(['layer', 'form', 'admin', 'laydate', 'ax', 'formSelects'], function (
return false;
});
//返回按钮
$("#backupPage").click(function () {
window.location.href = Feng.ctxPath + "/mgr";
});
//初始化所有的职位列表
formSelects.config('selPosition', {
searchUrl: Feng.ctxPath + "/position/listPositions?userId=" + $("#userId").val(),
......
guns-base-support/guns-sys/src/main/webapp/pages/common/_form.html 0 → 100644
<!DOCTYPE html>
<html class="${bg!}">
@/**
@ * 本页面所用的模板变量
@ *
@ * title : 页面的标题
@ * layoutContent : 主页面的html内容
@ * js : 业务所需要的js，为数组
@ * css : 业务所需要的css，为数组
@ * bg : 背景颜色
@ * plugins : 需要用到的插件，目前有["ztree"]
@ **/
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>${title!"管理系统"}</title>
<link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
<link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}" media="all"/>
<link rel="stylesheet" href="${ctxPath}/assets/expand/css/form.css?v=${constants.getReleaseVersion()}" media="all"/>
<!--其他插件css-->
@if(isNotEmpty(plugins)){
@if(array.contain(plugins,"ztree")){
<link href="${ctxPath}/assets/expand/plugins/ztree/zTreeStyle.css?v=${constants.getReleaseVersion()}" rel="stylesheet" type="text/css" />
@}
@}
@/* 其他业务用的css */
@if(isNotEmpty(css)){
@for(item in css){
@if(strutil.startWith(item,"/")){
@item = ctxPath + item;
@}
<link href="${item}?v=${constants.getReleaseVersion()}" rel="stylesheet" type="text/css" />
@}
@}
</head>
<body>
@/* 页面加载loading */
@ include("/common/loading.html"){}
@/* 正文 */
${layoutContent}
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
var Feng = {
ctxPath: "${ctxPath}",
version: '${constants.getReleaseVersion()}'
};
</script>
@/* js和业务用的js数组 */
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
<!--其他插件js-->
@if(isNotEmpty(plugins)){
@if(array.contain(plugins,"ztree")){
<script src="${ctxPath}/assets/expand/plugins/jquery/jquery-3.2.1.min.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/expand/plugins/ztree/jquery.ztree.all.min.js?v=${constants.getReleaseVersion()}"></script>
@}
@}
@if(isNotEmpty(js)){
@for(item in js){
@if(strutil.startWith(item,"/")){
@item = ctxPath + item;
@}
<script src="${item}?v=${constants.getReleaseVersion()}"></script>
@}
@}
</body>
</html>
\ No newline at end of file
guns-base-support/guns-sys/src/main/webapp/pages/modular/system/user/user_add.html
@layout("/common/_container.html",{js:["/assets/modular/system/user/user_add.js"],css:["/assets/common/module/formSelects/formSelects-v4.css"]}){
<div class="layui-body-header">
<span class="layui-body-header-title">用户管理-添加</span>
</div>
@layout("/common/_form.html",{js:["/assets/modular/system/user/user_add.js"],css:["/assets/common/module/formSelects/formSelects-v4.css"]}){
<div class="layui-fluid " style="">
<div class="layui-card">
<div class="layui-card-body">
<form id="userForm" lay-filter="userForm" class="layui-form model-form" style="max-width: 700px;margin: 40px auto;">
<input name="userId" type="hidden"/>
<div class="layui-form-item">
<label class="layui-form-label">账号<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="account" placeholder="请输入账号" type="text" class="layui-input" lay-verify="required" required/>
<form class="layui-form" id="userForm" lay-filter="userForm">
<div class="layui-fluid" style="padding-bottom: 75px;">
<div class="layui-card">
<div class="layui-card-header">基本信息</div>
<div class="layui-card-body">
<div class="layui-form-item layui-row">
<input name="userId" type="hidden"/>
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">账号<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="account" placeholder="请输入账号" type="text" class="layui-input" lay-verify="required" required/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="name" placeholder="请输入姓名" type="text" class="layui-input" lay-verify="required" required/>
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">姓名<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="name" placeholder="请输入姓名" type="text" class="layui-input" lay-verify="required" required/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-block">
<input id="birthday" name="birthday" placeholder="请输入生日" type="text" class="layui-input" autocomplete="off"/>
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-block">
<input id="birthday" name="birthday" placeholder="请输入生日" type="text" class="layui-input date-icon" autocomplete="off"/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="password" placeholder="请输入密码" type="password" class="layui-input" lay-verify="required|psw" autocomplete="new-password" required/>
<div class="layui-inline layui-col-md6">
<label class="layui-form-label">密码<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="password" placeholder="请输入密码" type="password" class="layui-input" lay-verify="required|psw" autocomplete="new-password" required/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">重复密码<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="rePassword" placeholder="请输入重复密码" type="password" class="layui-input" autocomplete="new-password" lay-verify="required|repsw" required/>
<div class="layui-inline layui-col-md6">
<label class="layui-form-label">重复密码<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="rePassword" placeholder="请输入重复密码" type="password" class="layui-input" autocomplete="new-password" lay-verify="required|repsw" required/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="email" placeholder="请输入邮箱" type="text" class="layui-input" lay-verify="required|email" autocomplete="off" required/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="M" title="男" checked/>
<input type="radio" name="sex" value="F" title="女"/>
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">邮箱<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="email" placeholder="请输入邮箱" type="text" class="layui-input" lay-verify="required|email" autocomplete="off" required/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">部门<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input id="deptId" name="deptId" type="hidden">
<input id="deptName" name="deptName" placeholder="请输入部门" type="text" class="layui-input" lay-verify="required" required autocomplete="off"/>
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="M" title="男" checked/>
<input type="radio" name="sex" value="F" title="女"/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">职位<span style="color: red;">*</span></label>
<div class="layui-input-block">
<select name="position" xm-select="selPosition">
<option value="">请选择职位</option>
</select>
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input name="phone" placeholder="请输入电话" type="text" class="layui-input"/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input name="phone" placeholder="请输入电话" type="text" class="layui-input"/>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">职务信息</div>
<div class="layui-card-body">
<div class="layui-form-item layui-row">
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">部门<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input id="deptId" name="deptId" type="hidden">
<input id="deptName" name="deptName" placeholder="请输入部门" type="text" class="layui-input" lay-verify="required" required autocomplete="off"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;提交&emsp;</button>
<button class="layui-btn layui-btn-primary" type="button" id="backupPage">&emsp;返回&emsp;</button>
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">职位<span style="color: red;">*</span></label>
<div class="layui-input-block">
<select name="position" xm-select="selPosition">
<option value="">请选择职位</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="form-group-bottom text-center">
<button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;提交&emsp;</button>
<button type="reset" class="layui-btn layui-btn-primary" ew-event="closeDialog">&emsp;取消&emsp;</button>
</div>
</form>
@}
guns-base-support/guns-sys/src/main/webapp/pages/modular/system/user/user_edit.html
@layout("/common/_container.html",{js:["/assets/modular/system/user/user_edit.js"],css:["/assets/common/module/formSelects/formSelects-v4.css"]}){
<div class="layui-body-header">
<span class="layui-body-header-title">用户管理-修改</span>
</div>
@layout("/common/_form.html",{js:["/assets/modular/system/user/user_edit.js"],css:["/assets/common/module/formSelects/formSelects-v4.css"]}){
<div class="layui-fluid " style="">
<div class="layui-card">
<div class="layui-card-body">
<form id="userForm" lay-filter="userForm" class="layui-form model-form" style="max-width: 700px;margin: 40px auto;">
<input id="userId" name="userId" type="hidden"/>
<input name="account" type="hidden"/>
<div class="layui-form-item">
<label class="layui-form-label">姓名<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="name" placeholder="请输入姓名" type="text" class="layui-input" lay-verify="required" required/>
<form class="layui-form" id="userForm" lay-filter="userForm">
<div class="layui-fluid" style="padding-bottom: 75px;">
<div class="layui-card">
<div class="layui-card-header">基本信息</div>
<div class="layui-card-body">
<div class="layui-form-item layui-row">
<input name="userId" id="userId" type="hidden"/>
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">姓名<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="name" placeholder="请输入姓名" type="text" class="layui-input" lay-verify="required" required/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-block">
<input id="birthday" name="birthday" placeholder="请输入生日" type="text" class="layui-input" autocomplete="off"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="email" placeholder="请输入邮箱" type="text" class="layui-input" lay-verify="required|email" required />
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-block">
<input id="birthday" name="birthday" placeholder="请输入生日" type="text" class="layui-input date-icon" autocomplete="off"/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="M" title="男" checked/>
<input type="radio" name="sex" value="F" title="女"/>
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">邮箱<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input name="email" placeholder="请输入邮箱" type="text" class="layui-input" lay-verify="required|email" required />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">部门<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input id="deptId" name="deptId" type="hidden">
<input id="deptName" name="deptName" placeholder="请输入部门" type="text" class="layui-input" lay-verify="required" required autocomplete="off"/>
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="M" title="男" checked/>
<input type="radio" name="sex" value="F" title="女"/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">职位<span style="color: red;">*</span></label>
<div class="layui-input-block">
<select name="position" id="position" xm-select="selPosition" lay-verify="required" required>
</select>
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input name="phone" placeholder="请输入电话" type="text" class="layui-input"/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input name="phone" placeholder="请输入电话" type="text" class="layui-input"/>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">职务信息</div>
<div class="layui-card-body">
<div class="layui-form-item layui-row">
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">部门<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input id="deptId" name="deptId" type="hidden">
<input id="deptName" name="deptName" placeholder="请输入部门" type="text" class="layui-input" lay-verify="required" required autocomplete="off"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;提交&emsp;</button>
<button class="layui-btn layui-btn-primary" type="button" id="backupPage">&emsp;返回&emsp;</button>
<div class="layui-inline layui-col-md12">
<label class="layui-form-label">职位<span style="color: red;">*</span></label>
<div class="layui-input-block">
<select name="position" id="position" xm-select="selPosition" lay-verify="required" required>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="form-group-bottom text-center">
<button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;提交&emsp;</button>
<button type="reset" class="layui-btn layui-btn-primary" ew-event="closeDialog">&emsp;取消&emsp;</button>
</div>
</form>
@}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment