fix: comment

src/views/rating/topic/index.vue

@@ -6,6 +6,19 @@
       </vab-query-form-left-panel>
       <vab-query-form-left-panel>
         <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-select
+              v-model="queryForm.categoryId"
+              v-loadmore="loadMoreCategories"
+              clearable
+              filterable
+              placeholder="请选择分类"
+              style="width: 200px"
+              @change="queryData"
+            >
+              <el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id" />
+            </el-select>
+          </el-form-item>
           <el-form-item>
             <el-select v-model="queryForm.status" clearable placeholder="请选择状态" @change="queryData">
               <el-option label="审核中" :value="1" />
@@ -121,6 +134,7 @@
 
 <script>
   import { getList } from '@/api/rating/topic'
+  import { getList as getCategoryList } from '@/api/rating/topicCategory'
   import { reviewTopic } from '@/api/rating/topicOperate'
   import { formatTime } from '@/utils'
   import { getThumbUrl } from '@/utils/blessing'
@@ -130,6 +144,23 @@
   export default {
     name: 'RatingTopicIndex',
     components: { TopicEdit, UserInfo },
+    directives: {
+      loadmore: {
+        bind(el, binding) {
+          setTimeout(() => {
+            const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
+            if (SELECTWRAP_DOM) {
+              SELECTWRAP_DOM.addEventListener('scroll', function () {
+                const condition = this.scrollHeight - this.scrollTop <= this.clientHeight + 2
+                if (condition) {
+                  binding.value()
+                }
+              })
+            }
+          }, 0)
+        },
+      },
+    },
     data() {
       return {
         list: [],
@@ -142,18 +173,42 @@
           pageSize: 10,
           keyword: '',
           status: '',
+          categoryId: '',
         },
+        categoryList: [],
+        categoryQuery: { pageNo: 1, pageSize: 20 },
+        categoryTotal: 0,
+        fetchingCategories: false,
       }
     },
     created() {
       if (this.$route.query.topicId) {
         this.queryForm.keyword = this.$route.query.topicId
       }
+      this.fetchCategoryList()
       this.fetchData()
     },
     methods: {
       formatTime,
       getThumbUrl,
+      async fetchCategoryList() {
+        if (this.fetchingCategories) return
+        this.fetchingCategories = true
+        try {
+          const { data } = await getCategoryList(this.categoryQuery)
+          this.categoryList = this.categoryList.concat(data.list || [])
+          this.categoryTotal = data.totalCount || 0
+        } catch (error) {
+          console.error(error)
+        } finally {
+          this.fetchingCategories = false
+        }
+      },
+      loadMoreCategories() {
+        if (this.categoryList.length >= this.categoryTotal || this.fetchingCategories) return
+        this.categoryQuery.pageNo += 1
+        this.fetchCategoryList()
+      },
       handleAdd() {
         this.$refs['edit'].showEdit()
       },
@@ -172,7 +227,9 @@
       async fetchData() {
         this.listLoading = true
         try {
-          const { data } = await getList(this.queryForm)
+          const params = { ...this.queryForm }
+          if (!params.categoryId) delete params.categoryId
+          const { data } = await getList(params)
           this.list = data.list
           this.total = data.totalCount
         } catch (error) {