報修照片上傳

有時文字的描述不足以說明故障的狀況，若能讓報修人上傳照片輔助說明，就能讓維護單位更容易明白報修的狀況。

開啟檔案 repair/log/model.py 來新增照片欄位：

class LogItem(models.Model):
  # 處理進度的選項清單
  ST_OPTIONS = [
    (0, '待處理'),
    (1, '處理中'),
    (2, '已結案'),
  ]
  # 報修主旨
  subject = models.CharField('報修主旨', max_length=255)
  # 報修內容
  description = models.TextField('報修內容')
  # 報修人
  reporter = models.CharField('報修人', max_length=30)
  # 聯絡電話
  phone = models.CharField('聯絡電話', max_length=30)
  # 報修時間
  ctime = models.DateTimeField('報修時間', auto_now_add=True)
  # --------------------------------------------------
  # 處理人員
  handler = models.CharField('處理人員', max_length=30)
  # 處理進度
  status = models.IntegerField(
              '處理進度', 
              default=0, 
              choices=ST_OPTIONS
           )
  # 處理說明
  comment = models.TextField('處理說明')
  # 最後更新時間
  utime = models.DateTimeField('最後更新時間', auto_now=True)
  # 照片
  picture = models.ImageField('照片', blank=True, null=True)

  def __str__(self):
    return self.subject

  # 根據 status 的值傳回對應的 class 字串, 
  # 0 傳回 'danger', 1 傳回 'warning', 2 傳回 'success'
  def get_status_class(self):
    return ['danger', 'warning', 'success'][self.status]

要使用 ImageFiled 必須安裝 python 的 Pillow 套件，請在命令提示字元或終端機執行以 pip 指令進行安裝：

pip install Pillow

修改 models.py 後，要手動更新資料庫結構，請在終端機執行以下指令：

python manage.py makemigrations
python manage.py migrate

開啟檔案 repair/log/views.py 修改 LogCreate 類別的定義：

class LogCreate(CreateView):
  model = LogItem
  fields = ['subject', 'description', 'reporter', 'phone', 'picture']

  def get_success_url(self):
    return reverse('log_list')

然後還得修改專案的設定檔，指定上傳相片的儲存路徑。請修改 repair/repair/settings.py：

# Redirect to home URL after login (Default redirects to /accounts/profile/)
LOGIN_REDIRECT_URL = '/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

接著還得修改專案的路徑規則檔，讓存取路徑 MEDIA_URL 與實體路徑 MEDIA_ROOT 可以對應。請開啟專案路徑規則檔 repair/repair/urls.py：

from django.conf import settings
from django.conf.urls.static import static

# 底下這段放在檔案最後
urlpatterns += static(
  settings.MEDIA_URL, 
  document_root=settings.MEDIA_ROOT
)

修改 repair/log/templates/log/logitem_detail.html：

  <div class="card-body row">
    <div class="card-text col-md-7">
      {{ logitem.description|linebreaks }}
    </div>
    {% if logitem.picture %}
    <div class="card-img col-md-5">
      <a href="{{ logitem.picture.url }}" target="_blank">
        <img src="{{ logitem.picture.url }}" class="mw-100">
      </a>
    </div>
    {% endif %}
  </div>