Skip to content

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

商品编辑规格调整

上级 db17dbef
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 126 行增加 和 177 行删除
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/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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论