重构编辑用户界面和 js

This commit is contained in:
virusdefender 2015-10-16 21:35:18 +08:00
parent c0b48c219f
commit e8ffa09ec4
2 changed files with 104 additions and 135 deletions

View File

@ -1,77 +1,52 @@
require(["jquery", "avalon", "csrfToken", "bsAlert", "validator"], function ($, avalon, csrfTokenHeader, bsAlert) {
// avalon:定义模式 userList
require(["jquery", "avalon", "csrfToken", "bsAlert", "pager", "validator"],
function ($, avalon, csrfTokenHeader, bsAlert) {
avalon.ready(function () {
if (avalon.vmodels.userList) {
var vm = avalon.vmodels.userList;
// initialize avalon object
userList = []; //previousPage= 0; nextPage= 0; page = 1;
//editingUserId= 0; totalPage = 1; keyword= ""; showAdminOnly= false;
//user editor fields
username= ""; realName= ""; email= ""; adminType= 0; id= 0;
}
else {
var vm = avalon.define({
$id: "userList",
//通用变量
userList: [],
previousPage: 0,
nextPage: 0,
page: 1,
editingUserId: 0,
totalPage: 1,
userType: ["一般用户", "管理员", "超级管理员"],
keyword: "",
showAdminOnly: false,
//编辑区域同步变量
isEditing: false,
username: "",
realName: "",
email: "",
adminType: 0,
id: 0,
getNext: function () {
if (!vm.nextPage)
return;
getPageData(vm.page + 1);
},
getPrevious: function () {
if (!vm.previousPage)
return;
getPageData(vm.page - 1);
},
getBtnClass: function (btn) { //上一页/下一页按钮启用禁用逻辑
if (btn == "next") {
return vm.nextPage ? "btn btn-primary" : "btn btn-primary disabled";
}
else {
return vm.previousPage ? "btn btn-primary" : "btn btn-primary disabled";
userId: -1,
pager: {
getPage: function (page) {
getPage(page);
}
},
editUser: function (user) { //点击编辑按钮的事件,显示/隐藏编辑区
editUser: function (user) {
vm.username = user.username;
vm.realName = user.real_name;
vm.adminType = user.admin_type;
vm.email = user.email;
vm.id = user.id;
if (vm.editingUserId == user.id)
vm.editingUserId = 0;
else
vm.editingUserId = user.id;
vm.userId = user.id;
vm.isEditing = true;
},
search: function () {
getPageData(1);
getPage(1);
avalon.vmodels.userPager.currentPage = 1;
}
});
}
vm.$watch("showAdminOnly", function () {
getPageData(1);
getPage(1);
avalon.vmodels.userPager.currentPage = 1;
});
avalon.scan();
getPageData(1); //用户列表初始化
//Ajax get数据
function getPageData(page) {
function getPage(page) {
var url = "/api/admin/user/?paging=true&page=" + page + "&page_size=10";
if (vm.showAdminOnly == true)
url += "&admin_type=1";
@ -85,10 +60,7 @@ require(["jquery", "avalon", "csrfToken", "bsAlert", "validator"], function ($,
success: function (data) {
if (!data.code) {
vm.userList = data.data.results;
vm.totalPage = data.data.total_page;
vm.previousPage = data.data.previous_page;
vm.nextPage = data.data.next_page;
vm.page = page;
avalon.vmodels.userPager.totalPage = data.data.total_page;
}
else {
bsAlert(data.data);
@ -97,20 +69,19 @@ require(["jquery", "avalon", "csrfToken", "bsAlert", "validator"], function ($,
});
}
$("#edit_user-form").validator()
$("#edit-user-form").validator()
.on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var data = {
username: vm.username,
real_name: vm.realName,
email: vm.email,
id: vm.id,
id: vm.userId,
admin_type: vm.adminType
};
if ($("#password").val() !== "")
data.password = $("#password").val();
$.ajax({
beforeSend: csrfTokenHeader,
url: "/api/admin/user/",
data: data,
dataType: "json",
@ -118,8 +89,9 @@ require(["jquery", "avalon", "csrfToken", "bsAlert", "validator"], function ($,
success: function (data) {
if (!data.code) {
bsAlert("编辑成功!");
getPageData(1);
getPage(1);
$("#password").val("");
vm.isEditing = false;
} else {
bsAlert(data.data);
}
@ -129,5 +101,6 @@ require(["jquery", "avalon", "csrfToken", "bsAlert", "validator"], function ($,
}
});
});
avalon.scan();
})
});

View File

@ -16,7 +16,6 @@
<th>ID</th>
<th>用户名</th>
<th>注册时间</th>
<th>最近登陆</th>
<th>真实姓名</th>
<th>电子邮箱</th>
<th>用户类型</th>
@ -26,7 +25,6 @@
<td>{{ el.id }}</td>
<td>{{ el.username }}</td>
<td>{{ el.create_time|date("yyyy-MM-dd HH:mm:ss")}}</td>
<td>{{ el.last_login|date("yyyy-MM-dd HH:mm:ss")}}</td>
<td>{{ el.real_name }}</td>
<td>{{ el.email }}</td>
<td>{{ userType[el.admin_type]}}</td>
@ -39,17 +37,15 @@
<label>仅显示管理员 <input ms-duplex-checked="showAdminOnly" type="checkbox"/></label>
</div>
<div class="text-right">
页数:{{ page }}/{{ totalPage }}&nbsp;&nbsp;
<button ms-attr-class="getBtnClass('pre')" ms-click="getPrevious">上一页</button>
<button ms-attr-class="getBtnClass('next')" ms-click="getNext">下一页</button>
<ms:pager $id="userPager" config="pager"></ms:pager>
</div>
<div ms-visible="editingUserId">
<div ms-visible="isEditing">
<h3>修改用户信息</h3>
<form id="edit_user-form">
<form id="edit-user-form">
<div class="row">
<div class="form-group col-md-4"><label>ID</label>
<input name="id" type="number" class="form-control" readonly ms-duplex="id">
<input name="id" type="number" class="form-control" readonly ms-duplex="userId">
</div>
<div class="form-group col-md-4"><label>用户名</label>
<input name="username" type="text" class="form-control" ms-duplex="username"
@ -64,7 +60,7 @@
</div>
<div class="row">
<div class="form-group col-md-4"><label>新密码(留空则保留原密码)</label>
<input name="password" type="password" class="form-control" id="password"
<input name="password" type="password" class="form-control" id="password" autocomplete="off"
placeholder="此项留空则保留原密码" data-minlength="6" data-minlength-error="密码不得少于6位">
<div class="help-block with-errors"></div>
</div>
@ -80,7 +76,7 @@
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">提交</button>
<button type="submit" class="btn btn-success">保存修改</button>
</div>
</form>
</div>