<template>
|
<el-dialog :visible.sync="isShow" :title="title" width="900px" :modal-append-to-body="false"
|
:close-on-click-modal="false">
|
<div class="batchAllocation-style">
|
<el-form size="mini" :model="form" ref="form">
|
<list-condition-template ref="table" :dataKey="'spuNum'" :tableData="form.dataSource"
|
:total="total" :isClickRowExpand="true" :isShowPage="false"
|
:isHiddenRow="true">
|
<template slot="columns">
|
<el-table-column type="expand">
|
<template slot-scope="scope">
|
<el-row>
|
<el-col :span="3" class="cur-c">
|
<span class="required-style">可分配渠道：</span>
|
</el-col>
|
<el-col :span="21">
|
<channel-allot-module :dataSource="form.dataSource" colCount="2"
|
:index="scope.$index">
|
</channel-allot-module>
|
</el-col>
|
</el-row>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品主编码" prop="spuNum" width="180px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="商品名称" prop="spuName" min-width="220px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="规格型号" prop="spec" width="140px">
|
</el-table-column>
|
<el-table-column label="可分配数量" prop="stock" width="150px" show-overflow-tooltip>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
</el-form>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="confirmAllocation('form')" type="primary"
|
:disabled="isConfirmAllocation" :loading="loading">确认分配
|
</el-button>
|
<el-button size="mini" @click="cancel">取消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import dictApi from '@/api/dict'
|
import commodityStocksApi from '@/api/stockManagement/commodityStocks'
|
import filterDialog from '@/components/filterDialog/filterDialog.vue'
|
import channelAllotModule from '@/views/commodityStocks/module/channelAllotModule.vue'
|
const reg = /^[0-9]*$/;//大于等于0的整数
|
export default {
|
name: "batchAllocationDialog",
|
components: { filterDialog, channelAllotModule },
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
isShow: false,
|
total: 0,
|
form: {
|
dataSource: []
|
},
|
channelData: [],//渠道数据源
|
loading: false,
|
}
|
},
|
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 = [];
|
let dataSource = JSON.parse(JSON.stringify(this.form.dataSource));
|
if (dataSource && dataSource.length > 0) {
|
for (var i = 0; i < dataSource.length; i++) {
|
stockChannelDistributes = stockChannelDistributes.concat(dataSource[i].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: {
|
initData() {
|
this.form.dataSource = [];
|
this.total = 0;
|
},
|
/**
|
* 初始化渠道数据字典
|
*/
|
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.stockChannelDistributes = _arr;
|
}
|
},
|
/**
|
* 获取批量分配数据源
|
*/
|
add(data) {
|
data.forEach((v) => {
|
this.$set(v, 'stockChannelDistributes', JSON.parse(JSON.stringify(this.stockChannelDistributes)))
|
})
|
this.form.dataSource = data;
|
},
|
/**
|
* 确认分配
|
*/
|
confirmAllocation(formName) {
|
let _this = this;
|
_this.$refs[formName].validate((valid) => {
|
if (valid) {
|
//验证当前分配数量是否大于主商品可分配数量
|
let bool = false;
|
let isNull = false;//单商品分配渠道是否为NULL
|
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 (totalCount === 0) {
|
isNull = true;
|
break;
|
}
|
}
|
if (isNull) {
|
this.$message({
|
message: '可分配渠道为必填项',
|
type: 'info'
|
})
|
return
|
}
|
if (bool) {
|
this.$message({
|
message: '渠道分配数量总和不得大于可分配数量',
|
type: 'info'
|
})
|
return
|
}
|
_this.handleDistributeStocks();
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
/**
|
* 提交
|
*/
|
async handleDistributeStocks() {
|
let params = [];
|
let _data = JSON.parse(JSON.stringify(this.form.dataSource));
|
_data.forEach((v1) => {
|
let arr = [];
|
v1.stockChannelDistributes.forEach((v2) => {
|
if (v2.stock || v2.stock === 0) {
|
arr.push({
|
stock: v2.stock,
|
channel: v2.channel
|
})
|
}
|
})
|
params.push({
|
spuNum: v1.spuNum,
|
stockChannelDistributes: arr
|
})
|
})
|
this.loading = true;
|
const res = await commodityStocksApi.distributeStocks(params)
|
if (res.code === '200') {
|
this.$message({
|
message: '分配成功',
|
type: 'success'
|
})
|
this.isShow = false;
|
this.loading = false;
|
this.$emit("close")
|
} else {
|
this.loading = false;
|
}
|
},
|
cancel() {
|
let _this = this;
|
if (!_this.isConfirmAllocation) {
|
_this.$confirm('取消后当前商品分配信息清空，确认要取消吗？')
|
.then(_ => {
|
_this.isShow = false;
|
})
|
.catch(_ => { });
|
} else {
|
_this.isShow = false;
|
}
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.batchAllocation-style {
|
.main-b-style {
|
padding: 0;
|
}
|
.required-style:before {
|
content: "*";
|
color: #f08080;
|
margin-right: 4px;
|
}
|
.l-style {
|
bottom: 2px;
|
position: relative;
|
}
|
.cur-c {
|
position: relative;
|
top: 3px;
|
text-align: right;
|
}
|
}
|
</style>
|
