商品列表

src/router/index.js

@@ -116,6 +116,41 @@ export const constantRoutes = [
         name: 'List',
         component: () => import('@/views/goods/list'),
         meta: { title: '商品列表', icon: 'list' }
+      },
+      {
+        path: 'list/preferred',
+        name: 'PreferredProduct',
+        component: () => import('@/views/goods/list-preferred'),
+        meta: { title: '星范优选', noCache: true, activeMenu: '/goods/list' },
+        hidden: true
+      },
+      {
+        path: 'list/preferential',
+        name: 'PreferentialProduct',
+        component: () => import('@/views/goods/list-preferential'),
+        meta: { title: '星范精品', noCache: true, activeMenu: '/goods/list' },
+        hidden: true
+      },
+      {
+        path: 'list/commonly',
+        name: 'CommonlyProduct',
+        component: () => import('@/views/goods/list-commonly'),
+        meta: { title: '常用商品', noCache: true, activeMenu: '/goods/list' },
+        hidden: true
+      },
+      {
+        path: 'list/select',
+        name: 'SelectProduct',
+        component: () => import('@/views/goods/list-select'),
+        meta: { title: '添加商品', noCache: true, activeMenu: '/goods/list' },
+        hidden: true
+      },
+      {
+        path: 'list/edit/:id(\\d+)',
+        name: 'EditGoods',
+        component: () => import('@/views/goods/goods-edit'),
+        meta: { title: '编辑商品', noCache: true, activeMenu: '/goods/list' },
+        hidden: true
       }
     ]
   },

src/views/goods/category.vue

@@ -13,41 +13,41 @@
       highlight-current-row
       style="width:100%;margin-top:20px;"
     >
-      <el-table-column align="center" label="序号" width="95">
+      <el-table-column align="center" label="序号">
         <template slot-scope="scope">
           {{ scope.$index }}
         </template>
       </el-table-column>
-      <el-table-column label="分类名称" align="center" prop="classifyName"></el-table-column>
-      <el-table-column label="分类图标" width="110" align="center" prop="classifyImage">
+      <el-table-column label="分类名称" align="center" prop="classifyName" />
+      <el-table-column label="分类图标" align="center" prop="classifyImage">
         <template slot-scope="{row}">
           <img :src="row.classifyImage" alt="">
         </template>
       </el-table-column>
-      <el-table-column label="排序值" width="110" align="center" prop="sort">
+      <el-table-column label="排序值" align="center" prop="sort">
         <template slot-scope="{row}">
-          <el-input v-model="row.sort" />
+          <el-input v-model="row.sort" style="width:60px;" size="small" />
         </template>
       </el-table-column>
-      <el-table-column label="邮费是否到付" width="110" align="center" prop="postage">
+      <el-table-column label="邮费是否到付" align="center" prop="postage">
         <template slot-scope="{row}">
           {{ row.postage }}
         </template>
       </el-table-column>
-      <el-table-column class-name="status-col" label="状态" width="110" align="center" prop="status">
+      <el-table-column class-name="status-col" label="状态" align="center" prop="status">
         <template slot-scope="{row}">
           <el-tag :type="row.status | statusFilter">{{ row.status*1 === 1 ? '启用' : '停用' }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="添加时间" width="200" prop="addTime">
+      <el-table-column align="center" label="添加时间" prop="addTime">
         <template slot-scope="{row}">
-          <i class="el-icon-time"></i>
+          <i class="el-icon-time" />
           <span>{{ row.addTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Actions" align="center" width="110" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
-          <router-link :to="'/goods/category/edit/' + row.id "><el-button type="primary">编辑</el-button></router-link>
+          <router-link :to="'/goods/category/edit/' + row.id "><el-button type="primary" size="small">编辑</el-button></router-link>
         </template>
       </el-table-column>
     </el-table>
@@ -130,6 +130,7 @@ export default {
         ]
       })
       this.listLoading = false
+      this.total = 10
     }
   }
 }

src/views/goods/list-commonly.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="app-container">
+
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1"><router-link to="/goods/list">全部商品</router-link></el-menu-item>
+      <el-menu-item index="2"><router-link to="/goods/list/preferred">星范优选</router-link></el-menu-item>
+      <el-menu-item index="3"><router-link to="/goods/list/preferential">星范精品</router-link></el-menu-item>
+      <el-menu-item index="4"><router-link to="/goods/list/commonly">常用商品</router-link></el-menu-item>
+    </el-menu>
+
+    <div class="filter-container" style="margin-top:20px;">
+      <el-input v-model="listQuery.form.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.form.validFlag" placeholder="商品状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="已上架" value="1" />
+        <el-option label="已下架" value="2" />
+      </el-select>
+      <el-select v-model="listQuery.form.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <!-- <el-option v-for="item in productsClassifyList" :key="item.id" :label="item.classifyName" :value="item.id" /> -->
+      </el-select>
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit">
+        <router-link to="/goods/list/select">添加商品</router-link>
+      </el-button>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width:100%;margin-top:20px;"
+    >
+      <el-table-column align="center" label="序号">
+        <template slot-scope="scope">
+          {{ scope.$index }}
+        </template>
+      </el-table-column>
+      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品图片" align="center" prop="classifyImage">
+        <template slot-scope="{row}">
+          <img :src="row.mainImage" alt="">
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" align="center" prop="productName" />
+      <el-table-column label="供应商名称" align="center" prop="shopName" />
+      <el-table-column label="市场价" align="center" prop="normalPrice" />
+      <el-table-column label="成本价" align="center" prop="costPrice" />
+      <el-table-column label="售价" align="center" prop="retailPrice" />
+      <el-table-column label="起订量" align="center" prop="minBuyNumber" />
+      <el-table-column label="星范优选" align="center" prop="preferredProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferredProduct | statusFilter">{{ row.preferredProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="星范精品" align="center" prop="preferentialProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferentialProduct | statusFilter">{{ row.preferentialProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="常用商品" align="center" prop="commonlyProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.commonlyProduct | statusFilter">{{ row.commonlyProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="商品状态" align="center" prop="validFlag">
+        <template slot-scope="{row}">
+          <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品分类" align="center" prop="productClassifyName" />
+      <el-table-column align="center" label="添加时间" prop="addTime">
+        <template slot-scope="{row}">
+          <i class="el-icon-time" />
+          <span>{{ row.addTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <el-button type="primary" size="small">取消</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/goods'
+import Pagination from '@/components/Pagination'
+export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        0: 'gray'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      activeIndex: '4',
+      listQuery: {
+        page: 1,
+        limit: 10,
+        form: {
+          id: '',
+          classifyImage: '',
+          productName: '',
+          shopName: '',
+          normalPrice: '', // 市场价',
+          costPrice: '', // 成本价',
+          retailPrice: '', // '售价',
+          minBuyNumber: '', // '最小起订量',
+          preferredProduct: '', // 是否是优选商品：0不是优选,1优选商品',
+          commonlyProduct: '', // 是否是常用商品：0不是常用,1常用商品',
+          preferentialProduct: '', // 是否是星范精品：0不是精品,1星范精品商品',
+          validFlag: '', // '商品状态,1已上架,2已下架',
+          productClassifyName: '', // '对应cm_mall_products_classify商品分类表id',
+          addTime: '', //  '添加时间',
+          organizeID: this.organizeID // '组织ID,具体对应cm_mall_organize表ID',
+        }
+      }
+    }
+  },
+  computed: {
+    organizeID() {
+      return this.$store.state.settings.organizeID
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          },
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          }
+        ]
+      })
+      this.listLoading = false
+      this.total = 2
+    },
+    handleFilter() {
+      alert('搜索')
+    },
+    handleCreate() {
+      alert('添加')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+

src/views/goods/list-preferential.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="app-container">
+
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1"><router-link to="/goods/list">全部商品</router-link></el-menu-item>
+      <el-menu-item index="2"><router-link to="/goods/list/preferred">星范优选</router-link></el-menu-item>
+      <el-menu-item index="3"><router-link to="/goods/list/preferential">星范精品</router-link></el-menu-item>
+      <el-menu-item index="4"><router-link to="/goods/list/commonly">常用商品</router-link></el-menu-item>
+    </el-menu>
+
+    <div class="filter-container" style="margin-top:20px;">
+      <el-input v-model="listQuery.form.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.form.validFlag" placeholder="商品状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="已上架" value="1" />
+        <el-option label="已下架" value="2" />
+      </el-select>
+      <el-select v-model="listQuery.form.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <!-- <el-option v-for="item in productsClassifyList" :key="item.id" :label="item.classifyName" :value="item.id" /> -->
+      </el-select>
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit">
+        <router-link to="/goods/list/select">添加商品</router-link>
+      </el-button>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width:100%;margin-top:20px;"
+    >
+      <el-table-column align="center" label="序号">
+        <template slot-scope="scope">
+          {{ scope.$index }}
+        </template>
+      </el-table-column>
+      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品图片" align="center" prop="classifyImage">
+        <template slot-scope="{row}">
+          <img :src="row.mainImage" alt="">
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" align="center" prop="productName" />
+      <el-table-column label="供应商名称" align="center" prop="shopName" />
+      <el-table-column label="市场价" align="center" prop="normalPrice" />
+      <el-table-column label="成本价" align="center" prop="costPrice" />
+      <el-table-column label="售价" align="center" prop="retailPrice" />
+      <el-table-column label="起订量" align="center" prop="minBuyNumber" />
+      <el-table-column label="星范优选" align="center" prop="preferredProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferredProduct | statusFilter">{{ row.preferredProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="星范精品" align="center" prop="preferentialProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferentialProduct | statusFilter">{{ row.preferentialProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="常用商品" align="center" prop="commonlyProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.commonlyProduct | statusFilter">{{ row.commonlyProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="商品状态" align="center" prop="validFlag">
+        <template slot-scope="{row}">
+          <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品分类" align="center" prop="productClassifyName" />
+      <el-table-column align="center" label="添加时间" prop="addTime">
+        <template slot-scope="{row}">
+          <i class="el-icon-time" />
+          <span>{{ row.addTime }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/goods'
+import Pagination from '@/components/Pagination'
+export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        0: 'gray'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      activeIndex: '3',
+      listQuery: {
+        page: 1,
+        limit: 10,
+        form: {
+          id: '',
+          classifyImage: '',
+          productName: '',
+          shopName: '',
+          normalPrice: '', // 市场价',
+          costPrice: '', // 成本价',
+          retailPrice: '', // '售价',
+          minBuyNumber: '', // '最小起订量',
+          preferredProduct: '', // 是否是优选商品：0不是优选,1优选商品',
+          commonlyProduct: '', // 是否是常用商品：0不是常用,1常用商品',
+          preferentialProduct: '', // 是否是星范精品：0不是精品,1星范精品商品',
+          validFlag: '', // '商品状态,1已上架,2已下架',
+          productClassifyName: '', // '对应cm_mall_products_classify商品分类表id',
+          addTime: '', //  '添加时间',
+          organizeID: this.organizeID // '组织ID,具体对应cm_mall_organize表ID',
+        }
+      }
+    }
+  },
+  computed: {
+    organizeID() {
+      return this.$store.state.settings.organizeID
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          },
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          }
+        ]
+      })
+      this.listLoading = false
+      this.total = 2
+    },
+    handleFilter() {
+      alert('搜索')
+    },
+    handleCreate() {
+      alert('添加')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+

src/views/goods/list-preferred.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="app-container">
+
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1"><router-link to="/goods/list">全部商品</router-link></el-menu-item>
+      <el-menu-item index="2"><router-link to="/goods/list/preferred">星范优选</router-link></el-menu-item>
+      <el-menu-item index="3"><router-link to="/goods/list/preferential">星范精品</router-link></el-menu-item>
+      <el-menu-item index="4"><router-link to="/goods/list/commonly">常用商品</router-link></el-menu-item>
+    </el-menu>
+
+    <div class="filter-container" style="margin-top:20px;">
+      <el-input v-model="listQuery.form.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.form.validFlag" placeholder="商品状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="已上架" value="1" />
+        <el-option label="已下架" value="2" />
+      </el-select>
+      <el-select v-model="listQuery.form.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <!-- <el-option v-for="item in productsClassifyList" :key="item.id" :label="item.classifyName" :value="item.id" /> -->
+      </el-select>
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit">
+        <router-link to="/goods/list/select">添加商品</router-link>
+      </el-button>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width:100%;margin-top:20px;"
+    >
+      <el-table-column align="center" label="序号">
+        <template slot-scope="scope">
+          {{ scope.$index }}
+        </template>
+      </el-table-column>
+      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品图片" align="center" prop="classifyImage">
+        <template slot-scope="{row}">
+          <img :src="row.mainImage" alt="">
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" align="center" prop="productName" />
+      <el-table-column label="供应商名称" align="center" prop="shopName" />
+      <el-table-column label="市场价" align="center" prop="normalPrice" />
+      <el-table-column label="成本价" align="center" prop="costPrice" />
+      <el-table-column label="售价" align="center" prop="retailPrice" />
+      <el-table-column label="起订量" align="center" prop="minBuyNumber" />
+      <el-table-column label="星范优选" align="center" prop="preferredProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferredProduct | statusFilter">{{ row.preferredProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="星范精品" align="center" prop="preferentialProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferentialProduct | statusFilter">{{ row.preferentialProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="常用商品" align="center" prop="commonlyProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.commonlyProduct | statusFilter">{{ row.commonlyProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="商品状态" align="center" prop="validFlag">
+        <template slot-scope="{row}">
+          <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品分类" align="center" prop="productClassifyName" />
+      <el-table-column align="center" label="添加时间" prop="addTime">
+        <template slot-scope="{row}">
+          <i class="el-icon-time" />
+          <span>{{ row.addTime }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/goods'
+import Pagination from '@/components/Pagination'
+export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        0: 'gray'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      activeIndex: '2',
+      listQuery: {
+        page: 1,
+        limit: 10,
+        form: {
+          id: '',
+          classifyImage: '',
+          productName: '',
+          shopName: '',
+          normalPrice: '', // 市场价',
+          costPrice: '', // 成本价',
+          retailPrice: '', // '售价',
+          minBuyNumber: '', // '最小起订量',
+          preferredProduct: '', // 是否是优选商品：0不是优选,1优选商品',
+          commonlyProduct: '', // 是否是常用商品：0不是常用,1常用商品',
+          preferentialProduct: '', // 是否是星范精品：0不是精品,1星范精品商品',
+          validFlag: '', // '商品状态,1已上架,2已下架',
+          productClassifyName: '', // '对应cm_mall_products_classify商品分类表id',
+          addTime: '', //  '添加时间',
+          organizeID: this.organizeID // '组织ID,具体对应cm_mall_organize表ID',
+        }
+      }
+    }
+  },
+  computed: {
+    organizeID() {
+      return this.$store.state.settings.organizeID
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          },
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          }
+        ]
+      })
+      this.listLoading = false
+      this.total = 2
+    },
+    handleFilter() {
+      alert('搜索')
+    },
+    handleCreate() {
+      alert('添加')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+

src/views/goods/list-select.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="app-container">
+
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1">选择商品</el-menu-item>
+    </el-menu>
+
+    <div class="filter-container" style="margin-top:20px;">
+      <el-input v-model="listQuery.form.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+      <el-button class="filter-item" type="primary" icon="el-icon-check">确定选择</el-button>
+      <el-button class="filter-item" type="primary" icon="el-icon-close" @click="toggleSelection()">取消选择</el-button>
+    </div>
+
+    <el-table
+      ref="multipleTable"
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width:100%;margin-top:20px;"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column align="center" type="selection" width="55" />
+      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品图片" align="center" prop="classifyImage">
+        <template slot-scope="{row}">
+          <img :src="row.mainImage" alt="">
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" align="center" prop="productName" />
+      <el-table-column label="供应商名称" align="center" prop="shopName" />
+      <el-table-column label="市场价" align="center" prop="normalPrice">
+        <template slot-scope="{row}">
+          <el-input v-model="row.normalPrice" style="width:60px;" size="small" />
+        </template>
+      </el-table-column>
+      <el-table-column label="成本价" align="center" prop="costPrice">
+        <template slot-scope="{row}">
+          <el-input v-model="row.normalPrice" style="width:60px;" size="small" />
+        </template>
+      </el-table-column>
+      <el-table-column label="售价" align="center" prop="retailPrice">
+        <template slot-scope="{row}">
+          <el-input v-model="row.normalPrice" style="width:60px;" size="small" />
+        </template>
+      </el-table-column>
+      <el-table-column label="起订量" align="center" prop="minBuyNumber">
+        <template slot-scope="{row}">
+          <el-input v-model="row.normalPrice" style="width:60px;" size="small" />
+        </template>
+      </el-table-column>
+      <el-table-column label="商品分类" align="center" prop="classifyID">
+        <template slot-scope="{row}">
+          <el-select v-model="row.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="">
+            <!-- <el-option v-for="item in productsClassifyList" :key="item.id" :label="item.classifyName" :value="item.id" /> -->
+          </el-select>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/goods'
+import Pagination from '@/components/Pagination'
+export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        0: 'gray'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      activeIndex: '1',
+      listQuery: {
+        page: 1,
+        limit: 10,
+        form: {
+          id: '',
+          classifyImage: '',
+          productName: '',
+          shopName: '',
+          normalPrice: '', // 市场价',
+          costPrice: '', // 成本价',
+          retailPrice: '', // '售价',
+          minBuyNumber: '', // '最小起订量',
+          preferredProduct: '', // 是否是优选商品：0不是优选,1优选商品',
+          commonlyProduct: '', // 是否是常用商品：0不是常用,1常用商品',
+          preferentialProduct: '', // 是否是星范精品：0不是精品,1星范精品商品',
+          validFlag: '', // '商品状态,1已上架,2已下架',
+          productClassifyName: '', // '对应cm_mall_products_classify商品分类表id',
+          addTime: '', //  '添加时间',
+          organizeID: this.organizeID // '组织ID,具体对应cm_mall_organize表ID',
+        }
+      },
+      multipleSelection: []
+    }
+  },
+  computed: {
+    organizeID() {
+      return this.$store.state.settings.organizeID
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          },
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          }
+        ]
+      })
+      this.listLoading = false
+      this.total = 2
+    },
+    handleFilter() {
+      alert('搜索')
+    },
+    handleCreate() {
+      alert('添加')
+    },
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row)
+        })
+      } else {
+        this.$refs.multipleTable.clearSelection()
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+

src/views/goods/list.vue

@@ -1,14 +1,214 @@
 <template>
   <div class="app-container">
-    {{ msg }}
+
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1"><router-link to="/goods/list">全部商品</router-link></el-menu-item>
+      <el-menu-item index="2"><router-link to="/goods/list/preferred">星范优选</router-link></el-menu-item>
+      <el-menu-item index="3"><router-link to="/goods/list/preferential">星范精品</router-link></el-menu-item>
+      <el-menu-item index="4"><router-link to="/goods/list/commonly">常用商品</router-link></el-menu-item>
+    </el-menu>
+
+    <div class="filter-container" style="margin-top:20px;">
+      <el-input v-model="listQuery.form.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.form.validFlag" placeholder="商品状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="已上架" value="1" />
+        <el-option label="已下架" value="2" />
+      </el-select>
+      <el-select v-model="listQuery.form.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <!-- <el-option v-for="item in productsClassifyList" :key="item.id" :label="item.classifyName" :value="item.id" /> -->
+      </el-select>
+      <el-select v-model="listQuery.form.preferredProduct" placeholder="星范优选" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="是" value="1" />
+        <el-option label="否" value="0" />
+      </el-select>
+      <el-select v-model="listQuery.form.commonlyProduct" placeholder="常用商品" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="是" value="1" />
+        <el-option label="否" value="0" />
+      </el-select>
+      <el-select v-model="listQuery.form.preferentialProduct" placeholder="星范精品" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="是" value="1" />
+        <el-option label="否" value="0" />
+      </el-select>
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit">
+        <router-link to="/goods/list/select">添加商品</router-link>
+      </el-button>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width:100%;margin-top:20px;"
+    >
+      <el-table-column align="center" label="序号">
+        <template slot-scope="scope">
+          {{ scope.$index }}
+        </template>
+      </el-table-column>
+      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品图片" align="center" prop="classifyImage">
+        <template slot-scope="{row}">
+          <img :src="row.mainImage" alt="">
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" align="center" prop="productName" />
+      <el-table-column label="供应商名称" align="center" prop="shopName" />
+      <el-table-column label="市场价" align="center" prop="normalPrice" />
+      <el-table-column label="成本价" align="center" prop="costPrice" />
+      <el-table-column label="售价" align="center" prop="retailPrice" />
+      <el-table-column label="起订量" align="center" prop="minBuyNumber" />
+      <el-table-column label="星范优选" align="center" prop="preferredProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferredProduct | statusFilter">{{ row.preferredProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="星范精品" align="center" prop="preferentialProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferentialProduct | statusFilter">{{ row.preferentialProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="常用商品" align="center" prop="commonlyProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.commonlyProduct | statusFilter">{{ row.commonlyProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="商品状态" align="center" prop="validFlag">
+        <template slot-scope="{row}">
+          <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品分类" align="center" prop="productClassifyName" />
+      <el-table-column align="center" label="添加时间" prop="addTime">
+        <template slot-scope="{row}">
+          <i class="el-icon-time" />
+          <span>{{ row.addTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <router-link :to="'/goods/edit/' + row.id "><el-button type="primary" size="small">编辑</el-button></router-link>
+          <el-button type="primary" size="small">上架</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+
   </div>
 </template>
 
 <script>
+import { getList } from '@/api/goods'
+import Pagination from '@/components/Pagination'
 export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        0: 'gray'
+      }
+      return statusMap[status]
+    }
+  },
   data() {
     return {
-      msg: '商品列表'
+      list: null,
+      listLoading: true,
+      total: 0,
+      activeIndex: '1',
+      listQuery: {
+        page: 1,
+        limit: 10,
+        form: {
+          id: '',
+          classifyImage: '',
+          productName: '',
+          shopName: '',
+          normalPrice: '', // 市场价',
+          costPrice: '', // 成本价',
+          retailPrice: '', // '售价',
+          minBuyNumber: '', // '最小起订量',
+          preferredProduct: '', // 是否是优选商品：0不是优选,1优选商品',
+          commonlyProduct: '', // 是否是常用商品：0不是常用,1常用商品',
+          preferentialProduct: '', // 是否是星范精品：0不是精品,1星范精品商品',
+          validFlag: '', // '商品状态,1已上架,2已下架',
+          productClassifyName: '', // '对应cm_mall_products_classify商品分类表id',
+          addTime: '', //  '添加时间',
+          organizeID: this.organizeID // '组织ID,具体对应cm_mall_organize表ID',
+        }
+      }
+    }
+  },
+  computed: {
+    organizeID() {
+      return this.$store.state.settings.organizeID
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          },
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          }
+        ]
+      })
+      this.listLoading = false
+      this.total = 2
+    },
+    handleFilter() {
+      alert('搜索')
+    },
+    handleCreate() {
+      alert('添加')
     }
   }
 }