Django项目之个人网站
Github地址:https://github.com/liangdongchang/MyWeb.git
感兴趣的可以fork或star一下
功能模块二:事项
一、说明
功能:用户工作事项记录,定计划、待办事项、已办事项、事项归档。
用户可以通过点击“添加”来添加事项,点击“取消”来删除事项等。
用户可以对事项进行分类。
二、界面
1、事项
2、编辑
三、代码
1、前端(T)
1.1 review.html
{% extends 'SitesApp/base.html' %}
{% block title %}
<title>事项办理</title>
{% endblock %}
{% block style %}
<link href="/static/SitesApp/css/review.css" rel="stylesheet">
{% endblock %}
{% block content %}
<div class="main">
<ul>
<li class="items">
<h2 style="display: inline-block">已办事项</h2>
<button id="archive" value="" title="查看归档事项">归档事项</button>
<div class="itemsdiv alreadyRe">
{% for content in contents %}
{% ifequal content.rRemark 0 %}
<button type="button" class="list-group-item topicCotent " data-toggle="modal"
data-target="#exampleModal"
data-topic="{{ content.rTopic }}"
data-remark="0"
data-type="modify"
data-id="{{ content.id }}"
data-rimpo="{{ content.rImpo }}"
data-url="{% url 'SitesApp:review' %}"
data-body="{{ content.rContent }}"
title="{{ content.rTopic }}">
<span class="rtopic">{{ content.rTopic }}</span>
<br>
{% ifequal content.rImpo 0 %}<span class="general">一般 </span>{% endifequal %}
{% ifequal content.rImpo 1 %}<span class="import">重要 </span>{% endifequal %}
{% ifequal content.rImpo 2 %}<span class="urgency">紧急 </span>{% endifequal %}
<span class="showTime">{{ content.rmDateTime }}</span>
</button>
<div class="itemBtnDiv">
<strong type="button" class="itemBtn alredayFin"
onclick="changeRemark(1,{{ content.id }})"
title="设置成待办事项">重办
</strong>
<strong>|</strong>
<strong type="button" class="itemBtn alredayFin"
onclick="changeRemark(3,{{ content.id }})"
title="设置成归档事项">归档
</strong>
</div>
{% endifequal %}
{% endfor %}
</div>
<div class="itemsdiv fileRe" style="display: none">
{% for content in contents %}
{% ifequal content.rRemark 3 %}
<button type="button" class="list-group-item topicCotent" data-toggle="modal"
data-target="#exampleModal"
data-topic="{{ content.rTopic }}"
data-remark="3"
data-type="modify"
data-id="{{ content.id }}"
data-rimpo="{{ content.rImpo }}"
data-url="{% url 'SitesApp:review' %}"
data-body="{{ content.rContent }}"
title="{{ content.rTopic }}">
<span class="rtopic">{{ content.rTopic }}</span>
<br>
{% ifequal content.rImpo 0 %}<span class="general">一般 </span>{% endifequal %}
{% ifequal content.rImpo 1 %}<span class="import">重要 </span>{% endifequal %}
{% ifequal content.rImpo 2 %}<span class="urgency">紧急 </span>{% endifequal %}
<span class="showTime">{{ content.rmDateTime }}</span>
</button>
<div class="itemBtnDiv">
<strong type="button" class="itemBtn alredayFin"
onclick="changeRemark(0,{{ content.id }})"
title="取消归档">取消归档
</strong>
</div>
{% endifequal %}
{% endfor %}
</div>
</li>
<li class="items">
<h2>待办事项</h2>
<div class="itemsdiv">
<button type="button" class="list-group-item add " data-toggle="modal"
data-target="#exampleModal"
data-remark="1" data-type="add" data-url="{% url 'SitesApp:review' %}" data-rimpo="0"
title="添加待办事项">添加
</button>
{% for content in contents %}
{% ifequal content.rRemark 1 %}
<button type="button" class="list-group-item topicCotent" data-toggle="modal"
data-target="#exampleModal"
data-topic="{{ content.rTopic }}"
data-remark="1"
data-type="modify"
data-id="{{ content.id }}"
data-rimpo="{{ content.rImpo }}"
data-url="{% url 'SitesApp:review' %}"
data-body="{{ content.rContent }}"
title="{{ content.rTopic }}">
<span class="rtopic">{{ content.rTopic }}</span>
<br>
{% ifequal content.rImpo 0 %}<span class="general">一般 </span>{% endifequal %}
{% ifequal content.rImpo 1 %}<span class="import">重要 </span>{% endifequal %}
{% ifequal content.rImpo 2 %}<span class="urgency">紧急 </span>{% endifequal %}
<span class="showTime">{{ content.rmDateTime }}</span>
</button>
<div class="itemBtnDiv">
<strong type="button" class="itemBtn" onclick="changeRemark(0,{{ content.id }})"
title="设置成已办事项">已办
</strong>
<strong>|</strong>
<strong type="button" class="itemBtn" onclick="changeRemark(2,{{ content.id }})"
title="设置成事项">计划
</strong>
</div>
{% endifequal %}
{% endfor %}
</div>
</li>
<li class="items">
<h2>远期计划</h2>
<div class="itemsdiv">
<button type="button" class="list-group-item add " data-toggle="modal"
data-target="#exampleModal"
data-remark="2" data-type="add" data-url="{% url 'SitesApp:review' %}" data-rimpo="0"
title="添加远期计划">添加
</button>
{% for content in contents %}
{% ifequal content.rRemark 2 %}
<button type="button" class="list-group-item topicCotent" data-toggle="modal"
data-target="#exampleModal"
data-topic="{{ content.rTopic }}"
data-remark="2"
data-type="modify"
data-id="{{ content.id }}"
data-rimpo="{{ content.rImpo }}"
data-url="{% url 'SitesApp:review' %}"
data-body="{{ content.rContent }}"
title="{{ content.rTopic }}">
<span class="rtopic">{{ content.rTopic }}</span>
<br>
{% ifequal content.rImpo 0 %}<span class="general">一般 </span>{% endifequal %}
{% ifequal content.rImpo 1 %}<span class="import">重要 </span>{% endifequal %}
{% ifequal content.rImpo 2 %}<span class="urgency">紧急 </span>{% endifequal %}
<span class="showTime">{{ content.rmDateTime }}</span>
</button>
<div class="itemBtnDiv">
<strong type="button" class="itemBtn" onclick="changeRemark(1,{{ content.id }})"
title="设置成待办事项">待办
</strong>
<strong>|</strong>
<strong type="button" class="itemBtn alredayFin"
onclick="changeRemark(4,{{ content.id }})"
title="取消计划">取消
</strong>
</div>
{% endifequal %}
{% endfor %}
</div>
</li>
</ul>
</div>
{% include 'SitesApp/includeModal.html' %}
{% endblock %}
{% block script %}
{{ block.super }}
<script src="/static/tiny_mce/tiny_mce.js"></script>
<script src="/static/SitesApp/js/jquery-form.js"></script>
<script src='/static/SitesApp/js/reviewJs.js'></script>
<script type="text/javascript">
$(function ($) {
{#第一次按下归档事项按钮显示归档事项,第二次按下显示已办事项#}
var archiveBtnFlag = true;
showTimeMode();
itemsMode();
$('#archive').click(function () {
{#点击归档事项#}
if (archiveBtnFlag) {
$(this).prev().html('归档事项');
$(this).html('已办事项').attr('title', '查看已办事项');
$('.fileRe').css('display', 'block').find('butoon').addClass('topicCotent');
$('.alreadyRe').css('display', 'none').find('butoon').each(function () {
$(this).removeClass('topicCotent');
});
archiveBtnFlag = false;
} else {
{#点击归档事项#}
$(this).prev().html('已办事项');
$(this).html('归档事项').attr('title', '查看归档事项');
$('.fileRe').css('display', 'none').find('butoon').removeClass('topicCotent');
$('.alreadyRe').css('display', 'block').find('butoon').addClass('topicCotent');
archiveBtnFlag = true;
}
})
});
{#格式化列表#}
function itemsMode() {
{#格式化列表,如果列表中没有事项,就显示暂无事项#}
$(".items").each(function () {
item = $(this);
topic = item.find(".topicCotent");
if (topic.length > 8) {
{#alert(item.find('div').css('height'));#}
item.find('div').css({"height": "470px", "overflow": "auto"});
{#alert(item.find('div').css('height'));#}
}
if ($('.fileRe').find('button').length == 0) {
$('.fileRe').html('<span type="button" class="list-group-item add" >暂无</span>');
}
if ($('.alreadyRe').find('button').length == 0) {
$('.alreadyRe').html('<span type="button" class="list-group-item add" >暂无</span>');
}
});
}
{#事项类型改变事件#}
function changeRemark(rid, id) {
var url = "{% url 'SitesApp:review' %}";
$.ajax({
type: "POST",
url: url,
data: {"id": id, "remark": rid, "changeRemark": rid},
dataType: "json",
success: function (res) {
{#alert(res['ret']);#}
window.location.href = url;
}
});
}
{#显示时间格式#}
function showTimeMode() {
{#格式化时间,显示为刚发表、几小时前,几天前#}
var showTIme = document.getElementsByClassName("showTime");
var ret;
for (var i = 0; i < showTIme.length; i++) {
ret = diaplayTime(showTIme[i].textContent);
showTIme[i].innerHTML = ret;
}
}
{#时间格式整理#}
function diaplayTime(data) {
data = data.replace(/年/, "/");
data = data.replace(/月/, "/");
data = data.replace(/日/, "/");
var str = data;
//将字符串转换成时间格式
var timePublish = new Date(str);
var timeNow = new Date();
var minute = 1000 * 60;
var hour = minute * 60;
var day = hour * 24;
var month = day * 30;
var diffValue = timeNow - timePublish;
var diffMonth = diffValue / month;
var diffWeek = diffValue / (7 * day);
var diffDay = diffValue / day;
var diffHour = diffValue / hour;
var diffMinute = diffValue / minute;
{#alert(diffDay);#}
if (diffValue < 0) {
alert("错误时间");
}
else if (diffMonth > 3) {
result = timePublish.getFullYear() + "-";
result += timePublish.getMonth() + "-";
result += timePublish.getDate();
{#alert(result);#}
}
else if (diffMonth > 1) {
result = parseInt(diffMonth) + "月前";
}
else if (diffWeek > 1) {
result = parseInt(diffWeek) + "周前";
}
else if (diffDay > 1) {
result = parseInt(diffDay) + "天前";
}
else if (diffHour > 1) {
result = parseInt(diffHour) + "小时前";
}
else if (diffMinute > 1) {
result = parseInt(diffMinute) + "分钟前";
}
else {
result = "刚发表";
}
return result;
}
</script>
{% endblock %}
2 路由处理(V)
2.1 项目下的总路由
urlpatterns = [
url('^app/',include('SitesApp.urls',namespace='sitesApp'))
]
2.2 子应用下的路由
# 事项
url(r'^review/', views.review, name='review'),
3、视图函数处理(Views)
3.1 事项
# 事项处理
@csrf_exempt
def review(request):
# TODO
dictData = {}
# 处理GET请求
if request.method == "GET":
reviews = opeReviewT.query(rUserId_id=getUser(request).id)
dictData['contents'] = reviews
return render(request, 'SitesApp/review.html', context=dictData)
changeRemark = request.POST.get('changeRemark', None)
id = request.POST.get('id', None)
remark = request.POST.get('remark', None)
# 如果changeRemark为真,只修改rReamrk字段
if changeRemark:
if opeReviewT.modify(id=id,rRemark=remark):
data = {'status': 1, 'ret': 'success'}
else:
data = {'status': 0, 'ret': 'faild'}
else:
topic = request.POST.get('topic', None)
content = request.POST.get('content', None)
impo = request.POST.get('impo', None)
user = getUser(request)
# 如果id存在,那么用户发起的请求就是修改记录的请求,否则是增加记录的请求
if id:
if opeReviewT.modify(id=id,rTopic=topic,rContent=content,rRemark=remark,rImpo=impo ):
data = {'status': 1, 'ret': 'success'}
else:
data = {'status': 0, 'ret': 'faild'}
else:
if opeReviewT.add(rUserId=user,rTopic=topic,rContent=content,rRemark=remark,rImpo=impo):
data = {'status': 1, 'ret': 'success'}
else:
data = {'status': 0, 'ret': 'faild'}
return JsonResponse(data)
四、业务逻辑
1、界面使用无序列表分成三个模块:已办事项、待办事项、远期计划。
2、用户可以通过“待办事项”和“远期计划”中的“添加”按钮来添加事项;
3、使用富文本进行编辑,三个编辑框:主题、重要程度(一般、重要、紧急)、内容;
4、用户编辑事项后,点击“提交”按钮进行提交,提交成功后,用户可以在页面上看到新添加的事项;
5、对新添加的事项,用户可以进行修改、删除,还可以设置成已办事项,归档等操作;
6、事项排序是按照提交的日期进行的,在显示事项一栏,可以看到事项的主题、重要程度、提交时间;
7、用户可以对工作上的事项进行管理。