<template>
|
<div class="couponProduct">
|
<el-button type="success" size="mini" @click="addProduct">选择赠品</el-button>
|
<el-button size="mini" @click="clearTable">清空</el-button>
|
<el-table :data="tableData" border>
|
<slot></slot>
|
<el-table-column label="赠品编码" width="150px" prop="prodMainCode"></el-table-column>
|
<el-table-column label="赠品名称" prop="prodName" width="100px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column v-if="isDisplayGiftType" width="100px" label="赠品类型" prop="giftType">
|
<template slot-scope="scope">
|
{{getGiftType(scope.row.giftType)}}
|
</template>
|
</el-table-column>
|
<el-table-column label="赠品规格" width="160px">
|
<template slot-scope="scope">
|
<el-form-item v-if="JSON.parse(scope.row.extparams)[0].skuProps.length"
|
:prop="tableValidate.skuId(preferentialIndex,scope.$index)"
|
:rules="formRules.skuId">
|
<el-select v-model="scope.row.skuId" @change="changeSkuId(scope.row)">
|
<el-option v-for="item in JSON.parse(scope.row.extparams)" :key="item.skuId"
|
:value="item.skuId"
|
:label=" item.skuProps.length ? item.skuProps.map(item => item.propValueName).join('/') : '-'">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<template v-if="warehouseServiceName === 'JD'">
|
<el-table-column label="计量单位/计数" width="130px">
|
<template slot-scope="scope">
|
<el-form-item :prop="tableValidate.specificationCode(preferentialIndex,scope.$index)"
|
:rules="[
|
{
|
validator: specificationCodeVail,
|
row: scope.row,
|
warehouseServiceName:warehouseServiceName
|
}
|
]">
|
<el-select v-model="scope.row.specificationCode" multiple placeholder="请选择"
|
@change="changeSpecificationCodeVal($event,scope.row,scope.$index)">
|
<el-option v-for="item in scope.row.specificationCodeList" :key="item.prodSkuNo"
|
:label="item.unitOfMeasurement + '*'+ item.skuUnit"
|
:value="item.prodSkuNo">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="发货数量" width="180px">
|
<template slot-scope="scope">
|
<span v-if="scope.row.shipmentsCountList.length">
|
<el-form-item v-for="(item,curIndex) in scope.row.shipmentsCountList" :key="curIndex"
|
:prop="tableValidate.shipmentsCount(preferentialIndex,scope.$index,curIndex)"
|
:rules="[
|
{
|
validator: shipmentsCountVail,
|
warehouseServiceName:warehouseServiceName
|
}
|
]">
|
<el-input-number :min="1" v-model="item.shipmentsCount"
|
@change="changeShipmentsCountVal(scope.row.specificationCode,scope.row)">
|
</el-input-number>
|
</el-form-item>
|
</span>
|
<span v-else></span>
|
</template>
|
</el-table-column>
|
</template>
|
<el-table-column label="赠品总数量（瓶）" min-width="160px">
|
<template slot-scope="scope">
|
<template v-if="warehouseServiceName === 'JD'">
|
<span>{{scope.row.totalQuantity}}</span>
|
</template>
|
<template v-else>
|
<el-form-item :prop="tableValidate.ensalequantity(preferentialIndex,scope.$index)"
|
:rules="formRules.ensalequantity">
|
<el-input-number :min="0" @keydown.native="limiInputType"
|
v-model="scope.row.ensalequantity"
|
@change="changeEnsalequantity(scope.row, scope.$index)">
|
</el-input-number>
|
</el-form-item>
|
</template>
|
</template>
|
</el-table-column>
|
<el-table-column label="剩余库存" prop="spuStorage" v-if="isShowSpuStorage"></el-table-column>
|
<slot name="productTableRow"></slot>
|
<el-table-column label="操作" width="100px">
|
<template slot-scope="scope">
|
<el-button type="danger" size="mini" @click="deleteItem(scope.row, scope.$index)">删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<gift-prod-selected :show.sync="selectedDialog.show" :title="selectedDialog.title"
|
@hand-selected-row-data="handSelectedRowData"
|
:isShowSpuStorage="isShowSpuStorage"></gift-prod-selected>
|
</div>
|
</template>
|
<script>
|
import orderMgtApi from '@/api/orderMgt'
|
import giftProdSelected from '@/views/giftMgt/components/giftProdSelected.vue'
|
import { limiInputType } from '@/utils/limiInputType'
|
export default {
|
components: { giftProdSelected },
|
props: ['productData', 'formRules', 'preferentialIndex', 'form', 'tableValidate', 'isDisplayGiftType', 'warehouseServiceName', 'isShowSpuStorage'],
|
data() {
|
return {
|
selectedDialog: {
|
show: false,
|
title: '选择商品'
|
},
|
tableData: [],
|
// 计量单位/计数下拉框数据
|
measuringUnitData: [
|
{
|
code: '1',
|
name: '盒',
|
count: 3
|
},
|
{
|
code: '2',
|
name: '件',
|
count: 6
|
},
|
{
|
code: '3',
|
name: '瓶',
|
count: 1
|
}
|
],
|
// 临时存储商品计量单位/计数列的数据，区别select是选中还是移除
|
newCheckUnitArr: []
|
}
|
},
|
watch: {
|
productData: {
|
immediate: true, // immediate选项可以开启首次赋值监听
|
handler: function(newValue, oldValue) {
|
this.tableData = newValue
|
}
|
},
|
tableData(newValue, oldValue) {
|
this.$emit('update:productData', newValue)
|
}
|
},
|
methods: {
|
/**
|
*验证规格编码
|
*/
|
specificationCodeVail(rule, value, callback) {
|
if (rule.warehouseServiceName === 'JD') {
|
const specificationCodeList = rule.row.specificationCodeList
|
if (value && value.length) {
|
let flag = false
|
for (let i = 0; i < value.length; i++) {
|
const obj = specificationCodeList && specificationCodeList.length ? specificationCodeList.find((item) => item.prodSkuNo === value[i]) : null
|
if (!obj) {
|
flag = true
|
}
|
}
|
// 未找到匹配的规格编码
|
if (flag) {
|
callback(new Error('请选择规格编码'))
|
} else {
|
callback()
|
}
|
} else {
|
callback(new Error('请选择规格编码'))
|
}
|
} else {
|
callback()
|
}
|
},
|
/**
|
*验证发货数量
|
*/
|
shipmentsCountVail(rule, value, callback) {
|
if (rule.warehouseServiceName === 'JD') {
|
if (!value) {
|
callback(new Error('请输入发货数量'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
},
|
// 发货数量改变时计算赠品总数量
|
changeShipmentsCountVal(specificationCode, row) {
|
row.totalQuantity = this.getQuantityTotal(specificationCode, row)
|
},
|
/**
|
* 获取赠品类型
|
*/
|
getGiftType(val) {
|
switch (val) {
|
case 'GIFT':
|
return '非卖品'
|
case 'MATERIAL':
|
return '物料'
|
case 'DEPUTY_PROD':
|
return '商品'
|
case 'TASTING':
|
return '品鉴'
|
default:
|
break
|
}
|
},
|
/**
|
* 当赠品数量改变时判断与限制数量的大小
|
*/
|
changeEnsalequantity(row, index) {
|
if (row.maxbuyquantity) {
|
this.$parent.form.validateField(`preferentialInfo.${this.preferentialIndex}.products.${index}.maxbuyquantity`)
|
}
|
},
|
/**
|
* 选择规格时触发，获取规格名称
|
*/
|
changeSkuId(row) {
|
JSON.parse(row.extparams).forEach(item => {
|
if (item.skuId === row.skuId) {
|
row.prodSpecs = item.skuProps.map(item => item.propValueName).join('/')
|
row.skuReduceStorage = item.skuReduceStorage
|
}
|
})
|
},
|
/**
|
* 限制不能输入数字
|
*/
|
limiInputType(e) {
|
limiInputType(e)
|
},
|
/**
|
* 清空表格数据
|
*/
|
clearTable() {
|
this.tableData = []
|
},
|
/**
|
* 删除表格数据
|
*/
|
deleteItem(row, index) {
|
this.tableData.splice(index, 1)
|
},
|
/**
|
* 打开添加商品弹窗
|
*/
|
addProduct() {
|
this.selectedDialog.show = true
|
},
|
/**
|
* 获取弹出框返回的数据
|
*/
|
handSelectedRowData(rows) {
|
rows.forEach((rowItem) => {
|
if (
|
!this.tableData.find((item) => {
|
return rowItem.spuId === item.prodId
|
})
|
) {
|
this.tableData.push({
|
prodId: rowItem.spuId,
|
prodMainCode: rowItem.spuNum,
|
prodName: rowItem.spuName,
|
spuStorage: rowItem.spuStorage, // 剩余库存
|
prodSpecs: null,
|
totalQuantity: null,
|
ensalequantity: null,
|
maxbuyquantity: null,
|
skuId: rowItem.defaultSku ? rowItem.skuInfos[0].skuId : null,
|
extparams: JSON.stringify(rowItem.skuInfos),
|
spuNum: rowItem.spuNum,
|
skuReduceStorage: null,
|
spuUnit: rowItem.spuUnit,
|
shopId: rowItem.shopId,
|
imageUrl: rowItem.imageUrl,
|
giftType: rowItem.giftType,
|
specificationCode: [], // 计量单位/计数
|
oldSpecificationCode: [], // 临时存储上一次选中的数据
|
shipmentsCountList: [] // 发货数量
|
|
})
|
this.tableData.forEach((item) => {
|
// 规格编码下拉数据集合
|
this.getSpecificationCodeList(item)
|
})
|
}
|
})
|
this.$emit('hand-selected')
|
},
|
/**
|
* 根据商品主编码获取所有的规格编码集合
|
*/
|
getSpecificationCodeList(row) {
|
orderMgtApi.getSpecificationCodeData({ prodNum: row.prodMainCode }).then((res) => {
|
let arr = []
|
if (res.code === '200' && res.data.length) {
|
arr = [...res.data]
|
}
|
this.$set(row, 'specificationCodeList', arr)
|
}).catch(() => {
|
this.$set(row, 'specificationCodeList', [])
|
})
|
},
|
/**
|
* 规格编码选中值改变时触发
|
*/
|
changeSpecificationCodeVal(event, row, index) {
|
// 当前操作项
|
const arr = this.getArrDifference(event, row.oldSpecificationCode)
|
// 选中
|
if (event.length > row.oldSpecificationCode.length) {
|
this.tableData[index].shipmentsCountList.push({
|
skuId: arr[0],
|
shipmentsCount: 1
|
})
|
} else {
|
// 移除
|
const curIndnx = this.getArrayIndex(row.oldSpecificationCode, arr[0])
|
if (curIndnx != -1) {
|
this.tableData[index].shipmentsCountList.splice(curIndnx, 1)
|
}
|
}
|
row.totalQuantity = this.getQuantityTotal(event, row)
|
this.$set(row, 'oldSpecificationCode', event)
|
},
|
// 规格编码改变时计算赠品总数量
|
getQuantityTotal(event, row) {
|
let count = 0
|
if (event && event.length) {
|
for (let i = 0; i < event.length; i++) {
|
const curObj = row.specificationCodeList.find((v2) => v2.prodSkuNo === event[i])
|
if (curObj) {
|
count += curObj.skuUnit * row.shipmentsCountList[i].shipmentsCount
|
}
|
}
|
}
|
return count || null
|
},
|
// 获取指定值在数组中的下标
|
getArrayIndex(arr, val) {
|
for (var i = 0; i < arr.length; i++) {
|
if (arr[i] === val) {
|
return i
|
}
|
}
|
return -1
|
},
|
// 取出两个数组中不同的元素
|
getArrDifference(arr1, arr2) {
|
return arr1.concat(arr2).filter(function(v, i, arr) {
|
return arr.indexOf(v) === arr.lastIndexOf(v)
|
})
|
}
|
}
|
}
|
</script>
|
<style>
|
.couponProduct .el-table {
|
margin-top: 20px;
|
}
|
</style>
|
