<template>
|
<el-dialog :visible.sync="isShow" :title="title" width="680px" :modal-append-to-body="false"
|
:close-on-click-modal="false">
|
<div class="singleCommodity-top-style">
|
<el-row>
|
<el-col :span="5" style="text-align:right;">
|
<span>可分配数量：</span>
|
</el-col>
|
<el-col :span="19">
|
<span class="count-s">{{form.dataSource[0].stock}}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="5" style="text-align:right;">
|
<span class="required-style">可选渠道：</span>
|
</el-col>
|
<el-col :span="16">
|
<el-form size="mini" :model="form" label-width="140px" ref="form" class="l-style">
|
<channel-allot-module :dataSource="form.dataSource" placeholder="请输入">
|
</channel-allot-module>
|
</el-form>
|
</el-col>
|
</el-row>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="confirmAllocation('form')" type="primary"
|
:disabled="isConfirmAllocation">
|
确认分配</el-button>
|
<el-button size="mini" @click="isShow = false">取消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import dictApi from '@/api/dict'
|
import commodityStocksApi from '@/api/stockManagement/commodityStocks'
|
import channelAllotModule from '@/views/commodityStocks/module/channelAllotModule.vue'
|
//单商品分配
|
const reg = /^[0-9]*$/;
|
export default {
|
name: "singleCommodityDialog",
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: ''
|
}
|
},
|
components: {
|
channelAllotModule
|
},
|
data() {
|
return {
|
isShow: false,
|
row: [],
|
distributeStock: 0,//可分配数量
|
form: {
|
dataSource: [{ stockChannelDistributes: [], stock: 0, }]
|
}
|
}
|
},
|
watch: {
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
dialogVisible: function (newShow, oldShow) {
|
this.isShow = newShow
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
isShow: function (newDialogShow, oldDialogShow) {
|
this.$emit('update:dialogVisible', newDialogShow)
|
if (!newDialogShow) {
|
this.initData();
|
}
|
}
|
},
|
computed: {
|
/**
|
* 若可选渠道均未分配任何数值，【确认分配】按钮不可点击
|
*/
|
isConfirmAllocation: function () {
|
let bool = true;
|
let stockChannelDistributes = this.form.dataSource[0].stockChannelDistributes;
|
for (let key in stockChannelDistributes) {
|
let val = stockChannelDistributes[key].stock;
|
if (val && reg.test(val) && val != 0) {
|
bool = false;
|
break;
|
}
|
}
|
return bool;
|
}
|
},
|
mounted() {
|
this.initChannelData();
|
},
|
methods: {
|
/**
|
* 初始化渠道数据字典
|
*/
|
async initChannelData() {
|
const res = await dictApi.getChanneldict()
|
let _data = res.data;
|
if (res.code === '0' && _data && _data.length > 0) {
|
let _arr = [];
|
_data.forEach((item) => {
|
_arr.push({
|
channel: item.dictCode,
|
channelName: item.dictName,
|
stock: null,
|
})
|
})
|
this.form.dataSource[0].stockChannelDistributes = JSON.parse(JSON.stringify(_arr));
|
}
|
},
|
/**
|
* 获取当前操作项数据
|
*/
|
add(row) {
|
this.form.dataSource[0].stock = row.stock;//可分配数量
|
this.row = row;
|
},
|
/**
|
*确认分配
|
*/
|
confirmAllocation(formName) {
|
let _this = this;
|
_this.$refs[formName].validate((valid) => {
|
if (valid) {
|
//验证当前分配数量是否大于主商品可分配数量
|
let bool = false;
|
let _data = this.form.dataSource;
|
for (var i = 0; i < _data.length; i++) {
|
let totalCount = 0;
|
_data[i].stockChannelDistributes.forEach((item) => {
|
if (item.stock) {
|
totalCount += Number(item.stock);
|
}
|
})
|
if (totalCount > _data[i].stock) {
|
bool = true;
|
break;
|
}
|
}
|
if (bool) {
|
this.$message({
|
message: '渠道分配数量总和不得大于可分配数量',
|
type: 'info'
|
})
|
return
|
}
|
_this.handleDistributeStocks();
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
/**
|
* 提交
|
*/
|
async handleDistributeStocks() {
|
let { spuNum } = this.row;
|
let arr = this.form.dataSource[0].stockChannelDistributes;
|
let params = [
|
{
|
spuNum: spuNum,
|
stockChannelDistributes: []
|
}
|
]
|
arr.forEach((item) => {
|
if (item.stock || item.stock === 0) {
|
params[0].stockChannelDistributes.push({
|
stock: item.stock,
|
channel: item.channel
|
})
|
}
|
})
|
const res = await commodityStocksApi.distributeStocks(params)
|
if (res.code === '200') {
|
this.$message({
|
message: '分配成功',
|
type: 'success'
|
})
|
this.isShow = false;
|
this.$emit("close")
|
}
|
},
|
/**
|
* 初始化表单数据
|
*/
|
initData() {
|
let stockChannelDistributes = this.form.dataSource[0].stockChannelDistributes;
|
for (const i in stockChannelDistributes) {
|
stockChannelDistributes[i].stock = null
|
}
|
this.distributeStock = 0;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.singleCommodity-top-style {
|
> div:not(:last-child) {
|
margin-bottom: 15px;
|
}
|
.count-s {
|
margin-left: 3px;
|
top: 3px;
|
}
|
.l-style {
|
bottom: 2px;
|
}
|
.count-s,
|
.l-style {
|
position: relative;
|
}
|
}
|
.required-style:before {
|
content: "*";
|
color: #f08080;
|
margin-right: 4px;
|
}
|
</style>
|
