商品编辑功能完善

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,51 +173,76 @@
         selectProductAttrPics: [],
         //可手动添加的商品属性
         addProductAttrValue: '',
-        //选中的商品图片
-        selectProductPics: [],
         //商品富文本详情激活类型
         activeHtmlName: 'pc'
       }
     },
     computed: {
+      //是否有商品属性图片
       hasAttrPic() {
         if (this.selectProductAttrPics.length < 1) {
           return false;
         }
         return true;
+      },
+      //商品的编号
+      productId(){
+        return this.value.id;
+      },
+      //商品的主图和画册图片
+      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;
+          } else {
+            this.value.pic = newValue[0];
+            this.value.albumPics = '';
+            if (newValue.length > 1) {
+              for (let i = 1; i < newValue.length; i++) {
+                this.value.albumPics += newValue[i];
+                if (i !== newValue.length - 1) {
+                  this.value.albumPics += ',';
+                }
+              }
+            }
+          }
+        }
       }
     },
     created() {
-      if(this.isEdit){
-        this.handleEditCreated();
-      }
       this.getProductAttrCateList();
-      if (this.value.productAttributeCategoryId != null) {
-        this.handleProductAttrChange(this.value.productAttributeCategoryId);
-      }
     },
     watch: {
-      selectProductPics: function (newValue) {
-        if (newValue == null || newValue.length === 0) {
-          this.value.pic = null;
-          this.value.albumPics = null;
-        } else {
-          this.value.pic = newValue[0];
-          this.value.albumPics = '';
-          if (newValue.length > 1) {
-            for (let i = 1; i < newValue.length; i++) {
-              this.value.albumPics += newValue[i];
-              if (i !== newValue.length - 1) {
-                this.value.albumPics += ',';
-              }
-            }
-          }
-        }
+      productId:function (newValue) {
+        if(!this.isEdit)return;
+        if(this.hasEditCreated)return;
+        if(newValue===undefined||newValue==null||newValue===0)return;
+        this.handleEditCreated();
       }
     },
     methods: {
-      handleEditCreated(){
-
+      handleEditCreated() {
+        //根据商品属性分类id获取属性和参数
+        if(this.value.productAttributeCategoryId!=null){
+          this.handleProductAttrChange(this.value.productAttributeCategoryId);
+        }
+        this.hasEditCreated=true;
       },
       getProductAttrCateList() {
         let param = {pageNum: 1, pageSize: 100};
@@ -235,12 +262,14 @@
             this.selectProductAttr = [];
             for (let i = 0; i < list.length; i++) {
               let options = [];
-              let values=[];
-              if(this.isEdit){
-                if(list[i].handAddStatus===1){
+              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
               });
@@ -266,13 +304,13 @@
         });
       },
       //获取设置的可手动添加属性值
-      getEditAttrOptions(id){
-        let options=[];
-        for(let i=0;i<this.value.productAttributeValueList.length;i++){
+      getEditAttrOptions(id) {
+        let options = [];
+        for (let i = 0; i < this.value.productAttributeValueList.length; i++) {
           let attrValue = this.value.productAttributeValueList[i];
-          if(attrValue.productAttributeId===id){
+          if (attrValue.productAttributeId === id) {
             let strArr = attrValue.value.split(',');
-            for(let j=0;j<strArr.length;j++){
+            for (let j = 0; j < strArr.length; j++) {
               options.push(strArr[j]);
             }
             break;
@@ -281,32 +319,40 @@
         return options;
       },
       //获取选中的属性值
-      getEditAttrValues(index){
-        let values=[];
-        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){
+      getEditAttrValues(index) {
+        let values = [];
+        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) {
               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){
+        } 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) {
               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){
+        } 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) {
               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.$confirm('刷新列表将导致sku信息重新生成，是否要刷新', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.refreshProductAttrPics();
+          this.refreshProductSkuList();
+        });
+      },
+      refreshProductSkuList() {
         this.value.skuStockList = [];
-        this.refreshProductAttrPics();
         let skuList = this.value.skuStockList;
         //只有一个属性时
         if (this.selectProductAttr.length === 1) {
@@ -411,9 +466,23 @@
         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() {
@@ -436,7 +505,7 @@
         }
       },
       //合并商品属性图片
-      mergeProductAttrPics(){
+      mergeProductAttrPics() {
         for (let i = 0; i < this.selectProductAttrPics.length; i++) {
           for (let j = 0; j < this.value.skuStockList.length; j++) {
             if (this.value.skuStockList[j].sp1 === this.selectProductAttrPics[i].name) {

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,20 +139,31 @@
           this.showStatus[this.active] = true;
         }
       },
-      finishCommit() {
+      finishCommit(isEdit) {
         this.$confirm('是否要提交该产品', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
-          createProduct(this.productParam).then(response=>{
-            this.$message({
-              type: 'success',
-              message: '提交成功',
-              duration:1000
+          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',
+                message: '提交成功',
+                duration:1000
+              });
+              location.reload();
             });
-            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,17 +64,43 @@
       this.getSubjectList();
       this.getPrefrenceAreaList();
     },
-    watch: {
-      selectSubject: function (newValue) {
-        this.value.subjectProductRelationList=[];
-        for(let i=0;i<newValue.length;i++){
-          this.value.subjectProductRelationList.push({subjectId:newValue[i]});
+    computed:{
+      //选中的专题
+      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) {
-        this.value.prefrenceAreaProductRelationList=[];
-        for(let i=0;i<newValue.length;i++){
-          this.value.prefrenceAreaProductRelationList.push({prefrenceAreaId:newValue[i]});
+      //选中的优选
+      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]});
+          }
         }
       }
     },
@@ -108,7 +134,7 @@
         this.$emit('prevStep')
       },
       handleFinishCommit(){
-        this.$emit('finishCommit')
+        this.$emit('finishCommit',this.isEdit);
       }
     }
   }

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

@@ -70,33 +70,34 @@
         <div>
           开始时间：
           <el-date-picker
-          v-model="value.promotionStartTime"
-          value-format="timestamp"
-          type="datetime"
-          :picker-options="pickerOptions1"
-          placeholder="选择开始时间">
-        </el-date-picker>
+            v-model="value.promotionStartTime"
+            value-format="timestamp"
+            type="datetime"
+            :picker-options="pickerOptions1"
+            placeholder="选择开始时间">
+          </el-date-picker>
         </div>
         <div class="littleMargin">
           结束时间：
           <el-date-picker
-          v-model="value.promotionEndTime"
-          value-format="timestamp"
-          type="datetime"
-          :picker-options="pickerOptions1"
-          placeholder="选择结束时间">
-        </el-date-picker>
+            v-model="value.promotionEndTime"
+            value-format="timestamp"
+            type="datetime"
+            :picker-options="pickerOptions1"
+            placeholder="选择结束时间">
+          </el-date-picker>
         </div>
         <div class="littleMargin">
           促销价格：
-          <el-input style="width: 220px"v-model="value.promotionPrice" placeholder="输入促销价格"></el-input>
+          <el-input style="width: 220px" v-model="value.promotionPrice" placeholder="输入促销价格"></el-input>
         </div>
 
       </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>
-       </div>
+        <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>
+        </div>
       </el-form-item>
       <el-form-item v-show="value.promotionType===3">
         <el-table :data="value.productLadderList"
@@ -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) {
@@ -187,102 +187,114 @@
         }
       }
     },
-    created(){
-      if(this.isEdit){
-        this.handleEditCreated();
-      }else{
-        fetchMemberLevelList({defaultStatus:0}).then(response=>{
-          let memberPriceList=[];
-          for(let i=0;i<response.data.length;i++){
+    created() {
+      if (this.isEdit) {
+        // this.handleEditCreated();
+      } else {
+        fetchMemberLevelList({defaultStatus: 0}).then(response => {
+          let memberPriceList = [];
+          for (let i = 0; i < response.data.length; i++) {
             let item = response.data[i];
-            memberPriceList.push({memberLevelId:item.id,memberLevelName:item.name})
+            memberPriceList.push({memberLevelId: item.id, memberLevelName: item.name})
           }
-          this.value.memberPriceList=memberPriceList;
+          this.value.memberPriceList = memberPriceList;
         });
       }
     },
-    watch: {
-      selectServiceList: function (newValue) {
-        let serviceIds = '';
-        if (newValue != null && newValue.length > 0) {
-          for (let i = 0; i < newValue.length; i++) {
-            serviceIds += newValue[i] + ',';
+    computed: {
+      //选中的服务保证
+      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]));
           }
-          if (serviceIds.endsWith(',')) {
-            serviceIds = serviceIds.substr(0, serviceIds.length - 1)
+          return list;
+        },
+        set(newValue) {
+          let serviceIds = '';
+          if (newValue != null && newValue.length > 0) {
+            for (let i = 0; i < newValue.length; i++) {
+              serviceIds += newValue[i] + ',';
+            }
+            if (serviceIds.endsWith(',')) {
+              serviceIds = serviceIds.substr(0, serviceIds.length - 1)
+            }
+            this.value.serviceIds = serviceIds;
+          } else {
+            this.value.serviceIds = null;
           }
-          this.value.serviceIds = serviceIds;
-        } else {
-          this.value.serviceIds = null;
         }
-
       }
     },
-    methods:{
-      handleEditCreated(){
+    methods: {
+      handleEditCreated() {
         let ids = this.value.serviceIds.split(',');
-        for(let i=0;i<ids.length;i++){
+        console.log('handleEditCreated', ids);
+        for (let i = 0; i < ids.length; i++) {
           this.selectServiceList.push(Number(ids[i]));
         }
       },
-      handleRemoveProductLadder(index,row){
+      handleRemoveProductLadder(index, row) {
         let productLadderList = this.value.productLadderList;
-        if(productLadderList.length===1){
+        if (productLadderList.length === 1) {
           productLadderList.pop();
           productLadderList.push({
             count: 0,
             discount: 0,
             price: 0
           })
-        }else{
-          productLadderList.splice(index,1);
+        } else {
+          productLadderList.splice(index, 1);
         }
       },
-      handleAddProductLadder(index,row){
+      handleAddProductLadder(index, row) {
         let productLadderList = this.value.productLadderList;
-        if(productLadderList.length<3){
+        if (productLadderList.length < 3) {
           productLadderList.push({
             count: 0,
             discount: 0,
             price: 0
           })
-        }else{
+        } else {
           this.$message({
             message: '最多只能添加三条',
             type: 'warning'
           });
         }
       },
-      handleRemoveFullReduction(index,row){
+      handleRemoveFullReduction(index, row) {
         let fullReductionList = this.value.productFullReductionList;
-        if(fullReductionList.length===1){
+        if (fullReductionList.length === 1) {
           fullReductionList.pop();
           fullReductionList.push({
             fullPrice: 0,
             reducePrice: 0
           });
-        }else{
-          fullReductionList.splice(index,1);
+        } else {
+          fullReductionList.splice(index, 1);
         }
       },
-      handleAddFullReduction(index,row){
+      handleAddFullReduction(index, row) {
         let fullReductionList = this.value.productFullReductionList;
-        if(fullReductionList.length<3){
+        if (fullReductionList.length < 3) {
           fullReductionList.push({
             fullPrice: 0,
             reducePrice: 0
           });
-        }else{
+        } else {
           this.$message({
             message: '最多只能添加三条',
             type: 'warning'
           });
         }
       },
-      handlePrev(){
+      handlePrev() {
         this.$emit('prevStep')
       },
-      handleNext(){
+      handleNext() {
         this.$emit('nextStep')
       }
     }
@@ -290,7 +302,7 @@
 </script>
 
 <style scoped>
-  .littleMargin{
+  .littleMargin {
     margin-top: 10px;
   }
 </style>