Skip to content

G
guns-vip
Commit c9d1e8bc by fengshuonan
Options

更新js结构，完善用户添加页面

parent acb8defb
Showing with 108 additions and 138 deletions
src/main/webapp/WEB-INF/common/_dialog.html
......@@ -112,8 +112,8 @@
<!--Custom JavaScript -->
<script src="${ctxPath}/assets/common/static/js/custom.min.js"></script>
<!-- 右侧主题设置 -->
<script src="${ctxPath}/assets/common/plugins/styleswitcher/jQuery.style.switcher.js"></script>
<!-- vue -->
<script src="${ctxPath}/assets/common/plugins/vue/vue.js"></script>
<!-- 加入contextPath属性和session超时的配置 -->
<script type="text/javascript">
......
src/main/webapp/WEB-INF/system/user/user_add.html
@layout("/common/_dialog.html",{plugins:["laydate","validation"],js:["/assets/modular/system/user/user_info.js"]}){
@layout("/common/_dialog.html",{plugins:["laydate","sweet-alert"],js:["/assets/modular/system/user/user_info.js"]}){
<div class="container-fluid">
<div class="row">
<div class="col-6">
<form novalidate>
<form id="userAddForm" \@submit="submitForm">
<div class="row">
<div class="col-6">
<div class="form-group">
<h5>账号 <span class="text-danger">*</span></h5>
<div class="controls">
<input type="text" name="account" id="account" class="form-control" required data-validation-required-message="此项是必填项">
<input v-model="sex" type="hidden" value="1" class="form-control">
<input v-model="account" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<h5>密码 <span class="text-danger">*</span></h5>
<div class="controls">
<input type="password" name="password" id="password" class="form-control" required data-validation-required-message="此项是必填项">
<input v-model="password" type="password" class="form-control">
</div>
</div>
<div class="form-group">
<h5>重复密码 <span class="text-danger">*</span></h5>
<div class="controls">
<input type="password" name="password2" data-validation-match-match="password" class="form-control" required>
<input v-model="rePassword" type="password" class="form-control">
</div>
</div>
<div class="form-group">
<h5>姓名 <span class="text-danger">*</span></h5>
<div class="controls">
<input type="text" name="name" id="name" class="form-control" required data-validation-required-message="此项是必填项">
<input v-model="name" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<h5>邮箱</h5>
<div class="controls">
<input type="email" name="email" id="email" class="form-control">
<input v-model="email" type="email" class="form-control">
</div>
</div>
<div class="text-xs-right">
<button type="submit" class="btn btn-info">Submit</button>
<button type="reset" class="btn btn-inverse">Cancel</button>
</div>
</form>
</div>
<div class="col-6">
<form novalidate>
</div>
<div class="col-6">
<div class="form-group">
<h5>性别</h5>
<div class="controls">
<input type="email" name="sex" id="sex" class="form-control">
<select v-model="sex" class="form-control">
<option value="">请选择</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
</div>
<div class="form-group">
<h5>出生日期</h5>
<div class="controls">
<input type="email" name="birthday" id="birthday" class="form-control">
<input v-model="birthday" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<h5>部门 <span class="text-danger">*</span></h5>
<div class="controls">
<input type="email" name="deptid" id="deptid" class="form-control" required data-validation-required-message="此项是必填项">
<input v-model="deptid" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<h5>电话</h5>
<div class="controls">
<input type="email" name="phone" id="phone" class="form-control">
<input v-model="phone" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<h5>角色</h5>
<div class="controls">
<input disabled type="text" name="xxxxx" class="form-control" value="请在分配角色功能里配置">
<input disabled type="text" class="form-control" value="请在分配角色功能里配置">
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="text-xs-right">
<button class="btn btn-info">submit</button>
<button class="btn btn-inverse" onclick="UserInfoDlg.close()">取消</button>
</div>
</div>
</div>
</div>
</form>
</div>
@}
src/main/webapp/_static/modular/system/user/user_info.js
......@@ -2,7 +2,7 @@
* 用户详情对话框（可用于添加和修改对话框）
*/
var UserInfoDlg = {
userInfoData: {},
data: {},
validateFields: {
account: {
validators: {
......@@ -54,7 +54,7 @@ var UserInfoDlg = {
* 清除数据
*/
UserInfoDlg.clearData = function () {
this.userInfoData = {};
this.data = {};
};
/**
......@@ -84,9 +84,9 @@ UserInfoDlg.set = function (key, value) {
}
});
}
this.userInfoData[key] = ids;
this.data[key] = ids;
}else{
this.userInfoData[key]= $("#" + key).val();
this.data[key]= $("#" + key).val();
}
}
......@@ -218,7 +218,7 @@ UserInfoDlg.addSubmit = function () {
}, function (data) {
Feng.error("添加失败!" + data.responseJSON.message + "!");
});
ajax.set(this.userInfoData);
ajax.set(this.data);
ajax.start();
};
......@@ -244,7 +244,7 @@ UserInfoDlg.editSubmit = function () {
}, function (data) {
Feng.error("修改失败!" + data.responseJSON.message + "!");
});
ajax.set(this.userInfoData);
ajax.set(this.data);
ajax.start();
};
......
src/main/webapp/assets/common/static/stylefeng/Feng.js
......@@ -23,16 +23,11 @@ var Feng = {
log: function (info) {
console.log(info);
},
alert: function (info, iconIndex) {
$.toast({
heading: '提示',
text: info,
position: 'bottom-right',
loaderBg: '#ff6849',
icon: 'info',
hideAfter: 2000,
stack: 6
});
alert: function (info) {
swal(info);
},
alert: function (title, info) {
swal(title, info);
},
info: function (info) {
$.toast({
......@@ -208,5 +203,9 @@ var Feng = {
// 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
return date.getFullYear() + seperator + nowMonth + seperator + strDate;
},
testEmail: function (email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
};
src/main/webapp/assets/modular/system/user/user.js
......@@ -2,7 +2,7 @@
* 系统管理--用户管理的单例对象
*/
var MgrUser = {
id: "managerTable",//表格id
id: "managerTable", //表格id
seItem: null, //选中的条目
table: null,
layerIndex: -1,
......@@ -66,7 +66,7 @@ MgrUser.openChangeUser = function () {
var index = layer.open({
type: 2,
title: '编辑管理员',
area: ['800px', '490px'], //宽高
area: ['800px', '500px'], //宽高
fix: false, //不固定
maxmin: true,
content: Feng.ctxPath + '/mgr/user_edit/' + this.seItem.id
......@@ -188,7 +188,7 @@ MgrUser.search = function () {
queryData['timeLimit'] = $("#timeLimit").val();
MgrUser.table.refresh({query: queryData});
}
};
MgrUser.onClickDept = function (e, treeId, treeNode) {
MgrUser.deptid = treeNode.id;
......
src/main/webapp/assets/modular/system/user/user_info.js
......@@ -2,60 +2,19 @@
* 用户详情对话框（可用于添加和修改对话框）
*/
var UserInfoDlg = {
userInfoData: {}
};
/**
* 清除数据
*/
UserInfoDlg.clearData = function () {
this.userInfoData = {};
};
/**
* 设置对话框中的数据
*
* @param key 数据的名称
* @param val 数据的具体值
*/
UserInfoDlg.set = function (key, value) {
if(typeof value == "undefined"){
if(typeof $("#" + key).val() =="undefined"){
var str="";
var ids="";
$("input[name='"+key+"']:checkbox").each(function(){
if(true == $(this).is(':checked')){
str+=$(this).val()+",";
}
});
if(str){
if(str.substr(str.length-1)== ','){
ids = str.substr(0,str.length-1);
}
}else{
$("input[name='"+key+"']:radio").each(function(){
if(true == $(this).is(':checked')){
ids=$(this).val()
}
});
}
this.userInfoData[key] = ids;
}else{
this.userInfoData[key]= $("#" + key).val();
}
data: {
id: "",
account: "",
sex: "",
password: "",
rePassword: "",
avatar: "",
email: "",
name: "",
birthday: "",
deptid: "",
phone: ""
}
return this;
};
/**
* 设置对话框中的数据
*
* @param key 数据的名称
* @param val 数据的具体值
*/
UserInfoDlg.get = function (key) {
return $("#" + key).val();
};
/**
......@@ -119,23 +78,27 @@ UserInfoDlg.hideDeptSelectTree = function () {
};
/**
* 收集数据
* 验证表单
*/
UserInfoDlg.collectData = function () {
this.set('id').set('account').set('sex').set('password').set('avatar')
.set('email').set('name').set('birthday').set('rePassword').set('deptid').set('phone');
};
UserInfoDlg.validateForm = function () {
/**
* 验证两个密码是否一致
*/
UserInfoDlg.validatePwd = function () {
var password = this.get("password");
var rePassword = this.get("rePassword");
if (password === rePassword) {
var data = UserInfoDlg.data;
if (data.account && data.password && data.name && data.deptid) {
return true;
} else {
return false;
}
if (!data.account) {
return "请输入账号";
}
if (!(data.password === data.rePassword)) {
return "两次密码输入不一致";
}
if (!data.name) {
return "请输入姓名";
}
if (!data.deptid) {
return "请选择部门";
}
};
......@@ -143,24 +106,14 @@ UserInfoDlg.validatePwd = function () {
* 提交添加用户
*/
UserInfoDlg.addSubmit = function () {
this.clearData();
this.collectData();
if (!this.validatePwd()) {
Feng.error("两次密码输入不一致");
return;
}
//提交信息
var ajax = new $ax(Feng.ctxPath + "/mgr/add", function (data) {
Feng.success("添加成功!");
window.parent.Feng.success("添加成功!");
window.parent.MgrUser.table.refresh();
UserInfoDlg.close();
}, function (data) {
Feng.error("添加失败!" + data.responseJSON.message + "!");
window.parent.Feng.error("添加失败!" + data.responseJSON.message + "!");
});
ajax.set(this.userInfoData);
ajax.set(this.data);
ajax.start();
};
......@@ -182,7 +135,7 @@ UserInfoDlg.editSubmit = function () {
}, function (data) {
Feng.error("修改失败!" + data.responseJSON.message + "!");
});
ajax.set(this.userInfoData);
ajax.set(this.data);
ajax.start();
};
......@@ -204,26 +157,37 @@ UserInfoDlg.chPwd = function () {
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(
event.target).parents("#menuContent").length > 0)) {
event.target).parents("#menuContent").length > 0)) {
UserInfoDlg.hideDeptSelectTree();
}
}
$(function () {
$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
//初始化性别选项
$("#sex").val($("#sexValue").val());
UserInfoDlg.app = new Vue({
el: '#userAddForm',
data: UserInfoDlg.data,
methods: {
submitForm: function (e) {
var result = UserInfoDlg.validateForm();
if (result === true) {
UserInfoDlg.addSubmit();
} else {
Feng.alert(result);
e.preventDefault();
}
}
}
});
var ztree = new $ZTree("treeDemo", "/dept/tree");
ztree.bindOnClick(UserInfoDlg.onClickDept);
ztree.init();
instance = ztree;
// var ztree = new $ZTree("treeDemo", "/dept/tree");
// ztree.bindOnClick(UserInfoDlg.onClickDept);
// ztree.init();
// instance = ztree;
// 初始化头像上传
var avatarUp = new $WebUpload("avatar");
avatarUp.setUploadBarId("progressBar");
avatarUp.init();
// var avatarUp = new $WebUpload("avatar");
// avatarUp.setUploadBarId("progressBar");
// avatarUp.init();
});
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