商城价规格筛选条件

src/views/goods/Index.vue

@@ -19,6 +19,13 @@
               v-decorator="['categoryId', { initialValue: 0 }]"
             ></a-tree-select>
           </a-form-item>
+          <a-form-item label="规格类型">
+            <a-select @change="onchangeSpecs" placeholder="请选择">
+              <a-select-option :value="item.val" v-for="item in specsType" :key="item.val">
+                {{ item.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
           <a-form-item class="search-btn">
             <a-button type="primary" icon="search" html-type="submit">搜索</a-button>
           </a-form-item>
@@ -34,29 +41,21 @@
             <a-radio-button value="sold_out">已售罄</a-radio-button>
           </a-radio-group>
         </div>
-        <a-button
-          v-if="$auth('/goods/create')"
-          class="fl-l"
-          type="primary"
-          icon="plus"
-          @click="handleCreate()"
-        >创建商品</a-button
+        <a-button v-if="$auth('/goods/create')" class="fl-l" type="primary" icon="plus" @click="handleCreate()"
+          >创建商品</a-button
         >
         <a-button
           v-if="$module('goods-import') && $auth('/goods/import/batch')"
           class="fl-l"
           icon="arrow-up"
           @click="handleImport()"
-        >批量导入</a-button
+          >批量导入</a-button
         >
         <div v-if="selectedRowKeys.length" class="button-group">
           <a-button-group class="ml-10">
             <a-button v-action:status icon="arrow-up" @click="handleUpdateStatus(selectedRowKeys, true)">上架</a-button>
-            <a-button
-              v-action:status
-              icon="arrow-down"
-              @click="handleUpdateStatus(selectedRowKeys, false)"
-            >下架</a-button
+            <a-button v-action:status icon="arrow-down" @click="handleUpdateStatus(selectedRowKeys, false)"
+              >下架</a-button
             >
             <a-button v-action:delete icon="delete" @click="handleDelete(selectedRowKeys)">删除</a-button>
           </a-button-group>
@@ -89,20 +88,18 @@
           class="cur-p"
           :color="text == 10 ? 'green' : 'red'"
           @click="handleUpdateStatus([item.goods_id], text != 10)"
-        >{{ text == 10 ? '上架' : '下架' }}</a-tag
+          >{{ text == 10 ? '上架' : '下架' }}</a-tag
         >
       </span>
       <!-- 操作项 -->
       <div class="actions" slot="action" slot-scope="text, item">
-        <router-link
-          v-if="$auth('/goods/update')"
-          :to="{ path: '/goods/update', query: { goodsId: item.goods_id } }"
-        >编辑</router-link
+        <router-link v-if="$auth('/goods/update')" :to="{ path: '/goods/update', query: { goodsId: item.goods_id } }"
+          >编辑</router-link
         >
         <router-link
           v-if="$module('goods-copy') && $auth('/goods/copy')"
           :to="{ path: '/goods/copy', query: { goodsId: item.goods_id } }"
-        >复制</router-link
+          >复制</router-link
         >
         <a v-action:delete @click="handleDelete([item.goods_id])">删除</a>
       </div>
@@ -125,13 +122,13 @@ const columns = [
   {
     title: '商品图片',
     dataIndex: 'goods_image',
-    scopedSlots: { customRender: 'goods_image' }
+    scopedSlots: { customRender: 'goods_image' },
   },
   {
     title: '商品名称',
     dataIndex: 'goods_name',
     width: '302px',
-    scopedSlots: { customRender: 'goods_name' }
+    scopedSlots: { customRender: 'goods_name' },
   },
   {
     title: '商品价格',
@@ -158,12 +155,12 @@ const columns = [
   {
     title: '状态',
     dataIndex: 'status',
-    scopedSlots: { customRender: 'status' }
+    scopedSlots: { customRender: 'status' },
   },
   {
     title: '排序',
     dataIndex: 'sort',
-     sorter: true,
+    sorter: true,
   },
   {
     title: '添加时间',
@@ -175,17 +172,17 @@ const columns = [
     title: '操作',
     dataIndex: 'action',
     width: '150px',
-    scopedSlots: { customRender: 'action' }
-  }
+    scopedSlots: { customRender: 'action' },
+  },
 ]
 
 export default {
   name: 'Index',
   components: {
     ContentHeader,
-    STable
+    STable,
   },
-  data () {
+  data() {
     return {
       // 当前表单元素
       searchForm: this.$form.createForm(this),
@@ -193,7 +190,8 @@ export default {
       categoryListTree: [],
       // 查询参数
       queryParam: {
-        listType: 'all'
+        listType: 'all',
+        spec_type: '',
       },
       // 正在加载
       isLoading: false,
@@ -221,10 +219,15 @@ export default {
         return GoodsApi.list(data).then((response) => {
           return response.data.list
         })
-      }
+      },
+      specsType: [
+        { name: '全部', val: '' },
+        { name: '单规格', val: 10 },
+        { name: '多规格', val: 20 },
+      ],
     }
   },
-  created () {
+  created() {
     // 默认的查询参数
     if (this.$route.query.listType) {
       this.queryParam.listType = this.$route.query.listType
@@ -233,27 +236,30 @@ export default {
     this.getCategoryList()
   },
   computed: {
-    rowSelection () {
+    rowSelection() {
       return {
         selectedRowKeys: this.selectedRowKeys,
-        onChange: this.onSelectChange
+        onChange: this.onSelectChange,
       }
-    }
+    },
   },
   methods: {
+    onchangeSpecs(val) {
+      this.queryParam.spec_type = val
+    },
     // 选中项发生变化时的回调
-    onSelectChange (selectedRowKeys) {
+    onSelectChange(selectedRowKeys) {
       this.selectedRowKeys = selectedRowKeys
     },
 
     // 切换tab
-    handleTabs (e) {
+    handleTabs(e) {
       this.queryParam.listType = e.target.value
       this.handleRefresh(true)
     },
 
     // 确认搜索
-    handleSearch (e) {
+    handleSearch(e) {
       e.preventDefault()
       this.searchForm.validateFields((error, values) => {
         if (!error) {
@@ -264,12 +270,12 @@ export default {
     },
 
     // 重置搜索表单
-    handleReset () {
+    handleReset() {
       this.searchForm.resetFields()
     },
 
     // 获取分类列表
-    getCategoryList () {
+    getCategoryList() {
       this.isLoading = true
       CategoryModel.getListFromScreen()
         .then((selectList) => {
@@ -279,7 +285,7 @@ export default {
     },
 
     // 修改商品状态(上下架)
-    handleUpdateStatus (goodsIds, state = true) {
+    handleUpdateStatus(goodsIds, state = true) {
       if (!this.$auth('/goods/index.status')) {
         return false
       }
@@ -296,29 +302,29 @@ export default {
     },
 
     // 删除记录
-    handleDelete (goodsIds) {
+    handleDelete(goodsIds) {
       const app = this
       const modal = this.$confirm({
         title: '您确定要删除该记录吗?',
         content: '删除后不可恢复',
-        onOk () {
+        onOk() {
           return GoodsApi.deleted({ goodsIds })
             .then((result) => {
               app.$message.success(result.message, 1.5)
               app.handleRefresh()
             })
             .finally((result) => modal.destroy())
-        }
+        },
       })
     },
 
     // 新增记录
-    handleCreate () {
+    handleCreate() {
       this.$router.push('/goods/create')
     },
 
     // 批量导入
-    handleImport () {
+    handleImport() {
       this.$router.push('/goods/import/batch')
     },
 
@@ -326,11 +332,11 @@ export default {
      * 刷新列表
      * @param Boolean bool 强制刷新到第一页
      */
-    handleRefresh (bool = false) {
+    handleRefresh(bool = false) {
       this.selectedRowKeys = []
       this.$refs.table.refresh(bool)
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="less" scoped>