商品列表新增商品分类、商品标签筛选

src/views/business/goods/add.vue

@@ -35,7 +35,6 @@
               v-model="addData.categoryId"
               placeholder="请选择商品分类"
               clearable
-              size="small"
             >
               <el-option :label="item.name" :value="item.categoryId" v-for="(item, index) in goodsCategoryItemsList" :key="index" />
             </el-select>
@@ -50,7 +49,6 @@
               placeholder="请选择商品标签"
               multiple 
               clearable
-              size="small"
             >
               <el-option :label="item.name" :value="item.tagId" v-for="(item, index) in goodsTagItemsList" :key="index" />
             </el-select>

src/views/business/goods/index.vue

@@ -12,11 +12,31 @@
       <el-form-item label="商品ID">
         <el-input
           v-model="queryParams.goodsId"
-          placeholder="请输入商品名称"
+          placeholder="请输入商品ID"
           clearable
           @keyup.enter.native="queryParams.pageNum = 1;getList()"
         />
       </el-form-item>
+      <el-form-item label="商品分类">
+       <el-select
+          v-model="queryParams.categoryId"
+          placeholder="请选择商品分类"
+          clearable
+          @change="queryParams.pageNum = 1;getList()"
+        >
+          <el-option :label="item.name" :value="item.categoryId" v-for="(item, index) in goodsCategoryItemsList" :key="index" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商品标签">
+        <el-select
+          v-model="queryParams.tagId"
+          placeholder="请选择商品标签"
+          clearable
+          @change="queryParams.pageNum = 1;getList()"
+        >
+          <el-option :label="item.name" :value="item.tagId" v-for="(item, index) in goodsTagItemsList" :key="index" />
+        </el-select>
+      </el-form-item>
       <el-form-item label="上架状态">
         <el-select v-model="queryParams.status" placeholder="请选择商品状态" clearable @change="queryParams.pageNum = 1;getList()">
           <el-option label="全部" value="" />
@@ -114,6 +134,8 @@
 <script>
 import { publicFileGetUrl } from "@/api/common"
 import { getGoodsList, delGoods, setGoodsStatus } from '@/api/business/goods'
+import { goodsCategoryItems } from '@/api/business/category'
+import { goodsTagItems } from '@/api/business/tag'
 import { accMul } from '@/utils/util'
 export default {
   name: 'List',
@@ -124,13 +146,27 @@ export default {
       showSearch: true,
       queryParams: {},
       tableData: [],
-      total: 0
+      total: 0,
+      goodsCategoryItemsList: [],
+      goodsTagItemsList: [],
     }
   },
   created() {
     this.getList(true)
+    this.getGoodsCategoryItems()
+    this.getGoodsTagItems()
   },
   methods: {
+    getGoodsCategoryItems(){
+      goodsCategoryItems({}).then(res => {
+        this.goodsCategoryItemsList = res && res.data
+      })
+    },
+    getGoodsTagItems(){
+      goodsTagItems({}).then(res => {
+        this.goodsTagItemsList = res && res.data
+      })
+    },
     getList(reset) {
       if (this.loading) {
         return
@@ -142,6 +178,8 @@ export default {
       getGoodsList('pageNum='+this.queryParams.pageNum + '&pageSize='+this.queryParams.pageSize+'&', {
         title: this.queryParams.title,
         goodsId: this.queryParams.goodsId,
+        categoryId: this.queryParams.categoryId,
+        tagId: this.queryParams.tagId,
         status: this.queryParams.status,
         exchangeShow: this.queryParams.exchangeShow,
         minCost: accMul(this.queryParams.minCost, 100),