Skip to content

C
center-shop
提交 379ed892 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

商品编辑规格调整

上级 db17dbef
隐藏空白字符变更
内嵌 并排
正在显示 包含 252 行增加 和 377 行删除
build/webpack.client.conf.js
浏览文件 @ 379ed892
......@@ -82,7 +82,10 @@ if ($GLOBAL.isDev === 'development') {
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
implementation: require('sass'),
sassOptions: {
charset: false
}
}
}
]
......
package-lock.json
浏览文件 @ 379ed892
......@@ -15,7 +15,6 @@
"cross-env": "^7.0.3",
"element-ui": "^2.15.1",
"lodash": "^4.17.21",
"md5": "^2.3.0",
"vue": "^2.6.12",
"vue-loader": "^15.9.7",
"vue-router": "^3.5.1",
......@@ -39,7 +38,6 @@
"clean-webpack-plugin": "^1.0.1",
"copy-webpack-plugin": "^5.1.2",
"css-loader": "^4.3.0",
"dart-sass": "^1.25.0",
"eslint": "^6.8.0",
"eslint-config-standard": "^14.1.1",
"eslint-loader": "^3.0.4",
......@@ -55,6 +53,7 @@
"mini-css-extract-plugin": "^0.9.0",
"postcss-loader": "^3.0.0",
"request": "^2.88.2",
"sass": "^1.34.0",
"sass-loader": "^10.0.3",
"semver": "^1.1.4",
"style-loader": "^2.0.0",
......@@ -2958,14 +2957,6 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true
},
"node_modules/charenc": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
"integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
"engines": {
"node": "*"
}
},
"node_modules/chokidar": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
......@@ -3792,14 +3783,6 @@
"node": ">= 8"
}
},
"node_modules/crypt": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
"integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
"engines": {
"node": "*"
}
},
"node_modules/crypto-browserify": {
"version": "3.12.0",
"resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
......@@ -3959,22 +3942,6 @@
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
"integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
},
"node_modules/dart-sass": {
"version": "1.25.0",
"resolved": "https://registry.npmjs.org/dart-sass/-/dart-sass-1.25.0.tgz",
"integrity": "sha512-syNOAstJXAmvD3RifcDk3fiPMyYE2fY8so6w9gf2/wNlKpG0zyH+oiXubEYVOy1WAWkzOc72pbAxwx+3OU4JJA==",
"deprecated": "This package has been renamed to 'sass'.",
"dev": true,
"dependencies": {
"chokidar": ">=2.0.0 <4.0.0"
},
"bin": {
"dart-sass": "sass.js"
},
"engines": {
"node": ">=8.9.0"
}
},
"node_modules/dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
......@@ -7899,16 +7866,6 @@
"node": ">=0.10.0"
}
},
"node_modules/md5": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
"integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
"dependencies": {
"charenc": "0.0.2",
"crypt": "0.0.2",
"is-buffer": "~1.1.6"
}
},
"node_modules/md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
......@@ -10392,6 +10349,21 @@
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"node_modules/sass": {
"version": "1.34.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.34.0.tgz",
"integrity": "sha512-rHEN0BscqjUYuomUEaqq3BMgsXqQfkcMVR7UhscsAVub0/spUrZGBMxQXFS2kfiDsPLZw5yuU9iJEFNC2x38Qw==",
"dev": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=8.9.0"
}
},
"node_modules/sass-loader": {
"version": "10.2.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.0.tgz",
......@@ -16058,11 +16030,6 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true
},
"charenc": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
"integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
},
"chokidar": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
......@@ -16725,11 +16692,6 @@
"which": "^2.0.1"
}
},
"crypt": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
"integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
},
"crypto-browserify": {
"version": "3.12.0",
"resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
......@@ -16858,15 +16820,6 @@
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
"integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
},
"dart-sass": {
"version": "1.25.0",
"resolved": "https://registry.npmjs.org/dart-sass/-/dart-sass-1.25.0.tgz",
"integrity": "sha512-syNOAstJXAmvD3RifcDk3fiPMyYE2fY8so6w9gf2/wNlKpG0zyH+oiXubEYVOy1WAWkzOc72pbAxwx+3OU4JJA==",
"dev": true,
"requires": {
"chokidar": ">=2.0.0 <4.0.0"
}
},
"dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
......@@ -19906,16 +19859,6 @@
"object-visit": "^1.0.0"
}
},
"md5": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
"integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
"requires": {
"charenc": "0.0.2",
"crypt": "0.0.2",
"is-buffer": "~1.1.6"
}
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
......@@ -21940,6 +21883,15 @@
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"sass": {
"version": "1.34.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.34.0.tgz",
"integrity": "sha512-rHEN0BscqjUYuomUEaqq3BMgsXqQfkcMVR7UhscsAVub0/spUrZGBMxQXFS2kfiDsPLZw5yuU9iJEFNC2x38Qw==",
"dev": true,
"requires": {
"chokidar": ">=3.0.0 <4.0.0"
}
},
"sass-loader": {
"version": "10.2.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.0.tgz",
......
package.json
浏览文件 @ 379ed892
......@@ -42,7 +42,6 @@
"clean-webpack-plugin": "^1.0.1",
"copy-webpack-plugin": "^5.1.2",
"css-loader": "^4.3.0",
"dart-sass": "^1.25.0",
"eslint": "^6.8.0",
"eslint-config-standard": "^14.1.1",
"eslint-loader": "^3.0.4",
......@@ -58,6 +57,7 @@
"mini-css-extract-plugin": "^0.9.0",
"postcss-loader": "^3.0.0",
"request": "^2.88.2",
"sass": "^1.34.0",
"sass-loader": "^10.0.3",
"semver": "^1.1.4",
"style-loader": "^2.0.0",
......
src/components/common/sku.vue
浏览文件 @ 379ed892
......@@ -9,20 +9,9 @@
@remove="groupRemove(index)"
:key="index"
></sku-group>
<div class="sku-group">
<div class="sku">
<template v-if="skuList.length < 3">
<el-button type="small" @click="addGroup">添加规格项目</el-button>
</template>
<template v-else>
<el-popover placement="top-start" trigger="hover" content="最多支持 3 组规格">
<div slot="reference">
<el-button type="small" disabled>添加规格项目</el-button>
</div>
</el-popover>
</template>
</div>
</div>
<el-button type="text" @click="addSku">
<i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;创建新规格
</el-button>
</div>
</template>
......@@ -37,33 +26,33 @@ export default {
},
data() {
return {
skuList: [
skuNameList: [
{
id: '1',
name: '颜色',
values: [
{ id: '1', value: '红' },
{ id: '2', value: '黄' }
spec_id: '1',
spec_name: '颜色',
value: [
{ spec_value_id: '1', spec_value: '红' },
{ spec_value_id: '2', spec_value: '黄' },
{ spec_value_id: '3', spec_value: '蓝' }
]
},
{
id: '2',
name: '大小',
values: [
{ id: '1', value: 'L' },
{ id: '2', value: 'M' }
spec_id: '2',
spec_name: '大小',
value: [
{ spec_value_id: '1', spec_value: 'L' },
{ spec_value_id: '2', spec_value: 'M' }
]
}
],
skuNameList: [
{ spec_id: '1', spec_name: '颜色' },
{ spec_id: '2', spec_name: '大小' }
] // 规格名称列表
}
},
computed: {
shopId() {
return this.$store.state.shopId
},
skuList() {
return this.value
}
},
methods: {
......@@ -74,7 +63,7 @@ export default {
})
},
// 添加规格
addGroup() {
addSku() {
this.skuList.push({ key: '', value: [] })
},
// 删除规格
......@@ -86,7 +75,7 @@ export default {
}
},
beforeMount() {
this.getSkuNameList()
// this.getSkuNameList()
}
}
</script>
......
src/components/common/skuGroup.vue
浏览文件 @ 379ed892
<template>
<div class="sku-group">
<div class="sku">
<div class="sku-label">规格名：</div>
<div class="sku-content">
<el-select v-model="skuItem.id" placeholder="请选择">
<el-option
v-for="item in skuNameList"
:label="item.spec_name"
:value="item.spec_id"
:key="item.spec_id"
></el-option>
<div class="sku-item">
<!-- 规格名 -->
<div class="sku-item-row">
<div class="sku-item-row-left">
<label class="label">规格{{ index + 1 }}</label>
<el-select v-model="skuItem.spec_id" placeholder="规格名" @change="skuNameChange" style="width: 100%">
<template v-for="(item, index) in currentSkuNameList">
<el-option
:label="item.spec_name"
:value="item.spec_id"
:key="index"
v-if="!(item.selected && item.spec_id !== skuItem.spec_id)"
></el-option>
</template>
</el-select>
<!-- <el-tag closable @close="removeGroup">
<el-input
size="small"
:maxlength="4"
v-model="group.key"
class="group-input"
@focus="onInputFocus"
@blur="onSKUNameBlur"
></el-input>
</el-tag> -->
</div>
<div class="sku-item-row-right is-right">
<el-button type="text" @click="removeSku(index)">删除规格</el-button>
</div>
</div>
<div class="sku" v-if="false">
<div class="sku-label">规格值：</div>
<div class="sku-content">
<el-tag
closable
:disable-transitions="true"
v-for="(sku, index) in skuItem.values"
:key="`sku_${index}`"
@close="removeSKU(index)"
<!-- 规格值 -->
<div class="sku-item-row" v-for="(data, index) in skuItem.value" :key="index">
<div class="sku-item-row-left">
<el-select
v-model="data.spec_value_id"
placeholder="规格值"
@change="skuValueChange(data.spec_value_id, index)"
style="width: 100%"
>
<el-input
size="small"
:maxlength="20"
v-model="group.value[index]"
@focus="onInputFocus"
@blur="onSKUValueBlur(index)"
class="sku-input"
></el-input>
</el-tag>
<template v-if="group.key">
<el-input
size="small"
class="input-new-tag"
v-model="inputValue"
@keyup.enter.native="onSKUInputConfirm"
@blur="onSKUInputConfirm"
ref="SKUInput"
v-if="inputVisible"
></el-input>
<el-button type="text" size="small" @click="addSKU" v-else>添加规格值</el-button>
</template>
<template v-for="(item, index) in currentSkuValueList">
<el-option
:label="item.spec_value"
:value="item.spec_value_id"
:key="index"
v-if="!(item.selected && item.spec_value_id !== data.spec_value_id)"
></el-option>
</template>
</el-select>
</div>
<div class="sku-item-row-right">
<div class="tools">
<i class="el-icon-circle-plus-outline" @click="addSkuValue(index)"></i>
<i class="el-icon-delete" @click="removeSkuValue(index)" v-if="skuItem.value.length > 1"></i>
</div>
</div>
</div>
</div>
......@@ -69,177 +58,114 @@ export default {
skuNameList: { type: Array, default: () => [] } // 规格名称列表
},
data() {
return {
inputVisible: false,
inputValue: '',
oldValue: ''
}
return {}
},
computed: {
shopId() {
return this.$store.state.shopId
},
group() {
return this.skuGroup
}
},
methods: {
getSkuValueList(item) {
getSkuValueList({ shop_id: this.shopId, spec_id: item.spec_id }).then(res => {
item.values = [
{
spec_id: '6800681665740931072',
shop_id: '6800681447305773056',
spec_value_id: '6800682881141178368',
spec_value: '2',
status: 0,
create_time: '2021-05-19 03:25:49',
update_time: '2021-05-19 03:25:49'
},
{
spec_id: '6800681665740931072',
shop_id: '6800681447305773056',
spec_value_id: '6800682881388642304',
spec_value: '20',
status: 0,
create_time: '2021-05-19 03:25:49',
update_time: '2021-05-19 03:25:49'
},
{
spec_id: '6800681665740931072',
shop_id: '6800681447305773056',
spec_value_id: '6800682881594163200',
spec_value: '222',
status: 0,
create_time: '2021-05-19 03:25:49',
update_time: '2021-05-19 03:25:49'
}
]
// 规格名数据处理后的列表
currentSkuNameList() {
return this.skuNameList.map(item => {
item.selected = !!this.skuList.find(value => value.spec_id === item.spec_id)
return item
})
},
// 删除规格
removeGroup() {
this.$emit('remove', this.group)
},
// 添加sku
addSKU(index) {
this.showInput(index)
},
// 删除sku
removeSKU(index) {
this.group.value.splice(index, 1)
// 规格值列表
skuValueList() {
const found = this.skuNameList.find(item => item.spec_id === this.skuItem.spec_id)
return found ? found.value || [] : []
},
// 添加规格value
onSKUInputConfirm() {
const inputValue = this.inputValue
if (!inputValue.trim()) {
this.hideInput()
return false
}
if (this.group.value.includes(inputValue)) {
this.$message({
message: '已经添加了相同的规格值',
type: 'error'
})
} else {
this.group.value.push(inputValue)
}
this.hideInput()
},
// 显示input
showInput(index) {
this.inputVisible = true
this.$nextTick(() => {
this.$refs.SKUInput.focus()
// 规格值数据处理后的列表
currentSkuValueList() {
return this.skuValueList.map(item => {
item.selected = !!this.skuItem.value.find(data => data.spec_value_id === item.spec_value_id)
return item
})
}
},
methods: {
// 规格名改变
skuNameChange(id) {
const found = this.skuNameList.find(item => item.spec_id === id)
// const value = { spec_id: id, spec_name: found.spec_name, value: [] }
this.skuItem.spec_name = found.spec_name
this.skuItem.value = [{}]
},
// 隐藏input
hideInput() {
this.inputVisible = false
this.inputValue = ''
// 规格值改变
skuValueChange(id, index) {
const found = this.skuValueList.find(item => item.spec_value_id === id)
this.skuItem.value[index].spec_value = found.spec_value
},
// 设置oldValue
onInputFocus(e) {
this.oldValue = e.target.value
removeSku(index) {
this.skuList.splice(index, 1)
},
// sku input 失去焦点
onSKUValueBlur(index) {
// 过滤掉当前修改的sku list
const filterList = this.group.value.filter((item, i) => i !== index)
// 从过滤掉的sku list 里查找是否有重复的数据
if (filterList.includes(this.group.value[index])) {
this.$message({
message: '已经添加了相同的规格值',
type: 'error'
})
this.group.value.splice(index, 1, this.oldValue)
}
// 清空的话还原值
if (!this.group.value[index].trim()) {
this.group.value.splice(index, 1, this.oldValue)
}
// 添加
addSkuValue(index) {
this.skuItem.value.splice(index + 1, 0, {})
},
onSKUNameBlur() {
// 过滤掉当前修改的group
const filterList = this.groupList.filter((item, i) => i !== this.index)
// 从过滤掉的group 里查找是否有重复的数据
const found = filterList.find(item => item.key === this.group.key)
if (found && found.key) {
this.$message({ type: 'error', message: '已经添加了相同的规格名' })
this.group.key = this.oldValue
}
// 清空的话还原值
if (!this.group.key.trim()) {
this.group.key = this.oldValue
}
// 删除
removeSkuValue(index) {
this.skuItem.value.splice(index, 1)
},
getSkuValueList(item) {
getSkuValueList({ shop_id: this.shopId, spec_id: item.spec_id }).then(res => {})
}
}
}
</script>
<style>
.sku {
display: flex;
}
.sku-label {
width: 70px;
text-align: right;
}
.sku-content {
flex: 1;
padding-left: 5px;
<style lang="scss" scoped>
.sku-item {
background-color: #f9f9f9;
border-radius: 8px;
padding: 24px;
margin-bottom: 24px;
}
.sku-group .input-new-tag {
width: 150px;
.sku-item-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.sku-group .button-new-tag {
width: 150px;
.sku-item-row + .sku-item-row {
margin-top: 10px;
}
.sku-group .el-tag {
.sku-item-row-left {
position: relative;
margin-right: 10px;
border: none;
background: transparent;
padding: 0;
}
.sku-group .el-tag .el-icon-close {
display: none;
position: absolute;
top: -4px;
right: -4px;
background-color: #409eff;
color: #fff;
}
.sku-group .el-tag:hover .el-icon-close {
display: block;
}
.sku-group .el-tag .el-input__inner {
padding: 0 10px;
flex: 1;
padding-left: 60px;
.label {
position: absolute;
left: 0;
top: 50%;
font-size: 16px;
transform: translateY(-50%);
}
}
.sku-group .group-input {
width: 100px;
.sku-item-row-right {
flex: 1;
margin-left: 20px;
.tools {
float: left;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 4px;
i {
margin: 5px;
padding: 5px;
font-size: 20px;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: rgba(0, 0, 0, 0.03);
}
}
}
}
.sku-group .sku-input {
width: 150px;
.is-right {
text-align: right;
}
</style>
src/components/common/skuView.vue
浏览文件 @ 379ed892
......@@ -11,14 +11,15 @@
</thead>
<tbody v-if="skuList && skuList.length">
<tr v-for="(tr, trIndex) in tableBody" :key="`tbody_${trIndex}`">
<td
v-for="(td, tdIndex) in tr.items"
:key="`tbody_td_${tdIndex}`"
:rowspan="td.rowspan"
v-if="td.rowspan === 1 || (trIndex === 0 ? true : trIndex % td.rowspan === 0)"
>
<div class="cell">{{ td.name }}</div>
</td>
<template v-for="(td, tdIndex) in tr.items">
<td
:key="`tbody_td_${tdIndex}`"
:rowspan="td.rowspan"
v-if="td.rowspan === 1 || (trIndex === 0 ? true : trIndex % td.rowspan === 0)"
>
<div class="cell">{{ td.spec_value }}</div>
</td>
</template>
<td v-for="(td, tdIndex) in header" :key="`tbody_custome_td_${tdIndex}`">
<template v-if="td.formType === 'input'">
<!-- input -->
......@@ -30,15 +31,6 @@
v-if="tr.stock"
></el-input>
</template>
<template v-if="td.formType === 'date'">
<!-- 日期组件 -->
<DateTimePicker
size="small"
v-model="tr.stock[td.key]"
class="sku-input"
v-if="tr.stock"
></DateTimePicker>
</template>
</td>
</tr>
</tbody>
......@@ -47,9 +39,9 @@
<div class="sku-tools" v-if="skuList && skuList.length">
<span>批量设置：</span>
<div class="batch-buttons" v-if="!showBatchInput">
<el-button type="text" @click="batchUpdate('sellPrice')">价格</el-button>
<el-button type="text" @click="batchUpdate('balanceCount')">库存</el-button>
<el-button type="text" @click="batchUpdate('originPrice')">成本价</el-button>
<el-button type="text" @click="batchUpdate('price')">价格</el-button>
<el-button type="text" @click="batchUpdate('stock')">库存</el-button>
<el-button type="text" @click="batchUpdate('mark_price')">成本价</el-button>
</div>
<div class="batch-input" v-else>
<el-input type="number" size="small" v-model="batchInputValue" ref="batchInput"></el-input>
......@@ -81,22 +73,18 @@ export default {
data() {
return {
header: [
{ formType: 'input', key: 'sellPrice', value: '价格（元）' },
{ formType: 'input', key: 'balanceCount', value: '库存' },
{ formType: 'input', key: 'originPrice', value: '成本价' }
{ formType: 'input', key: 'price', value: '价格（元）' },
{ formType: 'input', key: 'stock', value: '库存' },
{ formType: 'input', key: 'mark_price', value: '成本价' }
],
showBatchInput: false,
batchKey: '', // 当前批量修改的字段
batchInputValue: '',
defaultStockParams: {
propertiesText: '',
balanceCount: null,
originPrice: null,
sellPrice: null,
startTime: null,
endTime: null,
validStartTime: null,
validEndTime: null
price: null,
prime_price: null,
mark_price: null,
stock: null
}
}
},
......@@ -105,26 +93,31 @@ export default {
handler: function (newValue) {
newValue.forEach((item, index) => {
// 规格
const properties = item.map(sku => sku.name)
const propertiesText = JSON.stringify(properties)
const values = item.reduce(
(result, item) => {
result.ids.push(item.spec_value_id)
result.names.push(item.spec_value)
return result
},
{ ids: [], names: [] }
)
const valueIdsText = values.ids.join(',')
const valueNamesText = values.names.join(',')
// 设置默认数据
const defaultStock = Object.assign({}, this.defaultStockParams, {
propertiesText
})
const defaultStock = Object.assign(
{ spec_id: valueIdsText, spec_name: valueNamesText },
this.defaultStockParams
)
// 查找原始数据
const foundStock = this.stockList.find(item => item.propertiesText === propertiesText)
const foundStock = this.stockList.find(item => item.spec_id === valueIdsText)
const stock = this.stockList[index]
// 重新排列数据
if (!stock || (stock && stock.propertiesText !== propertiesText)) {
if (!stock || (stock && stock.spec_id) !== valueIdsText) {
this.stockList.splice(index, 0, foundStock || defaultStock)
}
})
// console.table(this.stockList)
// console.table(newValue)
// 删除多余数据
this.stockList.splice(newValue.length, this.stockList.length - newValue.length)
// console.table(this.stockList)
// this.stockList.length = newValue.length
},
deep: true,
immediate: true
......@@ -143,8 +136,6 @@ export default {
return skuList
},
skuValueList() {
const stock = Object.assign({}, this.defaultStockParams)
// tr总列数
let trLength = 1
this.skuList.map(item => {
......@@ -155,15 +146,15 @@ export default {
const list = this.skuList.map(item => {
rowspanDivide *= item.value.length
return item.value.map(value => {
return { name: value, stock, rowspan: trLength / rowspanDivide }
return Object.assign({ rowspan: trLength / rowspanDivide }, value)
})
})
// 笛卡尔积
return (list.length && this.cartesianProduct(list)) || list
return list.length ? this.cartesianProduct(list) : list
},
// 表头
tableHeader() {
const header = this.skuList.map(item => ({ value: item.key }))
const header = this.skuList.map(item => ({ value: item.spec_name }))
return [...header, ...this.header]
},
// 表数据
......
src/pages/goods/edit.vue
浏览文件 @ 379ed892
......@@ -157,7 +157,21 @@ export default {
goodStockList: [], // 规格明细
originPrice: '', // 原价
sellPrice: '', // 现价
skuKeyValueList: [], // 商品规格
skuKeyValueList: [
{
spec_id: '1',
spec_name: '颜色',
value: [{ spec_value_id: '1', spec_value: '红' }]
},
{
spec_id: '2',
spec_name: '大小',
value: [
{ spec_value_id: '1', spec_value: 'L' },
{ spec_value_id: '2', spec_value: 'M' }
]
}
], // 商品规格
startTime: null // 售卖开始时间
},
rules: {
......@@ -192,26 +206,26 @@ export default {
} else {
this.disabledInput = false
}
},
// 规格明细
'ruleForm.goodStockList': {
handler(value) {
if (value.length && this.ruleForm.skuKeyValueList && this.ruleForm.skuKeyValueList.length) {
this.disabledInput = true
// 取最小价格
const min = this.$lodash.minBy(value, item => item.sellPrice)
this.ruleForm.sellPrice = (min && min.sellPrice) || 0
// 库存
this.ruleForm.balanceCount = value.reduce((total, item) => {
return total + (parseFloat(item.balanceCount) || 0)
}, 0)
} else {
this.disabledInput = false
}
},
immediate: true,
deep: true
}
// 规格明细
// 'ruleForm.goodStockList': {
// handler(value) {
// if (value.length && this.ruleForm.skuKeyValueList && this.ruleForm.skuKeyValueList.length) {
// this.disabledInput = true
// // 取最小价格
// const min = this.$lodash.minBy(value, item => item.sellPrice)
// this.ruleForm.sellPrice = (min && min.sellPrice) || 0
// // 库存
// this.ruleForm.balanceCount = value.reduce((total, item) => {
// return total + (parseFloat(item.balanceCount) || 0)
// }, 0)
// } else {
// this.disabledInput = false
// }
// },
// immediate: true,
// deep: true
// }
},
methods: {
// 初始化
......
src/pages/setting/goods.vue
浏览文件 @ 379ed892
......@@ -37,7 +37,7 @@
<script>
import PageContainer from '@/components/common/pageContainer'
import { getSkuList } from '@/api/goods'
import { getSkuNameList } from '@/api/goods'
export default {
components: { PageContainer },
data() {
......@@ -58,8 +58,8 @@ export default {
}
},
methods: {
getSkuList() {
getSkuList({ shop_id: this.shopId }).then(res => {
getSkuNameList() {
getSkuNameList({ shop_id: this.shopId }).then(res => {
this.skuList = res.data
})
},
......@@ -74,7 +74,7 @@ export default {
removeSkuValue(item) {}
},
beforeMount() {
this.getSkuList()
this.getSkuNameList()
}
}
</script>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论