商品列表接口对接

.env.development

@@ -4,6 +4,7 @@ ENV = 'development'
 # base api
 # VUE_APP_BASE_API = '/dev-api'
 VUE_APP_BASE_API = 'http://192.168.1.22:8108'
+# VUE_APP_BASE_API = 'http://127.0.0.1:8108'
 
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.

src/api/article.js

@@ -1,41 +0,0 @@
-import request from '@/utils/request'
-
-export function fetchList(query) {
-  return request({
-    url: '/article/list',
-    method: 'get',
-    params: query
-  })
-}
-
-export function fetchArticle(id) {
-  return request({
-    url: '/article/detail',
-    method: 'get',
-    params: { id }
-  })
-}
-
-export function fetchPv(pv) {
-  return request({
-    url: '/article/pv',
-    method: 'get',
-    params: { pv }
-  })
-}
-
-export function createArticle(data) {
-  return request({
-    url: '/article/create',
-    method: 'post',
-    data
-  })
-}
-
-export function updateArticle(data) {
-  return request({
-    url: '/article/update',
-    method: 'post',
-    data
-  })
-}

src/api/goods-classify.js

@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+
+export function getCategory(query) {
+  return request({
+    url: '/product/cmMallProductsClassify/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function switchClassify(id) {
+  return request({
+    url: '/product/cmMallProductsClassify/switchClassify',
+    method: 'post',
+    params: id
+  })
+}
+
+export function getClassify(id) {
+  return request({
+    url: '/product/cmMallProductsClassify/form',
+    method: 'post',
+    params: id
+  })
+}
+
+export function saveClassify(category) {
+  return request({
+    url: '/product/cmMallProductsClassify/save',
+    method: 'post',
+    data: category
+  })
+}
+
+export function saveCategorySort(newProducSorttList) {
+  return request({
+    url: '/product/cmMallProductsClassify/batchSaveSort',
+    method: 'post',
+    params: newProducSorttList
+  })
+}

src/api/goods.js

@@ -2,49 +2,40 @@ import request from '@/utils/request'
 
 export function getList(query) {
   return request({
-    url: '/goods/list',
+    url: '/product/cmMallOrganizeProducts/toProductList',
     method: 'get',
     params: query
   })
 }
 
-export function getCategory(query) {
+export function getModule(query) {
   return request({
-    url: '/product/cmMallProductsClassify/list',
+    url: '/product/cmMallOrganizeProducts/module',
     method: 'get',
     params: query
   })
 }
 
-export function switchClassify(id) {
+export function switchGoods(id) {
   return request({
-    url: '/product/cmMallProductsClassify/switchClassify',
+    url: '/product/cmMallOrganizeProducts/switchLine',
     method: 'post',
     params: id
   })
 }
 
-export function getClassify(id) {
+export function saveGoods(goods) {
   return request({
-    url: '/product/cmMallProductsClassify/form',
+    url: '/product/cmMallOrganizeProducts/saveEditProductInfo',
     method: 'post',
-    params: id
+    data: goods
   })
 }
 
-export function saveClassify(category) {
+export function saveGoodsSort(sorts) {
   return request({
-    url: '/product/cmMallProductsClassify/save',
+    url: '/product/cmMallOrganizeProducts/batchSaveSort',
     method: 'post',
-    data: category
+    params: sorts
   })
 }
-
-export function saveCategorySort(newProducSorttList) {
-  return request({
-    url: '/product/cmMallProductsClassify/batchSaveSort',
-    method: 'post',
-    params: newProducSorttList
-  })
-}
-

src/router/index.js

@@ -51,7 +51,7 @@ export const constantRoutes = [
       path: 'dashboard',
       name: 'Dashboard',
       component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard' }
+      meta: { title: '首页', icon: 'dashboard', affix: true }
     }]
   },
   {
@@ -138,7 +138,7 @@ export const constantRoutes = [
         hidden: true
       },
       {
-        path: 'list/select',
+        path: 'list/select/:type(\\d+)',
         name: 'SelectProduct',
         component: () => import('@/views/goods/list-select'),
         meta: { title: '添加商品', noCache: true, activeMenu: '/goods/list' },

src/views/goods/category-create.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import { getClassify, saveClassify } from '@/api/goods'
+import { saveClassify } from '@/api/goods-classify'
 export default {
   data() {
     return {
@@ -84,18 +84,7 @@ export default {
       return window.location.href.split('/').reverse()[0]
     }
   },
-  created() {
-    this.getDetail()
-  },
   methods: {
-    getDetail() {
-      getClassify({ id: this.classifyId }).then(response => {
-        const { data } = response
-        this.temp = data
-      }).catch(() => {
-        this.$router.push({ path: this.redirect })
-      })
-    },
     updateData() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {

src/views/goods/category-edit.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import { getClassify, saveClassify } from '@/api/goods'
+import { getClassify, saveClassify } from '@/api/goods-classify'
 export default {
   data() {
     return {

src/views/goods/category.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import { getCategory, switchClassify, saveCategorySort } from '@/api/goods'
+import { getCategory, switchClassify, saveCategorySort } from '@/api/goods-classify'
 import Pagination from '@/components/Pagination'
 
 export default {

src/views/goods/list-commonly.vue

@@ -2,23 +2,25 @@
   <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-item index="0"><router-link to="/goods/list">全部商品</router-link></el-menu-item>
+      <el-menu-item v-if="modules.firstModulesName" index="1"><router-link to="/goods/list/preferred">{{ modules.firstModulesName }}</router-link></el-menu-item>
+      <el-menu-item v-if="modules.secondModulesName" index="2"><router-link to="/goods/list/preferential">{{ modules.secondModulesName }}</router-link></el-menu-item>
+      <el-menu-item v-if="modules.thirdModulesName" index="3"><router-link to="/goods/list/commonly">{{ modules.thirdModulesName }}</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.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-input v-model="listQuery.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <template v-for="item in classify">
+          <el-option v-if="item.status*1 === 1" :key="item.id" :label="item.classifyName" :value="item.id" />
+        </template>
       </el-select>
       <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-sort">批量更新排序</el-button>
+      <el-button class="filter-item" type="primary" icon="el-icon-sort" @click="batchSaveSort">批量更新排序</el-button>
       <el-button class="filter-item" type="primary" icon="el-icon-circle-plus-outline">
-        <router-link to="/goods/list/select">添加商品</router-link>
+        <router-link :to="'/goods/list/select/'+ activeIndex">添加商品</router-link>
       </el-button>
     </div>
 
@@ -31,33 +33,33 @@
       highlight-current-row
       style="width:100%;margin-top:20px;"
     >
-      <el-table-column align="center" label="序号">
+      <el-table-column align="center" label="序号" width="50px">
         <template slot-scope="scope">
           {{ scope.$index }}
         </template>
       </el-table-column>
-      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品ID" align="center" prop="id" width="70px" />
       <el-table-column label="商品图片" align="center" prop="mainImage">
         <template slot-scope="{row}">
           <img :src="row.mainImage" alt="" width="50">
         </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="productName" min-width="200px" />
+      <el-table-column label="供应商" align="center" prop="shopName" min-width="120px" />
       <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="productClassifyName" />
       <el-table-column align="center" label="添加时间" prop="addTime">
-        <template slot-scope="{row}">
+        <template v-if="row.addTime" slot-scope="{row}">
           <i class="el-icon-time" />
-          <span>{{ row.addTime }}</span>
+          <span>{{ row.addTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="排序值" align="center" prop="sort">
         <template slot-scope="{row}">
-          <el-input v-model="row.sort" style="width:60px;" size="small" />
+          <el-input v-model="row.preferredProductSort" style="width:60px;" size="small" />
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -67,110 +69,69 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
 
   </div>
 </template>
 
 <script>
-import { getList } from '@/api/goods'
+import { getList, getModule, saveGoodsSort } 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 {
+      activeIndex: '3', // 模块3
       list: null,
+      classify: null,
+      modules: null,
       listLoading: true,
       total: 0,
-      activeIndex: '4',
       listQuery: {
-        page: 1,
-        limit: 10,
-        form: {
-          id: '',
-          mainImage: '',
-          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',
-        }
+        index: 1,
+        pageSize: 20,
+        organizeID: this.organizeID,
+        commonlyProduct: '1', // 常用商品
+        id: '',
+        productName: '',
+        shopName: '',
+        classifyID: ''
       }
     }
   },
   created() {
+    this.getModuleType()
     this.fetchData()
   },
   methods: {
+    getModuleType() {
+      getModule({ organizeID: this.organizeID }).then(response => {
+        this.modules = response.data[0]
+      })
+    },
     fetchData() {
       this.listLoading = true
-      getList().then(response => {
-        this.list = response.data.items
+      getList(this.listQuery).then(response => {
+        const { organizeProductsPage, listByEffective } = response.data
+        this.list = organizeProductsPage.results
+        this.total = organizeProductsPage.totalRecord
+        this.classify = listByEffective
         this.listLoading = false
-      }).catch(() => {
-        // 封装静态数据
-        this.list = [
-          {
-            id: 0,
-            mainImage: 'https://img.caimei365.com/group1/M00/00/C3/Cmis21ogFTuATpnrAAIh4ixubXM38.JPEG',
-            productName: '韩国恩盛进口 素提亚 BeautyHeart 电穿孔技术 打造V脸 紧致提升',
-            shopName: '北京恩盛众成国际贸易有限公司',
-            normalPrice: '10000.00',
-            costPrice: '6666.00',
-            retailPrice: '6600.00',
-            minBuyNumber: '1',
-            preferredProduct: '1',
-            commonlyProduct: '1',
-            preferentialProduct: '1',
-            validFlag: '1',
-            productClassifyName: 0,
-            addTime: new Date(),
-            organizeID: this.organizeID
-          },
-          {
-            id: 0,
-            mainImage: '',
-            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('搜索')
+      this.fetchData()
     },
-    handleCreate() {
-      alert('添加')
+    batchSaveSort() {
+      const sorts = []
+      this.list.map(item => {
+        sorts.push(item.id + '-' + item.preferredProduct)
+      })
+      saveGoodsSort({ newProducSorttList: sorts.join(','), modules: this.activeIndex }).then(() => {
+        this.fetchData()
+      }).catch(() => {
+        this.fetchData()
+      })
     }
   }
 }

src/views/goods/list-preferential.vue

@@ -2,23 +2,25 @@
   <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-item index="0"><router-link to="/goods/list">全部商品</router-link></el-menu-item>
+      <el-menu-item v-if="modules.firstModulesName" index="1"><router-link to="/goods/list/preferred">{{ modules.firstModulesName }}</router-link></el-menu-item>
+      <el-menu-item v-if="modules.secondModulesName" index="2"><router-link to="/goods/list/preferential">{{ modules.secondModulesName }}</router-link></el-menu-item>
+      <el-menu-item v-if="modules.thirdModulesName" index="3"><router-link to="/goods/list/commonly">{{ modules.thirdModulesName }}</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.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-input v-model="listQuery.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <template v-for="item in classify">
+          <el-option v-if="item.status*1 === 1" :key="item.id" :label="item.classifyName" :value="item.id" />
+        </template>
       </el-select>
       <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-sort">批量更新排序</el-button>
+      <el-button class="filter-item" type="primary" icon="el-icon-sort" @click="batchSaveSort">批量更新排序</el-button>
       <el-button class="filter-item" type="primary" icon="el-icon-circle-plus-outline">
-        <router-link to="/goods/list/select">添加商品</router-link>
+        <router-link :to="'/goods/list/select/'+ activeIndex">添加商品</router-link>
       </el-button>
     </div>
 
@@ -31,33 +33,33 @@
       highlight-current-row
       style="width:100%;margin-top:20px;"
     >
-      <el-table-column align="center" label="序号">
+      <el-table-column align="center" label="序号" width="50px">
         <template slot-scope="scope">
           {{ scope.$index }}
         </template>
       </el-table-column>
-      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品ID" align="center" prop="id" width="70px" />
       <el-table-column label="商品图片" align="center" prop="mainImage">
         <template slot-scope="{row}">
           <img :src="row.mainImage" alt="" width="50">
         </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="productName" min-width="200px" />
+      <el-table-column label="供应商" align="center" prop="shopName" min-width="120px" />
       <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="productClassifyName" />
       <el-table-column align="center" label="添加时间" prop="addTime">
-        <template slot-scope="{row}">
+        <template v-if="row.addTime" slot-scope="{row}">
           <i class="el-icon-time" />
-          <span>{{ row.addTime }}</span>
+          <span>{{ row.addTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="排序值" align="center" prop="sort">
         <template slot-scope="{row}">
-          <el-input v-model="row.sort" style="width:60px;" size="small" />
+          <el-input v-model="row.preferredProductSort" style="width:60px;" size="small" />
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -67,110 +69,69 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
 
   </div>
 </template>
 
 <script>
-import { getList } from '@/api/goods'
+import { getList, getModule, saveGoodsSort } 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 {
+      activeIndex: '2', // 模块2
       list: null,
+      classify: null,
+      modules: null,
       listLoading: true,
       total: 0,
-      activeIndex: '3',
       listQuery: {
-        page: 1,
-        limit: 10,
-        form: {
-          id: '',
-          mainImage: '',
-          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',
-        }
+        index: 1,
+        pageSize: 20,
+        organizeID: this.organizeID,
+        preferentialProduct: '1', // 星范精品
+        id: '',
+        productName: '',
+        shopName: '',
+        classifyID: ''
       }
     }
   },
   created() {
+    this.getModuleType()
     this.fetchData()
   },
   methods: {
+    getModuleType() {
+      getModule({ organizeID: this.organizeID }).then(response => {
+        this.modules = response.data[0]
+      })
+    },
     fetchData() {
       this.listLoading = true
-      getList().then(response => {
-        this.list = response.data.items
+      getList(this.listQuery).then(response => {
+        const { organizeProductsPage, listByEffective } = response.data
+        this.list = organizeProductsPage.results
+        this.total = organizeProductsPage.totalRecord
+        this.classify = listByEffective
         this.listLoading = false
-      }).catch(() => {
-        // 封装静态数据
-        this.list = [
-          {
-            id: 0,
-            mainImage: 'https://img.caimei365.com/group1/M00/00/C3/Cmis21ogFTuATpnrAAIh4ixubXM38.JPEG',
-            productName: '韩国恩盛进口 素提亚 BeautyHeart 电穿孔技术 打造V脸 紧致提升',
-            shopName: '北京恩盛众成国际贸易有限公司',
-            normalPrice: '10000.00',
-            costPrice: '6666.00',
-            retailPrice: '6600.00',
-            minBuyNumber: '1',
-            preferredProduct: '1',
-            commonlyProduct: '1',
-            preferentialProduct: '1',
-            validFlag: '1',
-            productClassifyName: 0,
-            addTime: new Date(),
-            organizeID: this.organizeID
-          },
-          {
-            id: 0,
-            mainImage: '',
-            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('搜索')
+      this.fetchData()
     },
-    handleCreate() {
-      alert('添加')
+    batchSaveSort() {
+      const sorts = []
+      this.list.map(item => {
+        sorts.push(item.id + '-' + item.preferredProduct)
+      })
+      saveGoodsSort({ newProducSorttList: sorts.join(','), modules: this.activeIndex }).then(() => {
+        this.fetchData()
+      }).catch(() => {
+        this.fetchData()
+      })
     }
   }
 }

src/views/goods/list-preferred.vue

@@ -2,23 +2,25 @@
   <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-item index="0"><router-link to="/goods/list">全部商品</router-link></el-menu-item>
+      <el-menu-item v-if="modules && modules.firstModulesName" index="1"><router-link to="/goods/list/preferred">{{ modules.firstModulesName }}</router-link></el-menu-item>
+      <el-menu-item v-if="modules && modules.secondModulesName" index="2"><router-link to="/goods/list/preferential">{{ modules.secondModulesName }}</router-link></el-menu-item>
+      <el-menu-item v-if="modules && modules.thirdModulesName" index="3"><router-link to="/goods/list/commonly">{{ modules.thirdModulesName }}</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.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-input v-model="listQuery.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <template v-for="item in classify">
+          <el-option v-if="item.status*1 === 1" :key="item.id" :label="item.classifyName" :value="item.id" />
+        </template>
       </el-select>
       <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-sort">批量更新排序</el-button>
+      <el-button class="filter-item" type="primary" icon="el-icon-sort" @click="batchSaveSort">批量更新排序</el-button>
       <el-button class="filter-item" type="primary" icon="el-icon-circle-plus-outline">
-        <router-link to="/goods/list/select">添加商品</router-link>
+        <router-link :to="'/goods/list/select/'+ activeIndex">添加商品</router-link>
       </el-button>
     </div>
 
@@ -31,33 +33,33 @@
       highlight-current-row
       style="width:100%;margin-top:20px;"
     >
-      <el-table-column align="center" label="序号">
+      <el-table-column align="center" label="序号" width="50px">
         <template slot-scope="scope">
           {{ scope.$index }}
         </template>
       </el-table-column>
-      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品ID" align="center" prop="id" width="70px" />
       <el-table-column label="商品图片" align="center" prop="mainImage">
         <template slot-scope="{row}">
           <img :src="row.mainImage" alt="" width="50">
         </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="productName" min-width="200px" />
+      <el-table-column label="供应商" align="center" prop="shopName" min-width="120px" />
       <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="productClassifyName" />
       <el-table-column align="center" label="添加时间" prop="addTime">
-        <template slot-scope="{row}">
+        <template v-if="row.addTime" slot-scope="{row}">
           <i class="el-icon-time" />
-          <span>{{ row.addTime }}</span>
+          <span>{{ row.addTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="排序值" align="center" prop="sort">
+      <el-table-column label="排序值" align="center" prop="preferredProductSort">
         <template slot-scope="{row}">
-          <el-input v-model="row.sort" style="width:60px;" size="small" />
+          <el-input v-model="row.preferredProductSort" size="small" type="number" min="1" />
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -67,110 +69,69 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
 
   </div>
 </template>
 
 <script>
-import { getList } from '@/api/goods'
+import { getList, getModule, saveGoodsSort } 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 {
+      activeIndex: '1', // 模块1
       list: null,
+      classify: null,
+      modules: null,
       listLoading: true,
       total: 0,
-      activeIndex: '2',
       listQuery: {
-        page: 1,
-        limit: 10,
-        form: {
-          id: '',
-          mainImage: '',
-          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',
-        }
+        index: 1,
+        pageSize: 20,
+        organizeID: this.organizeID,
+        preferredProduct: '1', // 星范优选
+        id: '',
+        productName: '',
+        shopName: '',
+        classifyID: ''
       }
     }
   },
   created() {
+    this.getModuleType()
     this.fetchData()
   },
   methods: {
+    getModuleType() {
+      getModule({ organizeID: this.organizeID }).then(response => {
+        this.modules = response.data[0]
+      })
+    },
     fetchData() {
       this.listLoading = true
-      getList().then(response => {
-        this.list = response.data.items
+      getList(this.listQuery).then(response => {
+        const { organizeProductsPage, listByEffective } = response.data
+        this.list = organizeProductsPage.results
+        this.total = organizeProductsPage.totalRecord
+        this.classify = listByEffective
         this.listLoading = false
-      }).catch(() => {
-        // 封装静态数据
-        this.list = [
-          {
-            id: 0,
-            mainImage: 'https://img.caimei365.com/group1/M00/00/C3/Cmis21ogFTuATpnrAAIh4ixubXM38.JPEG',
-            productName: '韩国恩盛进口 素提亚 BeautyHeart 电穿孔技术 打造V脸 紧致提升',
-            shopName: '北京恩盛众成国际贸易有限公司',
-            normalPrice: '10000.00',
-            costPrice: '6666.00',
-            retailPrice: '6600.00',
-            minBuyNumber: '1',
-            preferredProduct: '1',
-            commonlyProduct: '1',
-            preferentialProduct: '1',
-            validFlag: '1',
-            productClassifyName: 0,
-            addTime: new Date(),
-            organizeID: this.organizeID
-          },
-          {
-            id: 0,
-            mainImage: '',
-            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('搜索')
+      this.fetchData()
     },
-    handleCreate() {
-      alert('添加')
+    batchSaveSort() {
+      const sorts = []
+      this.list.map(item => {
+        sorts.push(item.id + '-' + item.preferredProductSort)
+      })
+      saveGoodsSort({ newProducSorttList: sorts.join(','), modules: this.activeIndex }).then(() => {
+        this.fetchData()
+      }).catch(() => {
+        this.fetchData()
+      })
     }
   }
 }

src/views/goods/list-select.vue

@@ -6,9 +6,14 @@
     </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-input v-model="listQuery.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <template v-for="item in classify">
+          <el-option v-if="item.status*1 === 1" :key="item.id" :label="item.classifyName" :value="item.id" />
+        </template>
+      </el-select>
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
         搜索
       </el-button>
@@ -28,44 +33,22 @@
       @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="商品ID" align="center" prop="id" width="70px" />
       <el-table-column label="商品图片" align="center" prop="mainImage">
         <template slot-scope="{row}">
           <img :src="row.mainImage" alt="" width="50">
         </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-column label="商品名称" align="center" prop="productName" min-width="200px" />
+      <el-table-column label="供应商" align="center" prop="shopName" min-width="120px" />
+      <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="productClassifyName" />
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
 
   </div>
 </template>
@@ -79,7 +62,7 @@ export default {
     statusFilter(status) {
       const statusMap = {
         1: 'success',
-        0: 'gray'
+        0: 'danger'
       }
       return statusMap[status]
     }
@@ -87,31 +70,24 @@ export default {
   data() {
     return {
       list: null,
+      classify: null,
       listLoading: true,
       total: 0,
       activeIndex: '1',
       listQuery: {
-        page: 1,
-        limit: 10,
-        form: {
-          id: '',
-          mainImage: '',
-          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: []
+        index: 1,
+        pageSize: 20,
+        organizeID: this.organizeID,
+        id: '',
+        productName: '',
+        shopName: '',
+        classifyID: ''
+      }
+    }
+  },
+  computed: {
+    moduleId: function() {
+      return window.location.href.split('/').reverse()[0]
     }
   },
   created() {
@@ -120,74 +96,23 @@ export default {
   methods: {
     fetchData() {
       this.listLoading = true
-      getList().then(response => {
-        this.list = response.data.items
+      getList(this.listQuery).then(response => {
+        const { organizeProductsPage, listByEffective } = response.data
+        this.list = organizeProductsPage.results
+        this.total = organizeProductsPage.totalRecord
+        this.classify = listByEffective
         this.listLoading = false
-      }).catch(() => {
-        // 封装静态数据
-        this.list = [
-          {
-            id: 0,
-            mainImage: 'https://img.caimei365.com/group1/M00/00/C3/Cmis21ogFTuATpnrAAIh4ixubXM38.JPEG',
-            productName: '韩国恩盛进口 素提亚 BeautyHeart 电穿孔技术 打造V脸 紧致提升',
-            shopName: '北京恩盛众成国际贸易有限公司',
-            normalPrice: '10000.00',
-            costPrice: '6666.00',
-            retailPrice: '6600.00',
-            minBuyNumber: '1',
-            preferredProduct: '1',
-            commonlyProduct: '1',
-            preferentialProduct: '1',
-            validFlag: '1',
-            productClassifyName: 0,
-            addTime: new Date(),
-            organizeID: this.organizeID
-          },
-          {
-            id: 0,
-            mainImage: '',
-            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
+      this.fetchData()
     }
   }
 }
 </script>
 
 <style scoped>
-
+  i[type=success]{
+    color:#67C23A;
+  }
 </style>
-

src/views/goods/list.vue

@@ -2,41 +2,40 @@
   <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-item index="0"><router-link to="/goods/list">全部商品</router-link></el-menu-item>
+      <el-menu-item v-if="modules && modules.firstModulesName" index="1"><router-link to="/goods/list/preferred">{{ modules.firstModulesName }}</router-link></el-menu-item>
+      <el-menu-item v-if="modules && modules.secondModulesName" index="2"><router-link to="/goods/list/preferential">{{ modules.secondModulesName }}</router-link></el-menu-item>
+      <el-menu-item v-if="modules && modules.thirdModulesName" index="3"><router-link to="/goods/list/commonly">{{ modules.thirdModulesName }}</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-input v-model="listQuery.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.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 v-model="listQuery.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <template v-for="item in classify">
+          <el-option v-if="item.status*1 === 1" :key="item.id" :label="item.classifyName" :value="item.id" />
+        </template>
       </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 v-model="listQuery.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 v-model="listQuery.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 v-model="listQuery.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
@@ -49,36 +48,39 @@
       style="width:100%;margin-top:20px;"
       :header-cell-style="{background:'#eef1f6',color:'#606266'}"
     >
-      <el-table-column align="center" label="序号">
+      <el-table-column align="center" label="序号" width="50px">
         <template slot-scope="scope">
           {{ scope.$index }}
         </template>
       </el-table-column>
-      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品ID" align="center" prop="id" width="70px" />
       <el-table-column label="商品图片" align="center" prop="mainImage">
         <template slot-scope="{row}">
           <img :src="row.mainImage" alt="" width="50">
         </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="productName" min-width="200px" />
+      <el-table-column label="供应商" align="center" prop="shopName" min-width="120px" />
       <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>
+          <!--<el-tag :type="row.preferredProduct | statusFilter">{{ row.preferredProduct*1 === 1 ? '启用' : '停用' }}</el-tag>-->
+          <i v-if="row.preferredProduct*1 === 1" class="el-icon-success" type="success" />
         </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>
+          <!--<el-tag :type="row.preferentialProduct | statusFilter">{{ row.preferentialProduct*1 === 1 ? '启用' : '停用' }}</el-tag>-->
+          <i v-if="row.preferentialProduct*1 === 1" class="el-icon-success" type="success" />
         </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>
+          <!--<el-tag :type="row.commonlyProduct | statusFilter">{{ row.commonlyProduct*1 === 1 ? '启用' : '停用' }}</el-tag>-->
+          <i v-if="row.commonlyProduct*1 === 1" class="el-icon-success" type="success" />
         </template>
       </el-table-column>
       <el-table-column class-name="status-col" label="商品状态" align="center" prop="validFlag">
@@ -88,26 +90,28 @@
       </el-table-column>
       <el-table-column label="商品分类" align="center" prop="productClassifyName" />
       <el-table-column align="center" label="添加时间" prop="addTime">
-        <template slot-scope="{row}">
+        <template v-if="row.addTime" slot-scope="{row}">
           <i class="el-icon-time" />
           <span>{{ row.addTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</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" @click="handleEdit(row.id)">编辑</el-button>
-          <el-button type="success" size="small" style="margin:5px 0 0 0;">上架</el-button>
+          <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
+          <el-button :type="row.validFlag*1 === 1 ? 'danger' : 'success'" size="small" style="margin:5px 0 0 0;" @click="handleSwitch(row.id)">{{ row.validFlag*1 === 1 ? '下架' : '上架' }}</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" />
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
 
     <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
-      <el-form ref="dataForm" :rules="rules" :model="dialog" label-position="left" label-width="260px" style="width:400px; margin:0 auto;">
+      <el-form ref="dataForm" :rules="rules" :model="dialog" label-position="left" label-width="220px" style="width:360px; margin:0 auto;">
         <el-form-item label="商品分类" prop="classifyID">
-          <el-select v-model="dialog.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 v-model="dialog.classifyID" placeholder="商品分类" :label="dialog.productClassifyName" clearable class="filter-item" :value="dialog.classifyID*1">
+            <template v-for="item in classify">
+              <el-option v-if="item.status*1 === 1" :key="item.id" :label="item.classifyName" :value="item.id" />
+            </template>
           </el-select>
         </el-form-item>
         <el-form-item :label="'市场价(' + dialog.normalPrice + ')，修改为：'" prop="normalPrice">
@@ -137,7 +141,7 @@
 </template>
 
 <script>
-import { getList } from '@/api/goods'
+import { getList, getModule, switchGoods, saveGoods } from '@/api/goods'
 import Pagination from '@/components/Pagination'
 export default {
   components: { Pagination },
@@ -145,47 +149,44 @@ export default {
     statusFilter(status) {
       const statusMap = {
         1: 'success',
-        0: 'gray'
+        0: 'danger'
       }
       return statusMap[status]
     }
   },
-  data() {
+  data: function() {
     return {
+      activeIndex: '0',
       list: null,
+      modules: null,
+      classify: null,
       listLoading: true,
       total: 0,
-      activeIndex: '1',
       listQuery: {
-        page: 1,
-        limit: 10,
-        form: {
-          id: '',
-          mainImage: '',
-          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',
-        }
+        index: 1,
+        pageSize: 20,
+        organizeID: this.organizeID,
+        id: '',
+        productName: '',
+        shopName: '',
+        classifyID: '', // 商品分类
+        validFlag: '', // '商品状态,1已上架,2已下架',
+        preferredProduct: '', // 是否是优选商品：0不是优选,1优选商品',
+        commonlyProduct: '', // 是否是常用商品：0不是常用,1常用商品',
+        preferentialProduct: '', // 是否是星范精品：0不是精品,1星范精品商品',
+        productClassifyName: '' // '对应cm_mall_products_classify商品分类表id',
       },
       dialogFormVisible: false,
       dialogStatus: '',
       dialogTitle: '编辑',
       dialog: {
-        classifyID: '',
+        id: '',
+        classifyID: 0,
         normalPrice: '',
         costPrice: '',
         retailPrice: '',
-        minBuyNumber: ''
+        minBuyNumber: '',
+        productClassifyName: ''
       },
       rules: {
         classifyID: [{ required: true, message: '请选择分类', trigger: 'change' }],
@@ -197,64 +198,38 @@ export default {
     }
   },
   created() {
+    this.getModuleType()
     this.fetchData()
   },
   methods: {
+    getModuleType() {
+      getModule({ organizeID: this.organizeID }).then(response => {
+        this.modules = response.data
+      })
+    },
     fetchData() {
       this.listLoading = true
-      getList().then(response => {
-        this.list = response.data.items
+      getList(this.listQuery).then(response => {
+        const { organizeProductsPage, listByEffective } = response.data
+        this.list = organizeProductsPage.results
+        this.total = organizeProductsPage.totalRecord
+        this.classify = listByEffective
         this.listLoading = false
-      }).catch(() => {
-        // 封装静态数据
-        this.list = [
-          {
-            id: 0,
-            mainImage: 'https://img.caimei365.com/group1/M00/00/C3/Cmis21ogFTuATpnrAAIh4ixubXM38.JPEG',
-            productName: '韩国恩盛进口 素提亚 BeautyHeart 电穿孔技术 打造V脸 紧致提升',
-            shopName: '北京恩盛众成国际贸易有限公司',
-            normalPrice: '10000.00',
-            costPrice: '6666.00',
-            retailPrice: '6600.00',
-            minBuyNumber: '1',
-            preferredProduct: '1',
-            commonlyProduct: '1',
-            preferentialProduct: '1',
-            validFlag: '1',
-            productClassifyName: 0,
-            addTime: new Date(),
-            organizeID: this.organizeID
-          },
-          {
-            id: 0,
-            mainImage: '',
-            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('搜索')
+      this.fetchData()
     },
-    handleCreate() {
-      alert('添加')
+    handleSwitch(id) {
+      switchGoods({ id: id }).then(() => {
+        this.fetchData()
+      }).catch(() => {
+        this.fetchData()
+      })
     },
     handleEdit(row) {
       this.dialog = Object.assign({}, row)
+      this.dialog.classifyID = this.dialog.classifyID * 1
       this.dialogFormVisible = true
       this.$nextTick(() => {
         this.$refs['dataForm'].clearValidate()
@@ -263,7 +238,16 @@ export default {
     updateGoods() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          alert('更新')
+          saveGoods(this.dialog).then(response => {
+            this.$notify({
+              title: response.code * 1 === 1 ? 'Success' : 'Error',
+              message: response.code * 1 === 1 ? '编辑成功' : response.msg,
+              type: response.code * 1 === 1 ? 'success' : 'error',
+              duration: 2000
+            })
+            this.fetchData()
+            this.dialogFormVisible = false
+          })
         }
       })
     }
@@ -272,6 +256,8 @@ export default {
 </script>
 
 <style scoped>
-
+  i[type=success]{
+    color:#67C23A;
+  }
 </style>