mirror of
https://github.com/QingdaoU/OnlineJudge.git
synced 2024-09-21 08:23:20 +00:00
[前端]: 添加了admin公告管理页面以及相应的js，包含公告显示，修改，新建
This commit is contained in:
sxw
parent
2a29dfffb4
commit
7375bda40c
@ -1,53 +1,96 @@
|
||||
require(["jquery", "avalon", "csrf", "bs_alert", "editor", "validation"], function ($, avalon, csrfHeader, bs_alert, editor) {
|
||||
annoumcementEditor = editor("#editor");
|
||||
editAnnoumcementEditor = null;
|
||||
if (!avalon.vmodels.announcement)
|
||||
avalon.vmodels.announcement = null;
|
||||
vm = avalon.define({
|
||||
$id: "announcement",
|
||||
announcement: [],
|
||||
previous_page: 0,
|
||||
next_page: 0,
|
||||
page: 1,
|
||||
isEditing: false,
|
||||
getState: function (el) {
|
||||
if (el.visible)
|
||||
return "可见";
|
||||
else
|
||||
return "隐藏";
|
||||
},
|
||||
getNext: function (el) {
|
||||
getPageData(++(vm.page), function (data) {
|
||||
});
|
||||
},
|
||||
getPrevious: function (el) {
|
||||
getPageData(--(vm.page), function (data) {
|
||||
});
|
||||
},
|
||||
getBtnClass: function (btn) {
|
||||
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";
|
||||
announcementEditor = editor("#editor"); //创建新建公告的内容编辑器
|
||||
editAnnouncementEditor = null;
|
||||
|
||||
if (!avalon.vmodels.announcement) // 防止模式重新定义
|
||||
{
|
||||
// avalon:定义模式 announcement
|
||||
vm = avalon.define({
|
||||
$id: "announcement",
|
||||
announcement: [], // 公告列表数据项
|
||||
previous_page: 0, // 之前的页数
|
||||
next_page: 0, // 之后的页数
|
||||
page: 1, // 当前页数
|
||||
isEditing: 0, // 正在编辑的公告的ID， 为零说明未在编辑
|
||||
getState: function (el) { //获取公告当前状态，显示
|
||||
if (el.visible)
|
||||
return "可见";
|
||||
else
|
||||
return "隐藏";
|
||||
},
|
||||
getNext: function (el) {
|
||||
if (!vm.next_page)
|
||||
return;
|
||||
getPageData(++(vm.page));
|
||||
},
|
||||
getPrevious: function (el) {
|
||||
if (!vm.previous_page)
|
||||
return;
|
||||
getPageData(--(vm.page));
|
||||
},
|
||||
getBtnClass: function (btn) {
|
||||
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("公告标题不能为空");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
enEdit: function(el){
|
||||
$("#newTitle").val(el.title);
|
||||
if (!editAnnoumcementEditor)
|
||||
editAnnoumcementEditor = editor("#editAnnoumcementEditor");
|
||||
editAnnoumcementEditor.setValue(el.content);
|
||||
vm.isEditing = true;
|
||||
editAnnoumcementEditor.focus();
|
||||
}
|
||||
});
|
||||
|
||||
getPageData(1, function (data) {
|
||||
avalon.scan();
|
||||
});
|
||||
|
||||
function getPageData(page, callback) {
|
||||
avalon.scan();
|
||||
getPageData(1); //公告列表初始化
|
||||
vm.page = 1;
|
||||
vm.isEditing = 0;
|
||||
//Ajax get数据
|
||||
function getPageData(page) {
|
||||
$.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("");
|
||||
getPageData(1, function (data) {});
|
||||
announcementEditor.setValue("");
|
||||
getPageData(1, function (data) {
|
||||
});
|
||||
} else {
|
||||
bs_alert(data.data);
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
65
template/admin/index/announcement.html
Normal file
65
template/admin/index/announcement.html
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user