|
|
|
|
@ -14,12 +14,8 @@ |
|
|
|
|
placeholder="请输入规格名称" |
|
|
|
|
@change="onChangeSpecGroupIpt" |
|
|
|
|
/> |
|
|
|
|
<a |
|
|
|
|
v-if="!isSpecLocked" |
|
|
|
|
class="group-item-delete" |
|
|
|
|
href="javascript:;" |
|
|
|
|
@click="handleDeleteSpecGroup(index)" |
|
|
|
|
>删除规格组</a |
|
|
|
|
<a v-if="!isSpecLocked" class="group-item-delete" href="javascript:;" @click="handleDeleteSpecGroup(index)" |
|
|
|
|
>删除规格组</a |
|
|
|
|
> |
|
|
|
|
</div> |
|
|
|
|
<div class="spec-value clearfix"> |
|
|
|
|
@ -50,7 +46,7 @@ |
|
|
|
|
class="spec-group-add-btn" |
|
|
|
|
icon="plus" |
|
|
|
|
@click="handleAddSpecGroup" |
|
|
|
|
>添加规格组</a-button |
|
|
|
|
>添加规格组</a-button |
|
|
|
|
> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item v-show="multiSpecData.skuList.length" label="SKU列表" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
|
|
|
|
@ -95,13 +91,26 @@ |
|
|
|
|
bordered |
|
|
|
|
> |
|
|
|
|
<template slot="select_goods" slot-scope="text, item"> |
|
|
|
|
<SelectGoods :multiple="false" :source='source' :channel="channel" @change="handleSelectGoods($event, item)" /> |
|
|
|
|
<SelectGoods |
|
|
|
|
:multiple="false" |
|
|
|
|
:source="source" |
|
|
|
|
:channel="channel" |
|
|
|
|
@change="handleSelectGoods($event, item)" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
<template slot="item" slot-scope="item" v-if="item.goods_id"> |
|
|
|
|
<GoodsItem |
|
|
|
|
:data="{ |
|
|
|
|
image: item.goods_image, |
|
|
|
|
imageAlt: '商品图片', |
|
|
|
|
title: item.goods_name, |
|
|
|
|
}" |
|
|
|
|
:subTitleColor="true" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
<template slot="goods_id" slot-scope="text, item"> |
|
|
|
|
{{ item.goods_id }}{{item.goods_name}} |
|
|
|
|
</template> |
|
|
|
|
<!-- 商品名称 --> |
|
|
|
|
<!-- <template slot="goods_name" slot-scope="text, item"> |
|
|
|
|
{{ item.goods_name }} |
|
|
|
|
</template> --> |
|
|
|
|
<!-- 商品价格 --> |
|
|
|
|
<template slot="goods_price" slot-scope="text, item"> |
|
|
|
|
{{ item.goods_price }} |
|
|
|
|
</template> |
|
|
|
|
@ -124,12 +133,14 @@ |
|
|
|
|
{{ item.goods_sku_no }} |
|
|
|
|
</template> |
|
|
|
|
<!-- 操作 --> |
|
|
|
|
<template slot="action" slot-scope="text, item"> |
|
|
|
|
<router-link |
|
|
|
|
<template slot="action" slot-scope="text, item, index"> |
|
|
|
|
<!-- <router-link |
|
|
|
|
v-if="item.goods_id" |
|
|
|
|
:to="{ path: '/goods/update', query: { goodsId: item.goods_id } }" |
|
|
|
|
>去修改</router-link |
|
|
|
|
> |
|
|
|
|
> --> |
|
|
|
|
<a @click="handleEdit(index, item)" v-if="item.goods_id" style="margin-left: 10px">去修改</a> |
|
|
|
|
<a @click="handleCancel(index)" v-if="item.goods_id" style="margin-left: 10px">取消选择</a> |
|
|
|
|
</template> |
|
|
|
|
</a-table> |
|
|
|
|
</a-form-item> |
|
|
|
|
@ -142,11 +153,12 @@ import MultiSpecModel from '@/common/model/goods/MultiSpec' |
|
|
|
|
import { SelectImage } from '@/components' |
|
|
|
|
import SelectGoods from '@/components/SelectGoods/SelectGoods.vue' |
|
|
|
|
import * as GoodsApi from '@/api/goods' |
|
|
|
|
|
|
|
|
|
import { GoodsItem } from '@/components/Table/table' |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
SelectImage, |
|
|
|
|
SelectGoods |
|
|
|
|
SelectGoods, |
|
|
|
|
GoodsItem |
|
|
|
|
}, |
|
|
|
|
props: { |
|
|
|
|
// 默认的规格列表 |
|
|
|
|
@ -156,10 +168,10 @@ export default { |
|
|
|
|
// 商品规格是否锁定(锁定状态下不允许编辑规格) |
|
|
|
|
isSpecLocked: PropTypes.bool.def(false), |
|
|
|
|
checkList: PropTypes.array.def([]), |
|
|
|
|
channel:PropTypes.any, |
|
|
|
|
channel: PropTypes.any, |
|
|
|
|
source: PropTypes.any.def(0), |
|
|
|
|
}, |
|
|
|
|
data () { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
// 标签布局属性 |
|
|
|
|
labelCol: { span: 3 }, |
|
|
|
|
@ -172,93 +184,114 @@ export default { |
|
|
|
|
// 规格列表 |
|
|
|
|
specList: [], |
|
|
|
|
// SKU列表 |
|
|
|
|
skuList: [] |
|
|
|
|
skuList: [], |
|
|
|
|
}, |
|
|
|
|
visible: false |
|
|
|
|
visible: false, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
defaultSpecList (val) { |
|
|
|
|
defaultSpecList(val) { |
|
|
|
|
if (val.length && this.MultiSpecModel.isEmpty()) { |
|
|
|
|
this.getData() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
// 初始化数据 |
|
|
|
|
created () { |
|
|
|
|
created() { |
|
|
|
|
// 获取规格及SKU信息 |
|
|
|
|
this.getData() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
handleEdit(item) { |
|
|
|
|
const routeData = this.$router.resolve({ |
|
|
|
|
path: '/goods/update', |
|
|
|
|
query: { |
|
|
|
|
goodsId: item.goods_id, |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
window.open(routeData.href, '_blank') |
|
|
|
|
}, |
|
|
|
|
handleCancel(index) { |
|
|
|
|
this.multiSpecData.skuList[index].cost_price = '' |
|
|
|
|
this.multiSpecData.skuList[index].goods_id = '' |
|
|
|
|
this.multiSpecData.skuList[index].goods_image = '' |
|
|
|
|
this.multiSpecData.skuList[index].goods_name = '' |
|
|
|
|
this.multiSpecData.skuList[index].goods_price = '' |
|
|
|
|
this.multiSpecData.skuList[index].goods_price_min = '' |
|
|
|
|
this.multiSpecData.skuList[index].goods_sku_no = '' |
|
|
|
|
this.multiSpecData.skuList[index].goods_weight = '' |
|
|
|
|
this.multiSpecData.skuList[index].line_price = '' |
|
|
|
|
this.multiSpecData.skuList[index].stock_num = '' |
|
|
|
|
}, |
|
|
|
|
// 获取规格及SKU信息(展示) |
|
|
|
|
getData () { |
|
|
|
|
getData() { |
|
|
|
|
const { defaultSpecList, defaultSkuList } = this |
|
|
|
|
this.multiSpecData = this.MultiSpecModel.getData(defaultSpecList, defaultSkuList) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 获取规格及SKU信息(表单提交) |
|
|
|
|
getFromSpecData () { |
|
|
|
|
getFromSpecData() { |
|
|
|
|
return this.MultiSpecModel.getFromSpecData() |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 添加规格组 |
|
|
|
|
handleAddSpecGroup () { |
|
|
|
|
handleAddSpecGroup() { |
|
|
|
|
if (this.checkSkuMaxNum()) { |
|
|
|
|
this.MultiSpecModel.handleAddSpecGroup() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 删除规格组 |
|
|
|
|
handleDeleteSpecGroup (groupIndex) { |
|
|
|
|
handleDeleteSpecGroup(groupIndex) { |
|
|
|
|
const app = this |
|
|
|
|
const modal = this.$confirm({ |
|
|
|
|
title: '您确定要删除该规格组吗?', |
|
|
|
|
content: '删除后不可恢复', |
|
|
|
|
onOk () { |
|
|
|
|
onOk() { |
|
|
|
|
// 删除元素 |
|
|
|
|
app.MultiSpecModel.handleDeleteSpecGroup(groupIndex) |
|
|
|
|
// 关闭对话框 |
|
|
|
|
modal.destroy() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 新增规格值 |
|
|
|
|
handleAddSpecValue (groupIndex) { |
|
|
|
|
handleAddSpecValue(groupIndex) { |
|
|
|
|
if (this.checkSkuMaxNum()) { |
|
|
|
|
this.MultiSpecModel.handleAddSpecValue(groupIndex) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 删除规格值 |
|
|
|
|
handleDeleteSpecValue (groupIndex, valueIndex) { |
|
|
|
|
handleDeleteSpecValue(groupIndex, valueIndex) { |
|
|
|
|
const app = this |
|
|
|
|
const modal = this.$confirm({ |
|
|
|
|
title: '您确定要删除该规格值吗?', |
|
|
|
|
content: '删除后不可恢复', |
|
|
|
|
onOk () { |
|
|
|
|
onOk() { |
|
|
|
|
// 删除元素 |
|
|
|
|
app.MultiSpecModel.handleDeleteSpecValue(groupIndex, valueIndex) |
|
|
|
|
// 关闭对话框 |
|
|
|
|
modal.destroy() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 规格组输入框change事件 |
|
|
|
|
onChangeSpecGroupIpt () { |
|
|
|
|
onChangeSpecGroupIpt() { |
|
|
|
|
// 更新skuList |
|
|
|
|
this.MultiSpecModel.onUpdate(true) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 规格值输入框change事件 |
|
|
|
|
onChangeSpecValueIpt (event, itm) { |
|
|
|
|
onChangeSpecValueIpt(event, itm) { |
|
|
|
|
// 更新skuList |
|
|
|
|
this.MultiSpecModel.onUpdate(true) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 验证最大sku数量 |
|
|
|
|
checkSkuMaxNum () { |
|
|
|
|
checkSkuMaxNum() { |
|
|
|
|
const skuList = this.multiSpecData.skuList |
|
|
|
|
if (skuList.length >= 50) { |
|
|
|
|
this.$message.error(`生成的sku列表数量不能大于50个，当前数量：${skuList.length}个`, 2.5) |
|
|
|
|
@ -268,31 +301,31 @@ export default { |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 批量设置sku事件 |
|
|
|
|
handleSkuBatch () { |
|
|
|
|
handleSkuBatch() { |
|
|
|
|
this.MultiSpecModel.handleSkuBatch() |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 验证多规格表单 |
|
|
|
|
verifyForm () { |
|
|
|
|
verifyForm() { |
|
|
|
|
if (!this.MultiSpecModel.verifyForm()) { |
|
|
|
|
this.$message.error(this.MultiSpecModel.getError(), 2) |
|
|
|
|
return false |
|
|
|
|
} |
|
|
|
|
return true |
|
|
|
|
}, |
|
|
|
|
showModal () { |
|
|
|
|
showModal() { |
|
|
|
|
this.visible = true |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
async handleSelectGoods (goodsId, item) { |
|
|
|
|
async handleSelectGoods(goodsId, item) { |
|
|
|
|
const skuList = this.multiSpecData.skuList |
|
|
|
|
const skuItem = skuList.find(sku => sku.goods_id === goodsId) |
|
|
|
|
const skuItem = skuList.find((sku) => sku.goods_id === goodsId) |
|
|
|
|
if (skuItem) { |
|
|
|
|
this.$message.error('一个商品只能选择一次', 2) |
|
|
|
|
return false |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.getGoodsDetail(goodsId).then(res => { |
|
|
|
|
this.getGoodsDetail(goodsId).then((res) => { |
|
|
|
|
const queryGoodsId = this.$route.query.goodsId |
|
|
|
|
if (res.spec_type === 20 && queryGoodsId !== goodsId) { |
|
|
|
|
this.$message.error('您选择的商品是多规格商品', 2) |
|
|
|
|
@ -300,27 +333,30 @@ export default { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const sku = res.skuList[0] |
|
|
|
|
console.log(res) |
|
|
|
|
item.goods_price = sku.goods_price |
|
|
|
|
item.cost_price = sku.cost_price |
|
|
|
|
item.stock_num = sku.stock_num |
|
|
|
|
item.goods_weight = sku.goods_weight |
|
|
|
|
item.goods_sku_no = sku.goods_sku_no |
|
|
|
|
// item.goods_name = res.goods_name |
|
|
|
|
item.goods_name = res.goods_name |
|
|
|
|
item.goods_id = res.goods_id |
|
|
|
|
item.goods_image = res.goods_image |
|
|
|
|
item.goods_price_min = res.goods_price_min |
|
|
|
|
}) |
|
|
|
|
console.log(item) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 获取商品详情 |
|
|
|
|
getGoodsDetail (goodsId = null) { |
|
|
|
|
getGoodsDetail(goodsId = null) { |
|
|
|
|
if (!goodsId) return false |
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
GoodsApi.detail({ goodsId }) |
|
|
|
|
.then(result => { |
|
|
|
|
resolve(result.data.goodsInfo) |
|
|
|
|
}) |
|
|
|
|
GoodsApi.detail({ goodsId }).then((result) => { |
|
|
|
|
resolve(result.data.goodsInfo) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
<style lang="less" scoped> |
|
|
|
|
|
fanfan
3 months ago