<template>
|
<div class="couponProduct">
|
<el-button v-show="form.orderSource" 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 width="100px" label="商品类型" prop="spuType">
|
<template slot-scope="scope">
|
{{getGiftType(scope.row.spuType)}}
|
</template>
|
</el-table-column>
|
<el-table-column label="规格型号" width="160px" prop="prodSpecs">
|
</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,scope.$index)">
|
</el-input-number>
|
</el-form-item>
|
</span>
|
<span v-else></span>
|
</template>
|
</el-table-column>
|
</template>
|
<el-table-column label="可用库存" prop="stock"></el-table-column>
|
<el-table-column label="总数量（瓶）" min-width="160px">
|
<template slot-scope="scope">
|
<el-form-item :prop="tableValidate.ensalequantity(preferentialIndex,scope.$index)"
|
:rules="formRules.ensalequantity">
|
<span v-if="warehouseServiceName === 'JD'">{{scope.row.totalQuantity}}</span>
|
<el-input-number v-else :min="0" @keydown.native="limiInputType"
|
v-model="scope.row.ensalequantity"
|
@change="changeEnsalequantity(scope.row, scope.$index)">
|
</el-input-number>
|
</el-form-item>
|
</template>
|
</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>
|
<inventory-product-selected
|
:show.sync ='selectedDialog.show'
|
:multipleSelected="true"
|
:title="selectedDialog.title"
|
@hand-selected-row-data="handSelectedRowData"
|
:productSelectedParams="productSelectedParams"
|
></inventory-product-selected>
|
</div>
|
</template>
|
<script>
|
import { limiInputType } from '@/utils/limiInputType'
|
import inventoryProductSelected from '@/views/channelInventory/components/inventoryProductSelected.vue'
|
import channelInventoryApi from '@/api/stockManagement/channelInventory'
|
import orderMgtApi from '@/api/orderMgt'
|
|
export default {
|
components: { inventoryProductSelected },
|
props: ['productData', 'formRules', 'preferentialIndex', 'form', 'tableValidate', 'isDisplayGiftType', 'warehouseServiceName'],
|
data() {
|
return {
|
selectedDialog: {
|
show: false,
|
title: '选择商品'
|
},
|
tableData: [],
|
productSelectedParams: {
|
resApi: channelInventoryApi,
|
sortProperties: 'update_time',
|
sortDirection: 'DESC',
|
},
|
// 临时存储商品计量单位/计数列的数据，区别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, index) {
|
row.totalQuantity = this.getQuantityTotal(specificationCode, row);
|
row.ensalequantity = row.totalQuantity
|
this.$parent.form.validateField(`skuInfo.${index}.ensalequantity`)
|
},
|
/**
|
* 获取赠品类型
|
*/
|
getGiftType(val) {
|
switch (val) {
|
case '1002':
|
return '物料'
|
case '1001':
|
return '商品'
|
default:
|
return '-'
|
}
|
},
|
/**
|
* 当赠品数量改变时判断与限制数量的大小
|
*/
|
changeEnsalequantity(row, index) {
|
if (row.ensalequantity) {
|
this.$parent.form.validateField(`skuInfo.${index}.ensalequantity`)
|
}
|
},
|
/**
|
* 限制不能输入数字
|
*/
|
limiInputType(e) {
|
limiInputType(e)
|
},
|
/**
|
* 清空表格数据
|
*/
|
clearTable() {
|
this.tableData = []
|
},
|
/**
|
* 删除表格数据
|
*/
|
deleteItem(row, index) {
|
this.tableData.splice(index, 1)
|
},
|
/**
|
* 打开添加商品弹窗
|
*/
|
addProduct() {
|
this.selectedDialog.show = true
|
this.productSelectedParams.channel = this.form.orderSource
|
},
|
/**
|
* 获取弹出框返回的数据
|
*/
|
handSelectedRowData(rows) {
|
rows.forEach((rowItem) => {
|
if (
|
!this.tableData.find((item) => {
|
return rowItem.spuNum === item.spuNum
|
})
|
) {
|
this.tableData.push({
|
prodMainCode: rowItem.spuNum,
|
spuNum: rowItem.spuNum,
|
prodName: rowItem.spuName,
|
prodSpecs: rowItem.spec,
|
totalQuantity: null,
|
ensalequantity: null,
|
maxbuyquantity: null,
|
skuId: rowItem.defaultSku ? rowItem.skuInfos[0].skuId : null,
|
extparams: JSON.stringify(rowItem.skuInfos),
|
spuUnit: rowItem.spuUnit,
|
shopId: rowItem.shopId,
|
imageUrl: rowItem.imageUrl,
|
giftType: rowItem.giftType,
|
specificationCode: [], // 计量单位/计数
|
oldSpecificationCode: [], // 临时存储上一次选中的数据
|
shipmentsCountList: [], // 发货数量
|
stock: rowItem.stock,
|
});
|
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);
|
row.ensalequantity = row.totalQuantity
|
this.$set(row, 'oldSpecificationCode', event);
|
this.$parent.form.validateField(`skuInfo.${index}.ensalequantity`)
|
},
|
// 规格编码改变时计算赠品总数量
|
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>
|
