From 1d3332712a9f75bb0feb15fe6b06af80073fe81d Mon Sep 17 00:00:00 2001
From: lhd <839347550@qq.com>
Date: Fri, 30 Apr 2021 19:31:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=95=86=E5=93=81=E8=A7=84?=
 =?UTF-8?q?=E6=A0=BC=EF=BC=8C=E5=9C=A8=E6=B7=BB=E5=8A=A0=E6=96=B0=E8=A7=84?=
 =?UTF-8?q?=E6=A0=BC=E5=90=8E=E5=B0=86=E4=B8=8D=E4=BC=9A=E6=B8=85=E9=99=A4?=
 =?UTF-8?q?=E6=8E=89=E5=8E=9F=E6=9C=89=E8=A7=84=E6=A0=BC=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mall4v/src/views/modules/prod/prodInfo.vue |   1 +
 mall4v/src/views/modules/prod/sku-tag.vue  | 522 +++++++++++++--------
 2 files changed, 336 insertions(+), 187 deletions(-)

diff --git a/mall4v/src/views/modules/prod/prodInfo.vue b/mall4v/src/views/modules/prod/prodInfo.vue
index 340f96f..a56fdb4 100644
--- a/mall4v/src/views/modules/prod/prodInfo.vue
+++ b/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"
diff --git a/mall4v/src/views/modules/prod/sku-tag.vue b/mall4v/src/views/modules/prod/sku-tag.vue
index 3a4fb82..e36cf20 100644
--- a/mall4v/src/views/modules/prod/sku-tag.vue
+++ b/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,80 +54,143 @@
       <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>
 
 <script>
-  export default {
-    data () {
-      return {
-        value: [],
-        isShowTagInput: false,
-        addTagInput: {
-          propName: '',
-          selectValues: []
-        },
-        tagItemInputs: [],
-        // sku的标记
-        // tags: [],
-        // 数据库中的规格
-        dbTags: [],
-        // 根据选定的规格所查询出来的规格值
-        dbTagValues: [],
-        specs: [], // 使用的规格
-        initing: false
+export default {
+  data () {
+    return {
+      value: [],
+      isShowTagInput: false,
+      addTagInput: {
+        propName: '',
+        selectValues: []
+      },
+      tagItemInputs: [],
+      // sku的标记
+      // tags: [],
+      // 数据库中的规格
+      dbTags: [],
+      // 根据选定的规格所查询出来的规格值
+      dbTagValues: [],
+      specs: [], // 使用的规格
+      initing: false
+    }
+  },
+  created: function () {
+    this.$http({
+      url: this.$http.adornUrl(`/prod/spec/list`),
+      method: 'get',
+      params: this.$http.adornParams()
+    }).then(({data}) => {
+      this.dbTags = data
+    })
+  },
+  props: {
+  //   tags: { // sku的标记
+  //     default: [],
+  //     type: Array
+  //   }
+  // },
+    skuList: {
+      default: []
+    }
+  },
+  computed: {
+    // 未使用的规格, 通过计算属性计算
+    unUseTags () {
+      let res = []
+      for (let i = 0; i < this.dbTags.length; i++) {
+        const dbTag = this.dbTags[i]
+        let specIndex = this.skuTags.findIndex(tag => tag.tagName === dbTag.propName)
+        if (specIndex === -1) {
+          res.push(dbTag)
+        }
       }
+      return res
     },
-    created: function () {
-      this.$http({
-        url: this.$http.adornUrl(`/prod/spec/list`),
-        method: 'get',
-        params: this.$http.adornParams()
-      }).then(({data}) => {
-        this.dbTags = data
-      })
+    skuTags: {
+      get () { return this.$store.state.prod.skuTags },
+      set (val) { this.$store.commit('prod/updateSkuTags', val) }
     },
-    // props: {
-    //   tags: { // sku的标记
-    //     default: [],
-    //     type: Array
-    //   }
-    // },
-    computed: {
-      // 未使用的规格, 通过计算属性计算
-      unUseTags () {
-        let res = []
-        for (let i = 0; i < this.dbTags.length; i++) {
-          const dbTag = this.dbTags[i]
-          let specIndex = this.skuTags.findIndex(tag => tag.tagName === dbTag.propName)
-          if (specIndex === -1) {
-            res.push(dbTag)
-          }
+    defalutSku () {
+      return this.$store.state.prod.defalutSku
+    }
+  },
+  watch: {
+    skuTags: {
+      handler (val, oldVal) {
+        if (this.initing) {
+          this.initing = false
+          return
         }
-        return res
-      },
-      skuTags: {
-        get () { return this.$store.state.prod.skuTags },
-        set (val) { this.$store.commit('prod/updateSkuTags', val) }
-      },
-      defalutSku () {
-        return this.$store.state.prod.defalutSku
-      }
-    },
-    watch: {
-      skuTags: {
-        handler (val, oldVal) {
-          if (this.initing) {
-            this.initing = false
-            return
-          }
-          let skuList = []
+        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.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.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}` // 销售属性组合字符串
+                sku.properties = `${tag.tagName}:${tagItem.propValue}` // 销售属性组合字符串
                 skuList.push(sku)
               })
             } else {
@@ -135,157 +198,242 @@
               tag.tagItems.forEach(tagItem => {
                 skuList.forEach(sku => {
                   let newSku = Object.assign({}, sku)
-                  newSku.properties = `${sku.properties};${tag.tagName}:${tagItem}`
+                  newSku.properties = `${sku.properties};${tag.tagName}:${tagItem.propValue}`
                   tempSkuList.push(newSku)
                 })
               })
               skuList = tempSkuList
             }
           })
-          if (!skuList.length) {
-            skuList.push(Object.assign({}, this.defalutSku))
-          }
-          // debugger
-          this.$emit('change', skuList)
-        },
-        deep: true
-      }
-    },
-    methods: {
-      init (skuList) {
-        this.value = skuList
-        if (!skuList || !skuList.length) {
-          this.$emit('change', [Object.assign({}, this.defalutSku)])
-          return
         }
-        this.initing = true
-        let skuTags = []
-        for (let i = 0; i < skuList.length; i++) {
-          const sku = skuList[i]
-          if (!sku.properties) break
-          let propertiesArray = sku.properties.split(';')
-          for (let j in propertiesArray) {
-            let cnProperties = propertiesArray[j].split(':')
-            if (!skuTags[j]) {
-              skuTags[j] = {
-                tagName: cnProperties[0],
-                tagItems: []
-              }
-              this.tagItemInputs.push({visible: false, value: ''})
-            }
-            let tagItemNameIndex = skuTags[j].tagItems.findIndex((tagItemName) => tagItemName === cnProperties[1])
-            if (tagItemNameIndex === -1) {
-              skuTags[j].tagItems.push(cnProperties[1])
-            }
-          }
+        if (!skuList.length) {
+          skuList.push(Object.assign({}, this.defalutSku))
         }
-        this.skuTags = skuTags
-      },
-      // 显示规格名、规格值输入框
-      shopTagInput () {
-        this.isShowTagInput = true
+      // debugger
+        this.$emit('change', skuList)
       },
-      // 隐藏规格名、规格值输入框
-      hideTagInput () {
-        this.isShowTagInput = false
-        this.cleanTagInput()
-      },
-      addTag () {
-        let selectValues = this.addTagInput.selectValues
-        if (!this.addTagInput.propName) {
-          this.$message.error('请输入规格名')
-          return
+      deep: true
+    }
+  },
+  methods: {
+    init (skuList) {
+      this.value = skuList
+      if (!skuList || !skuList.length) {
+        this.skuTags = []
+        this.$emit('change', [Object.assign({}, this.defalutSku)])
+        return
+      }
+      this.initing = true
+      let skuTags = []
+      for (let i = 0; i < skuList.length; i++) {
+        const sku = skuList[i]
+        if (!sku.properties) break
+        let propertiesArray = sku.properties.split(';')
+        for (let j in propertiesArray) {
+          let properties = propertiesArray[j].split(':')
+          if (!skuTags[j]) {
+            skuTags[j] = {
+              tagName: properties[0],
+              tagItems: []
+            }
+            this.tagItemInputs.push({ visible: false, value: '' })
+          }
+          let tagItemNameIndex = skuTags[j].tagItems.findIndex((tagItemName) => tagItemName.propValue === properties[1])
+          if (tagItemNameIndex === -1) {
+            // skuTags[j].tagItems.push(properties[1])
+            skuTags[j].tagItems.push({propValue: properties[1]})
+          }
         }
-        if (!selectValues.length) {
-          this.$message.error('请输入规格值')
-          return
+      }
+      this.skuTags = skuTags
+    },
+    // 显示规格名、规格值输入框
+    shopTagInput () {
+      this.isShowTagInput = !this.isShowTagInput
+    },
+    // 隐藏规格名、规格值输入框
+    hideTagInput () {
+      this.isShowTagInput = false
+      this.cleanTagInput()
+    },
+    addTag () {
+      let selectValues = this.addTagInput.selectValues
+      if (!this.addTagInput.propName) {
+        this.$message.error('请输入规格名')
+        return
+      }
+      if (!selectValues.length) {
+        this.$message.error('请输入规格值')
+        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
         }
-        this.isShowTagInput = false
-        let tagItems = []
-        for (let i = 0; i < selectValues.length; i++) {
-          const element = selectValues[i]
+      }
+      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.cleanTagInput()
-      },
-      // 清除规格值输入框内容
-      cleanTagInput () {
-        this.addTagInput = {
-          propName: '',
-          selectValues: []
-        }
-      },
+      }
+      // 向规格中放入规格输入框内的数据
+      this.$store.commit('prod/addSkuTag', {
+        tagName: this.addTagInput.propName,
+        tagItems
+      })
+      this.type = 1
+      this.cleanTagInput()
+    },
+    // 清除规格值输入框内容
+    cleanTagInput () {
+      this.addTagInput = {
+        propName: '',
+        selectValues: []
+      }
+      this.dbTagValues = []
+    },
       // 规格名输入框，选中规格事件
-      handleTagClick () {
+    handleTagClick () {
         // 清空规格值输入框
-        this.dbTagValues = []
-        this.addTagInput.selectValues = []
+      this.dbTagValues = []
+      this.addTagInput.selectValues = []
         // 判断规格名输入的值是否为数据库中已有的值
-        let specsIndex = this.dbTags.findIndex(spec => spec.propName === this.addTagInput.propName)
+      let specsIndex = this.dbTags.findIndex(spec => spec.propName === this.addTagInput.propName)
         // 如果不是，则说明为用户随便输入
-        if (specsIndex === -1) return
+      if (specsIndex === -1) return
         // 如果数据库已有该规格名，则获取根据id获取该规格名称含有的规格值
-        this.$http({
-          url: this.$http.adornUrl(`/prod/spec/listSpecValue/${this.dbTags[specsIndex].propId}`),
-          method: 'get',
-          params: this.$http.adornParams()
-        }).then(({data}) => {
-          this.dbTagValues = data
-        })
-      },
-      // 关闭标签
-      handleTagClose (tagIndex, tagItemIndex) {
-        if (this.skuTags[tagIndex].tagItems.length === 1) {
-          return
-        }
-        this.$store.commit('prod/removeSkuTagItem', {tagIndex, tagItemIndex})
-      },
-      // 标签输入框确定时调用
-      handleInputConfirm (tagIndex) {
-        let tagItem = this.tagItemInputs[tagIndex].value
-        if (tagItem) {
-          this.$store.commit('prod/addSkuTagItem', {tagIndex, tagItem})
-        }
+      this.$http({
+        url: this.$http.adornUrl(`/prod/spec/listSpecValue/${this.dbTags[specsIndex].propId}`),
+        method: 'get',
+        params: this.$http.adornParams()
+      }).then(({data}) => {
+        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) {
+      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) {
+      this.tagItemInputs.push({ visible: false, value: '' })
+      this.tagItemInputs[tagIndex].visible = true
+      this.$nextTick(() => {
+        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 = ''
-      },
-      // 显示标签输入框
-      showTagInput (tagIndex) {
-        this.tagItemInputs.push({visible: false, value: ''})
-        this.tagItemInputs[tagIndex].visible = true
-        this.$nextTick(() => {
-          this.$refs[`saveTagInput${tagIndex}`][0].$refs.input.focus()
-        })
-      },
-      removeTag (tagIndex) {
-        this.$store.commit('prod/removeSkuTag', tagIndex)
+        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;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+}
 
-  .mod-prod-sku-tag{
-    .el-tag + .el-tag {
-      margin-left: 10px;
-    }
-    .button-new-tag {
-      margin-left: 10px;
-      height: 32px;
-      line-height: 30px;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-    .input-new-tag {
-      width: 90px;
-      margin-left: 10px;
-      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>