添加编辑商品逻辑拆分

src/router/index.js

@@ -50,6 +50,13 @@ export const constantRouterMap = [
         component: () => import('@/views/pms/product/add'),
         meta: {title: '添加商品', icon: 'product-add'}
       },
+      {
+        path: 'updateProduct',
+        name: 'updateProduct',
+        component: () => import('@/views/pms/product/update'),
+        meta: {title: '修改商品', icon: 'product-add'},
+        hidden:true
+      },
       {
         path: 'productRecycle',
         name: 'productRecycle',

src/views/pms/product/add.vue

@@ -1,160 +1,12 @@
 <template> 
-  <el-card class="form-container" shadow="never">
-    <el-steps :active="active" finish-status="success" align-center>
-      <el-step title="填写商品信息"></el-step>
-      <el-step title="填写商品促销"></el-step>
-      <el-step title="填写商品属性"></el-step>
-      <el-step title="选择商品关联"></el-step>
-    </el-steps>
-    <add-product-info
-      v-show="showStatus[0]"
-      v-model="productParam"
-      @nextStep="nextStep">
-    </add-product-info>
-    <add-product-sale
-      v-show="showStatus[1]"
-      v-model="productParam"
-      @nextStep="nextStep"
-      @prevStep="prevStep"
-    >
-    </add-product-sale>
-    <add-product-attr
-      v-show="showStatus[2]"
-      v-model="productParam"
-      @nextStep="nextStep"
-      @prevStep="prevStep"
-    >
-    </add-product-attr>
-    <add-product-relation
-      v-show="showStatus[3]"
-      v-model="productParam"
-      @prevStep="prevStep"
-      @finishCommit="finishCommit"
-    >
-    </add-product-relation>
-  </el-card>
+  <product-detail :is-edit='false'></product-detail>
 </template>
 <script>
-  import AddProductInfo from './components/addProductInfo';
-  import AddProductSale from './components/addProductSale';
-  import AddProductAttr from './components/addProductAttr';
-  import AddProductRelation from './components/addProductRelation';
-  import {createProduct} from '@/api/product';
-
-  const defaultProductParam = {
-    albumPics: '',
-    brandId: null,
-    brandName: '',
-    deleteStatus: 0,
-    description: '',
-    detailDesc: '',
-    detailHtml: '',
-    detailMobileHtml: '',
-    detailTitle: '',
-    feightTemplateId: 0,
-    flashPromotionCount: 0,
-    flashPromotionId: 0,
-    flashPromotionPrice: 0,
-    flashPromotionSort: 0,
-    giftPoint: 0,
-    giftGrowth: 0,
-    keywords: '',
-    lowStock: 0,
-    name: '',
-    newStatus: 0,
-    note: '',
-    originalPrice: 0,
-    pic: '',
-    //会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
-    memberPriceList: [],
-    //商品满减
-    productFullReductionList: [{fullPrice: 0, reducePrice: 0}],
-    //商品阶梯价格
-    productLadderList: [{count: 0,discount: 0,price: 0}],
-    previewStatus: 0,
-    price: 0,
-    productAttributeCategoryId: null,
-    //商品属性相关{productAttributeId: 0, value: ''}
-    productAttributeValueList: [],
-    //商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', sp1: '', sp2: '', sp3: '', stock: 0}
-    skuStockList: [],
-    //商品相关专题{subjectId: 0}
-    subjectProductRelationList: [],
-    //商品相关优选{prefrenceAreaId: 0}
-    prefrenceAreaProductRelationList: [],
-    productCategoryId: null,
-    productCategoryName: '',
-    productSn: '',
-    promotionEndTime: '',
-    promotionPerLimit: 0,
-    promotionPrice: null,
-    promotionStartTime: '',
-    promotionType: 0,
-    publishStatus: 0,
-    recommandStatus: 0,
-    sale: 0,
-    serviceIds: '',
-    sort: 0,
-    stock: 0,
-    subTitle: '',
-    unit: '',
-    usePointLimit: 0,
-    verifyStatus: 0,
-    weight: 0
-  };
+  import ProductDetail from './components/ProductDetail'
   export default {
     name: 'addProduct',
-    components: {AddProductInfo, AddProductSale, AddProductAttr, AddProductRelation},
-    data() {
-      return {
-        active: 0,
-        productParam: Object.assign({}, defaultProductParam),
-        showStatus: [true, false, false, false]
-      }
-    },
-    methods: {
-      hideAll() {
-        for (let i = 0; i < this.showStatus.length; i++) {
-          this.showStatus[i] = false;
-        }
-      },
-      prevStep() {
-        if (this.active > 0 && this.active < this.showStatus.length) {
-          this.active--;
-          this.hideAll();
-          this.showStatus[this.active] = true;
-        }
-      },
-      nextStep() {
-        if (this.active < this.showStatus.length - 1) {
-          this.active++;
-          this.hideAll();
-          this.showStatus[this.active] = true;
-        }
-      },
-      finishCommit() {
-        this.$confirm('是否要提交该产品', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          createProduct(this.productParam).then(response=>{
-            this.$message({
-              type: 'success',
-              message: '提交成功',
-              duration:1000
-            });
-            location.reload();
-          });
-        })
-      }
-    }
+    components: { ProductDetail }
   }
 </script>
 <style>
-  .form-container {
-    width: 800px;
-  }
 </style>
-
-

src/views/pms/product/components/ProductAttrDetail.vue

@@ -150,7 +150,7 @@
   import Tinymce from '@/components/Tinymce'
 
   export default {
-    name: "addProductAttr",
+    name: "ProductAttrDetail",
     components: {SingleUpload, MultiUpload, Tinymce},
     props: {
       value: Object

src/views/pms/product/components/ProductDetail.vue

@@ -0,0 +1,166 @@
+<template> 
+  <el-card class="form-container" shadow="never">
+    <el-steps :active="active" finish-status="success" align-center>
+      <el-step title="填写商品信息"></el-step>
+      <el-step title="填写商品促销"></el-step>
+      <el-step title="填写商品属性"></el-step>
+      <el-step title="选择商品关联"></el-step>
+    </el-steps>
+    <product-info-detail
+      v-show="showStatus[0]"
+      v-model="productParam"
+      @nextStep="nextStep">
+    </product-info-detail>
+    <product-sale-detail
+      v-show="showStatus[1]"
+      v-model="productParam"
+      @nextStep="nextStep"
+      @prevStep="prevStep"
+    >
+    </product-sale-detail>
+    <product-attr-detail
+      v-show="showStatus[2]"
+      v-model="productParam"
+      @nextStep="nextStep"
+      @prevStep="prevStep"
+    >
+    </product-attr-detail>
+    <product-relation-detail
+      v-show="showStatus[3]"
+      v-model="productParam"
+      @prevStep="prevStep"
+      @finishCommit="finishCommit"
+    >
+    </product-relation-detail>
+  </el-card>
+</template>
+<script>
+  import ProductInfoDetail from './ProductInfoDetail';
+  import ProductSaleDetail from './ProductSaleDetail';
+  import ProductAttrDetail from './ProductAttrDetail';
+  import ProductRelationDetail from './ProductRelationDetail';
+  import {createProduct} from '@/api/product';
+
+  const defaultProductParam = {
+    albumPics: '',
+    brandId: null,
+    brandName: '',
+    deleteStatus: 0,
+    description: '',
+    detailDesc: '',
+    detailHtml: '',
+    detailMobileHtml: '',
+    detailTitle: '',
+    feightTemplateId: 0,
+    flashPromotionCount: 0,
+    flashPromotionId: 0,
+    flashPromotionPrice: 0,
+    flashPromotionSort: 0,
+    giftPoint: 0,
+    giftGrowth: 0,
+    keywords: '',
+    lowStock: 0,
+    name: '',
+    newStatus: 0,
+    note: '',
+    originalPrice: 0,
+    pic: '',
+    //会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
+    memberPriceList: [],
+    //商品满减
+    productFullReductionList: [{fullPrice: 0, reducePrice: 0}],
+    //商品阶梯价格
+    productLadderList: [{count: 0,discount: 0,price: 0}],
+    previewStatus: 0,
+    price: 0,
+    productAttributeCategoryId: null,
+    //商品属性相关{productAttributeId: 0, value: ''}
+    productAttributeValueList: [],
+    //商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', sp1: '', sp2: '', sp3: '', stock: 0}
+    skuStockList: [],
+    //商品相关专题{subjectId: 0}
+    subjectProductRelationList: [],
+    //商品相关优选{prefrenceAreaId: 0}
+    prefrenceAreaProductRelationList: [],
+    productCategoryId: null,
+    productCategoryName: '',
+    productSn: '',
+    promotionEndTime: '',
+    promotionPerLimit: 0,
+    promotionPrice: null,
+    promotionStartTime: '',
+    promotionType: 0,
+    publishStatus: 0,
+    recommandStatus: 0,
+    sale: 0,
+    serviceIds: '',
+    sort: 0,
+    stock: 0,
+    subTitle: '',
+    unit: '',
+    usePointLimit: 0,
+    verifyStatus: 0,
+    weight: 0
+  };
+  export default {
+    name: 'ProductDetail',
+    components: {ProductInfoDetail, ProductSaleDetail, ProductAttrDetail, ProductRelationDetail},
+    props: {
+      isEdit: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        active: 0,
+        productParam: Object.assign({}, defaultProductParam),
+        showStatus: [true, false, false, false]
+      }
+    },
+    methods: {
+      hideAll() {
+        for (let i = 0; i < this.showStatus.length; i++) {
+          this.showStatus[i] = false;
+        }
+      },
+      prevStep() {
+        if (this.active > 0 && this.active < this.showStatus.length) {
+          this.active--;
+          this.hideAll();
+          this.showStatus[this.active] = true;
+        }
+      },
+      nextStep() {
+        if (this.active < this.showStatus.length - 1) {
+          this.active++;
+          this.hideAll();
+          this.showStatus[this.active] = true;
+        }
+      },
+      finishCommit() {
+        this.$confirm('是否要提交该产品', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          createProduct(this.productParam).then(response=>{
+            this.$message({
+              type: 'success',
+              message: '提交成功',
+              duration:1000
+            });
+            location.reload();
+          });
+        })
+      }
+    }
+  }
+</script>
+<style>
+  .form-container {
+    width: 800px;
+  }
+</style>
+
+

src/views/pms/product/components/ProductInfoDetail.vue

@@ -64,7 +64,7 @@
   import {fetchList as fetchBrandList} from '@/api/brand'
 
   export default {
-    name: "addProductInfo",
+    name: "ProductInfoDetail",
     props: {
       value: Object
     },

src/views/pms/product/components/ProductRelationDetail.vue

@@ -40,7 +40,7 @@
   import {fetchList as fetchPrefrenceAreaList} from '@/api/prefrenceArea'
 
   export default {
-    name: "addProductRelation",
+    name: "ProductRelationDetail",
     props: {
       value: Object
     },

src/views/pms/product/components/ProductSaleDetail.vue

@@ -167,7 +167,7 @@
 <script>
   import {fetchList as fetchMemberLevelList} from '@/api/memberLevel'
   export default {
-    name: "addProductSale",
+    name: "ProductSaleDetail",
     props: {
       value: Object
     },

src/views/pms/product/index.vue

@@ -71,7 +71,7 @@
       <span>数据列表</span>
       <el-button
         class="btn-add"
-        @click="handleAddItem()"
+        @click="handleAddProduct()"
         size="mini">
         添加
       </el-button>
@@ -147,7 +147,7 @@
             <p>
               <el-button
                 type="text"
-                @click="handleDelete(scope.$index, scope.row)">审核详情
+                @click="handleShowVerifyDetail(scope.$index, scope.row)">审核详情
               </el-button>
             </p>
           </template>
@@ -161,7 +161,7 @@
               </el-button>
               <el-button
                 size="mini"
-                @click="handleEdit(scope.$index, scope.row)">编辑
+                @click="handleUpdateProduct(scope.$index, scope.row)">编辑
               </el-button>
             </p>
             <p>
@@ -358,7 +358,7 @@
         this.listQuery.pageNum = 1;
         this.getList();
       },
-      handleAddItem() {
+      handleAddProduct() {
         this.$router.push({path:'/pms/addProduct'});
       },
       handleBatchOperate() {
@@ -459,6 +459,9 @@
           this.updateDeleteStatus(1,ids);
         });
       },
+      handleUpdateProduct(index,row){
+        this.$router.push({path:'/pms/addProduct',query:{id:row.id}});
+      },
       updatePublishStatus(publishStatus, ids) {
         let params = new URLSearchParams();
         params.append('ids', ids);

src/views/pms/product/update.vue

@@ -0,0 +1,12 @@
+<template> 
+  <product-detail :is-edit='true'></product-detail>
+</template>
+<script>
+  import ProductDetail from './components/ProductDetail'
+  export default {
+    name: 'updateProduct',
+    components: { ProductDetail }
+  }
+</script>
+<style>
+</style>