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