{% extends 'tasks/base.html' %} {% block main_content %} <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <div class="content-header"> <div class="container-xl"> <div class="row mb-2"> <div class="col-sm-6"> <h1 class="m-0"> 年度任务 <small></small></h1> </div><!-- /.col --> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item"><a href="{% url 'tasks:index' %}">主页</a></li> <li class="breadcrumb-item active">年度任务</li> </ol> </div><!-- /.col --> </div><!-- /.row --> </div><!-- /.container-fluid --> </div> <!-- /.content-header --> <div class="content"> <div class="container-xl"> <div class="row"> {# col-lg-6 #} <div class="col-12" style="font-size: 0.8rem; overflow: auto"> <div class="card"> {# <div class="card-header">#} {# <h3 class="card-title">我的任务</h3>#} {# </div>#} <!-- /.card-header --> <div class="card-body p-0"> <table class="table table-striped" style="word-break: break-all; overflow: auto" cellspacing="0"> <div class="row"> <div class="col-12" style="background-color: #f2f2f2"> <button type="button" id="unfold" onclick="alert1()" class="btn btn-default float-left" style="display: block;"><i class="far fa-credit-card"></i> 展开</button> <button type="button" id="fold" onclick="alert1()" class="btn btn-default float-left" style="display: none;"><i class="far fa-credit-card"></i> 收起</button> <ul class="pagination float-md-right"> {% load taskfilter %} <li class="page-item"><a class="page-link" href="/tasklist/{{ year_quarter.1|last_year }}">«</a></li> <li class="page-item"><a class="page-link"> {{ year_quarter.1|this_year }}年 </a></li> <li class="page-item"><a class="page-link" href="/tasklist/{{ year_quarter.1|next_year }}">»</a></li> </ul> </div> </div> <thead> <tr style="background-color: #f2f2f2"> <th style="width: 140px; text-align:center; vertical-align: middle;">任务属性</th> <th style="width: 60px; text-align:center; vertical-align: middle;">任务编号</th> <th style="width: 220px; text-align:center; vertical-align: middle;">任务名称</th> <th style="width: 120px; text-align:center; vertical-align: middle;">任务来源</th> <th style="width: 120px;text-align:center; vertical-align: middle;">目标值</th> <th style="text-align:center; vertical-align: middle; padding: 0" colspan="4"> <table class="table" style="margin: 0;" cellpadding="0"> <tr style="background-color: #f2f2f2"><th colspan="4">任务显性目标及节点</th></tr> <tr> <td style="background-color: #BFE7A8; padding-left: 12px">一季度</td> <td style="background-color: #F5CCB0">二季度</td> <td style="background-color: #F7E4A8">三季度</td> <td style="background-color: #83E1E3; padding-right: 12px">四季度</td> </tr> {# <thead>#} {# 任务显性目标及节点#} {# </thead>#} {# <thead>#} {# <tr>#} {# <td>一季度</td>#} {# <td>二季度</td>#} {# <td>三季度</td>#} {# <td>四季度</td>#} {# </tr>#} {# </thead>#} </table> </th> <th style="width: 80px; text-align:center; vertical-align: middle;">完成日期</th> <th style="width: 100px; text-align:center; vertical-align: middle;">责任单位</th> <th style="width: 100px; text-align:center; vertical-align: middle;">负责人</th> <th style="width: 100px; text-align:center; vertical-align: middle;">主管领导</th> <th style="width: 240px; text-align:center; vertical-align: middle;">任务说明</th> {# <th style="width: 40px">Label</th>#} </tr> </thead> <tbody style="font-size: 0.9rem"> {% for task in tasks %} <tr style="background-color: white"> <td style="text-align:center;">{{ task.task_property }}</td> <td style="text-align:center;">{{ task.task_id }}</td> <td>{{ task.task_topic }}</td> <td style="text-align:center;">{{ task.task_origin }}</td> <td>{{ task.aim_value }}</td> {% load taskfilter %} <td style="background-color: #BFE7A8; padding: 0"> <textarea class="text-none-border" style="background-color: #BFE7A8;">{% for todo in task.related_task.all %}{{ todo|quarter_cate:year_quarter.1|safe }}{% endfor %}</textarea> </td> <td style="background-color: #F5CCB0; padding: 0"> <textarea class="text-none-border" style="background-color: #F5CCB0">{% for todo in task.related_task.all %}{{ todo|quarter_cate:year_quarter.2|safe }}{% endfor %}</textarea> </td> <td style="background-color: #F7E4A8; padding: 0"> <textarea class="text-none-border" style="background-color: #F7E4A8">{% for todo in task.related_task.all %}{{ todo|quarter_cate:year_quarter.3|safe }}{% endfor %}</textarea> </td> <td style="background-color: #83E1E3; padding: 0"> <textarea class="text-none-border" style="background-color: #83E1E3">{% for todo in task.related_task.all %}{{ todo|quarter_cate:year_quarter.4|safe }}{% endfor %}</textarea> </td> <td style="text-align:center;">{{ task.deadline | date:"Y.m" }}</td> <td style="text-align:center;">{{ task.duty_group }}</td> <td style="text-align:center;">{{ task.principal }}</td> <td style="text-align:center;">{{ task.leader|default_if_none:"" }}</td> <td><textarea style="overflow:hidden;width:100%;">{{ task.task_note }}</textarea></td> </tr> {% endfor %} </tbody> </table> </div> <!-- /.card-body --> </div> </div> </div> <!-- /.row --> </div><!-- /.container-fluid --> </div> <!-- /.content --> </div> <!-- /.content-wrapper --> <script> function setHeight(element) { $(element).css({'height':'auto','overflow-y':'hidden'}).height(element.scrollHeight); } $('textarea').each(function () { setHeight(this); }).on('input', function () { setHeight(this); }); </script> {% endblock %} {% block script %} <script> $('#unfold').click(function (element){ var unfold = document.getElementById("unfold"); var fold = document.getElementById("fold"); unfold.style.display = "none"; fold.style.display = "block"; $(element).css({'height':'auto','overflow-y':'hidden'}).height(element.scrollHeight); $('textarea').each(function () { setHeight(this); }).on('input', function () { setHeight(this); }); }) $('#fold').click(function (element){ var unfold = document.getElementById("unfold"); var fold = document.getElementById("fold"); unfold.style.display = "block"; fold.style.display = "none"; location.reload(); // TODO 暂时无法解决让textarea恢复原本高度的问题,使用刷新代替 }) </script> {% endblock %}