<template>
|
<div>
|
<el-dialog :visible.sync="isShow" :title="title" width="70%" :modal-append-to-body="false"
|
:close-on-click-modal="false">
|
<div class="addAllot-style">
|
<el-form size="mini" :model="tableForm" ref="tableForm">
|
<el-row class="sel-style">
|
<el-col class="formLayout" :span="8">
|
<el-form-item label="调出渠道:" label-width="100px" prop="outChannelName"
|
:rules="formRules.outChannelName">
|
<el-select v-model="tableForm.outChannelName" placeholder="请选择调出渠道" clearable
|
:popper-append-to-body="false" @change="changeDcChannel">
|
<el-option v-for="item in channelData"
|
:disabled="item.id === tableForm.inChannelId" :key="item.id"
|
:label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col class="formLayout" :span="8">
|
<el-form-item label="调入渠道:" label-width="100px" prop="inChannelName"
|
:rules="formRules.inChannelName">
|
<el-select v-model="tableForm.inChannelName" placeholder="请选择调入渠道"
|
@change="changeDrChannel" clearable :popper-append-to-body="false">
|
<el-option v-for="item in channelData"
|
:disabled="item.id === tableForm.outChannelId" :key="item.id"
|
:label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<list-condition-template ref="table" :form="tableForm" :dataKey="'spuNum'"
|
:tableData="tableForm.tableData" :total="total"
|
:isShowPage="false" defaultPadding="0">
|
<template slot="operationSection">
|
<el-button size="mini" type="primary" @click="handleAddCommodity">新增商品</el-button>
|
</template>
|
<template slot="columns">
|
<el-table-column label="商品主编码" prop="spuNum" width="150px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="商品名称" prop="spuName" min-width="180px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="规格型号" prop="spec" width="140px">
|
</el-table-column>
|
<el-table-column label="剩余库存" prop="stock" width="100px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="调拨数量" width="220px">
|
<template scope="scope">
|
<el-form-item :prop="'tableData.'+ scope.$index + '.transferStock'" :rules="[
|
{
|
validator: vailTransferStock,
|
stock: scope.row.stock,
|
},
|
{
|
required: true, message: '请输入调拨数量'
|
},
|
]">
|
<el-input v-model="scope.row.transferStock" placeholder="请输入调拨数量">
|
</el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" :width="`${$store.getters.colSize + 30}px`">
|
<template scope="scope">
|
<wly-btn type="success" @click="handleDeleteItem(scope.$index)">删除</wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<el-row>
|
<el-col :span="16">
|
<el-form-item label="调拨备注:" class="custom-form-style" label-width="80px"
|
prop="remark">
|
<el-input v-model="tableForm.remark" type="textarea"
|
:autosize="{ minRows: 4, maxRows: 6 }" maxlength="200"
|
placeholder="请输入调拨备注" clearable>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="附件：" label-width="80px" prop="attachment">
|
<upload-file :limitNumber='3' :uploadPath="'order'" :customTips="'当前限制选择3个文件'"
|
:accept="'.xls,.xlsx,.doc,.docx,.jpg,.jpeg,.png,.JPG,.JPEG'"
|
@handle-success="handleSuccess" @handle-remove="handleRemove"
|
:fileList="fileList" :isShow="isShow">
|
<template>仅支持.xls,.xlsx,.doc,.docx,.jpg,.jpeg,.png,.JPG,.JPEG的附件</template>
|
</upload-file>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="save" type="primary" :loading="loading">保存
|
</el-button>
|
<el-button size="mini" @click="cancel">取消</el-button>
|
</div>
|
</el-dialog>
|
<choose-products-dialog ref="chooseProducts" :channelId="tableForm.outChannelId"
|
:dialogVisible.sync="chooseProductsDialogVisible" title="选择商品"
|
@hand-selected-row-data="handSelectedRowData"
|
:selectedTable="tableForm.tableData">
|
</choose-products-dialog>
|
</div>
|
</template>
|
|
<script>
|
import uploadFile from '@/components/uploadFile/uploadFile.vue'
|
import chooseProductsDialog from '@/views/inventoryAllocation/components/chooseProductsDialog.vue'
|
import uploadFileApi from '@/api/uploadFile'
|
import InventoryAllocationApi from '@/api/stockManagement/inventoryAllocation'
|
import dictApi from '@/api/dict'
|
export default {
|
name: "addAllotDialog",
|
components: {
|
uploadFile,
|
chooseProductsDialog
|
},
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
isShow: false,
|
tableForm: {
|
tableData: [],
|
remark: null,
|
attachment: null,//附件ID
|
inChannelId: null,//调入渠道
|
inChannelName: null,
|
outChannelId: null,//调出渠道
|
outChannelName: null,
|
},
|
total: 0,
|
formRules: {
|
'transferStock': [
|
{ required: true, message: '请输入调拨数量' },
|
{ pattern: /^\+?[1-9][0-9]*$/, message: '请输入大于0的正整数', trigger: 'change' },
|
],
|
'inChannelName': [
|
{ required: true, message: '请选择调入渠道' },
|
],
|
'outChannelName': [
|
{ required: true, message: '请选择调出渠道' },
|
],
|
},
|
channelData: [],
|
fileList: [],
|
loading: false,
|
chooseProductsDialogVisible: false
|
}
|
},
|
watch: {
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
dialogVisible: function (newShow, oldShow) {
|
this.isShow = newShow
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
isShow: function (newDialogShow, oldDialogShow) {
|
if (!newDialogShow) {
|
this.$refs["tableForm"].resetFields();
|
this.$emit('update:dialogVisible', newDialogShow)
|
this.initData();
|
}
|
}
|
},
|
mounted() {
|
this.getChannelData();
|
},
|
methods: {
|
initData() {
|
Object.keys(this.tableForm).forEach((key) => {
|
if (key != 'tableData') {
|
this.tableForm[key] = null
|
} else {
|
this.tableForm[key] = []
|
}
|
})
|
this.fileList = [];
|
this.total = 0;
|
this.loading = false;
|
},
|
/**
|
* 选中的调出渠道
|
*/
|
changeDcChannel(val) {
|
this.tableForm.outChannelId = val;
|
this.tableForm.tableData = [];
|
},
|
/**
|
* 选中的调入渠道
|
*/
|
changeDrChannel(val) {
|
this.tableForm.inChannelId = val;
|
},
|
/**
|
* 获取渠道数据字典
|
*/
|
async getChannelData() {
|
let _arr = [];
|
const res = await dictApi.getChanneldict()
|
let _data = res.data;
|
if (res.code === '0' && _data && _data.length > 0) {
|
_data.forEach((item) => {
|
_arr.push({
|
id: item.dictCode,
|
name: item.dictName,
|
disabled: false,
|
})
|
})
|
this.channelData = _arr;
|
}
|
},
|
/**
|
* 新增商品
|
*/
|
handleAddCommodity() {
|
if (!this.tableForm.outChannelId) {
|
this.$message({
|
message: '调出渠道为必填项，请选择',
|
type: 'info'
|
})
|
return;
|
}
|
this.chooseProductsDialogVisible = true;
|
},
|
/**
|
* 获取选中的商品
|
*/
|
handSelectedRowData(data) {
|
let newArr = [];
|
if (this.tableForm.tableData.length) {
|
//将原有的数据与新增的数据合并
|
data.forEach((v1) => {
|
let arr = this.tableForm.tableData.map((v2) => v2.spuNum);
|
if (arr.indexOf(v1.spuNum) === -1) {
|
this.tableForm.tableData = [...this.tableForm.tableData, ...[v1]]
|
}
|
})
|
//反选，选中的数据点击取消选中的情况下
|
this.tableForm.tableData.forEach((v1, index) => {
|
let arr = data.map((v2) => v2.spuNum);
|
if (arr.indexOf(v1.spuNum) != -1) {
|
newArr = [...newArr, ...[v1]]
|
}
|
})
|
} else {
|
newArr = data;
|
}
|
this.tableForm.tableData = newArr;
|
},
|
/**
|
* 删除商品
|
*/
|
handleDeleteItem(index) {
|
let _this = this;
|
_this.$confirm('是否删除当前商品？')
|
.then(_ => {
|
_this.tableForm.tableData.splice(index, 1);
|
})
|
.catch(_ => { });
|
},
|
/**
|
* 附件上传成功
|
*/
|
handleSuccess(arr, id) {
|
this.fileList = arr
|
this.tableForm.attachment = id
|
},
|
/**
|
* 删除附件
|
*/
|
handleRemove(file) {
|
uploadFileApi.removeFile({ key: file.id }).then(res => {
|
const index = this.fileList.findIndex(item => item.id === file.id)
|
if (index !== -1) {
|
this.fileList.splice(index, 1)
|
}
|
if (!this.fileList.length) {
|
this.tableForm.attachment = null
|
}
|
})
|
},
|
/**
|
* 保存
|
*/
|
save() {
|
let _this = this;
|
_this.$refs.tableForm.validate((valid) => {
|
if (valid) {
|
if (!_this.tableForm.tableData || _this.tableForm.tableData.length === 0) {
|
_this.$message({
|
message: '请选择调拨商品！',
|
type: 'warning'
|
})
|
return;
|
}
|
_this.sendRequest();
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
/**
|
* 发送请求
|
*/
|
sendRequest() {
|
let arr = [];
|
let { remark, outChannelId, inChannelId, attachment, tableData } = this.tableForm;
|
let params = { remark: remark, inChannel: inChannelId, outChannel: outChannelId, attachment: attachment }
|
if (tableData && tableData.length > 0) {
|
tableData.forEach((item) => {
|
arr.push({
|
spuName: item.spuName,
|
spuNum: item.spuNum,
|
transferStock: item.transferStock,//调拨数量
|
})
|
})
|
}
|
params.spuList = arr;
|
this.loading = true;
|
InventoryAllocationApi.addAllot(params).then((res) => {
|
if (res.code === '200') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.$emit("close")
|
this.isShow = false;
|
this.loading = false;
|
} else {
|
this.loading = false;
|
}
|
}).catch((error) => {
|
this.loading = false;
|
})
|
},
|
cancel() {
|
let _this = this;
|
let isNull = _this.isSubmitData();
|
if (isNull) {
|
_this.$confirm('取消后当前调拨信息将清空，确认要取消吗？')
|
.then(_ => {
|
_this.isShow = false;
|
})
|
.catch(_ => { });
|
} else {
|
_this.isShow = false;
|
}
|
},
|
isSubmitData() {
|
let bool = false
|
for (let i in this.tableForm) {
|
if (i === 'tableData' && this.tableForm[i].length > 0) {
|
bool = true;
|
break;
|
} else {
|
if (this.tableForm[i] && i != 'tableData') {
|
bool = true;
|
break;
|
}
|
}
|
}
|
return bool;
|
},
|
/**
|
*验证调拨库存
|
*/
|
vailTransferStock(rule, value, callback) {
|
const reg = /^\+?[1-9][0-9]*$/;
|
if (!reg.test(value)) {
|
callback(new Error('请输入大于0的正整数'))
|
} else if (value > rule.stock) {
|
callback(new Error('剩余库存不足'))
|
} else {
|
callback()
|
}
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.addAllot-style {
|
.main-b-style {
|
padding: 0 !important;
|
}
|
.commonForm {
|
margin-bottom: 0 !important;
|
}
|
.custom-form-style {
|
margin-top: 20px;
|
}
|
}
|
</style>
|
