商品列表完善

src/router/index.js

@@ -143,13 +143,6 @@ export const constantRoutes = [
         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-create.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="app-container">
-    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1">添加分类</el-menu-item>
+    </el-menu>
+    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width:400px; margin:30px 0 0 50px;">
       <el-form-item label="分类名称" prop="classifyName">
         <el-input v-model="temp.classifyName" />
       </el-form-item>
@@ -35,6 +38,7 @@ export default {
   data() {
     return {
       msg: '编辑分类',
+      activeIndex: '1',
       rules: {
         classifyName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
         sort: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],

src/views/goods/category-edit.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="app-container">
-    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1">编辑分类</el-menu-item>
+    </el-menu>
+    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width:400px; margin:30px 0 0 50px;">
       <el-form-item label="分类名称" prop="classifyName">
         <el-input v-model="temp.classifyName" />
       </el-form-item>
@@ -35,6 +38,7 @@ export default {
   data() {
     return {
       msg: '编辑分类',
+      activeIndex: '1',
       rules: {
         classifyName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
         sort: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],

src/views/goods/category.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="app-container">
-    <div>
-      <router-link to="/goods/category/create"><el-button type="primary">添加分类</el-button></router-link>
-      <el-button type="primary">批量更新排序</el-button>
+    <div class="filter-container">
+      <router-link to="/goods/category/create"><el-button class="filter-item" type="primary" icon="el-icon-circle-plus-outline">添加分类</el-button></router-link>
+      <el-button class="filter-item" type="primary" icon="el-icon-sort">批量更新排序</el-button>
     </div>
     <el-table
       v-loading="listLoading"
@@ -11,7 +11,6 @@
       border
       fit
       highlight-current-row
-      style="width:100%;margin-top:20px;"
       :header-cell-style="{background:'#eef1f6',color:'#606266'}"
     >
       <el-table-column align="center" label="序号">

src/views/goods/list-commonly.vue

@@ -12,17 +12,12 @@
       <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">
+      <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-circle-plus-outline">
         <router-link to="/goods/list/select">添加商品</router-link>
       </el-button>
     </div>
@@ -42,9 +37,9 @@
         </template>
       </el-table-column>
       <el-table-column label="商品ID" align="center" prop="id" />
-      <el-table-column label="商品图片" align="center" prop="classifyImage">
+      <el-table-column label="商品图片" align="center" prop="mainImage">
         <template slot-scope="{row}">
-          <img :src="row.mainImage" alt="">
+          <img :src="row.mainImage" alt="" width="50">
         </template>
       </el-table-column>
       <el-table-column label="商品名称" align="center" prop="productName" />
@@ -53,26 +48,6 @@
       <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}">
@@ -80,9 +55,14 @@
           <span>{{ row.addTime }}</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" />
+        </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>
+          <el-button :vid="row.id" type="primary" size="small">取消</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -117,7 +97,7 @@ export default {
         limit: 10,
         form: {
           id: '',
-          classifyImage: '',
+          mainImage: '',
           productName: '',
           shopName: '',
           normalPrice: '', // 市场价',
@@ -154,24 +134,24 @@ export default {
         this.list = [
           {
             id: 0,
-            classifyImage: '',
-            productName: 'hahaah',
-            shopName: '',
-            normalPrice: '',
-            costPrice: '',
-            retailPrice: '',
-            minBuyNumber: '',
-            preferredProduct: '',
-            commonlyProduct: '',
-            preferentialProduct: '',
-            validFlag: '',
+            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: '',
+            addTime: new Date(),
             organizeID: this.organizeID
           },
           {
             id: 0,
-            classifyImage: '',
+            mainImage: '',
             productName: 'hahaah',
             shopName: '',
             normalPrice: '',

src/views/goods/list-preferential.vue

@@ -12,17 +12,12 @@
       <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">
+      <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-circle-plus-outline">
         <router-link to="/goods/list/select">添加商品</router-link>
       </el-button>
     </div>
@@ -42,9 +37,9 @@
         </template>
       </el-table-column>
       <el-table-column label="商品ID" align="center" prop="id" />
-      <el-table-column label="商品图片" align="center" prop="classifyImage">
+      <el-table-column label="商品图片" align="center" prop="mainImage">
         <template slot-scope="{row}">
-          <img :src="row.mainImage" alt="">
+          <img :src="row.mainImage" alt="" width="50">
         </template>
       </el-table-column>
       <el-table-column label="商品名称" align="center" prop="productName" />
@@ -53,31 +48,21 @@
       <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">
+      <el-table-column label="商品分类" align="center" prop="productClassifyName" />
+      <el-table-column align="center" label="添加时间" prop="addTime">
         <template slot-scope="{row}">
-          <el-tag :type="row.preferentialProduct | statusFilter">{{ row.preferentialProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+          <i class="el-icon-time" />
+          <span>{{ row.addTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="常用商品" align="center" prop="commonlyProduct">
+      <el-table-column label="排序值" align="center" prop="sort">
         <template slot-scope="{row}">
-          <el-tag :type="row.commonlyProduct | statusFilter">{{ row.commonlyProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+          <el-input v-model="row.sort" style="width:60px;" size="small" />
         </template>
       </el-table-column>
-      <el-table-column class-name="status-col" label="商品状态" align="center" prop="validFlag">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <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>
+          <el-button :vid="row.id" type="primary" size="small">取消</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -112,7 +97,7 @@ export default {
         limit: 10,
         form: {
           id: '',
-          classifyImage: '',
+          mainImage: '',
           productName: '',
           shopName: '',
           normalPrice: '', // 市场价',
@@ -149,24 +134,24 @@ export default {
         this.list = [
           {
             id: 0,
-            classifyImage: '',
-            productName: 'hahaah',
-            shopName: '',
-            normalPrice: '',
-            costPrice: '',
-            retailPrice: '',
-            minBuyNumber: '',
-            preferredProduct: '',
-            commonlyProduct: '',
-            preferentialProduct: '',
-            validFlag: '',
+            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: '',
+            addTime: new Date(),
             organizeID: this.organizeID
           },
           {
             id: 0,
-            classifyImage: '',
+            mainImage: '',
             productName: 'hahaah',
             shopName: '',
             normalPrice: '',

src/views/goods/list-preferred.vue

@@ -12,17 +12,12 @@
       <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">
+      <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-circle-plus-outline">
         <router-link to="/goods/list/select">添加商品</router-link>
       </el-button>
     </div>
@@ -42,9 +37,9 @@
         </template>
       </el-table-column>
       <el-table-column label="商品ID" align="center" prop="id" />
-      <el-table-column label="商品图片" align="center" prop="classifyImage">
+      <el-table-column label="商品图片" align="center" prop="mainImage">
         <template slot-scope="{row}">
-          <img :src="row.mainImage" alt="">
+          <img :src="row.mainImage" alt="" width="50">
         </template>
       </el-table-column>
       <el-table-column label="商品名称" align="center" prop="productName" />
@@ -53,31 +48,21 @@
       <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">
+      <el-table-column label="商品分类" align="center" prop="productClassifyName" />
+      <el-table-column align="center" label="添加时间" prop="addTime">
         <template slot-scope="{row}">
-          <el-tag :type="row.preferentialProduct | statusFilter">{{ row.preferentialProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+          <i class="el-icon-time" />
+          <span>{{ row.addTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="常用商品" align="center" prop="commonlyProduct">
+      <el-table-column label="排序值" align="center" prop="sort">
         <template slot-scope="{row}">
-          <el-tag :type="row.commonlyProduct | statusFilter">{{ row.commonlyProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+          <el-input v-model="row.sort" style="width:60px;" size="small" />
         </template>
       </el-table-column>
-      <el-table-column class-name="status-col" label="商品状态" align="center" prop="validFlag">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <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>
+          <el-button :vid="row.id" type="primary" size="small">取消</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -112,7 +97,7 @@ export default {
         limit: 10,
         form: {
           id: '',
-          classifyImage: '',
+          mainImage: '',
           productName: '',
           shopName: '',
           normalPrice: '', // 市场价',
@@ -149,24 +134,24 @@ export default {
         this.list = [
           {
             id: 0,
-            classifyImage: '',
-            productName: 'hahaah',
-            shopName: '',
-            normalPrice: '',
-            costPrice: '',
-            retailPrice: '',
-            minBuyNumber: '',
-            preferredProduct: '',
-            commonlyProduct: '',
-            preferentialProduct: '',
-            validFlag: '',
+            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: '',
+            addTime: new Date(),
             organizeID: this.organizeID
           },
           {
             id: 0,
-            classifyImage: '',
+            mainImage: '',
             productName: 'hahaah',
             shopName: '',
             normalPrice: '',

src/views/goods/list-select.vue

@@ -29,9 +29,9 @@
     >
       <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">
+      <el-table-column label="商品图片" align="center" prop="mainImage">
         <template slot-scope="{row}">
-          <img :src="row.mainImage" alt="">
+          <img :src="row.mainImage" alt="" width="50">
         </template>
       </el-table-column>
       <el-table-column label="商品名称" align="center" prop="productName" />
@@ -95,7 +95,7 @@ export default {
         limit: 10,
         form: {
           id: '',
-          classifyImage: '',
+          mainImage: '',
           productName: '',
           shopName: '',
           normalPrice: '', // 市场价',
@@ -133,24 +133,24 @@ export default {
         this.list = [
           {
             id: 0,
-            classifyImage: '',
-            productName: 'hahaah',
-            shopName: '',
-            normalPrice: '',
-            costPrice: '',
-            retailPrice: '',
-            minBuyNumber: '',
-            preferredProduct: '',
-            commonlyProduct: '',
-            preferentialProduct: '',
-            validFlag: '',
+            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: '',
+            addTime: new Date(),
             organizeID: this.organizeID
           },
           {
             id: 0,
-            classifyImage: '',
+            mainImage: '',
             productName: 'hahaah',
             shopName: '',
             normalPrice: '',

src/views/goods/list.vue

@@ -55,9 +55,9 @@
         </template>
       </el-table-column>
       <el-table-column label="商品ID" align="center" prop="id" />
-      <el-table-column label="商品图片" align="center" prop="classifyImage">
+      <el-table-column label="商品图片" align="center" prop="mainImage">
         <template slot-scope="{row}">
-          <img :src="row.mainImage" alt="">
+          <img :src="row.mainImage" alt="" width="50">
         </template>
       </el-table-column>
       <el-table-column label="商品名称" align="center" prop="productName" />
@@ -90,19 +90,49 @@
       <el-table-column align="center" label="添加时间" prop="addTime">
         <template 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" 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>
+          <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>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @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-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>
+        </el-form-item>
+        <el-form-item :label="'市场价(' + dialog.normalPrice + ')，修改为：'" prop="normalPrice">
+          <el-input v-model="dialog.normalPrice" />
+        </el-form-item>
+        <el-form-item :label="'成本价(' + dialog.costPrice + ')，修改为：'" prop="costPrice">
+          <el-input v-model="dialog.costPrice" />
+        </el-form-item>
+        <el-form-item :label="'售价(' + dialog.retailPrice + ')，修改为：'" prop="retailPrice">
+          <el-input v-model="dialog.retailPrice" />
+        </el-form-item>
+        <el-form-item :label="'起订量(' + dialog.minBuyNumber + ')，修改为：'" prop="minBuyNumber">
+          <el-input v-model="dialog.minBuyNumber" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          关闭
+        </el-button>
+        <el-button type="primary" @click="updateGoods">
+          确认
+        </el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -131,7 +161,7 @@ export default {
         limit: 10,
         form: {
           id: '',
-          classifyImage: '',
+          mainImage: '',
           productName: '',
           shopName: '',
           normalPrice: '', // 市场价',
@@ -146,6 +176,23 @@ export default {
           addTime: '', //  '添加时间',
           organizeID: this.organizeID // '组织ID,具体对应cm_mall_organize表ID',
         }
+      },
+      dialogFormVisible: false,
+      dialogStatus: '',
+      dialogTitle: '编辑',
+      dialog: {
+        classifyID: '',
+        normalPrice: '',
+        costPrice: '',
+        retailPrice: '',
+        minBuyNumber: ''
+      },
+      rules: {
+        classifyID: [{ required: true, message: '请选择分类', trigger: 'change' }],
+        normalPrice: [{ required: true, message: '市场价不能为空', trigger: 'blur' }],
+        costPrice: [{ required: true, message: '成本价不能为空', trigger: 'blur' }],
+        retailPrice: [{ required: true, message: '售价不能为空', trigger: 'blur' }],
+        minBuyNumber: [{ required: true, message: '起订量不能为空', trigger: 'blur' }]
       }
     }
   },
@@ -168,24 +215,24 @@ export default {
         this.list = [
           {
             id: 0,
-            classifyImage: '',
-            productName: 'hahaah',
-            shopName: '',
-            normalPrice: '',
-            costPrice: '',
-            retailPrice: '',
-            minBuyNumber: '',
-            preferredProduct: '',
-            commonlyProduct: '',
-            preferentialProduct: '',
-            validFlag: '',
+            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: '',
+            addTime: new Date(),
             organizeID: this.organizeID
           },
           {
             id: 0,
-            classifyImage: '',
+            mainImage: '',
             productName: 'hahaah',
             shopName: '',
             normalPrice: '',
@@ -210,6 +257,20 @@ export default {
     },
     handleCreate() {
       alert('添加')
+    },
+    handleEdit(row) {
+      this.dialog = Object.assign({}, row)
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    updateGoods() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          alert('更新')
+        }
+      })
     }
   }
 }