我们设计一个页面来展示正在处理的任务，该表格可以参照之前基础信息的增删改查。用户通过这个页面对任务进行相应操作。
1.在views.py中建立task表的增删改查功能，并增加搜索功能。由于任务列表中，涉及到了实施步骤和任务列表，为了使搜索更加强大，我们希望能够直接通过实施步骤的内容搜索到相关的任务
views.py:
from .models import Node,Line,Device,Task
#任务的列表显示
def task_list(request):
#如果通过GET来获取了相应参数，那么进行查询
if request.method == 'GET':
#建立过滤条件的键值对
kwargs = {}
#默认显示处理中的任务
kwargs['task_status'] = '处理中'
#用于分页显示的query
query = ''
for key, value in request.GET.iteritems():
#除去token及page的参数
if key != 'csrfmiddlewaretoken' and key != 'page':
#如果查询的是与处理过程相关的，那么需要通过外键跳转至process表格
if key == 'process_content':
if value !='':
kwargs['process__process_content__contains'] = value
elif key == 'process_signer':
if value !='':
kwargs['process__process_signer__contains'] = value
#定义任务的开始与结束时间
elif key == 'task_start':
if value != '':
kwargs['task_signtime__gte'] = value
elif key == 'task_end':
if value != '':
kwargs['task_signtime__lte'] = value
#定义任务的状态
elif key == 'task_status':
if value == U'处理中':
kwargs['task_status'] = '处理中'
if value == U'已结单':
kwargs['task_status'] = '已结单'
#如果选择了所有状态，即对任务状态不进行过滤，那么就删除task_status这个键值对
if value == U'全部':
del kwargs['task_status']
#其余的则根据提交过来的键值对进行过滤
else:
kwargs[key + '__contains'] = value
#建立用于分页的query
query += '&' + key + '=' + value
#按照登记时间排序
data = Task.objects.filter(**kwargs).order_by('task_signtime')
#如果没有GET提交过来的搜索条件，那么默认按照登记时间排序，并只显示处理中的任务
else:
data = Task.objects.filter(task_status='处理中').order_by('task_signtime')
2. 建立任务列表的增加功能
通过forms.py建立一个form表单，但是不通过modelform来建立，同时表单采用普通的HTML方式写成，不采用之前的django的form形式。
Forms.py:
#定义TaskForm，但不根据ModelForm来定义
from django import forms
class TaskForm(forms.Form):
#任务类型的分类
category = (
(U'综合事务','综合事务'),
(U'机构建设','机构建设'),
(U'线路事务','线路事务'),
)
task_title = forms.CharField(label = '任务名称',max_length = 255)
task_category = forms.ChoiceField(label='任务分类',choices= category)
#建立联系人，其中的textarea做了规格设定，默认行高为2
task_contacts = forms.CharField(label = '联系人',widget=forms.Textarea(attrs={'rows': '2'}),required=False)
#建立一个复选框的实施人员，通过queryset来获取人员列表
task_member = forms.ModelMultipleChoiceField(label='实施人员',
queryset=Employee.objects.all(),
widget=forms.CheckboxSelectMultiple)
#建立一个处理过程
process_content = forms.CharField(label = '处理过程',widget=forms.Textarea)
Views.py:
from forms import NodeForm,LineForm,DeviceForm,TaskForm
import time
#任务列表的增加
def task_add(request):
#从TaskForm获取相关信息
form = TaskForm(request.POST or None)
if form.is_valid():
#建立一个task实例
task_ins = Task()
#通过时间来建立一个任务流水
task_ins.task_code = str(int(time.time()))
#获取task的相关信息
task_ins.task_title = form.cleaned_data.get('task_title')
task_ins.task_category = form.cleaned_data.get('task_category')
task_ins.task_contacts = form.cleaned_data.get('task_contacts')
#task建立后默认变成处理中的状态
task_ins.task_status = '处理中'
#通过登录用户来辨别任务登记人
task_ins.task_signer = request.user
#保存task实例
task_ins.save()
#通过当前task_id获取task对象，并将其赋给member_task
member_task = Task.objects.get(id = task_ins.id)
#获取members集合
members = form.cleaned_data.get('task_member')
#获取members集合中的member,并将其添加到member_task中,增添相应实施人员
for member in members:
member_task.task_member.add(member)
#通过task_id获取task对象
process_task = Task.objects.get(id = task_ins.id)
#建立一个process的实施步骤实例
process_ins = Process()
#将process实例与task绑定
process_ins.task = process_task
#获取process相关信息
process_ins.process_content = form.cleaned_data.get('process_content')
process_ins.process_signer = request.user
process_ins.save()
return redirect('task_list')
context = {
'form': form,
'sub_title': '新建任务',
}
return render(request, 'task_add.html', context)
def task_edit(request,pk):
pass
def task_delete(request,pk):
pass
3．修改index.html，将其中的Typography更改成”任务管理”模块，同时增加相应的指向至urls.py
Index.html:
对以下页面进行更改：
<li class="">
<a href="typography.html">
<i class="menu-icon fa fa-caret-right"></i>
Typography
</a>
<b class="arrow"></b>
</li>
更改成以下页面:
<li class="">
<a href="{% url 'task_list'%}">
<i class="menu-icon fa fa-caret-right"></i>
任务列表
</a>
<b class="arrow"></b>
</li>
4.修改urls.py:
#任务列表
url(r'^task_list/', echo.views.task_list, name='task_list'),
url(r'^task_add/', echo.views.task_add, name='task_add'),
url(r'^task_edit/(?P<pk>\d+)/$', echo.views.task_edit, name='task_edit'),
url(r'^task_delete/(?P<pk>\d+)/$', echo.views.task_delete, name='task_delete'),
5.建立任务列表页面，其中搜索项包含以下选项：
| 名称 | Name |
| 任务流水 | Task_code |
| 任务名称 | Task_title |
| 创建人员 | Task_signer |
| 联系人员 | Task_contacts |
| 任务内容 | Process_content |
| 任务分类 | Task_category |
| 任务状态 | Task_status |
| 创建日期 | Task_start / task_end |
Task_list.html:
{% extends "index.html" %}
{% block page_css %}
{% endblock %}
{% block page_title %}
任务信息
{% endblock %}
{% block container %}
{% load staticfiles %}
<div class="row">
<!-- Search Page BEGINS-->
<div class="col-xs-12">
<form class="navbar-for navbar-container" role="search" method="get" action="">{% csrf_token %}
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon" id="task_code" >任务流水</span>
<input type="text" class="form-control" placeholder="" aria-describedby="task_code" name="task_code"
{% if request.GET.task_code %}value = {{ request.GET.task_code }}{% endif %}>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon" id="task_title">任务名称</span>
<input type="text" class="form-control" placeholder="" aria-describedby="task_title" name = "task_title"
{% if request.GET.task_title %}value = {{ request.GET.task_title }}{% endif %}>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon" id="task_signer">创建人员</span>
<input type="text" class="form-control" placeholder="" aria-describedby="task_signer" name = "task_signer"
{% if request.GET.task_signer %}value = {{ request.GET.task_signer }}{% endif %}>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon" id="task_contacts">联系人员</span>
<input type="text" class="form-control" placeholder="" aria-describedby="task_contacts" name = "task_contacts"
{% if request.GET.task_contacts %}value = {{ request.GET.task_contacts }}{% endif %}>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon" id="process_content">任务内容</span>
<input type="text" class="form-control" placeholder="" aria-describedby="process_content" name = "process_content"
{% if request.GET.process_content %}value = {{ request.GET.process_content }}{% endif %}>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon" id="task_category">任务分类</span>
<select class="form-control" name="task_category">
<option value="">所有类型</option>
<option value="综合事务" {% if request.GET.task_category and request.GET.task_category == '综合事务'%} selected{% endif %}>综合事务</option>
<option value="机构建设" {% if request.GET.task_category and request.GET.task_category == '机构建设'%} selected{% endif %}>机构建设</option>
<option value="线路事务" {% if request.GET.task_category and request.GET.task_category == '线路事务'%} selected{% endif %}>线路事务</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon" id="task_status">任务状态</span>
<select class="form-control" name="task_status">
<option value="处理中">处理中</option>
<option value="已结单" {% if request.GET.task_status and request.GET.task_status == '已结单'%} selected{% endif %}>已结单</option>
<option value="全部" {% if request.GET.task_status and request.GET.task_status == '全部'%} selected{% endif %}>全部</option>
</select>
</div>
</div>
<!-- /section:plugins/date-time.datepicker -->
<div class="col-sm-4">
<div class="input-daterange input-group">
<span class="input-group-addon" id="date-picker">创建日期</span>
<input type="text" class="form-control date-picker" name="task_start" data-date-format="yyyy-mm-dd" {% if request.GET.task_start %} value = {{ request.GET.task_start }}{% endif %}>
<span class="input-group-addon">
<i class="fa fa-exchange"></i>
</span>
<input type="text" class="form-control date-picker" name="task_end" data-date-format="yyyy-mm-dd" {% if request.GET.task_end %} value = {{ request.GET.task_end }}{% endif %}>
</div>
</div>
<div class="col-sm-3">
<span class="input-group-btn">
<button type="submit" class="btn btn-purple btn-sm">
查询
<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
</button>
</span>
</div>
</form>
</div>
<!-- Search Page END -->
<!-- PAGE TABLES BEGINS -->
<div class="col-xs-12">
<div class="table-header">
{{ result }}
</div>
<div>
<table id="table_id" class="table table-striped table-bordered table-hover">
<thead>
<th>流水号</th>
<th>任务名称</th>
<th>任务分类</th>
<th>任务状态</th>
<th>创建人</th>
<th>创建时间</th>
<th>
<a class="blue" href="{% url 'task_add'%}">
<i class="ace-icon fa fa-search-plus bigger-130"></i>
新建任务
</a>
</th>
</thead>
<tbody>
{% for item in data %}
<tr>
<td>{{ item.task_code }}</td>
<td>{{ item.task_title }}</td>
<td>{{ item.task_category }}</td>
{% if item.task_status == '处理中' %}<td>处理中</td>{% endif %}
{% if item.task_status == '已结单' %}<td>已结单</td>{% endif %}
<td>{{ item.task_signer }}</td>
<td>{{ item.task_signtime }}</td>
<td>
<div class="hidden-sm hidden-xs action-buttons">
<a class="green" href="{% url 'task_edit' item.id %}" title="编辑任务">
<i class="ace-icon fa fa-pencil bigger-130"></i>
</a>
<a id="modal_button_{{ item.id }}" class="red" data-toggle="modal" href="#modal_form" rel="{% url 'task_delete' item.id %}" content="确认删除流水号为{{ item.task_code }}的任务么？" title="删除任务" >
<i class="ace-icon fa fa-trash-o bigger-130"></i>
</a>
</div>
<div class="hidden-md hidden-lg">
<div class="inline position-relative">
<button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown" data-position="auto">
<i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>
</button>
<ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
<li>
<a href="#" class="tooltip-info" data-rel="tooltip" title="View">
<span class="blue">
<i class="ace-icon fa fa-search-plus bigger-120"></i>
</span>
</a>
</li>
<li>
<a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
<span class="green">
<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
</span>
</a>
</li>
<li>
<a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
<span class="red">
<i class="ace-icon fa fa-trash-o bigger-120"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% include 'modal.html' %}
{% include 'pagination.html' %}
</div>
</div>
{% endblock %}
{% block page_javascript %}
{% include 'modal_js.html' %}
<script type="text/javascript">
$(document).ready(function(){
$('#table_id').DataTable({
"paging":false,
"searching": false,
"bInfo": false,
"columnDefs": [ {
"orderable": false, "targets": -1
} ]
});
});
</script>
<!--用于日期的前端显示-->
<script type="text/javascript">
jQuery(function($) {
//datepicker plugin
//link
$('.date-picker').datepicker({
autoclose: true,
todayHighlight: true,
})
//show datepicker when clicking on the icon
.next().on(ace.click_event, function(){
$(this).prev().focus();
});
//or change it into a date range picker
$('.input-daterange').datepicker({autoclose:true});
//to translate the daterange picker, please copy the "examples/daterange-fr.js" contents here before initialization
$('input[name=date-range-picker]').daterangepicker({
'applyClass' : 'btn-sm btn-success',
'cancelClass' : 'btn-sm btn-default',
locale: {
applyLabel: 'Apply',
cancelLabel: 'Cancel',
}
})
.prev().on(ace.click_event, function(){
$(this).next().focus();
});
$('#timepicker1').timepicker({
minuteStep: 1,
showSeconds: true,
showMeridian: false
}).next().on(ace.click_event, function(){
$(this).prev().focus();
});
$('#date-timepicker1').datetimepicker().next().on(ace.click_event, function(){
$(this).prev().focus();
});
});
</script>
{% endblock %}
6.新增添加任务页面：
Task_add.html:
{% extends "index.html" %}
{% load crispy_forms_tags %}
{% block page_title %}
任务处理
{% endblock %}
{% block container %}
<div class="row">
<div class="col-sm-3 pull-left">
<form method='POST' action=''>{% csrf_token %}
{{ form | crispy}}
<input class='btn btn-primary' type='submit' value='提交' />
<a href="{% url 'task_list' %} "><input class='btn btn-default' type='button' value='取消' /></a>
</form>
</div>
</div>
{% endblock %}
7.在django后台admin新增Employee的模型，并新建若干user和employee用户：
Admin.py:
from .models import Node, Line, Device, Employee
admin.site.register(Employee)
建立相关user用户：
并基于user,建立employee用户：
8.验证任务列表页面
9. 验证新增任务页面
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
