重构编辑用户界面和 js

static/src/js/app/admin/user/userList.js

@@ -1,133 +1,106 @@
-require(["jquery", "avalon", "csrfToken", "bsAlert", "validator"], function ($, avalon, csrfTokenHeader, bsAlert) {
+require(["jquery", "avalon", "csrfToken", "bsAlert", "pager", "validator"],
+    function ($, avalon, csrfTokenHeader, bsAlert) {
+        avalon.ready(function () {
+            if (avalon.vmodels.userList) {
+                var vm = avalon.vmodels.userList;
+            }
+            else {
+                var vm = avalon.define({
+                    $id: "userList",
 
+                    userList: [],
+                    userType: ["一般用户", "管理员", "超级管理员"],
 
-    // avalon:定义模式 userList
+                    keyword: "",
-    avalon.ready(function () {
+                    showAdminOnly: false,
+                    isEditing: false,
 
-        if (avalon.vmodels.userList) {
+                    username: "",
-            var vm = avalon.vmodels.userList;
+                    realName: "",
-            // initialize avalon object
+                    email: "",
-            userList     = []; //previousPage= 0; nextPage= 0;  page         = 1;
+                    adminType: 0,
-            //editingUserId= 0;  totalPage   = 1;  keyword= ""; showAdminOnly= false;
+                    userId: -1,
-                //user editor fields
+
-            username= "";     realName= "";    email= "";   adminType= 0; id= 0;
+                    pager: {
-        }
+                        getPage: function (page) {
-        else {
+                            getPage(page);
-            var vm = avalon.define({
+                        }
-                $id: "userList",
+                    },
-                //通用变量
+                    editUser: function (user) {
-                userList: [],
+                        vm.username = user.username;
-                previousPage: 0,
+                        vm.realName = user.real_name;
-                nextPage: 0,
+                        vm.adminType = user.admin_type;
-                page: 1,
+                        vm.email = user.email;
-                editingUserId: 0,
+                        vm.userId = user.id;
-                totalPage: 1,
+
-                userType: ["一般用户", "管理员", "超级管理员"],
+                        vm.isEditing = true;
-                keyword: "",
+                    },
-                showAdminOnly: false,
+                    search: function () {
-                //编辑区域同步变量
+                        getPage(1);
-                username: "",
+                        avalon.vmodels.userPager.currentPage = 1;
-                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";
+            }
-                    }
+            vm.$watch("showAdminOnly", function () {
-                },
+                getPage(1);
-                editUser: function (user) {                                                               //点击编辑按钮的事件,显示/隐藏编辑区
+                avalon.vmodels.userPager.currentPage = 1;
-                    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;
-                },
-                search: function () {
-                    getPageData(1);
-                }
             });
-        }
+
-        vm.$watch("showAdminOnly", function () {
+            function getPage(page) {
-            getPageData(1);
+                var url = "/api/admin/user/?paging=true&page=" + page + "&page_size=10";
+                if (vm.showAdminOnly == true)
+                    url += "&admin_type=1";
+                if (vm.keyword != "")
+                    url += "&keyword=" + vm.keyword;
+                $.ajax({
+                    beforeSend: csrfTokenHeader,
+                    url: url,
+                    dataType: "json",
+                    method: "get",
+                    success: function (data) {
+                        if (!data.code) {
+                            vm.userList = data.data.results;
+                            avalon.vmodels.userPager.totalPage = data.data.total_page;
+                        }
+                        else {
+                            bsAlert(data.data);
+                        }
+                    }
+                });
+            }
+
+            $("#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.userId,
+                            admin_type: vm.adminType
+                        };
+                        if ($("#password").val() !== "")
+                            data.password = $("#password").val();
+                        $.ajax({
+                            url: "/api/admin/user/",
+                            data: data,
+                            dataType: "json",
+                            method: "put",
+                            success: function (data) {
+                                if (!data.code) {
+                                    bsAlert("编辑成功！");
+                                    getPage(1);
+                                    $("#password").val("");
+                                    vm.isEditing = false;
+                                } else {
+                                    bsAlert(data.data);
+                                }
+                            }
+                        });
+                        return false;
+                    }
+                });
         });
         avalon.scan();
-        getPageData(1);   //用户列表初始化
-        //Ajax get数据
-        function getPageData(page) {
-            var url = "/api/admin/user/?paging=true&page=" + page + "&page_size=10";
-            if (vm.showAdminOnly == true)
-                url += "&admin_type=1";
-            if (vm.keyword != "")
-                url += "&keyword=" + vm.keyword;
-            $.ajax({
-                beforeSend: csrfTokenHeader,
-                url: url,
-                dataType: "json",
-                method: "get",
-                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;
-                    }
-                    else {
-                        bsAlert(data.data);
-                    }
-                }
-            });
-        }
 
-        $("#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,
-                        admin_type: vm.adminType
-                    };
-                    if ($("#password").val() !== "")
-                        data.password = $("#password").val();
-                    $.ajax({
-                        beforeSend: csrfTokenHeader,
-                        url: "/api/admin/user/",
-                        data: data,
-                        dataType: "json",
-                        method: "put",
-                        success: function (data) {
-                            if (!data.code) {
-                                bsAlert("编辑成功！");
-                                getPageData(1);
-                                $("#password").val("");
-                            } else {
-                                bsAlert(data.data);
-                            }
-                        }
-                    });
-                    return false;
-                }
-            });
     });
-
-})

template/src/admin/user/user_list.html

@@ -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;
+        <ms:pager $id="userPager" config="pager"></ms:pager>
-        <button ms-attr-class="getBtnClass('pre')" ms-click="getPrevious">上一页</button>
-        <button ms-attr-class="getBtnClass('next')" ms-click="getNext">下一页</button>
     </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>