[前端]: 添加了admin公告管理页面以及相应的js，包含公告显示，修改，新建

static/src/js/app/admin/announcement/announcement.js

@@ -1,53 +1,96 @@
 require(["jquery", "avalon", "csrf", "bs_alert", "editor", "validation"], function ($, avalon, csrfHeader, bs_alert, editor) {
-    annoumcementEditor = editor("#editor");
+    announcementEditor = editor("#editor");                                               //创建新建公告的内容编辑器
-    editAnnoumcementEditor = null;
+    editAnnouncementEditor = null;
-    if (!avalon.vmodels.announcement)
+
-        avalon.vmodels.announcement = null;
+    if (!avalon.vmodels.announcement)                                                   // 防止模式重新定义
-    vm = avalon.define({
+    {
-        $id: "announcement",
+        // avalon:定义模式 announcement
-        announcement: [],
+        vm = avalon.define({
-        previous_page: 0,
+            $id: "announcement",
-        next_page: 0,
+            announcement: [], //  公告列表数据项
-        page: 1,
+            previous_page: 0, //  之前的页数
-        isEditing: false,
+            next_page: 0,     //   之后的页数
-        getState: function (el) {
+            page: 1,          //    当前页数
-            if (el.visible)
+            isEditing: 0,    //    正在编辑的公告的ID， 为零说明未在编辑
-                return "可见";
+            getState: function (el) {   //获取公告当前状态，显示
-            else
+                if (el.visible)
-                return "隐藏";
+                    return "可见";
-        },
+                else
-        getNext: function (el) {
+                    return "隐藏";
-            getPageData(++(vm.page), function (data) {
+            },
-            });
+            getNext: function (el) {
-        },
+                if (!vm.next_page)
-        getPrevious: function (el) {
+                    return;
-            getPageData(--(vm.page), function (data) {
+                getPageData(++(vm.page));
-            });
+            },
-        },
+            getPrevious: function (el) {
-        getBtnClass: function (btn) {
+                if (!vm.previous_page)
-            if (btn) {
+                    return;
-                return vm.next_page ? "btn btn-primary" : "btn btn-primary disabled";
+                getPageData(--(vm.page));
-            }
+            },
-            else {
+            getBtnClass: function (btn) {
-                return vm.previous_page ? "btn btn-primary" : "btn btn-primary disabled";
+                if (btn) {
+                    return vm.next_page ? "btn btn-primary" : "btn btn-primary disabled";
+                }
+                else {
+                    return vm.previous_page ? "btn btn-primary" : "btn btn-primary disabled";
+                }
+
+            },
+            enEdit: function (el) {   //点击编辑按钮的事件,显示/隐藏编辑区
+                $("#newTitle").val(el.title);
+                if (!editAnnouncementEditor)  //初始化编辑器
+                    editAnnouncementEditor = editor("#editAnnouncementEditor");
+                editAnnouncementEditor.setValue(el.content);
+                if (el.visible == false)
+                    $("#hidden").attr("checked", true);
+                if (vm.isEditing == el.id)
+                    vm.isEditing = 0;
+                else
+                    vm.isEditing = el.id;
+                editAnnouncementEditor.focus();
+            },
+            disEdit: function () {                                                                 //收起编辑框
+                vm.isEditing = 0;
+            },
+            submitChange: function () {                                                          // 处理编辑公告提交事件，顺便验证字段为空
+                var title = $("#newTitle").val(), content = editAnnouncementEditor.getValue(), visible = true;
+                if ($("#hidden").attr("checked") == true)
+                    visible = false;
+                if (title != "") {
+                    if (content != "") {
+                        $.ajax({                                                                      //发送修改公告请求
+                            beforeSend: csrfHeader,
+                            url: "/api/edit_announcements/",
+                            dataType: "json",
+                            method: "post",
+                            data: {id: vm.isEditing, title: title, content: content, visible: visible},
+                            success: function (data) {
+                                if (!data.code) {
+                                    bs_alert("修改成功");
+                                    vm.isEditing = 0;
+                                }
+                                else {
+                                    bs_alert(data.data);
+                                }
+                            }
+                        });
+                    }
+                    else
+                        bs_alert("公告内容不得为空");
+                }
+                else
+                    bs_alert("公告标题不能为空");
             }
+        });
+    }
 
-        },
+    avalon.scan();
-        enEdit: function(el){
+    getPageData(1);   //公告列表初始化
-            $("#newTitle").val(el.title);
+    vm.page = 1;
-            if (!editAnnoumcementEditor)
+    vm.isEditing = 0;
-                editAnnoumcementEditor = editor("#editAnnoumcementEditor");
+    //Ajax get数据
-            editAnnoumcementEditor.setValue(el.content);
+    function getPageData(page) {
-            vm.isEditing = true;
-            editAnnoumcementEditor.focus();
-        }
-    });
-
-    getPageData(1, function (data) {
-        avalon.scan();
-    });
-
-    function getPageData(page, callback) {
         $.ajax({
             beforeSend: csrfHeader,
             url: "/api/announcements/?paging=true&page=" + page + "&page_size=10",
@@ -58,7 +101,6 @@ require(["jquery", "avalon", "csrf", "bs_alert", "editor", "validation"], functi
                     vm.announcement = data.data.results;
                     vm.previous_page = data.data.previous_page;
                     vm.next_page = data.data.next_page;
-                    callback(data);
                 }
                 else {
                     bs_alert(data.data);
@@ -67,48 +109,7 @@ require(["jquery", "avalon", "csrf", "bs_alert", "editor", "validation"], functi
         });
     }
 
-
+    //新建公告表单验证与数据提交
-    $("#announcement-edit-form")
-        .formValidation({
-            framework: "bootstrap",
-            fields: {
-                title: {
-                    validators: {
-                        notEmpty: {
-                            message: "请填写公告标题"
-                        }
-                    }
-                }
-            }
-        }
-    ).on('success.form.fv', function (e) {
-            e.preventDefault();
-            var title = $("#newTitle").val();
-            var content = editor1.getValue();
-            if (content == "") {
-                bs_alert("请填写公告内容")
-                return;
-            }
-            $.ajax({
-                beforeSend: csrfHeader,
-                url: "/api/admin/announcement/",
-                data: {title: title, content: content},
-                dataType: "json",
-                method: "post",
-                success: function (data) {
-                    if (!data.code) {
-                        bs_alert("提交成功！");
-                        $("#title").val("");
-                        editor1.setValue("");
-                        getPageData(1, function (data) {});
-                    } else {
-                        bs_alert(data.data);
-                    }
-                }
-
-            })
-        });
-
     $("#announcement-form")
         .formValidation({
             framework: "bootstrap",
@@ -125,9 +126,9 @@ require(["jquery", "avalon", "csrf", "bs_alert", "editor", "validation"], functi
     ).on('success.form.fv', function (e) {
             e.preventDefault();
             var title = $("#title").val();
-            var content = editor1.getValue();
+            var content = announcementEditor.getValue();
             if (content == "") {
-                bs_alert("请填写公告内容")
+                bs_alert("请填写公告内容");
                 return;
             }
             $.ajax({
@@ -140,13 +141,13 @@ require(["jquery", "avalon", "csrf", "bs_alert", "editor", "validation"], functi
                     if (!data.code) {
                         bs_alert("提交成功！");
                         $("#title").val("");
-                        editor1.setValue("");
+                        announcementEditor.setValue("");
-                        getPageData(1, function (data) {});
+                        getPageData(1, function (data) {
+                        });
                     } else {
                         bs_alert(data.data);
                     }
                 }
-
             })
         });
 

template/admin/admin.html

@@ -83,7 +83,7 @@
         <!-- admin left end -->
 
         <!-- custom body begin -->
-        <div ms-include-src="template_url"></div>
+        <div class='col-md-8'ms-include-src="template_url"></div>
         <!-- custom body end -->
     </div>
 </div>

template/admin/index/announcement.html

@@ -0,0 +1,65 @@
+<style> [ms-controller] {
+    display: none
+}</style>
+<h1>Announcement</h1>
+<div ms-controller="announcement">
+    <table class="table table-striped">
+        <tr>
+            <th>编号</th>
+            <th>标题</th>
+            <th>创建时间</th>
+            <th>更新时间</th>
+            <th>创建者</th>
+            <th>状态</th>
+            <th>操作</th>
+        </tr>
+        <tr ms-repeat="announcement">
+            <td>{{el.id}}</td>
+            <td>{{el.title}}</td>
+            <td>{{el.create_time|date("yyyy-MM-dd HH:mm:ss")}}</td>
+            <td>{{el.last_update_time|date("yyyy-MM-dd HH:mm:ss")}}</td>
+            <td>{{el.created_by.username}}</td>
+            <td>{{getState(el)}}</td>
+            <td>
+                <button class="btn-sm btn-info" ms-click="enEdit(el)">编辑</button>
+            </td>
+        </tr>
+    </table>
+    <div class="text-right">
+        页数：{{page}}/{{page+next_page}}
+        <botton ms-attr-class="getBtnClass(0)" ms-click="getPrevious">上一页</botton>
+        <botton ms-attr-class="getBtnClass(1)" ms-click="getNext">下一页</botton>
+    </div>
+
+    <div ms-visible="isEditing">
+        <h3>编辑公告</h3>
+
+        <div class="form-group"><label for="title">标题</label>
+            <input name="title" type="text" class="form-control" id="newTitle" placeholder="公告标题" value=""></div>
+        <div class="form-group">
+            <label>内容</label>
+            <textarea id="editAnnouncementEditor"></textarea>
+        </div>
+        <div class="form-group">
+            <label>隐藏</label>
+            <input type="checkbox" id="hidden">
+        </div>
+        <div class="form-group">
+            <button ms-click="submitChange()" class="btn btn-primary">提交</button><button ms-click="disEdit()" class="btn btn-danger">取消</button>
+        </div>
+    </div>
+    <h3>添加公告</h3>
+
+    <form id="announcement-form">
+        <div class="form-group"><label for="title">标题</label>
+            <input name="title" type="text" class="form-control" id="title" placeholder="公告标题"></div>
+        <div class="form-group">
+            <label>内容</label>
+            <textarea id="editor" placeholder="公告内容"></textarea>
+        </div>
+        <div class="form-group">
+            <button type="submit" class="btn btn-primary">提交</button>
+        </div>
+    </form>
+</div>
+<script src="/static/js/app/admin/announcement/announcement.js"></script>