202501-Wms-Kate-Wuxi/dev_wms_client/src/layout/goodsOut.vue
liang 1cef5ede55 1. 修复请求日志功能中的bug
2. 增加紧急出库缺料输入料号工单后自动补全需求数量的功能
3. 增加缺料自动关闭的功能。
2025-06-03 17:00:09 +08:00

451 lines
14 KiB
Vue

<template>
<el-config-provider :locale="zhCn">
<el-container class="content">
<div class="work-area">
<fieldset class="search-area">
<el-form ref="outTaskRef" :model="outTaskEntity" :label-position="labelPosition" label-width="158px"
style="max-width: 100%" :rules="requestRules" status-icon>
<div style="display: flex; justify-content: space-between;">
<el-row>
<el-form-item label="出库类型" prop="outType">
<el-select-v2 style="width: 196px" v-model="outTaskEntity.outType" placeholder="请选择入库类型"
:options="outTypeOptions"></el-select-v2>
</el-form-item>
<el-form-item label="料号" prop="goodsId">
<el-input v-model="outTaskEntity.goodsId" @blur="getLackQty()" clearable/>
</el-form-item>
<el-form-item label="箱号" prop="vehicleId" v-if="outTaskEntity.outType !== 9">
<el-input v-model="outTaskEntity.vehicleId" clearable/>
</el-form-item>
<el-form-item label="数量" prop="needNum">
<el-input-number style="width: 196px" v-model.number="outTaskEntity.needNum"
controls-position="right" :min="1" clearable/>
</el-form-item>
<el-form-item label="原因" prop="reason" v-if="outTaskEntity.outType === 9">
<el-select-v2 style="width: 196px" v-model="outTaskEntity.reason" placeholder="请选择紧急出库原因"
:options="reasonOptions"></el-select-v2>
</el-form-item>
<el-form-item label="工单" prop="workOrder" v-if="outTaskEntity.reason === '缺料'">
<el-input v-model="outTaskEntity.workOrder" @blur="getLackQty()" clearable/>
</el-form-item>
</el-row>
<el-row>
<el-button type="primary"
style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
@click="confirmOut()">确认出库
</el-button>
<el-button type="warning"
style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
@click="clearInput()">清除输入
</el-button>
</el-row>
</div>
</el-form>
</fieldset>
<fieldset class="confirm-area">
<el-form ref="confirmRef" :model="confirmEntity" :label-position="labelPosition" label-width="158px"
style="max-width: 100%" :rules="confirmRules" status-icon>
<div style="display: flex; justify-content: space-between;">
<el-row>
<el-row style="border-bottom: dashed 1px black;">
<el-form-item label="出库类型" prop="outType">
<el-select-v2 style="width: 196px" v-model="confirmEntity.outType" placeholder=" "
:options="outTypeOptions" disabled></el-select-v2>
</el-form-item>
<el-form-item label="物料号" prop="goodsId">
<el-input v-model="confirmEntity.goodsId" disabled/>
</el-form-item>
<el-form-item label="总需求" prop="totalNeed">
<el-input v-model="confirmEntity.totalNeed" disabled/>
</el-form-item>
<el-form-item label="剩余需求" prop="remainNeed">
<el-input v-model="confirmEntity.remainNeed" disabled/>
</el-form-item>
<el-form-item label="本次计划拣选" prop="planPickQty">
<el-input v-model="confirmEntity.planPickQty" disabled/>
</el-form-item>
<el-form-item label="本次实际拣选" prop="realPickQty">
<el-input-number style="width: 196px" v-model.number="confirmEntity.realPickQty"
controls-position="right" :min="0" clearable @change="changePlanQty()"/>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="箱号" prop="vehicleId">
<el-input v-model="confirmEntity.vehicleId" disabled/>
</el-form-item>
<el-form-item label="计划剩余数量" prop="planRemainQty">
<el-input v-model="confirmEntity.planRemainQty" disabled/>
</el-form-item>
<el-form-item label="实际剩余数量" prop="realRemainQty">
<el-input-number style="width: 196px" v-model.number="confirmEntity.realRemainQty"
controls-position="right" :min="0" clearable/>
</el-form-item>
</el-row>
</el-row>
<el-row>
<el-button type="success"
style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
@click="confirmOrRelease()">确认/放行
</el-button>
</el-row>
</div>
</el-form>
</fieldset>
</div>
</el-container>
</el-config-provider>
</template>
<script setup>
import store from '@/store'
import {requireStockOut, getCurrentTask, confirmCurrentTask, getGoodsLackQty} from '@/api/task.js'
import {errorBox, warningBox} from '@/utils/myMessageBox.js'
import {ElMessage} from 'element-plus'
import {nextTick, onBeforeUnmount, onMounted, reactive, ref, watch} from 'vue'
import {loading} from '@/utils/loading'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {useRoute} from "vue-router";
import {labelPosition} from '@/constant/form'
const STAND_ID = store.getters.getStandId
const USER_NAME = store.getters.getUserName
let timer = ref()
let outTaskRef = ref()
let outTaskEntity = reactive({
outType: 9,
goodsId: '',
vehicleId: '',
reason: '',
workOrder: '',
needNum: null
})
const requestRules = reactive({
outType: [
{required: true, message: '请选择入库类型'}
],
needNum: [
{required: true, message: '请输入数量'},
{type: 'number', message: '请输入数字值'}
],
})
const outTypeOptions = [
{
label: '空箱出库',
value: 1
},
{
label: '紧急出库',
value: 9
}
]
const reasonOptions = [
{
label: '补料',
value: '补料'
},
{
label: '少K',
value: '少K'
},
{
label: '缺料',
value: '缺料'
},
{
label: '返工工单',
value: '返工工单'
}
]
let confirmRef = ref()
let confirmEntity = reactive({
taskId: '',
outType: null,
goodsId: '',
totalNeed: null,
remainNeed: null,
planPickQty: null,
realPickQty: null,
stockId: '',
vehicleId: '',
planRemainQty: null,
realRemainQty: null,
isOut: null,
putArea: '',
warningQty: null
})
const confirmRules = reactive({})
let pauseGetPickFlag = ref(false)
const route = useRoute()// 路由
// 系统
onMounted(() => {
nextTick(() => {
timer.value = setInterval(() => {
timerTask_1()
}, 1000)
})
})
onBeforeUnmount(() => {
clearInterval(timer.value)
})
// 监视路由
watch(() => route.path, (newVal, oldVal) => {
if (newVal === '/goodsOut') {
timer.value = setInterval(() => {
timerTask_1()
}, 1000)
} else {
clearInterval(timer.value)
}
})
// 定时器任务1
const timerTask_1 = () => {
getTask()
}
// 获取拣选信息
const getTask = () => {
if (pauseGetPickFlag.value) {
return
}
const request = {
standId: STAND_ID,
userName: USER_NAME
}
// 获取当前拣选信息
getCurrentTask(request).then(res => {
const response = res.data
if (response.code === 0) {
const confirmVo = response.data
// 设置form
confirmEntity.taskId = confirmVo.taskConfirm.taskId
confirmEntity.outType = confirmVo.taskConfirm.outType
confirmEntity.goodsId = confirmVo.taskConfirm.goodsId
confirmEntity.totalNeed = confirmVo.taskConfirm.totalNeed
confirmEntity.remainNeed = confirmVo.taskConfirm.remainNeed
confirmEntity.planPickQty = confirmVo.taskConfirm.planPickQty
confirmEntity.realPickQty = confirmVo.taskConfirm.realPickQty
confirmEntity.stockId = confirmVo.stockConfirm.stockId
confirmEntity.vehicleId = confirmVo.stockConfirm.vehicleId
confirmEntity.planRemainQty = confirmVo.stockConfirm.planRemainQty
confirmEntity.realRemainQty = confirmVo.stockConfirm.realRemainQty
confirmEntity.isOut = confirmVo.stockConfirm.isOut
confirmEntity.putArea = confirmVo.stockConfirm.putArea
confirmEntity.warningQty = confirmVo.stockConfirm.warningQty
pauseGetPickFlag.value = true
// 如果剩余数量低于预警值,弹框报警
if (confirmEntity.isOut === 0 && confirmEntity.planRemainQty <= confirmEntity.warningQty) {
warningBox('剩余数量低于预警值,请清点库存数量。')
}
} else if (response.code === 400) {
// 警告,弹框
pauseGetPickFlag.value = true
warningBox(response.message)
}
}).catch(err => {
console.log(err)
pauseGetPickFlag.value = true
errorBox('请求错误,请检查完原因后刷新界面。')
})
}
// 清除输入
const clearInput = () => {
outTaskEntity.outType = 9
outTaskEntity.goodsId = ''
outTaskEntity.vehicleId = ''
outTaskEntity.needNum = null
}
// 确认出库
const confirmOut = () => {
if (outTaskEntity.needNum == null) {
errorBox('请输入正确的数量。')
return
}
if (outTaskEntity.outType !== 1) {
if (outTaskEntity.goodsId === '') {
errorBox('非空箱出库时,请输入料号。')
return
}
}
if (outTaskEntity.outType === 9) {
if (outTaskEntity.reason === '') {
errorBox('紧急出库请选择原因。')
return
}
if (outTaskEntity.reason === '缺料' && outTaskEntity.workOrder === '') {
errorBox('缺料时必须输入工单号。')
return
}
}
const request = {
outType: outTaskEntity.outType,
goodsId: outTaskEntity.goodsId.toUpperCase().trim(),
vehicleId: outTaskEntity.vehicleId.toUpperCase().trim(),
needNum: outTaskEntity.needNum,
reason: outTaskEntity.reason,
workOrder: outTaskEntity.workOrder.trim(),
destination: STAND_ID,
userName: USER_NAME,
standId: STAND_ID
}
loading.open('请求中,请稍等...')
requireStockOut(request).then(res => {
const response = res.data
if (response.code === 0) {
// 成功
ElMessage.success(response.message)
clearInput()
} else {
errorBox(response.message)
}
}).catch(err => {
console.log(err)
errorBox('请求错误。')
}).finally(() => {
loading.close()
})
}
// 确认/放行
const confirmOrRelease = () => {
// 确认放行---与配料工作区分开来
const request = {
taskConfirm: {
taskId: confirmEntity.taskId,
outType: confirmEntity.outType,
goodsId: confirmEntity.goodsId,
totalNeed: confirmEntity.totalNeed,
remainNeed: confirmEntity.remainNeed,
planPickQty: confirmEntity.planPickQty,
realPickQty: confirmEntity.realPickQty,
},
stockConfirm: {
stockId: confirmEntity.stockId,
vehicleId: confirmEntity.vehicleId,
goodsId: confirmEntity.goodsId,
planRemainQty: confirmEntity.planRemainQty,
realRemainQty: confirmEntity.realRemainQty,
isOut: confirmEntity.isOut,
putArea: confirmEntity.putArea,
},
standId: STAND_ID,
userName: USER_NAME
}
confirmCurrentTask(request).then(res => {
const response = res.data
if (response.code === 0) {
// 设置form
clearConfirmEntity()
pauseGetPickFlag.value = false
ElMessage.success(response.message)
} else if (response.code === 400) {
pauseGetPickFlag.value = false
warningBox(response.message)
} else {
// 错误,弹框
errorBox(response.message)
}
}).catch(err => {
console.log(err)
errorBox('请求错误,请检查完原因后刷新界面。')
})
}
// 当拣选数量修改时,要对应的修改
const changePlanQty = () => {
if (confirmEntity.isOut === 0 && confirmEntity.realPickQty !== confirmEntity.planPickQty) {
// 修正实际剩余数量
confirmEntity.realRemainQty = confirmEntity.planRemainQty - confirmEntity.realPickQty + confirmEntity.planPickQty
}
}
// 清楚confirmEntity
const clearConfirmEntity = () => {
confirmEntity.taskId = ''
confirmEntity.outType = null
confirmEntity.goodsId = ''
confirmEntity.totalNeed = null
confirmEntity.remainNeed = null
confirmEntity.planPickQty = null
confirmEntity.realPickQty = null
confirmEntity.stockId = ''
confirmEntity.vehicleId = ''
confirmEntity.planRemainQty = null
confirmEntity.realRemainQty = null
confirmEntity.isOut = null
confirmEntity.putArea = ''
confirmEntity.warningQty = null
}
// 获取对应工单对应物料号的缺料数量
const getLackQty = () => {
if (outTaskEntity.outType !== 9 || outTaskEntity.reason !== '缺料') {
// 非紧急出库且非缺料,则不处理
return;
}
if (outTaskEntity.workOrder === '' || outTaskEntity.goodsId === '') {
// 缺少工单号或者料号
return
}
// 设置请求参数
const request = {
workOrder: outTaskEntity.workOrder.trim(),
goodsId: outTaskEntity.goodsId.toUpperCase().trim()
}
loading.open('查询缺料缺料数量中...')
getGoodsLackQty(request).then(res => {
outTaskEntity.needNum = res.data
}).catch(err => {
// 异常,清空数量
outTaskEntity.needNum = null
console.log('获取缺料数量异常:' + err)
}).finally(() => {
loading.close()
})
}
</script>
<style scoped>
.content {
display: flex;
width: 100%;
}
.work-area {
width: 100%;
/* padding: 5px; */
}
.search-area {
margin: auto;
min-height: fit-content;
max-height: 90%;
margin-bottom: 10px;
min-width: inherit;
border: solid 1px;
border-radius: 10px;
box-shadow: 0px 15px 10px -15px #000;
overflow: auto;
padding: 10px;
}
.confirm-area {
margin: auto;
min-height: fit-content;
max-height: 90%;
margin-bottom: 10px;
min-width: inherit;
border: solid 1px;
border-radius: 10px;
box-shadow: 0px 15px 10px -15px #000;
overflow: auto;
padding: 10px;
}
.el-form-item {
margin: 10px 5px 10px 5px;
}
.el-form-item .el-input {
width: 196px;
}
.table-class {
margin: 5px 5px 5px 5px;
width: inherit;
}
</style>