feat: feadback

src/views/spring/wallpaper/system/index.vue

@@ -17,9 +17,17 @@
       </vab-query-form-right-panel>
     </vab-query-form>
 
-    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
+    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @filter-change="handleFilterChange">
       <el-table-column align="center" label="排序" prop="sort" show-overflow-tooltip />
-      <el-table-column align="center" label="类型" prop="categoryName" show-overflow-tooltip />
+      <el-table-column
+        align="center"
+        column-key="categoryIds"
+        :filter-multiple="true"
+        :filters="typeFilters"
+        label="类型"
+        prop="categoryName"
+        show-overflow-tooltip
+      />
       <el-table-column align="center" label="壁纸" width="100">
         <template slot-scope="scope">
           <el-tooltip class="item" :content="scope.row.id" effect="dark" placement="top">
@@ -72,6 +80,7 @@
       return {
         doAdd,
         typeList: [],
+        typeFilters: [],
         list: null,
         listLoading: true,
         layout: 'total, sizes, prev, pager, next, jumper',
@@ -82,6 +91,7 @@
           pageNo: 1,
           pageSize: 10,
           keyword: '',
+          categoryIds: [],
         },
         timeOutID: null,
       }
@@ -98,6 +108,10 @@
       async fetchTypeList() {
         const { data } = await getAllList()
         this.typeList = data || []
+        this.typeFilters = (data || []).map((item) => ({
+          text: item.name,
+          value: item.id,
+        }))
       },
       handleBatchAdd() {
         this.$refs['batchAdd'].show()
@@ -184,6 +198,13 @@
         if (enabled.length === 0) return false
         return enabled[enabled.length - 1].id === row.id
       },
+      handleFilterChange(filters) {
+        console.log(filters)
+        const values = filters.categoryIds || []
+        this.queryForm.categoryIds = values.length ? values : []
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
     },
   }
 </script>