我如何将我的投诉列表呈现为卡片以便能够查看它们？

Question

我建立了一个投诉管理系统，系统可以接受用户的投诉，查看和编辑。用户现在可以提交投诉，这些投诉会存储在管理面板中。对于查看投诉页面，我有这些卡片，他们可以通过这些卡片查看投诉。我该怎么做才能在屏幕上看到一定数量的卡片。例如：如果有两个投诉，则用户看到两张卡片等等。另外，我如何显示这些卡片中的信息？我猜它会通过一个列表和一个 for 循环和其他东西，但我不知道如何。 views.py和forms.py应该写什么?

models.py:

class Complaint(models.Model):
   user = models.ForeignKey(User, on_delete= models.CASCADE, null = True, blank=True)
   reportnumber = models.CharField(max_length=500 ,null = True, blank= False)
   eventdate = models.DateField(null=True, blank=False)
   event_type = models.CharField(max_length=300, null=True, blank=True)
   device_problem = models.CharField(max_length=300, null=True, blank=True)
   manufacturer = models.CharField(max_length=300, null=True, blank=True)
   product_code = models.CharField(max_length=300, null=True, blank=True)
   brand_name = models.CharField(max_length = 300, null=True, blank=True)
   exemption = models.CharField(max_length=300, null=True, blank=True)
   patient_problem = models.CharField(max_length=500, null=True, blank=True)
   event_text = models.TextField(null=True, blank= True)
   document = models.FileField(upload_to='static/documents', blank=True, null=True)

   def __str__(self):
       return self.reportnumber

forms.py:

class DateInput(forms.DateInput):
   input_type = 'date'

class ComplaintForm(ModelForm):
    class Meta:
        model = Complaint
        fields = '__all__'
        widgets = {
            'reportnumber': forms.TextInput(attrs={'placeholder': 'Report number'}),
            'event_type': forms.TextInput(attrs={'placeholder': 'Event type'}),
            'eventdate': DateInput(),
            'device_problem': forms.TextInput(attrs={'placeholder': 'Device Problem'}),
            'event_text': forms.Textarea(attrs={'style': 'height: 130px;width:760px'}),
            'manufacturer': forms.TextInput(attrs={'placeholder': 'Enter Manufacturer Name'}),
            'product_code': forms.TextInput(attrs={'placeholder': 'Enter Product Code'}),
            'brand_name': forms.TextInput(attrs={'placeholder': 'Enter Brand Name'}),
            'exemption': forms.TextInput(attrs={'placeholder': 'Enter Exemption'}),
            'patient_problem': forms.TextInput(attrs={'placeholder': 'Enter Patient 
Problem'}),
        }
    
    def clean(self):
        cleaned_data = super(ComplaintForm, self).clean()
        reportnumber = cleaned_data.get('reportnumber')
        event_text = cleaned_data.get('event_text')
        if not reportnumber and not event_text:
            raise forms.ValidationError('You have to write something!')
        return cleaned_data

模板：

<div class="col-lg middle middle-complaint-con">
        <i class="fas fa-folder-open fa-4x comp-folder-icon"></i>
        <h1 class="all-comp">My Complaints</h1>
        <p class="all-comp-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <a href="new.html" style="color:black;">
            <div class="container comp-con-1">
                <p class="history-level-1">Report number</p>
                <p class="comp-title-1">Complaint Title</p>
                <p class="comp-sub-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </a>

        <a href="new.html" style="color:black;">
            <div class="container comp-con-2">
                <p class="history-level-2">Report number</p>
                <p class="comp-title-2">Complaint Title</p>
                <p class="comp-sub-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </a>

        <a href="new.html" style="color:black;">
            <div class="container comp-con-3">
                <p class="history-level-2">Report number</p>
                <p class="comp-title-2">Complaint Title</p>
                <p class="comp-sub-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </a>

        <a href="new.html" style="color:black;">
            <div class="container comp-con-4">
                <p class="history-level-1">Report number</p>
                <p class="comp-title-1">Complaint Title</p>
                <p class="comp-sub-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </a>
    </div>

页面应该是这样的：

橙卡和蓝卡需要有投诉信息。投诉标题是事件类型来自投诉模型的地方，报告编号是报告编号，下面的 desc 是事件文本。我不知道该怎么做。有人可以告诉我如何呈现此内容并以卡片形式查看投诉

Answer 1

在您的 views.py 中，您必须从模型中获取所有相关的投诉数据，然后使用上下文字典将获取的数据传递给模板。

Views.py

from .models import Complaint #Importing your model
from django.views import View   #Importing View class
from django.contrib.auth.mixins import LoginRequiredMixin #Importing login required check mixin

class MyComplaintHistoryView(LoginRequiredMixin,View):
   def get(self,request,*args,**kwargs):
      complaint_data = Complaint.objects.filter(user=request.user) # Fetch all the complaint data for this logged in user
      context = { 'complaint':complaint_data }
      return render(request,"yourtempalate.html", context)

在你的Template.html中添加这个

{%for c in complaint %}
        <a href="new.html" style="color:black;">
            <div class="container comp-con-3">
                <p class="history-level-2">{{c.reportnumber}}</p>
                <p class="comp-title-2">{{c.event_title}}</p>
                <p class="comp-sub-2">{{c.event_text}}</p>
            </div>
        </a>
{%endfor%}

我如何将我的投诉列表呈现为卡片以便能够查看它们？

How do i render my list of complaints into cards to be able to view them?

django

django-templates

django-models

django-forms

django-views