HackMD - Markdown 協作知識庫

管理人員維護報修紀錄

未登入的使用者新增報修記錄後，管理人員需要以帳號密碼登入系統之後，才能針對報修記錄回覆維修進度與狀況。

限定需登入才能回覆維修進度

視圖裡的 LogReply 類別需要限制在使用者登入之後才允許操作，請修改 repair/log/views.py：



from django.urls import reverse
from django.contrib.auth.mixins import LoginRequiredMixin
from .models import LogItem






class LogReply(LoginRequiredMixin, UpdateView):
  model = LogItem
  fields = ['handler', 'status', 'comment']

  def get_success_url(self):
    return reverse('log_view', self.object.id)

自動填入表單預設值

管理人員在回覆維修進度時，希望可以直接預先將管理人員的資訊填入「處理人員」的欄位，不需要管理人員手動登打的話，需要再修改一下 LogReply 類別。

修改 repair/log/views.py：


















class LogReply(LoginRequiredMixin, UpdateView):
  model = LogItem
  fields = ['handler', 'status', 'comment']

  def get_success_url(self):
    return reverse('log_view', self.object.id)
  
  # get_initial: 設定表單初始預設值
  def get_initial(self):
    data = {}
    # 取得目前登入的使用者資訊
    u = self.request.user
    # 如果有名字，就填名字，否則就填帳號名稱
    if u.first_name:
      data['handler'] = u.first_name
    else:
      data['handler'] = u.username
    return data

讓檢視與填表共用範本

我們在 repair/log/views.py 裡的 LogCreate 以及 LogReply 這兩個類別底下都沒有透過 template_name 屬性指定欲使用的頁面範本，而通用視圖 CreateView 與 UpdateView 的衍生類別預設會使用 所屬應用程式/參考資料模型_form.html 當作其使用的頁面範本檔案，因此 LogCreate 與 LogReply 會共用頁面範本資料夾下的 log/logitem_form.html。

除了這種另外定義一個頁面範本來顯示表單的做法之外，若想讓檢視報修記錄與維護報修記錄的頁面外觀看起來更一致的話，也可以考慮與檢視報修紀錄共用同一個頁面範本。

修改檢視報修記錄頁面範本 repair/log/templates/log/logitem_detail.html：


















































{% extends 'base.html' %}

{% block content %}
<div class="card">
  <div class="card-header">
    <div class="h3">{{ logitem.subject }}</div>
  </div>
  <div class="card-body">
    <div class="card-text">
      {{ logitem.description|linebreaks }}
    </div>
  </div>
  <div class="card-footer card-text d-flex justify-content-between text-muted">
    <small title="報修人"><i class="fas fa-user"></i> {{ logitem.reporter }} <i class="fas fa-phone"></i> {{ logitem.phone }}</small>
    <small><i class="far fa-clock"></i> {{ logitem.ctime }}</small>
  </div>
</div>
<hr>
<div class="card mt-3">
  {% if form %}
  <form action="" method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <div class="card-header d-flex justify-content-between">
    <div class="h3">處理狀況說明</div>
    <div>{{ form.status }}</div>
  </div>
  <div class="card-body">{{ form.comment }}</div>
  <div class="card-footer card-text d-flex justify-content-between text-muted">
    <small title="處理人員"><i class="fas fa-user-md"></i> {{ form.handler }}</small>
    <input type="submit" value="送出" class="btn btn-sm btn-primary">
    <small><i class="far fa-clock"></i> {{ logitem.utime }}</small>
  </div>
  </form>
  {% else %}
  <div class="card-header d-flex justify-content-between">
    <div class="h3">處理狀況說明</div>
    <div>
      <span class="badge badge-{{ logitem.get_status_class }}">
      {{ logitem.get_status_display }}
      </span>
    </div>
  </div>
  <div class="card-body">{{ logitem.comment|linebreaks }}</div>
  <div class="card-footer card-text d-flex justify-content-between text-muted">
    <small title="處理人員"><i class="fas fa-user-md"></i> {{ logitem.handler }}</small>
    <small><i class="far fa-clock"></i> {{ logitem.utime }}</small>
  </div>
  {% endif %}
</div>
{% endblock %}

在這個示範中展現的是以一組控制結構將檢視與填寫表單分別處理，當然也可以固定資訊卡片的結構不動，分別在每個欄位以一組控制結構選擇要顯示表單欄位或是普通欄位資訊，例：
```
<div class="card-body">
  {% if form %}
    {{ form.comment }}
  {% else %}
    {{ logitem.comment|linebreaks }}
  {% endif %}
</div>
```

接著記得修改 repair/log/views.py ，指定 LogReply 這個類別要使用的範本：



















class LogReply(LoginRequiredMixin, UpdateView):
  model = LogItem
  fields = ['handler', 'status', 'comment']
  template_name = 'log/logitem_detail.html'

  def get_success_url(self):
    return reverse('log_view', kwargs={'pk': self.object.id})
  
  # get_initial: 設定表單初始預設值
  def get_initial(self):
    data = {}
    # 取得目前登入的使用者資訊
    u = self.request.user
    # 如果有名字，就填名字，否則就填帳號名稱
    if u.first_name:
      data['handler'] = u.first_name
    else:
      data['handler'] = u.username
    return data

修改表單元件外觀

預設的多行文字欄位(Textarea)元件的預設尺寸在頁面上顯示起來僅佔用了一半不到的寬度，若要使其佔用整列的寬度，可以為其套用 form-control CSS 類別。

前面有示範過以 Javascript 來套用 form-control 類別，若不採用 Javascript 的話，則需要在 Django 中自訂表單類別，然後在表單類別中指定輸入元件的屬性。

新增表單定義檔 repair/log/forms.py ：













from django import forms
from .models import LogItem

class LogItemForm(forms.ModelForm):
  class Meta:
    model = LogItem
    fields = ['handler', 'status', 'comment']
    widgets = {
      'comment': forms.Textarea(attrs={
        'class': 'form-control', 
        'placeholder': '請在此輸入處理情形...'},
      ),
    }

接著修改 repair/log/views.py，指定 LogReply 的 form_class 屬性：


from .models import LogItem
from .forms import LogItemReplyForm




















class LogReply(LoginRequiredMixin, UpdateView):
  model = LogItem
  #fields = ['handler', 'status', 'comment']
  form_class = LogItemForm
  template_name = 'log/logitem_detail.html'

  def get_success_url(self):
    return reverse('log_view', kwargs={'pk': self.object.id})
  
  # get_initial: 設定表單初始預設值
  def get_initial(self):
    data = {}
    # 取得目前登入的使用者資訊
    u = self.request.user
    # 如果有名字，就填名字，否則就填帳號名稱
    if u.first_name:
      data['handler'] = u.first_name
    else:
      data['handler'] = u.username
    return data

檢視報修記錄新增回覆維修進度連結

管理人員在檢視報修項目內容之後，可以回覆目前的維修進度。請修改檢視報修記錄頁面範本 repair/log/templates/log/logitem_detail.html：







  <div class="card-footer card-text d-flex justify-content-between text-muted">
    <small title="處理人員"><i class="fas fa-user-md"></i> {{ logitem.handler }}</small>
    {% if user.is_authenticated %}
    <a href="{% url 'log_reply' logitem.id %}" class="btn btn-sm btn-primary">回覆</a>
    {% endif %}
    <small><i class="far fa-clock"></i> {{ logitem.utime }}</small>
  </div>