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