<template>
|
<div class="inner-bg-style integralProdStyle">
|
<el-form size="mini" class="integralProdForm" ref="form" :rules="formRules" :model="form" label-width="120px">
|
<p>基础信息</p>
|
<div class="integralProdTopText" v-show="existProdInfo&&!form.id">
|
<span v-show="isProd">实物商品/{{form.spuName}}/{{form.spuNum}}</span>
|
<span v-show="!isProd">优惠券/{{form.spuName}}</span>
|
<el-button type="text" @click="reselect">重新选择</el-button>
|
</div>
|
<hr/>
|
<el-form-item v-show="!existProdInfo" label="商品类型：">
|
<el-select v-model="form.spuType" @change="changeType" placeholder="请选择商品类型">
|
<el-option label="实物商品" value="1" key="1"></el-option>
|
<el-option label="优惠券" value="2" key="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<div v-show="existProdInfo">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="商品类目：" prop="categoryId">
|
<el-select v-model="form.categoryId" @change="changeCategory" class="selectStyle" placeholder="请选择商品类目">
|
<el-option
|
v-for="(item,index) in categoryArr"
|
:key="item.id"
|
:label="item.categoryName"
|
:value="item.id">
|
<span class="categoryLeft">{{ item.categoryName }}</span>
|
<span v-show="index !== 0 && item.categoryDesc !== '1'" class="categoryRight">
|
<el-button @click.stop="deleteCategory(item,index)" type="text">删除</el-button>
|
</span>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col v-if="isProd && isdefaultProd" :span="12">
|
<el-form-item label="商品规格：" prop="spuSpecificationsId">
|
<el-select v-model="form.spuSpecificationsId" @change="getSkuId" class="selectStyle" placeholder="请选择商品规格">
|
<el-option
|
v-for="item in spuSpecificationsArr"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="积分价值：" prop="integralWorth">
|
<el-input-number v-model="form.integralWorth"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="库存限制：" prop="storageRestrict">
|
<el-input-number v-model="form.storageRestrict"></el-input-number>
|
<span class="couponTag" v-show="form.id">
|
<i class="el-icon-warning"></i> 历史销量：{{form.vendibility}}
|
</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<prod-info v-if="isProd" ref="prodCounPonInfo" :form="form" @product-desc-change="updateProductDesc"></prod-info>
|
<coupon-info v-else ref="prodCounPonInfo" :form="form"></coupon-info>
|
<el-form-item>
|
<el-button type="primary"
|
:disabled="btnIsDisabled"
|
:loading="loading"
|
size="mini" @click="submit"
|
>{{form.id ? '修改' : '完成'}}
|
</el-button>
|
<el-button size="mini" v-show="form.id" @click="cancel">返回</el-button>
|
</el-form-item>
|
</div>
|
</el-form>
|
<create-prod :show.sync="showCreateProd" :title="'创建新商品'" :shopId="shopId" @hand-selected="handSelected"></create-prod>
|
<coupon-selected :show.sync ='selectedCouponDialog.show' :title="selectedCouponDialog.title" :multipleSelected="false">
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button type="success" @click="choiceCoupon(scope.row)" size="mini">添加</el-button>
|
</template>
|
</el-table-column>
|
</coupon-selected>
|
<create-category :show.sync="showCreateCategory" :title="'创建新分类'" @hand-content="getCategory"></create-category>
|
</div>
|
</template>
|
|
<script>
|
import integralProdApi from '@/api/member/integralProd'
|
import prodInfo from '@/views/integralProd/components/prodInfo.vue'
|
import couponInfo from '@/views/integralProd/components/couponInfo.vue'
|
import createProd from '@/views/integralProd/components/createProd.vue'
|
import couponSelected from '@/views/integralProd/components/couponSelected.vue'
|
import createCategory from '@/views/integralProd/components/createCategory.vue'
|
import couponApi from '@/api/member/coupon'
|
import { inputNumberValid } from '@/utils/validator'
|
|
export default {
|
components: { prodInfo, couponInfo, createProd, couponSelected, createCategory },
|
data () {
|
const storageValid = (rule, value, callback) => {
|
const reg = /^[0-9]*$/ // 只能输入正整数
|
const storage = this.maxSkuStorage !== null && this.maxSkuStorage !== -1 ? parseInt(this.maxSkuStorage / this.skuReduceStorage) : this.maxSkuStorage
|
if (value && !reg.test(value)) {
|
callback(new Error('库存限制应输入整数'))
|
} else if (this.maxSkuStorage === null) {
|
callback(new Error('主商品已被删除，积分商品无法修改'))
|
} else if (this.form.id && storage !== -1 && value > storage && value >= this.form.vendibility) {
|
callback(new Error(`当前剩余库存数为${storage}，库存不足${value}`))
|
} else if (storage !== -1 && value > storage) {
|
callback(new Error(`当前剩余库存数为${storage}，库存限制应不能大于剩余库存数`))
|
} else if (this.form.id && this.form.vendibility !== 0 && value <= this.form.vendibility) {
|
callback(new Error('库存限制不能小于等于积分商城的历史销量'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
form: {
|
spuType: null,
|
categoryId: null,
|
prodImgs: [],
|
productDesc: null,
|
storageRestrict: 0,
|
integralWorth: null,
|
spuSpecificationsId: null,
|
spuSpecificationsName: null,
|
id: null,
|
vendibility: null // 历史销量
|
},
|
productDesc: null,
|
existProdInfo: false,
|
showCreateProd: false, // 打开创建商品弹窗
|
selectedCouponDialog: {
|
show: false,
|
title: '创建优惠券'
|
},
|
categoryArr: [
|
{ id: '0', categoryName: '创建新类目+' }
|
], // 商品类目
|
showCreateCategory: false,
|
oldCategory: null,
|
shopId: null,
|
isProd: true,
|
maxSkuStorage: null,
|
spuSpecificationsArr: [],
|
prodSkuIds: [], // 存商品的skuId
|
isdefaultProd: true, // 是否默认商品
|
oldSkuId: null,
|
formRules: {
|
categoryId: [{ required: true, message: '请选择商品类目', trigger: 'change' }],
|
spuSpecificationsId: [{ required: true, message: '请选择商品规格', trigger: 'change' }],
|
integralWorth: [
|
{ required: true, message: '积分价值不能为空', trigger: 'change' },
|
{ validator: inputNumberValid, trigger: 'change' }
|
],
|
storageRestrict: [{ validator: storageValid, trigger: 'change' }],
|
prodImgs: [{ type: 'array', required: true, message: '请选择商品类目', trigger: 'change' }],
|
productDesc: [{ required: true, message: '请输入商品描述', trigger: 'change' },
|
{ max: 4194304, message: '商品描述描述最多只能输入 4194304 个字' }
|
]
|
},
|
isChange: false, // 是否变化
|
flag: true, // 详情时 标记是否可以编辑
|
loading: false, // 按钮loading
|
skuReduceStorage: 1, // 商品扣减数
|
vendibility: null, // 历史销量
|
skuShop: null// 获取存库存的数组
|
}
|
},
|
created () {
|
if (this.$route.query.id) {
|
this.getDetails()
|
} else {
|
this.findShopByMerchantId()
|
}
|
},
|
watch: {
|
// form: {
|
// handler: function (newValue, oldValue) {
|
// if (!this.flag && this.form.id) {
|
// this.isChange = false
|
// this.flag = true
|
// } else if (!this.form.id) {
|
// this.isChange = true
|
// } else {
|
// this.isChange = true
|
// }
|
// },
|
// deep: true
|
// },
|
// 当弹窗关闭时清空type值
|
showCreateProd (newValue, oldValue) {
|
if (!newValue) {
|
this.form.spuType = null
|
}
|
},
|
'selectedCouponDialog.show' (newValue, oldValue) {
|
if (!newValue) {
|
this.form.spuType = null
|
}
|
}
|
|
},
|
computed: {
|
// 上传按钮是否禁用
|
btnIsDisabled () {
|
let status = true
|
const row = this.form
|
if (row.categoryId && row.integralWorth && row.prodImgs.length) {
|
if (this.isProd && this.isdefaultProd && row.spuSpecificationsId && this.productDesc) {
|
status = false
|
} else if (this.isProd && !this.isdefaultProd && this.productDesc) {
|
status = false
|
} else if (!this.isProd) {
|
status = false
|
} else {
|
status = true
|
}
|
} else {
|
status = true
|
}
|
return status
|
}
|
},
|
methods: {
|
/**
|
*获取分类列表
|
*/
|
async getCategoryList () {
|
try {
|
this.categoryArr = [
|
{ id: '0', categoryName: '创建新类目+' }
|
]
|
const res = await integralProdApi.getCategoryList({
|
pageNum: 0,
|
pageSize: 0
|
})
|
if (res.code === '0' && res.data) {
|
this.categoryArr = this.categoryArr.concat(res.data.list)
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
*删除商品类目
|
*/
|
async deleteCategory (item, index) {
|
try {
|
const res = await integralProdApi.deleteCategory({
|
id: item.id
|
})
|
if (res.code === '0' && res.data) {
|
this.categoryArr.splice(index, 1)
|
if (item.id === this.oldCategory) {
|
this.form.categoryId = null
|
} else {
|
this.form.categoryId = this.oldCategory
|
}
|
this.$message({
|
message: '删除类目成功',
|
type: 'success'
|
})
|
}
|
} catch (error) {
|
}
|
},
|
|
/**
|
*查询用户所在店铺
|
*/
|
async findShopByMerchantId () {
|
try {
|
const res = await integralProdApi.findShopByMerchantId('WLY')
|
if (res.data) {
|
this.shopId = res.data[0].shopId
|
}
|
} catch (error) {
|
}
|
},
|
// 当选择类目时
|
changeCategory (val) {
|
if (val) {
|
if (val === '0') {
|
this.form.categoryId = null
|
const categoryData = this.categoryArr.find(item => {
|
return item.id === this.oldCategory
|
})
|
this.form.categoryId = categoryData ? categoryData.id : null
|
this.showCreateCategory = true
|
} else {
|
this.oldCategory = val
|
}
|
}
|
},
|
// 获取分类
|
getCategory (value) {
|
this.categoryArr.push(value)
|
this.form.categoryId = value.id
|
this.oldCategory = value.id
|
},
|
// 选择优惠券
|
choiceCoupon (row) {
|
this.selectedCouponDialog.show = false
|
this.existProdInfo = true
|
this.form.shopId = this.shopId
|
this.form.spuId = row.couponInfoId
|
this.form.spuName = row.couponName
|
this.form.integralWorth = null
|
this.form.storageRestrict = null
|
this.form.spuSpecificationsId = null
|
this.form.spuSpecificationsName = null
|
|
this.form.prodImgs = []
|
this.getCategoryList() // 获取分类
|
this.getCouponInfo(row)
|
},
|
async getCouponInfo (row) {
|
const couponInfoId = row.couponInfoId
|
try {
|
const res = await couponApi.detailsInfo({ couponInfoId })
|
if (res.data && res.code === '0') {
|
this.$set(this.form, 'applyType', res.data.applyType)
|
this.$set(this.form, 'npPromotionProds', res.data.npPromotionProds)
|
this.$set(this.form, 'applicableThreshold', res.data.applicableThreshold)
|
this.$set(this.form, 'deductionAmount', res.data.deductionAmount)
|
this.$set(this.form, 'couponTimeType', res.data.couponTimeType)
|
this.$set(this.form, 'effectiveDays', res.data.effectiveDays)
|
this.$set(this.form, 'effectiveStartDate', res.data.effectiveStartDate)
|
this.$set(this.form, 'couponDes', res.data.couponDes)
|
this.$set(this.form, 'fullMinusCondition', res.data.fullMinusCondition)
|
this.$set(this.form, 'effectiveEndDate', res.data.effectiveEndDate)
|
|
this.isProd = false
|
this.maxSkuStorage = res.data.totalAmountIssued !== -1 ? res.data.totalAmountIssued - row.receiveNum : -1
|
}
|
} catch (error) {
|
|
}
|
},
|
/**
|
*当选择完商品后获取信息
|
*/
|
handSelected (resData, row) {
|
this.form.prodImgs = row.prodImgs.map(item => { return { url: item.imgUrl, id: item.imgId } })
|
this.form.productDesc = row.ecProdSpuDetails[0].spuContent
|
this.productDesc = this.form.productDesc
|
this.form.shopId = this.shopId
|
this.form.spuName = row.spuName
|
this.form.spuNum = row.spuNum
|
this.form.spuId = row.spuId
|
this.form.integralWorth = null
|
this.form.storageRestrict = null
|
this.form.spuSpecificationsId = null
|
this.form.spuSpecificationsName = null
|
this.form.categoryId = null
|
this.isProd = true
|
this.maxSkuStorage = resData.ecProdStorage[0].skuStorage
|
if (resData.ecProdSpuPropSkus.length) {
|
this.getPrdSpecifications(resData.ecProdSpuPropSkus)
|
this.isdefaultProd = true
|
} else {
|
this.form.skuId = resData.prodSkuVos[0].skuId
|
this.isdefaultProd = false
|
}
|
this.existProdInfo = true
|
this.getCategoryList() // 获取分类
|
this.prodSkuIds = resData.prodSkuVos // 存单品skuId
|
this.skuShop = resData.skuShops // 获取存库存的数组
|
},
|
/**
|
* 获取商品skuId
|
*/
|
getSkuId (val) {
|
if (val) {
|
this.prodSkuIds.forEach(async item => {
|
const itemSkuCode = item.skuCode.split('&').sort().toString()
|
const valSkuCode = val.split('&').sort().toString()
|
if (itemSkuCode === valSkuCode) {
|
if (this.oldSkuId !== item.skuId) {
|
this.integralProductExist(item.skuId, val)
|
} else {
|
this.getSpuSpecificationsName(this.oldSkuId, val, this.vendibility)
|
}
|
}
|
})
|
} else {
|
this.form.skuId = null
|
}
|
},
|
/**
|
* 获取规格名称
|
*/
|
getSpuSpecificationsName (skuId, val, vendibility) {
|
this.form.skuId = skuId
|
const row = this.spuSpecificationsArr.find(item => {
|
return item.id === val
|
})
|
this.form.spuSpecificationsName = row ? row.name : null
|
this.getSkuReduceStorage(this.skuShop, skuId)
|
this.form.vendibility = vendibility
|
},
|
/**
|
*判断积分商品是否存在
|
*/
|
async integralProductExist (skuId, val) {
|
try {
|
const res = await integralProdApi.integralProductExist({ shopId: this.shopId, skuId, spuId: this.form.spuId })
|
if (res.code === '0') {
|
if (res.data) {
|
this.getSpuSpecificationsName(null, null, 0)// 获取规格名称
|
this.form.spuSpecificationsId = null
|
this.$message({
|
type: 'warning',
|
message: '该积分商品已存在，请重新选择'
|
})
|
} else {
|
this.getSpuSpecificationsName(skuId, val, 0)// 获取规格名称
|
}
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
*获取商品规格
|
*/
|
getPrdSpecifications (propArr) {
|
const columnsIdArray = []
|
const columnsLabelArray = []
|
this.spuSpecificationsArr = []
|
propArr.forEach(item => {
|
columnsLabelArray.push(item.prodPropValue.split(','))
|
let arr = []
|
arr = item.productPropMetaValues.map(itemProp => {
|
return itemProp.propValueId
|
})
|
columnsIdArray.push(arr)
|
})
|
const combinationPropIdArray = this.getCombination(columnsIdArray)
|
const combinationPropLabelArray = this.getCombination(columnsLabelArray)
|
combinationPropIdArray.forEach((item, index) => {
|
this.spuSpecificationsArr.push({
|
id: item.join('&'),
|
name: combinationPropLabelArray[index].join('/')
|
})
|
})
|
},
|
/**
|
* 获取选中值的多种组合形式
|
*/
|
getCombination (array) {
|
let resultArr = []
|
array.forEach((arrItem) => {
|
if (resultArr.length === 0) {
|
const firstItem = []
|
arrItem.forEach(item => {
|
firstItem.push([item])
|
})
|
resultArr = firstItem
|
} else {
|
const emptyArray = []
|
resultArr.forEach((item) => {
|
arrItem.forEach((value) => {
|
emptyArray.push([...item, value])
|
})
|
})
|
resultArr = emptyArray
|
}
|
})
|
return resultArr
|
},
|
// 选择商品类型时
|
changeType (val) {
|
if (val === '1') {
|
this.showCreateProd = true
|
} else if (val === '2') {
|
this.selectedCouponDialog.show = true // 打开选择优惠券弹窗
|
}
|
},
|
// 重新选择
|
reselect () {
|
this.existProdInfo = false
|
},
|
/**
|
* 获取详情
|
*/
|
async getDetails () {
|
try {
|
const res = await integralProdApi.detailsItem({ id: this.$route.query.id })
|
if (res.code === '0' && res.data) {
|
this.getCategoryList() // 获取分类
|
this.existProdInfo = true
|
this.isProd = res.data.spuType === '1'
|
let obj = null
|
const { categoryId, id, integralWorth, productDesc, shopId, skuId, spuId, spuName, spuNum, spuSpecifications, storageRestrict, couponInfoVo, vendibility } = res.data
|
obj = { categoryId, id, integralWorth, productDesc, shopId, skuId, spuId, spuName, spuNum, storageRestrict, ...couponInfoVo, vendibility }
|
obj.prodImgs = []
|
this.form = obj
|
this.vendibility = vendibility // 存一个历史销售量
|
this.productDesc = this.form.productDesc
|
if (spuSpecifications) {
|
const arr = spuSpecifications.split('$')
|
this.form.spuSpecificationsId = arr[0]
|
this.form.spuSpecificationsName = arr[1]
|
}
|
this.flag = false
|
this.form.prodImgs = res.data.imgIdUrls.map(item => {
|
return {
|
url: item.imgUrl,
|
id: item.imgId
|
}
|
})
|
if (res.data.ecProdSkuPropVos && res.data.ecProdSkuPropVos.length) {
|
this.getPrdSpecifications(res.data.ecProdSkuPropVos)
|
this.isdefaultProd = true
|
this.prodSkuIds = res.data.prodSkuVos // 存单品skuId
|
} else {
|
this.isdefaultProd = false
|
}
|
if (this.isProd) {
|
this.maxSkuStorage = res.data.ecProdStorage ? res.data.ecProdStorage.skuStorage : null
|
this.skuShop = res.data.skuShopVos
|
this.getSkuReduceStorage(this.skuShop, skuId)
|
} else {
|
const couponInfoVo = res.data.couponInfoVo
|
const couponInfo = res.data.couponInfo
|
this.maxSkuStorage = couponInfoVo.totalAmountIssued !== -1 ? couponInfoVo.totalAmountIssued - couponInfo.receiveNum : -1
|
}
|
this.oldSkuId = skuId // 获取初始的skuId校验
|
this.oldCategory = categoryId// 获取初始的categoryId校验
|
this.shopId = shopId
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
*获取扣减数
|
*/
|
getSkuReduceStorage (skuShopVos, skuId) {
|
const arr = skuShopVos && skuShopVos.length ? skuShopVos : []
|
const item = arr.find(item => {
|
return item.skuId === skuId
|
})
|
if (item) {
|
this.skuReduceStorage = item.skuReduceStorage
|
}
|
},
|
// 取消
|
cancel () {
|
// if (this.isChange) {
|
// this.$confirm('若点击确定，则您之前编辑的未保存内容都将丢失', '未保存更改', {
|
// confirmButtonText: '确定',
|
// cancelButtonText: '取消',
|
// type: 'warning'
|
// }).then(() => {
|
// this.$router.push({ name: 'integralProdList' })
|
// }).catch(() => {
|
// })
|
// } else {
|
this.$router.push({ name: 'integralProdList' })
|
// }
|
},
|
// 保存
|
submit () {
|
const data = this.handFormData()
|
this.$refs.form.validate().then(res => {
|
this.loading = true
|
if (this.form.id) {
|
this.editInfo(data)
|
} else {
|
this.addInfo(data) // 新增
|
}
|
})
|
},
|
// 处理表单数据
|
handFormData () {
|
const param = JSON.parse(JSON.stringify(this.form))
|
delete param.prodImgs
|
if (this.isProd) {
|
param.productDesc = this.form.productDesc = this.productDesc
|
param.spuSpecifications = this.isdefaultProd ? param.spuSpecificationsId + '$' + param.spuSpecificationsName : null
|
}
|
|
param.groundingState = '2'
|
param.vendibility = !this.form.id ? 0 : param.vendibility
|
param.delStatus = '1'
|
param.spuType = this.isProd ? '1' : '2'
|
param.imgId = this.form.prodImgs.map(item => { return item.id }).join()
|
param.imgUrlDetail = this.form.prodImgs[0].id
|
if (!this.form.storageRestrict) {
|
param.storageRestrict = 0
|
}
|
return param
|
},
|
/**
|
* 增加
|
*/
|
async addInfo (data) {
|
try {
|
const res = await integralProdApi.addInfo(data)
|
if (res.code === '0') {
|
this.loading = false
|
this.$message({
|
message: '添加成功',
|
type: 'success'
|
})
|
this.$router.push({ name: 'integralProdList' })
|
} else {
|
this.loading = false
|
}
|
} catch (error) {
|
this.loading = false
|
}
|
},
|
/**
|
* 编辑
|
*/
|
async editInfo (data) {
|
try {
|
const res = await integralProdApi.editInfo(data)
|
if (res.code === '0') {
|
this.loading = false
|
this.$message({
|
message: '修改成功',
|
type: 'success'
|
})
|
this.$router.push({ name: 'integralProdList' })
|
}
|
} catch (error) {
|
this.loading = false
|
}
|
},
|
updateProductDesc (content) {
|
this.productDesc = content
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.integralProdForm{
|
.selectStyle{
|
width:280px;
|
}
|
.couponTag{
|
color: #f56c6c;
|
}
|
.integralProdTopText{
|
font-size: 14px;
|
.el-button{
|
margin-left: 20px;
|
}
|
}
|
}
|
.categoryLeft{
|
float: left;
|
}
|
.categoryRight{
|
float: right;
|
color: #8492a6;
|
font-size: 13px;
|
margin-left: 20px;
|
}
|
.integralProdStyle{
|
padding:20px;
|
}
|
</style>
|
