14.寻光集后台管理系统-产品信息-筛选部分

在上一章中已经有了一个产品信息的空白页了

这一章来实现它

最终效果

最终页面大概长这样

列表展示

编辑产品

筛选部分(后端)

类别和品牌的内容都是根据实际添加产品的类别和品牌生成的,所以需要有一个接口来获取他们

也就是对产品表中category和brand进行去重操作

category_list = Product.objects.values_list("category", flat=True).distinct()

去重之后再处理一下脏数据

category_list = [i.strip() for i in category_list if i != "" and i != None]

所以在backend/apps/product/views.py里面添加

@action(methods=['get'], detail=False)
def category_list(self, request):
    """
    返回类别列表
    """
    category_list = Product.objects.values_list("category", flat=True).distinct()
    category_list = [i.strip() for i in category_list if i != "" and i != None]
    return Response(data=category_list)

@action(methods=['get'], detail=False)
def brand_list(self, request):
    """
    返回品牌列表
    """
    brand_list = Product.objects.values_list("brand", flat=True).distinct()
    brand_list = [i.strip() for i in brand_list if i != "" and i != None]
    return Response(data=brand_list)

筛选部分(前端)

接口

新建一个js文件来存放产品信息相关的接口

frontend/src/api/model/products.js

import config from "@/config"
import http from "@/utils/request"

export default {
  list: {
    url: `${config.API_URL1}/product/`,
    name: "获取产品列表",
    get: async function (params) {
      return await http.get(this.url, params);
    }
  },
  add: {
    url: `${config.API_URL1}/product/`,
    name: "添加产品",
    post: async function (data) {
      return await http.post(this.url, data);
    }
  },
  edit: {
    url: `${config.API_URL1}/product/`,
    name: "修改产品",
    put: async function (id, data) {
      return await http.put(`${this.url}${id}/`, data);
    }
  },
  del: {
    url: `${config.API_URL1}/product/`,
    name: "删除产品",
    delete: async function (id) {
      return await http.delete(`${this.url}${id}/`);
    }
  },
  category_list: {
    url: `${config.API_URL1}/product/category_list/`,
    name: "获取全部产品类别",
    get: async function (params) {
      return await http.get(this.url, params);
    }
  },
  brand_list: {
    url: `${config.API_URL1}/product/brand_list/`,
    name: "获取全部产品品牌",
    get: async function (params) {
      return await http.get(this.url, params);
    }
  },
}

顺便放上它的增删改查接口

页面

先简单搭建一下页面结构

<template>
  <el-container>
    <el-header style="height: auto;">
      <sc-select-filter :data="filterData" :label-width="80"></sc-select-filter>
    </el-header>
  </el-container>
</template>

<script>
import scSelectFilter from '@/components/scSelectFilter'

export default {
  name: "product",
  components: {
    scSelectFilter
  },
  data(){
    return  {
      filterData: [
        {
          title: "类别",
          key: "category",
          multiple: false,
          options: [
            {
              label: "全部",
              value: ""
            },
          ]
        },
        {
          title: "品牌",
          key: "brand",
          multiple: false,
          options: [
            {
              label: "全部",
              value: ""
            },
          ]
        }
      ],
    }
  },
  methods:{
  }
}
</script>

<style scoped>

</style>

然后进行数据的获取

在created也就是进入该页面的时候就会去请求这两个接口,然后把数据合并到之前的对象里面,渲染的时候就会增加除了「全部」之外的部分

methods:{
    async get_category_list() {
      var category_list = await this.$API.products.category_list.get()
      this.filterData[0]["options"] = [{label: "全部", value: ""}]
      for (const categoryListElement of category_list) {
        this.filterData[0]["options"].push(
          {
            label: categoryListElement,
            value: categoryListElement
          },
        )
      }
    },
    async get_brand_list() {
      var brand_list = await this.$API.products.brand_list.get()
      this.filterData[1]["options"] = [{label: "全部", value: ""}]
      for (const brandListElement of brand_list) {
        this.filterData[1]["options"].push(
          {
            label: brandListElement,
            value: brandListElement
          },
        )
      }
    },
  },
created() {
  this.get_category_list()
  this.get_brand_list()
},

测试

查看页面可以发现,类别和品牌中的信息不单单只有「全部」了