wqy
/
JinTong-Back-Java
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
master
lhd 5 years ago
parent a562473301
commit 1d3332712a
2 changed files with 336 additions and 187 deletions
Show Stats Download Patch File Download Diff File

1
mall4v/src/views/modules/prod/prodInfo.vue
Unescape View File

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

522
mall4v/src/views/modules/prod/sku-tag.vue
Unescape View File

@ -8,11 +8,11 @@
<br/> <br/>
<el-tag <el-tag
v-for="(tagItem, tagItemIndex) in tag.tagItems" v-for="(tagItem, tagItemIndex) in tag.tagItems"
:key="tagItem" :key="tagItem.valueId"
closable closable
:disable-transitions="false" :disable-transitions="false"
@close="handleTagClose(tagIndex, tagItemIndex)"> @close="handleTagClose(tagIndex, tagItemIndex)">
{{tagItem}} {{tagItem.propValue}}
</el-tag> </el-tag>
<el-input <el-input
class="input-new-tag" 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" type="primary" @click="addTag()" v-show="isShowTagInput">确定</el-button>
<el-button size="mini" @click="hideTagInput()" v-show="isShowTagInput">取消</el-button> <el-button size="mini" @click="hideTagInput()" v-show="isShowTagInput">取消</el-button>
</el-form-item> </el-form-item>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
value: [], value: [],
isShowTagInput: false, isShowTagInput: false,
addTagInput: { addTagInput: {
propName: '', propName: '',
selectValues: [] selectValues: []
}, },
tagItemInputs: [], tagItemInputs: [],
// sku的标记 // sku的标记
// tags: [], // tags: [],
// 数据库中的规格 // 数据库中的规格
dbTags: [], dbTags: [],
// 根据选定的规格所查询出来的规格值 // 根据选定的规格所查询出来的规格值
dbTagValues: [], dbTagValues: [],
specs: [], // 使用的规格 specs: [], // 使用的规格
initing: false 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 () { skuTags: {
this.$http({ get () { return this.$store.state.prod.skuTags },
url: this.$http.adornUrl(`/prod/spec/list`), set (val) { this.$store.commit('prod/updateSkuTags', val) }
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
this.dbTags = data
})
}, },
// props: { defalutSku () {
// tags: { // sku的标记 return this.$store.state.prod.defalutSku
// default: [], }
// type: Array },
// } watch: {
// }, skuTags: {
computed: { handler (val, oldVal) {
// 未使用的规格, 通过计算属性计算 if (this.initing) {
unUseTags () { this.initing = false
let res = [] return
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 let skuList = []
}, if (this.type === 4) {
skuTags: { // 删除规格值
get () { return this.$store.state.prod.skuTags }, this.skuList.forEach(sku => {
set (val) { this.$store.commit('prod/updateSkuTags', val) } let propertiesArray = sku.properties.split(';')
}, if (this.tagItemName !== propertiesArray[this.tagNameIndex].split(':')[1]) {
defalutSku () { skuList.push(sku)
return this.$store.state.prod.defalutSku }
} })
}, } else if (this.type === 2) {
watch: { // 添加规格值
skuTags: { var properties = this.tagName + ':' + this.tagItemName
handler (val, oldVal) { // 增加或删除规格
if (this.initing) { let tempSkuList = []
this.initing = false val.forEach(tag => {
return if (skuList.length === 0) {
} if (this.tagName === tag.tagName) {
let skuList = [] 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 = [] let tempSkuList = []
val.forEach(tag => { val.forEach(tag => {
// console.log('tag', tag)
if (skuList.length === 0) { if (skuList.length === 0) {
tag.tagItems.forEach(tagItem => { tag.tagItems.forEach(tagItem => {
let sku = Object.assign({}, this.defalutSku) let sku = Object.assign({}, this.defalutSku)
sku.properties = `${tag.tagName}:${tagItem}` // 销售属性组合字符串 sku.properties = `${tag.tagName}:${tagItem.propValue}` // 销售属性组合字符串
skuList.push(sku) skuList.push(sku)
}) })
} else { } else {
@ -135,157 +198,242 @@
tag.tagItems.forEach(tagItem => { tag.tagItems.forEach(tagItem => {
skuList.forEach(sku => { skuList.forEach(sku => {
let newSku = Object.assign({}, sku) let newSku = Object.assign({}, sku)
newSku.properties = `${sku.properties};${tag.tagName}:${tagItem}` newSku.properties = `${sku.properties};${tag.tagName}:${tagItem.propValue}`
tempSkuList.push(newSku) tempSkuList.push(newSku)
}) })
}) })
skuList = tempSkuList 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 if (!skuList.length) {
let skuTags = [] skuList.push(Object.assign({}, this.defalutSku))
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])
}
}
} }
this.skuTags = skuTags // debugger
}, this.$emit('change', skuList)
// 显示规格名、规格值输入框
shopTagInput () {
this.isShowTagInput = true
}, },
// 隐藏规格名、规格值输入框 deep: true
hideTagInput () { }
this.isShowTagInput = false },
this.cleanTagInput() methods: {
}, init (skuList) {
addTag () { this.value = skuList
let selectValues = this.addTagInput.selectValues if (!skuList || !skuList.length) {
if (!this.addTagInput.propName) { this.skuTags = []
this.$message.error('请输入规格名') this.$emit('change', [Object.assign({}, this.defalutSku)])
return 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('请输入规格值') this.skuTags = skuTags
return },
// 显示规格名、规格值输入框
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 = [] let tagItems = []
for (let i = 0; i < selectValues.length; i++) { for (let i = 0; i < selectValues.length; i++) {
const element = selectValues[i] const element = selectValues[i]
let is = Object.prototype.toString.call(element) === '[object Object]'
if (is) {
tagItems.push(element) 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, this.$store.commit('prod/addSkuTag', {
tagItems tagName: this.addTagInput.propName,
}) tagItems
this.cleanTagInput() })
}, this.type = 1
// 清除规格值输入框内容 this.cleanTagInput()
cleanTagInput () { },
this.addTagInput = { // 清除规格值输入框内容
propName: '', cleanTagInput () {
selectValues: [] this.addTagInput = {
} propName: '',
}, selectValues: []
}
this.dbTagValues = []
},
// 规格名输入框，选中规格事件 // 规格名输入框，选中规格事件
handleTagClick () { handleTagClick () {
// 清空规格值输入框 // 清空规格值输入框
this.dbTagValues = [] this.dbTagValues = []
this.addTagInput.selectValues = [] 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获取该规格名称含有的规格值 // 如果数据库已有该规格名，则获取根据id获取该规格名称含有的规格值
this.$http({ this.$http({
url: this.$http.adornUrl(`/prod/spec/listSpecValue/${this.dbTags[specsIndex].propId}`), url: this.$http.adornUrl(`/prod/spec/listSpecValue/${this.dbTags[specsIndex].propId}`),
method: 'get', method: 'get',
params: this.$http.adornParams() params: this.$http.adornParams()
}).then(({data}) => { }).then(({data}) => {
this.dbTagValues = data this.dbTagValues = data
}) })
}, },
// 关闭标签 // 关闭标签 --删除
handleTagClose (tagIndex, tagItemIndex) { handleTagClose (tagIndex, tagItemIndex) {
if (this.skuTags[tagIndex].tagItems.length === 1) { if (this.skuTags[tagIndex].tagItems.length === 1) {
return return
} }
this.$store.commit('prod/removeSkuTagItem', {tagIndex, tagItemIndex}) this.type = 4
}, this.$store.commit('prod/removeSkuTagItem', { tagIndex, tagItemIndex })
// 标签输入框确定时调用 },
handleInputConfirm (tagIndex) { // 标签输入框确定时调用
let tagItem = this.tagItemInputs[tagIndex].value handleInputConfirm (tagIndex) {
if (tagItem) { if (this.checkTagItem(tagIndex)) {
this.$store.commit('prod/addSkuTagItem', {tagIndex, tagItem}) 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].visible = false
this.tagItemInputs[tagIndex].value = '' this.tagItemInputs[tagIndex].value = ''
}, return true
// 显示标签输入框
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)
} }
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> </script>
<style lang="scss"> <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 { .sku-border{
margin-left: 10px; border: 1px solid #EBEEF5;
} width:70%
.button-new-tag { }
margin-left: 10px; .sku-background{
height: 32px; background-color: #F6f6f6;
line-height: 30px; margin: 12px 12px;
padding-top: 0; .el-button{
padding-bottom: 0; margin-left: 10px;
} span{
.input-new-tag { color:#000 !important;
width: 90px;
margin-left: 10px;
vertical-align: bottom;
} }
} }
.el-form-item__label{
padding:0 24px 0 0
}
}
.sku-tag{
margin: 12px 12px;
}
.tagTree{
margin-left: 18px;
padding-bottom:8px;
}
</style> </style>

Write Preview
Loading…
Cancel
Save