Как выполнить фильтрацию в django и vuejs?

В настоящее время у меня есть два поля ввода, одно для фильтрации персонала и фильтрации медицинского пакета на сайте. Я могу фильтровать на основе персонала, но не могу фильтровать на основе медицинского пакета. Я объявил medical_package__in в filters.py. Однако при фильтрации по медицинскому пакету результатов все равно нет. Может ли кто-нибудь помочь мне в этом вопросе?

Бэкэнд - filters.py

class StaffMedicalPackageFilter(FilterSet):
    staff__in = BaseInFilter(field_name="staff", lookup_expr='in')
    staff__username_in = BaseInFilter(field_name="staff__username", lookup_expr='in')
    department__in = BaseInFilter(field_name="staff__department", lookup_expr='in')
    medical_package__in = BaseInFilter(field_name="medical_package__id", lookup_expr='in')
    created_at__gte = DateTimeFilter(field_name="created_at", lookup_expr='gte')
    created_at__lt = DateTimeFilter(field_name="created_at", lookup_expr='lt')

    class Meta:
        model = StaffMedicalPackage
        fields = [
           'staff',
           'staff__in',
           'staff__username_in',
           'medical_package__in',
           'department__in',
           'created_at__gte',
           'created_at__lt',]

Бэкэнд - view.py

class StaffMedicalPackageList(generics.ListCreateAPIView):
    queryset = StaffMedicalPackage.objects.all()
    serializer_class = StaffMedicalPackageSerializer
    filterset_class = StaffMedicalPackageFilter
    permission_classes = [permissions.IsAuthenticated,]

@decorators.api_view(['OPTIONS'])
@decorators.permission_classes([permissions.IsAuthenticated,])
def staffmedicalpackage_filters(request):
    result =  {
        "actions": {
            "POST": {
                "staff__in": {
                    "type": "field",
                    "required": False,
                    "read_only": True,
                    "label": "Staff"
                },
                "medical_package__in": {
                    "type": "field",
                    "required": False,
                    "read_only": False,
                    "label": "Medical package",
                }
            }
        }
    }

    return response.Response(result)

Бэкэнд - serializers.py

class StaffMedicalPackageSerializer(serializers.ModelSerializer):
    staff_detail = StaffSerializer(read_only=True, source='staff')
    medical_package_detail = MedicalPackageSerializer(read_only=True, source='medical_package')
    current_year = serializers.ChoiceField(choices = YEARS, source = 'created_at', required=False)

    class Meta:
        model = StaffMedicalPackage
        fields = [
            "id",
            "created_at",
            "updated_at",
            "current_year",
            "medical_package",
            "medical_package_detail",
            "staff",
            "staff_detail",
            'general_balance',
            'dental_balance',
            'exceeded_amount',]

Frontend - index.vue

 methods: {

    async getFilters() {
        let tmp = await this.api.medical.optionsStaffMedicalPackageFilters();
        this.filters = tmp

        this.$set(this.filters.staff__in, "item_text", "name")
        this.$set(this.filters.staff__in, "item_value", "id")
        this.$set(this.filters.staff__in, "read_only", true);
        this.$set(this.filters.staff__in, "disabled", true);
        this.$set(this.filters.staff__in, "items", await this.api.training.listStaffs({}));
        this.$set(this.filters.staff__in, "read_only", false);
        this.$set(this.filters.staff__in, "disabled", false);

        this.$set(this.filters.medical_package__in, "item_text", "medical_package_name")
        this.$set(this.filters.medical_package__in, "item_value", "id")
        this.$set(this.filters.medical_package__in, "read_only", true);
        this.$set(this.filters.medical_package__in, "disabled", true);
        this.$set(this.filters.medical_package__in, "items", await this.api.medical.listMedicalPackage());

        this.$set(this.filters.medical_package__in, "read_only", false);
        this.$set(this.filters.medical_package__in, "disabled", false);

    },
    async loadItems() {
      let params = {}

      for (const property in this.filters) {
        if (this.filters[property].hasOwnProperty('value')) {
          params[property] = this.filters[property].value
        }
      }

      this.isTableLoading = true;
      this.tableData = await this.api.medical.listStaffMedicalPackage(params);
      this.isTableLoading = false;
    },
    getTableHeader() {
      this.tableHeaders = [
        { text: 'Staff', value: 'staff_detail' },
        { text: 'Medical Package', value: 'medical_package_detail' },
        { text: 'General Balance (RM)', value: 'general_balance' },
        { text: 'Dental Balance (RM)', value: 'dental_balance' },
        { text: 'Exceeded Amount (RM)', value: 'exceeded_amount' },
        { text: 'Created At', value: 'created_at' },
        { text: 'Updated At', value: 'updated_at' },
        { text: 'Actions', value: 'actions', sortable: false },
      ];
    }

Вернуться на верх