wms_client_miniload_bk7/src/layout/goodsOut.vue

487 lines
19 KiB
Vue
Raw Normal View History

2024-06-21 08:16:12 +08:00
<template>
<el-config-provider :locale="zhCn">
<el-container class="content">
<div class="left">
<fieldset class="display-area">
<legend>
当前WMS出库任务
</legend>
<!-- 此表格现在显示当前当前站台正在执行的出库任务 -->
<el-table :data="tasks" stripe border class="table-class" max-height="250px"
:header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
2024-07-09 17:01:02 +08:00
<el-table-column prop="goodsRelated.goodsId" label="物料编号" fixed="left" min-width="120px" />
<el-table-column prop="vehicleId" label="载具号" min-width="120px" />
<el-table-column prop="goodsRelated.originNum" label="库存数量" min-width="120px" />
<el-table-column prop="goodsRelated.opNum" label="操作数量" min-width="120px" />
2024-06-21 08:16:12 +08:00
<el-table-column prop="origin" label="起始位置" min-width="120px" />
<el-table-column prop="destination" label="目标位置" min-width="120px" />
2024-07-09 17:01:02 +08:00
<el-table-column prop="isPicking" label="是否拣选" min-width="120px" />
2024-06-21 08:16:12 +08:00
<el-table-column prop="createTime" label="创建时间" :formatter="timeFormat" min-width="120px" />
<el-table-column prop="createTime" label="运行时长" :formatter="dueFormat" min-width="120px" />
<el-table-column prop="taskStatus" label="任务状态" fixed="right" :formatter="taskStatusFormat"
min-width="120px" />
</el-table>
<br />
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
:page-sizes="[10, 25, 50]" :small="false" :disabled="false" :background="false"
:default-page-size="10" @size-change="getAllTasks" @current-change="getAllTasks"
layout="total, sizes, prev, pager, next, jumper" :total="total" />
</fieldset>
</div>
<div class="right">
<fieldset class="input-area-up">
<legend>出库输入信息</legend>
<el-form ref="taskOutRequestRef" :model="taskOutRequestEntity" :label-position="labelPosition"
label-width="100px" style="max-width: 100%" :rules="rules" status-icon>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
2024-07-09 17:01:02 +08:00
<el-form-item label="载具号" prop="vehicleId">
<el-input v-model="taskOutRequestEntity.vehicleId" clearable
placeholder="此处输入载具号" />
2024-06-21 08:16:12 +08:00
</el-form-item>
</el-col>
<el-col :span="12">
2024-07-09 17:01:02 +08:00
<el-form-item label="物料编号" prop="goodsId">
<el-input v-model="taskOutRequestEntity.goodsId" clearable placeholder="此处输入物料编号" />
2024-06-21 08:16:12 +08:00
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
2024-07-09 17:01:02 +08:00
<el-form-item label="数量" prop="goodsNum">
<el-input-number v-model.number="taskOutRequestEntity.goodsNum"
2024-06-21 08:16:12 +08:00
controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :span="12">
2024-07-09 17:01:02 +08:00
<el-form-item label="起始库位" prop="originPoint">
<el-input v-model="taskOutRequestEntity.originPoint" clearable
placeholder="此处输入起始库位格式为A-01-01-01" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="是否拣选" prop="isPicking">
<el-select-v2 v-model="taskOutRequestEntity.isPicking" placeholder="请选择是否拣选"
:options="pickOptions"></el-select-v2>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出库站台" prop="destinationPoint">
<el-select-v2 v-model="taskOutRequestEntity.destinationPoint" placeholder="请选择出库站台"
:options="destinationPointOptions"></el-select-v2>
2024-06-21 08:16:12 +08:00
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16" class="btn-area">
<el-col :span="8" :offset="8">
<el-form-item>
<el-button type="success" round
@click="submitGoodsOutTask(taskOutRequestRef, taskOutRequestEntity)">下发任务</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</fieldset>
2024-07-09 17:01:02 +08:00
<fieldset class="input-area-down" style="margin-top: 15px;">
<legend>拣选确认信息</legend>
<el-form ref="pickConfirmRef" :model="pickConfirmEntity" :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="pickConfirmEntity.vehicleId" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="物料编号" prop="goodsId">
<el-input v-model="pickConfirmEntity.goodsId" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="库存数量" prop="originNum">
<el-input-number v-model.number="pickConfirmEntity.originNum" clearable
controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="拣选数量" prop="opNum">
<el-input-number v-model.number="pickConfirmEntity.opNum" clearable
controls-position="right" :min="0" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16" class="btn-area">
<el-col :span="8" :offset="8">
<el-form-item>
<el-button type="success" round
2024-07-10 10:52:21 +08:00
@click="confirmTask(pickConfirmRef, pickConfirmEntity)">拣货完成确认回库</el-button>
2024-07-09 17:01:02 +08:00
</el-form-item>
</el-col>
</el-row>
</el-form>
</fieldset>
2024-06-21 08:16:12 +08:00
</div>
</el-container>
</el-config-provider>
</template>
<script setup>
import store from '@/store'
2024-07-09 17:01:02 +08:00
import { sendGoodsOutTask, getTasksByPage, getTasks, finishPickingAndBack } from '@/api/task'
2024-06-21 08:16:12 +08:00
import { taskStatusFormatter, dueFormatter, timeFormatter } from '@/utils/formatter.js'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const taskOutRequestRef = ref()
2024-07-09 17:01:02 +08:00
const pickConfirmRef = ref()
2024-06-21 08:16:12 +08:00
const rules = reactive({
2024-07-09 17:01:02 +08:00
destinationPointOptions: [
{ required: true, message: '请选择出库站台' }
2024-06-21 08:16:12 +08:00
]
})
</script>
<script>
export default {
name: 'goodsOut',
data() {
return {
2024-07-24 22:14:25 +08:00
areaId: 2,
2024-06-21 08:16:12 +08:00
timer: '',
tasks: [],
pageInfo: {},
currentPage: 1,
pageSize: 10,
total: 0,
loading: false,
labelPosition: 'top',
taskOutRequestEntity: {
2024-07-09 17:01:02 +08:00
vehicleId: '',
goodsId: '',
goodsNum: 0,
originPoint: '',
isPicking: 0,
destinationPoint: '',
userName: store.getters.getUserName,
},
pickConfirmEntity: {
2024-06-21 08:16:12 +08:00
taskId: '',
2024-07-09 17:01:02 +08:00
vehicleId: '',
goodsId: '',
opNum: 0,
originNum: 0,
2024-06-21 08:16:12 +08:00
userName: store.getters.getUserName,
2024-07-09 17:01:02 +08:00
},
destinationPointOptions: [
{
value: "RC1",
label: '入库口'
},
{
value: "P1",
label: '拣选台'
}
],
pickOptions: [
{
value: 0,
label: '非拣选任务'
},
{
value: 1,
label: '拣选任务'
}
],
2024-06-21 08:16:12 +08:00
}
},
mounted() {
this.timer = setInterval(() => {
this.getAllTasks()
}, 2000)
},
beforeUnmount() {
clearInterval(this.timer)
},
methods: {
getAllTasks() {
2024-07-09 17:01:02 +08:00
const request = {
pageNo: this.currentPage,
pageSize: this.pageSize,
taskType: 2
2024-06-21 08:16:12 +08:00
}
2024-07-09 17:01:02 +08:00
getTasksByPage(request).then(res => {
2024-06-21 08:16:12 +08:00
const tableResponse = res.data
if (tableResponse.code != 0) {
ElMessage.error(tableResponse.message)
}
2024-07-09 17:01:02 +08:00
this.tasks = tableResponse.returnData.lists
this.total = tableResponse.returnData.total
2024-06-21 08:16:12 +08:00
}).catch(err => {
console.log(err)
ElMessage.error('查询任务错误')
})
},
// 任务状态中文化
taskStatusFormat: (row, column, cellValue, index) => {
return taskStatusFormatter(cellValue)
},
// 任务时长中文化
dueFormat: (row, column, cellValue, index) => {
return dueFormatter(cellValue)
},
// 时间格式化
timeFormat: (row, column, cellValue, index) => {
return timeFormatter(cellValue)
},
submitGoodsOutTask(formEl, formData) {
if (!formEl) return
formEl.validate((valid) => {
if (!valid) {
ElMessage({
message: '请输入必须的出库信息!',
type: 'warning',
})
return
}
2024-07-24 22:14:25 +08:00
if (formData.vehicleId == '' && formData.goodsId == '' && formData.originPoint == '') {
2024-07-09 17:01:02 +08:00
ElMessage({
message: '载具号、物料号、起始库位号必须至少输入一个',
type: 'error',
})
return
}
if (formData.goodsNum <= 0) {
2024-06-21 08:16:12 +08:00
ElMessage({
message: '数量必须要大于0的数字',
type: 'error',
})
return
}
2024-07-09 17:01:02 +08:00
if ((formData.isPicking == 1 && formData.destinationPoint != 'P1')) {
ElMessage({
message: '拣选任务必须选拣选站台',
type: 'error',
})
return
}
if (formData.isPicking == 0 && formData.destinationPoint == 'P1') {
ElMessage({
message: '非拣选任务不得选拣选站台',
type: 'error',
})
return
}
2024-06-21 08:16:12 +08:00
const outParams = {
2024-07-24 22:14:25 +08:00
areaId: this.areaId,
2024-07-09 17:01:02 +08:00
goodsId: formData.goodsId,
goodsNum: formData.goodsNum,
vehicleId: formData.vehicleId,
originPoint: formData.originPoint,
destinationPoint: formData.destinationPoint,
userName: store.getters.getUserName,
isPicking: formData.isPicking,
pickStand: formData.destinationPoint
2024-06-21 08:16:12 +08:00
}
sendGoodsOutTask(outParams).then(res => {
if (res.data.code == 0) {
ElMessage({
message: '创建出库任务成功!',
type: 'success',
})
formEl.resetFields()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
console.log(err)
ElMessage.error('创建出库任务错误!')
})
})
2024-07-09 17:01:02 +08:00
},
getPickTaskDetails() {
const request = {
taskType: 2,
isPicking: 1,
2024-07-24 22:14:25 +08:00
taskStatus: 8,
areaId: this.areaId,
2024-07-09 17:01:02 +08:00
}
getTasks(request).then(res1 => {
if (res1.data.code == 0) {
if (res1.data.returnData.length > 0) {
const currentFinishTask = res1.data.returnData[0];
if (currentFinishTask.taskId == this.pickConfirmEntity.taskId) {// 信息没更新
return
}
this.pickConfirmEntity.taskId = currentFinishTask.taskId
this.pickConfirmEntity.goodsId = currentFinishTask.goodsRelated.goodsId
this.pickConfirmEntity.vehicleId = currentFinishTask.vehicleId
this.pickConfirmEntity.opNum = currentFinishTask.goodsRelated.opNum
this.pickConfirmEntity.originNum = currentFinishTask.goodsRelated.originNum
} else {
this.pickConfirmEntity.taskId = ''
this.pickConfirmEntity.goodsId = ''
this.pickConfirmEntity.vehicleId = ''
this.pickConfirmEntity.opNum = 0
this.pickConfirmEntity.originNum = 0
}
}
}).catch(err => {
ElMessage.error('查询任务错误')
})
},
confirmTask(formEl, formData) {
if (!formEl) return
formEl.validate((valid) => {
if (!valid) {
ElMessage({
message: '确认信息验证失败',
type: 'warning',
})
return
}
if (formData.taskId = '' || formData.vehicleId == '' || formData.goodsId == '') {
ElMessage({
message: '载具号、物料号、任务号不可缺少',
type: 'error',
})
return
}
const confirmParams = {
2024-07-24 22:14:25 +08:00
areaId: this.areaId,
2024-07-09 17:01:02 +08:00
taskId: formData.taskId,
vehicleId: formData.vehicleId,
goodsId: formData.goodsId,
opNum: formData.opNum,
originNum: formData.originNum,
userName: formData.userName
}
finishPickingAndBack(confirmParams).then(res => {
if (res.data.code == 0) {
ElMessage({
message: '确认成功!',
type: 'success',
})
formEl.resetFields()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('创建出库任务错误!')
})
})
2024-06-21 08:16:12 +08:00
}
}
}
</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-v2 {
width: 100% !important;
}
.el-row .el-form-item .el-select {
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-up {
margin: auto;
max-width: inherit;
2024-07-09 17:01:02 +08:00
height: 300px;
border: solid 1px;
border-radius: 10px;
box-shadow: 0px 15px 10px -15px #000;
}
.input-area-down {
margin: auto;
max-width: inherit;
height: 300px;
2024-06-21 08:16:12 +08:00
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%;
}
.qr-code-container {
width: 80px;
height: 80px;
margin: 20px;
}
.card-box {
display: flex;
align-items: center;
}
.text-over {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 130px;
}
.objectDialogFlowPrint .myPrint {
/* 打印的时候是否显示底色 */
print-color-adjust: exact;
}
.objectDialogFlowPrint .pageWarp {
/*这句话很重要,控制时候强制分页 https://www.w3school.com.cn/cssref/pr_page-break-after.asp*/
page-break-after: always;
height: 100%;
width: 100%;
text-align: center;
margin: 5px auto;
padding: auto;
}
</style>