商品编辑功能完善

src/api/product.js

@@ -47,6 +47,14 @@ export function createProduct(data) {
   })
 }
 
+export function updateProduct(id,data) {
+  return request({
+    url:'/product/update/'+id,
+    method:'post',
+    data:data
+  })
+}
+
 export function getProduct(id) {
   return request({
     url:'/product/updateInfo/'+id,

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

@@ -161,6 +161,8 @@
     },
     data() {
       return {
+        //编辑模式时是否初始化成功
+        hasEditCreated:false,
         //商品属性分类下拉选项
         productAttributeCategoryOptions: [],
         //选中的商品属性
@@ -171,31 +173,40 @@
         selectProductAttrPics: [],
         //可手动添加的商品属性
         addProductAttrValue: '',
-        //选中的商品图片
-        selectProductPics: [],
         //商品富文本详情激活类型
         activeHtmlName: 'pc'
       }
     },
     computed: {
+      //是否有商品属性图片
       hasAttrPic() {
         if (this.selectProductAttrPics.length < 1) {
           return false;
         }
         return true;
-      }
       },
-    created() {
+      //商品的编号
-      if(this.isEdit){
+      productId(){
-        this.handleEditCreated();
+        return this.value.id;
-      }
-      this.getProductAttrCateList();
-      if (this.value.productAttributeCategoryId != null) {
-        this.handleProductAttrChange(this.value.productAttributeCategoryId);
-      }
       },
-    watch: {
+      //商品的主图和画册图片
-      selectProductPics: function (newValue) {
+      selectProductPics:{
+        get:function () {
+          let pics=[];
+          if(this.value.pic===undefined||this.value.pic==null||this.value.pic===''){
+            return pics;
+          }
+          pics.push(this.value.pic);
+          if(this.value.albumPics===undefined||this.value.albumPics==null||this.value.albumPics===''){
+            return pics;
+          }
+          let albumPics = this.value.albumPics.split(',');
+          for(let i=0;i<albumPics.length;i++){
+            pics.push(albumPics[i]);
+          }
+          return pics;
+        },
+        set:function (newValue) {
           if (newValue == null || newValue.length === 0) {
             this.value.pic = null;
             this.value.albumPics = null;
@@ -212,10 +223,26 @@
             }
           }
         }
+      }
+    },
+    created() {
+      this.getProductAttrCateList();
+    },
+    watch: {
+      productId:function (newValue) {
+        if(!this.isEdit)return;
+        if(this.hasEditCreated)return;
+        if(newValue===undefined||newValue==null||newValue===0)return;
+        this.handleEditCreated();
+      }
     },
     methods: {
       handleEditCreated() {
-
+        //根据商品属性分类id获取属性和参数
+        if(this.value.productAttributeCategoryId!=null){
+          this.handleProductAttrChange(this.value.productAttributeCategoryId);
+        }
+        this.hasEditCreated=true;
       },
       getProductAttrCateList() {
         let param = {pageNum: 1, pageSize: 100};
@@ -238,9 +265,11 @@
               let values = [];
               if (this.isEdit) {
                 if (list[i].handAddStatus === 1) {
+                  //编辑状态下获取手动添加编辑属性
                   options = this.getEditAttrOptions(list[i].id);
                 }
-                // values = this.getEditAttrValues(i);
+                //编辑状态下获取选中属性
+                values = this.getEditAttrValues(i);
               }
               this.selectProductAttr.push({
                 id: list[i].id,
@@ -251,13 +280,22 @@
                 options: options
               });
             }
+            if(this.isEdit){
+              //编辑模式下刷新商品属性图片
+              this.refreshProductAttrPics();
+            }
           } else {
             this.selectProductParam = [];
             for (let i = 0; i < list.length; i++) {
+              let value=null;
+              if(this.isEdit){
+                //编辑模式下获取参数属性
+                value= this.getEditParamValue(list[i].id);
+              }
               this.selectProductParam.push({
                 id: list[i].id,
                 name: list[i].name,
-                value: null,
+                value: value,
                 inputType: list[i].inputType,
                 inputList: list[i].inputList
               });
@@ -286,27 +324,35 @@
         if (index === 0) {
           for (let i = 0; i < this.value.skuStockList.length; i++) {
             let sku = this.value.skuStockList[i];
-            if(sku.sp1!=null&&values.indexOf(sku.sp1)>-1){
+            if (sku.sp1 != null && values.indexOf(sku.sp1) === -1) {
               values.push(sku.sp1);
             }
           }
         } else if (index === 1) {
           for (let i = 0; i < this.value.skuStockList.length; i++) {
             let sku = this.value.skuStockList[i];
-            if(sku.sp2!=null&&values.indexOf(sku.sp2)>-1){
+            if (sku.sp2 != null && values.indexOf(sku.sp2) === -1) {
               values.push(sku.sp2);
             }
           }
         } else {
           for (let i = 0; i < this.value.skuStockList.length; i++) {
             let sku = this.value.skuStockList[i];
-            if(sku.sp3!=null&&values.indexOf(sku.sp3)>-1){
+            if (sku.sp3 != null && values.indexOf(sku.sp3) === -1) {
               values.push(sku.sp3);
             }
           }
         }
         return values;
       },
+      //获取属性的值
+      getEditParamValue(id){
+        for(let i=0;i<this.value.productAttributeValueList.length;i++){
+          if(id===this.value.productAttributeValueList[i].productAttributeId){
+            return this.value.productAttributeValueList[i].value;
+          }
+        }
+      },
       handleProductAttrChange(value) {
         this.getProductAttrList(0, value);
         this.getProductAttrList(1, value);
@@ -348,8 +394,17 @@
         }
       },
       handleRefreshProductSkuList() {
-        this.value.skuStockList = [];
+        this.$confirm('刷新列表将导致sku信息重新生成，是否要刷新', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
           this.refreshProductAttrPics();
+          this.refreshProductSkuList();
+        });
+      },
+      refreshProductSkuList() {
+        this.value.skuStockList = [];
         let skuList = this.value.skuStockList;
         //只有一个属性时
         if (this.selectProductAttr.length === 1) {
@@ -411,10 +466,24 @@
         if (this.selectProductAttr.length >= 1) {
           let values = this.selectProductAttr[0].values;
           for (let i = 0; i < values.length; i++) {
-            this.selectProductAttrPics.push({name: values[i], pic: null})
+            let pic=null;
+            if(this.isEdit){
+              //编辑状态下获取图片
+              pic=this.getProductSkuPic(values[i]);
+            }
+            this.selectProductAttrPics.push({name: values[i], pic: pic})
           }
         }
       },
+      //获取商品相关属性的图片
+      getProductSkuPic(name){
+        for(let i=0;i<this.value.skuStockList.length;i++){
+          if(name===this.value.skuStockList[i].sp1){
+            return this.value.skuStockList[i].pic;
+          }
+        }
+        return null;
+      },
       //合并商品属性
       mergeProductAttrValue() {
         this.value.productAttributeValueList = [];

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

@@ -29,6 +29,7 @@
     <product-relation-detail
       v-show="showStatus[3]"
       v-model="productParam"
+      :is-edit="isEdit"
       @prevStep="prevStep"
       @finishCommit="finishCommit">
     </product-relation-detail>
@@ -39,7 +40,7 @@
   import ProductSaleDetail from './ProductSaleDetail';
   import ProductAttrDetail from './ProductAttrDetail';
   import ProductRelationDetail from './ProductRelationDetail';
-  import {createProduct,getProduct} from '@/api/product';
+  import {createProduct,getProduct,updateProduct} from '@/api/product';
 
   const defaultProductParam = {
     albumPics: '',
@@ -138,12 +139,22 @@
           this.showStatus[this.active] = true;
         }
       },
-      finishCommit() {
+      finishCommit(isEdit) {
         this.$confirm('是否要提交该产品', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
+          if(isEdit){
+            updateProduct(this.$route.query.id,this.productParam).then(response=>{
+              this.$message({
+                type: 'success',
+                message: '提交成功',
+                duration:1000
+              });
+              this.$router.back();
+            });
+          }else{
             createProduct(this.productParam).then(response=>{
               this.$message({
                 type: 'success',
@@ -152,6 +163,7 @@
               });
               location.reload();
             });
+          }
         })
       }
     }

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

@@ -42,18 +42,18 @@
   export default {
     name: "ProductRelationDetail",
     props: {
-      value: Object
+      value: Object,
+      isEdit: {
+        type: Boolean,
+        default: false
+      }
     },
     data() {
       return {
-        //选中的专题
-        selectSubject: [],
         //所有专题列表
         subjectList: [],
         //专题左右标题
         subjectTitles: ['待选择', '已选择'],
-        //选中的专题
-        selectPrefrenceArea: [],
         //所有专题列表
         prefrenceAreaList: [],
         //专题左右标题
@@ -64,19 +64,45 @@
       this.getSubjectList();
       this.getPrefrenceAreaList();
     },
-    watch: {
+    computed:{
-      selectSubject: function (newValue) {
+      //选中的专题
+      selectSubject:{
+        get:function () {
+          let subjects =[];
+          if(this.value.subjectProductRelationList==null||this.value.subjectProductRelationList.length<=0){
+            return subjects;
+          }
+          for(let i=0;i<this.value.subjectProductRelationList.length;i++){
+            subjects.push(this.value.subjectProductRelationList[i].subjectId);
+          }
+          return subjects;
+        },
+        set:function (newValue) {
           this.value.subjectProductRelationList=[];
           for(let i=0;i<newValue.length;i++){
             this.value.subjectProductRelationList.push({subjectId:newValue[i]});
           }
+        }
       },
-      selectPrefrenceArea: function (newValue) {
+      //选中的优选
+      selectPrefrenceArea:{
+        get:function () {
+          let prefrenceAreas =[];
+          if(this.value.prefrenceAreaProductRelationList==null||this.value.prefrenceAreaProductRelationList.length<=0){
+            return prefrenceAreas;
+          }
+          for(let i=0;i<this.value.prefrenceAreaProductRelationList.length;i++){
+            prefrenceAreas.push(this.value.prefrenceAreaProductRelationList[i].prefrenceAreaId);
+          }
+          return prefrenceAreas;
+        },
+        set:function (newValue) {
           this.value.prefrenceAreaProductRelationList=[];
           for(let i=0;i<newValue.length;i++){
             this.value.prefrenceAreaProductRelationList.push({prefrenceAreaId:newValue[i]});
           }
         }
+      }
     },
     methods: {
       filterMethod(query, item) {
@@ -108,7 +134,7 @@
         this.$emit('prevStep')
       },
       handleFinishCommit(){
-        this.$emit('finishCommit')
+        this.$emit('finishCommit',this.isEdit);
       }
     }
   }

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

@@ -95,7 +95,8 @@
       </el-form-item>
       <el-form-item v-show="value.promotionType===2">
         <div v-for="(item, index) in value.memberPriceList" :class="{littleMargin:index!==0}">
-            {{item.memberLevelName}}：<el-input v-model="item.memberPrice" style="width: 200px"></el-input>
+          {{item.memberLevelName}}：
+          <el-input v-model="item.memberPrice" style="width: 200px"></el-input>
         </div>
       </el-form-item>
       <el-form-item v-show="value.promotionType===3">
@@ -166,6 +167,7 @@
 
 <script>
   import {fetchList as fetchMemberLevelList} from '@/api/memberLevel'
+
   export default {
     name: "ProductSaleDetail",
     props: {
@@ -177,8 +179,6 @@
     },
     data() {
       return {
-        //选中的服务保证
-        selectServiceList: [],
         //日期选择器配置
         pickerOptions1: {
           disabledDate(time) {
@@ -189,7 +189,7 @@
     },
     created() {
       if (this.isEdit) {
-        this.handleEditCreated();
+        // this.handleEditCreated();
       } else {
         fetchMemberLevelList({defaultStatus: 0}).then(response => {
           let memberPriceList = [];
@@ -201,8 +201,19 @@
         });
       }
     },
-    watch: {
+    computed: {
-      selectServiceList: function (newValue) {
+      //选中的服务保证
+      selectServiceList: {
+        get() {
+          let list = [];
+          if (this.value.serviceIds === undefined || this.value.serviceIds == null || this.value.serviceIds === '') return list;
+          let ids = this.value.serviceIds.split(',');
+          for (let i = 0; i < ids.length; i++) {
+            list.push(Number(ids[i]));
+          }
+          return list;
+        },
+        set(newValue) {
           let serviceIds = '';
           if (newValue != null && newValue.length > 0) {
             for (let i = 0; i < newValue.length; i++) {
@@ -215,12 +226,13 @@
           } else {
             this.value.serviceIds = null;
           }
-
+        }
       }
     },
     methods: {
       handleEditCreated() {
         let ids = this.value.serviceIds.split(',');
+        console.log('handleEditCreated', ids);
         for (let i = 0; i < ids.length; i++) {
           this.selectServiceList.push(Number(ids[i]));
         }