十六.增加一个项目协作留言板功能（二）----- 建立一个任务管理的列表页面 / 憋错料

我们设计一个页面来展示正在处理的任务，该表格可以参照之前基础信息的增删改查。用户通过这个页面对任务进行相应操作。

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. 验证新增任务页面

时间： 2024-08-05 22:17:48

十六.增加一个项目协作留言板功能（二）----- 建立一个任务管理的列表页面

十六.增加一个项目协作留言板功能（二）----- 建立一个任务管理的列表页面的相关文章

JAVA-集合作业-已知有十六支男子足球队参加2008 北京奥运会。写一个程序，把这16 支球队随机分为4 个组。采用List集合和随机数

jsp中运用application实现共享留言板功能

Web开发从零单排之二：在自制电子请帖中添加留言板功能,SAE+PHP+MySql

使用PHP连接数据库实现留言板功能

用js做一个简单的留言板效果

自己做的一个登陆注册留言板的界面未实现功能求指点待更。。。。。。

使用JSP、Servlet实现一个简单的留言板

一个简陋的留言板

实现留言板功能