优化商品规格，在添加新规格后将不会清除掉原有规格属性。

mall4v/src/views/modules/prod/prodInfo.vue

@@ -63,6 +63,7 @@
       <prod-transport v-show="dataForm.deliveryMode.hasShopDelivery"
                       v-model="dataForm.deliveryTemplateId"></prod-transport>
       <sku-tag ref="skuTag"
+                :skuList="dataForm.skuList"
                @change="skuTagChangeSkuHandler"></sku-tag>
       <sku-table ref="skuTable"
                  v-model="dataForm.skuList"

mall4v/src/views/modules/prod/sku-tag.vue

@@ -8,11 +8,11 @@
         <br/>
         <el-tag
           v-for="(tagItem, tagItemIndex) in tag.tagItems"
-          :key="tagItem"
+          :key="tagItem.valueId"
           closable
           :disable-transitions="false"
           @close="handleTagClose(tagIndex, tagItemIndex)">
-          {{tagItem}}
+          {{tagItem.propValue}}
         </el-tag>
         <el-input
           class="input-new-tag"
@@ -54,6 +54,8 @@
       <el-button size="mini" type="primary" @click="addTag()" v-show="isShowTagInput">确定</el-button>
       <el-button size="mini" @click="hideTagInput()" v-show="isShowTagInput">取消</el-button>
     </el-form-item>
+
+
   </div>
 </template>
 
@@ -87,12 +89,16 @@
       this.dbTags = data
     })
   },
-    // props: {
+  props: {
   //   tags: { // sku的标记
   //     default: [],
   //     type: Array
   //   }
   // },
+    skuList: {
+      default: []
+    }
+  },
   computed: {
     // 未使用的规格, 通过计算属性计算
     unUseTags () {
@@ -122,26 +128,84 @@
           return
         }
         let skuList = []
+        if (this.type === 4) {
+        // 删除规格值
+          this.skuList.forEach(sku => {
+            let propertiesArray = sku.properties.split(';')
+            if (this.tagItemName !== propertiesArray[this.tagNameIndex].split(':')[1]) {
+              skuList.push(sku)
+            }
+          })
+        } else if (this.type === 2) {
+        // 添加规格值
+          var properties = this.tagName + ':' + this.tagItemName
+        // 增加或删除规格
           let tempSkuList = []
           val.forEach(tag => {
             if (skuList.length === 0) {
+              if (this.tagName === tag.tagName) {
+                let sku = Object.assign({}, this.defalutSku)
+                sku.properties = properties // 销售属性组合字符串
+                skuList.push(sku)
+              } else {
                 tag.tagItems.forEach(tagItem => {
                   let sku = Object.assign({}, this.defalutSku)
-                sku.properties = `${tag.tagName}:${tagItem}` // 销售属性组合字符串
+                  sku.properties = `${tag.tagName}:${tagItem.propValue}` // 销售属性组合字符串
                   skuList.push(sku)
                 })
+              }
+              if (val.length === 1) {
+                skuList = this.skuList.concat(skuList)
+              }
             } else {
               tempSkuList = []
+              if (this.tagName === tag.tagName) {
+                skuList.forEach(sku => {
+                  if (sku.properties.indexOf(this.tagName) === -1) {
+                    let newSku = Object.assign({}, sku)
+                    newSku.properties = `${sku.properties};${properties}`
+                    tempSkuList.push(newSku)
+                  }
+                })
+              } else {
                 tag.tagItems.forEach(tagItem => {
                   skuList.forEach(sku => {
+                    if (sku.properties.indexOf(tag.tagName) === -1) {
                       let newSku = Object.assign({}, sku)
-                  newSku.properties = `${sku.properties};${tag.tagName}:${tagItem}`
+                      newSku.properties = `${sku.properties};${tag.tagName}:${tagItem.propValue}`
+                      tempSkuList.push(newSku)
+                    }
+                  })
+                })
+              }
+              skuList = this.skuList.concat(tempSkuList)
+              console.log('skuList', skuList)
+            }
+          })
+        } else {
+        // 增加或删除规格
+          let tempSkuList = []
+          val.forEach(tag => {
+          // console.log('tag', tag)
+            if (skuList.length === 0) {
+              tag.tagItems.forEach(tagItem => {
+                let sku = Object.assign({}, this.defalutSku)
+                sku.properties = `${tag.tagName}:${tagItem.propValue}` // 销售属性组合字符串
+                skuList.push(sku)
+              })
+            } else {
+              tempSkuList = []
+              tag.tagItems.forEach(tagItem => {
+                skuList.forEach(sku => {
+                  let newSku = Object.assign({}, sku)
+                  newSku.properties = `${sku.properties};${tag.tagName}:${tagItem.propValue}`
                   tempSkuList.push(newSku)
                 })
               })
               skuList = tempSkuList
             }
           })
+        }
         if (!skuList.length) {
           skuList.push(Object.assign({}, this.defalutSku))
         }
@@ -155,6 +219,7 @@
     init (skuList) {
       this.value = skuList
       if (!skuList || !skuList.length) {
+        this.skuTags = []
         this.$emit('change', [Object.assign({}, this.defalutSku)])
         return
       }
@@ -165,17 +230,18 @@
         if (!sku.properties) break
         let propertiesArray = sku.properties.split(';')
         for (let j in propertiesArray) {
-            let cnProperties = propertiesArray[j].split(':')
+          let properties = propertiesArray[j].split(':')
           if (!skuTags[j]) {
             skuTags[j] = {
-                tagName: cnProperties[0],
+              tagName: properties[0],
               tagItems: []
             }
             this.tagItemInputs.push({ visible: false, value: '' })
           }
-            let tagItemNameIndex = skuTags[j].tagItems.findIndex((tagItemName) => tagItemName === cnProperties[1])
+          let tagItemNameIndex = skuTags[j].tagItems.findIndex((tagItemName) => tagItemName.propValue === properties[1])
           if (tagItemNameIndex === -1) {
-              skuTags[j].tagItems.push(cnProperties[1])
+            // skuTags[j].tagItems.push(properties[1])
+            skuTags[j].tagItems.push({propValue: properties[1]})
           }
         }
       }
@@ -183,7 +249,7 @@
     },
     // 显示规格名、规格值输入框
     shopTagInput () {
-        this.isShowTagInput = true
+      this.isShowTagInput = !this.isShowTagInput
     },
     // 隐藏规格名、规格值输入框
     hideTagInput () {
@@ -201,16 +267,31 @@
         return
       }
       this.isShowTagInput = false
+      for (let i = 0; i < selectValues.length; i++) {
+        const element = selectValues[i]
+        let is = Object.prototype.toString.call(element) === '[object Object]'
+        if (!is) {
+          this.maxPropId = this.maxPropId + 1
+          break
+        }
+      }
       let tagItems = []
       for (let i = 0; i < selectValues.length; i++) {
         const element = selectValues[i]
+        let is = Object.prototype.toString.call(element) === '[object Object]'
+        if (is) {
           tagItems.push(element)
+        } else {
+          this.maxValueId = this.maxValueId + 1
+          tagItems.push({propId: this.maxPropId, propValue: element, valueId: this.maxValueId})
+        }
       }
       // 向规格中放入规格输入框内的数据
       this.$store.commit('prod/addSkuTag', {
         tagName: this.addTagInput.propName,
         tagItems
       })
+      this.type = 1
       this.cleanTagInput()
     },
     // 清除规格值输入框内容
@@ -219,6 +300,7 @@
         propName: '',
         selectValues: []
       }
+      this.dbTagValues = []
     },
       // 规格名输入框，选中规格事件
     handleTagClick () {
@@ -238,21 +320,32 @@
         this.dbTagValues = data
       })
     },
-      // 关闭标签
+    // 关闭标签 --删除
     handleTagClose (tagIndex, tagItemIndex) {
       if (this.skuTags[tagIndex].tagItems.length === 1) {
         return
       }
+      this.type = 4
       this.$store.commit('prod/removeSkuTagItem', { tagIndex, tagItemIndex })
     },
     // 标签输入框确定时调用
     handleInputConfirm (tagIndex) {
-        let tagItem = this.tagItemInputs[tagIndex].value
+      if (this.checkTagItem(tagIndex)) {
+        return
+      }
+      var tagItems = this.skuTags[tagIndex].tagItems
+      var itemValue = this.tagItemInputs[tagIndex].value
+      let index = tagItems.length - 1
+      this.tagName = this.skuTags[tagIndex].tagName
+      this.tagItemName = this.tagItemInputs[tagIndex].value
+      let maxValue = this.getMaxValueId(this.skuTags[tagIndex].tagItems)
+      let tagItem = {propId: index === -1 ? 0 : this.skuTags[tagIndex].tagItems[index].propId, propValue: itemValue, valueId: index === -1 ? 0 : (maxValue + 1)}
       if (tagItem) {
         this.$store.commit('prod/addSkuTagItem', { tagIndex, tagItem })
       }
       this.tagItemInputs[tagIndex].visible = false
       this.tagItemInputs[tagIndex].value = ''
+      this.type = 2
     },
     // 显示标签输入框
     showTagInput (tagIndex) {
@@ -262,15 +355,44 @@
         this.$refs[`saveTagInput${tagIndex}`][0].$refs.input.focus()
       })
     },
+    // 获取数据集合所有对象中某个属性的最大值
+    getMaxValueId (list) {
+      let value = Math.max.apply(Math, list.map(item => { return item.valueId }))
+      return value
+    },
+    // 删除 规格
     removeTag (tagIndex) {
+      this.type = 3
       this.$store.commit('prod/removeSkuTag', tagIndex)
+    },
+    /**
+     * 新增规格值时，判断是否存在同名的规格值
+     */
+    checkTagItem (tagIndex) {
+      let tagItem = this.tagItemInputs[tagIndex].value
+      if (!tagItem) {
+        this.tagItemInputs[tagIndex].visible = false
+        this.tagItemInputs[tagIndex].value = ''
+        return true
+      }
+      var isSame = false
+      this.skuTags.forEach(tag => {
+        let arr = tag.tagItems.map((item, index) => {
+          return item.propValue
+        })
+        if (arr.indexOf(tagItem) > -1) {
+          isSame = true
+          this.$message.error('product.specificationValue')
+          return false
+        }
+      })
+      return isSame
     }
   }
 }
 </script>
 
 <style lang="scss">
-
 .mod-prod-sku-tag {
   .el-tag + .el-tag {
     margin-left: 10px;
@@ -288,4 +410,30 @@
     vertical-align: bottom;
   }
 }
+
+// 新增规格外部边框
+.sku-border{
+  border: 1px solid #EBEEF5;
+  width:70%
+}
+.sku-background{
+  background-color: #F6f6f6;
+  margin: 12px 12px;
+  .el-button{
+    margin-left: 10px;
+    span{
+      color:#000 !important;
+    }
+  }
+  .el-form-item__label{
+    padding:0 24px 0 0
+  }
+}
+.sku-tag{
+  margin: 12px 12px;
+}
+.tagTree{
+  margin-left: 18px;
+  padding-bottom:8px;
+}
 </style>