wms_client_kate_suzhou/src/layout/goodsIn.vue
2024-07-02 08:17:26 +08:00

386 lines
16 KiB
Vue

<template>
<el-config-provider :locale="zhCn">
<el-container class="content">
<div class="left">
<fieldset class="display-area">
<legend>
入库暂存信息
</legend>
<el-table :data="tempTasks" stripe border class="table-class" max-height="684px"
:header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
<el-table-column prop="vehicleId" label="载具号" fixed="left" min-width="120px" />
<el-table-column prop="goodsId" label="物料编号" fixed="left" min-width="120px" />
<el-table-column prop="goodsNum" label="数量" min-width="120px" />
<el-table-column prop="goodsName" label="物料名称" min-width="120px" />
<el-table-column prop="singleWeight" label="单个物料重量" min-width="120px" />
<el-table-column prop="weight" label="物料总重量" min-width="120px" />
<el-table-column prop="originPoint" label="入库站点" min-width="120px" />
<el-table-column fixed="right" label="操作" width="120px">
<template #default>
<el-button plain type="primary" @click="deleteRowTask(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<br />
</fieldset>
</div>
<div class="right">
<fieldset class="input-area">
<legend>输入入库信息</legend>
<el-form ref="taskInRequestRef" :model="taskInRequestEntity" :label-position="labelPosition"
label-width="100px" style="max-width: 100%" :rules="rules" status-icon>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="载具号" prop="vehicleId">
<el-input v-model="taskInRequestEntity.vehicleId" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="物料编号" prop="goodsId">
<el-input v-model="taskInRequestEntity.goodsId" :disabled="disabledEmpty"
clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="数量" prop="goodsNum">
<el-input-number v-model.number="taskInRequestEntity.goodsNum" clearable
controls-position="right" :min="1" :disabled="disabledEmpty"
@blur="calWeight(taskInRequestEntity)"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="物料名称" prop="goodsName">
<el-input v-model="taskInRequestEntity.goodsName" :disabled="disabledEmpty"
clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="单个物料重量" prop="singleWeight">
<el-input-number v-model.number="taskInRequestEntity.singleWeight" clearable
controls-position="right" :min="0" :precision="3" :disabled="disabledEmpty"
@blur="calWeight(taskInRequestEntity)"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="物料总重量" prop="weight">
<el-input-number v-model.number="taskInRequestEntity.weight" clearable
controls-position="right" :min="0" :precision="3"
:disabled="disabledEmpty"></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="入库站点" prop="originPoint">
<el-select-v2 v-model="taskInRequestEntity.originPoint" placeholder="请选择入库站点"
:options="standOptions"></el-select-v2>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否空托" prop="isEmpty">
<el-select-v2 v-model="taskInRequestEntity.isEmpty" placeholder="请选择入库类型"
:options="stockTypeOptions"
@change="autoCompleteEmptyInfo(taskInRequestEntity)"></el-select-v2>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16" class="btn-area">
<el-col :span="8" :offset="0">
<el-form-item>
<el-button type="primary" round
@click="addTempTasks(taskInRequestRef)">绑定信息</el-button>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<el-button type="success" round
@click="submitGoodsInTask(taskInRequestRef)">下发任务</el-button>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<el-button type="danger" round @click="resetForm(taskInRequestRef)">清空信息</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</fieldset>
</div>
</el-container>
</el-config-provider>
</template>
<script setup>
import { sendGoodsInTask } from '@/api/task'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import store from '@/store'
const taskInRequestRef = ref()
</script>
<script>
export default {
name: 'goodsIn',
data() {
return {
labelPosition: "top",
tempTasks: [],
tempVehicleId: '',
tempOriginPoint: '',
totalWeight: 0,
isEmptyTask: false,
disabledEmpty: false,
taskInRequestEntity: reactive({
vehicleId: '',
originPoint: 'R1',
goodsId: '',
goodsName: '',
singleWeight: 0,
goodsNum: 1,
weight: 0,
isEmpty: '1'
}),
rules: reactive({
vehicleId: [
{ required: true, message: '请输入载具号' }
],
goodsId: [
{ required: true, message: '请输入物料号' }
],
goodsNum: [
{ required: true, message: '请输入数量' },
{ type: 'number', message: '请输入数字' }
]
}),
standOptions: [
{
value: "R1",
label: '入库站台1'
}
],
stockTypeOptions: [
{
value: '0',
label: '空载具入库'
},
{
value: '1',
label: '带料入库'
}
],
}
},
mounted() {
},
methods: {
autoCompleteEmptyInfo(taskInRequestEntity) {// 自动补全空托入库信息
if (taskInRequestEntity.isEmpty == '0') {// 空托入库
taskInRequestEntity.goodsId = 'empty'
taskInRequestEntity.goodsName = '空载具'
taskInRequestEntity.goodsNum = 1
taskInRequestEntity.singleWeight = 0
taskInRequestEntity.weight = 0
this.disabledEmpty = true
} else {
taskInRequestEntity.goodsId = ''
taskInRequestEntity.goodsName = ''
taskInRequestEntity.goodsNum = 1
taskInRequestEntity.singleWeight = 0
taskInRequestEntity.weight = 0
this.disabledEmpty = false
}
},
calWeight(taskInRequestEntity) {
if (taskInRequestEntity.singleWeight != null | undefined) {
taskInRequestEntity.weight = taskInRequestEntity.singleWeight * taskInRequestEntity.goodsNum
}
},
addTempTasks(taskInRequestRef) {// 生成入库任务
if (!taskInRequestRef) return
taskInRequestRef.validate((valid) => {
if (!valid) {
ElMessage({
message: '请输入必须的入库信息!',
type: 'warning',
})
return
}
if (this.isEmptyTask != null | undefined) {
if (this.isEmptyTask) {
ElMessage({
message: '当前载具已绑定空载具入库',
type: 'warning',
})
return
} else {
if (this.taskInRequestEntity.isEmpty == '1' && this.tempTasks.length != 0) {
ElMessage({
message: '当前载具已绑定过任务,不允许再绑定空载具入库',
type: 'warning',
})
}
}
}
if (this.tempOriginPoint != '' && this.tempOriginPoint != this.taskInRequestEntity.originPoint) {
ElMessage({
message: '入库站台不一致!',
type: 'warning',
})
return
}
if (this.tempVehicleId != '' && this.tempVehicleId != this.taskInRequestEntity.vehicleId) {
ElMessage({
message: '载具号不一致',
type: 'warning',
})
return
}
this.tempVehicleId = this.taskInRequestEntity.vehicleId
this.tempOriginPoint = this.taskInRequestEntity.originPoint
this.totalWeight = this.totalWeight + this.taskInRequestEntity.weight
if (this.taskInRequestEntity.isEmpty == '0') {
this.isEmptyTask = true
} else {
this.isEmptyTask = false
}
const tempTask = {
vehicleId: this.taskInRequestEntity.vehicleId,
originPoint: this.taskInRequestEntity.originPoint,
goodsId: this.taskInRequestEntity.goodsId,
goodsName: this.taskInRequestEntity.goodsName,
singleWeight: this.taskInRequestEntity.singleWeight,
goodsNum: this.taskInRequestEntity.goodsNum,
weight: this.taskInRequestEntity.weight
}
this.tempTasks.push(tempTask)
// 清空物料相关信息
if (!this.isEmptyTask) {
this.taskInRequestEntity.goodsId = ''
this.taskInRequestEntity.goodsName = ''
this.taskInRequestEntity.goodsNum = 1
this.taskInRequestEntity.singleWeight = 0
this.taskInRequestEntity.weight = 0
this.taskInRequestEntity.isEmpty = '1'
this.disabledEmpty = false
}
ElMessage({
message: '绑定成功!',
type: 'success',
})
})
},
submitGoodsInTask(formEl) {// 下发入库任务
const inParams = {
vehicleId: this.tempVehicleId,
originPoint: this.tempOriginPoint,
totalWeight: this.totalWeight,
userName: store.getters.getUserName,
goodsList: this.isEmptyTask == false && this.tempTasks.length > 0 ? this.tempTasks : null
}
sendGoodsInTask(inParams).then(res => {
if (res.data.code == 0) {
ElMessage({
message: '创建入库任务成功!',
type: 'success',
})
this.tempTasks = []
this.tempVehicleId = ''
this.tempOriginPoint = ''
this.totalWeight = 0
this.isEmptyTask == false
formEl.resetFields()
this.disabledEmpty = false
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
console.log(err)
ElMessage.error('创建入库任务错误!' + err.message)
})
},
resetForm(formEl) {// 重置表单信息
if (!formEl) return
formEl.resetFields()
},
deleteRowTask(row) {// 删除当前行的入库任务
this.tempTasks.splice(this.tempTasks.indexOf(row), 1)
if (this.tempTasks.length == 0) {
this.tempVehicleId = ''
this.tempOriginPoint = ''
this.totalWeight = 0
this.isEmptyTask = false
}
}
}
}
</script>
<style scoped>
.content {
display: flex;
width: 100%;
}
.el-row .el-form-item {
width: 30% inherit;
justify-content: center;
}
/* .btn-area .el-form-item {
width: 30% inherit;
padding-left: 15px;
} */
.el-row .el-form-item .el-select {
width: 100% !important;
}
.el-row .el-form-item .el-select-v2 {
width: 100% !important;
}
.el-row .el-form-item .el-input-number {
width: 100% !important;
}
.el-row .el-form-item .el-button {
margin: auto;
}
.right {
width: 40%;
padding: 5px;
}
.left {
width: 60%;
padding: 5px;
}
.input-area {
margin: auto;
max-width: inherit;
height: 632px;
border: solid 1px;
border-radius: 10px;
box-shadow: 0px 15px 10px -15px #000;
}
.display-area {
margin: auto;
min-width: inherit;
height: 632px;
border: solid 1px;
border-radius: 10px;
box-shadow: 0px 15px 10px -15px #000;
}
.table-class {
width: 100%;
}
</style>