5 changed files with 506 additions and 9 deletions
-
7src/api/automatedWarehouse/callOutToStation.js
-
1src/router/index.js
-
6src/views/main.vue
-
18src/views/modules/automatedWarehouse/callOut.vue
-
483src/views/modules/automatedWarehouse/callOutToStation.vue
@ -0,0 +1,7 @@ |
|||
import { createAPI } from "@/utils/httpRequest.js"; |
|||
|
|||
// ========== Call料到指定位置相关 ========== - rqrq
|
|||
|
|||
// Call料并运输到指定区域/站点 - rqrq
|
|||
export const callOutToStation = data => createAPI(`/wcsIntegration/callOutToStation`, 'post', data) |
|||
|
|||
@ -0,0 +1,483 @@ |
|||
<template> |
|||
<div> |
|||
<div class="pda-container"> |
|||
<!-- 头部栏 - rqrq --> |
|||
<div class="header-bar"> |
|||
<div class="header-left" @click="handleBack"> |
|||
<i class="el-icon-arrow-left"></i> |
|||
<span>Call料到指定位置</span> |
|||
</div> |
|||
<div class="header-right" @click="$router.push({ path: '/' })"> |
|||
首页 |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="table-body" style="max-height: 500px; overflow-y: auto;"> |
|||
<div class="main-content form-section"> |
|||
<!-- 表单区域 - rqrq --> |
|||
<div class="input-group"> |
|||
<label class="input-label">物料编码</label> |
|||
<el-input |
|||
v-model="formData.partNo" |
|||
placeholder="请输入物料编码" |
|||
class="form-input" |
|||
clearable |
|||
|
|||
/> |
|||
</div> |
|||
<!-- @blur="handlePartNoBlur"--> |
|||
<!-- 栈板编码搜索框 - rqrq --> |
|||
<div class="input-group"> |
|||
<label class="input-label">栈板编码</label> |
|||
<el-input |
|||
v-model="formData.palletId" |
|||
placeholder="请输入栈板编码" |
|||
class="form-input" |
|||
clearable |
|||
/> |
|||
</div> |
|||
|
|||
<!-- <div class="input-group">--> |
|||
<!-- <label class="input-label">物料名称</label>--> |
|||
<!-- <el-input--> |
|||
<!-- v-model="formData.partDesc"--> |
|||
<!-- disabled--> |
|||
<!-- class="form-input"--> |
|||
<!-- />--> |
|||
<!-- </div>--> |
|||
|
|||
<div class="input-group"> |
|||
<label class="input-label">批号</label> |
|||
<el-input |
|||
v-model="formData.batchNo" |
|||
class="form-input" |
|||
clearable |
|||
/> |
|||
</div> |
|||
|
|||
<div class="bottom-actions" style="display: flex; gap: 10px; flex-wrap: nowrap;"> |
|||
<button class="action-btn secondary" @click="confirmDo" style="flex: 1;"> |
|||
查询 |
|||
</button> |
|||
|
|||
<button class="action-btn secondary" @click="cleanData" style="flex: 1;"> |
|||
清空 |
|||
</button> |
|||
|
|||
<button |
|||
class="action-btn secondary" |
|||
@click="handleTransportPallet" |
|||
:disabled="!selectedPallet" |
|||
style="flex: 1;" |
|||
> |
|||
运输栈板 |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 栈板列表 - rqrq（单选模式）--> |
|||
<div v-if="palletList.length > 0" class="rma-list"> |
|||
<div class="list-title" style="flex: 0.75">可用栈板列表（单选）</div> |
|||
|
|||
<el-form> |
|||
<el-row v-for="(pallet, index) in palletList" :key="index" class="rma-row"> |
|||
<el-col :span="24"> |
|||
<div class="rma-item" @click="selectPallet(pallet)" :class="{ 'selected': isSelected(pallet) }"> |
|||
<div class="item-info"> |
|||
<span class="part-no">栈板号: {{ pallet.palletId }}</span> |
|||
<!-- rqrq - 如果有物料编码，显示明细；否则只显示栈板 --> |
|||
<span class="batch-qty" v-if="pallet.partNo"> |
|||
物料: {{ pallet.partNo }} | 数量: {{ pallet.qty }} |
|||
</span> |
|||
<span class="batch-qty" v-if="pallet.partNo && pallet.batchNo"> |
|||
| 批号: {{ pallet.batchNo }} |
|||
</span> |
|||
<span class="batch-qty" v-if="pallet.partNo && pallet.wdr"> |
|||
| WDR: {{ pallet.wdr }} |
|||
</span> |
|||
<span class="batch-qty" v-if="pallet.partNo && pallet.expiredDate"> |
|||
| 失效日期: {{ pallet.expiredDate }} |
|||
</span> |
|||
</div> |
|||
<div class="item-status"> |
|||
<i class="el-icon-check" v-if="isSelected(pallet)"></i> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 选择区域和站点弹窗 - rqrq --> |
|||
<el-dialog |
|||
title="选择目标位置" |
|||
:visible.sync="locationModalVisible" |
|||
width="90%" |
|||
:close-on-click-modal="false" |
|||
:show-close="false" |
|||
:modal="true" |
|||
:modal-append-to-body="true" |
|||
:append-to-body="true" |
|||
> |
|||
<div class="location-selection"> |
|||
<!-- 选择区域 - rqrq --> |
|||
<div class="input-group"> |
|||
<label class="input-label">选择区域</label> |
|||
<el-select |
|||
v-model="selectedArea" |
|||
placeholder="请选择区域" |
|||
style="width: 100%;" |
|||
@change="handleAreaChange" |
|||
> |
|||
<el-option |
|||
v-for="area in areaOptions" |
|||
:key="area.areaId" |
|||
:label="area.areaDesc" |
|||
:value="area.areaId" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<!-- 选择站点 - rqrq --> |
|||
<div class="input-group"> |
|||
<label class="input-label">选择站点</label> |
|||
<el-select |
|||
v-model="selectedStation" |
|||
placeholder="请选择站点" |
|||
style="width: 100%;" |
|||
:disabled="!selectedArea" |
|||
> |
|||
<el-option label="自动分配" value=""></el-option> |
|||
<el-option |
|||
v-for="station in stationOptions" |
|||
:key="station.stationId" |
|||
:label="`${station.stationId} (${station.stationCode})`" |
|||
:value="station.stationCode" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
|
|||
<div slot="footer" class="dialog-footer" style="display: flex; gap: 8px;"> |
|||
<button class="action-btn secondary" @click="locationModalVisible=false" style="flex: 1;"> |
|||
取消 |
|||
</button> |
|||
<button |
|||
class="action-btn primary" |
|||
@click="handleConfirmLocation" |
|||
:disabled="submitLoading || !selectedArea" |
|||
style="flex: 1;"> |
|||
{{ submitLoading ? '处理中...' : '确认' }} |
|||
</button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
getShopOrderFromIFSWithOrderNo, |
|||
getPalletList |
|||
} from '../../../api/automatedWarehouse/callOut' |
|||
import { |
|||
getAreaOptionsForChange, |
|||
getStationsByArea |
|||
} from '../../../api/automatedWarehouse/palletChangeStation' |
|||
import { |
|||
callOutToStation |
|||
} from '../../../api/automatedWarehouse/callOutToStation' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
site: localStorage.getItem('site'), |
|||
username: localStorage.getItem('username'), |
|||
|
|||
// 表单数据 - rqrq |
|||
formData: { |
|||
palletId: '', |
|||
partNo: '', |
|||
partDesc: '', |
|||
batchNo: '', |
|||
site: localStorage.getItem('site') |
|||
}, |
|||
|
|||
// 栈板列表 - rqrq |
|||
palletList: [], |
|||
selectedPallet: null, // 单选模式 - rqrq |
|||
|
|||
// 位置选择 - rqrq |
|||
locationModalVisible: false, |
|||
selectedArea: '', |
|||
selectedStation: '', |
|||
areaOptions: [], |
|||
stationOptions: [], |
|||
|
|||
// 加载状态 - rqrq |
|||
loading: false, |
|||
submitLoading: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
// 返回上一页 - rqrq |
|||
handleBack() { |
|||
this.$router.back(); |
|||
}, |
|||
|
|||
// 处理物料编码失去焦点事件 - rqrq |
|||
async handlePartNoBlur() { |
|||
const partNo = this.formData.partNo; |
|||
if (!partNo) { |
|||
this.formData.partDesc = ''; |
|||
return; |
|||
} |
|||
|
|||
this.loading = true; |
|||
getShopOrderFromIFSWithOrderNo({ |
|||
site: this.formData.site, |
|||
partNo: partNo |
|||
}).then(({ data }) => { |
|||
this.loading = false; |
|||
if (data.code === 0) { |
|||
let rows = data.rows |
|||
if (rows.length > 0) { |
|||
this.formData.partDesc = rows[0].description || ''; |
|||
} else { |
|||
this.formData.partDesc = ''; |
|||
this.$alert('没有找到该物料编码', '错误', { |
|||
confirmButtonText: '确定', |
|||
}) |
|||
} |
|||
} else { |
|||
this.formData.partDesc = ''; |
|||
this.$alert(data.msg, '错误', { |
|||
confirmButtonText: '确定', |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 查询栈板列表 - rqrq |
|||
confirmDo() { |
|||
if ((!this.formData.partNo || this.formData.partNo === '') && |
|||
(!this.formData.palletId || this.formData.palletId === '')) { |
|||
this.$message.error('请输入物料编码或栈板编码'); |
|||
return; |
|||
} |
|||
|
|||
const queryParams = { |
|||
site: this.formData.site |
|||
}; |
|||
|
|||
if (this.formData.palletId && this.formData.palletId.trim()) { |
|||
queryParams.palletId = this.formData.palletId.trim(); |
|||
} |
|||
|
|||
if (this.formData.partNo && this.formData.partNo.trim()) { |
|||
queryParams.partNo = this.formData.partNo.trim(); |
|||
} |
|||
|
|||
if (this.formData.batchNo && this.formData.batchNo.trim()) { |
|||
queryParams.batchNo = this.formData.batchNo.trim(); |
|||
} |
|||
|
|||
getPalletList(queryParams).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
this.palletList = data.rows || []; |
|||
if (this.palletList.length === 0) { |
|||
this.$message.warning('未找到满足条件的栈板'); |
|||
} else { |
|||
this.$message.success(`找到 ${this.palletList.length} 个栈板`); |
|||
} |
|||
this.selectedPallet = null; // 清空选中 - rqrq |
|||
} else { |
|||
this.$message.error(data.msg || '查询失败'); |
|||
this.palletList = []; |
|||
this.selectedPallet = null; |
|||
} |
|||
}).catch(error => { |
|||
console.error('查询栈板列表失败:', error); |
|||
this.$message.error('查询失败'); |
|||
this.palletList = []; |
|||
this.selectedPallet = null; |
|||
}); |
|||
}, |
|||
|
|||
// 选择栈板（单选模式）- rqrq |
|||
selectPallet(pallet) { |
|||
if (this.selectedPallet && this.selectedPallet.palletId === pallet.palletId) { |
|||
// 如果点击已选中的栈板，取消选择 - rqrq |
|||
this.selectedPallet = null; |
|||
this.$message.success('已取消选择'); |
|||
} else { |
|||
// 选择新栈板 - rqrq |
|||
this.selectedPallet = { |
|||
site: pallet.site, |
|||
palletId: pallet.palletId, |
|||
partNo: pallet.partNo || '', |
|||
qty: pallet.qty || 0, |
|||
batchNo: pallet.batchNo || this.formData.batchNo || '' |
|||
}; |
|||
this.$message.success(`已选择栈板: ${pallet.palletId}`); |
|||
} |
|||
}, |
|||
|
|||
// 判断栈板是否被选中 - rqrq |
|||
isSelected(pallet) { |
|||
return this.selectedPallet && this.selectedPallet.palletId === pallet.palletId; |
|||
}, |
|||
|
|||
// 处理运输栈板按钮 - rqrq |
|||
handleTransportPallet() { |
|||
if (!this.selectedPallet) { |
|||
this.$message.error('请选择一个栈板'); |
|||
return; |
|||
} |
|||
|
|||
// 加载区域选项并打开弹窗 - rqrq |
|||
this.loadAreaOptions(); |
|||
this.locationModalVisible = true; |
|||
}, |
|||
|
|||
// 加载区域选项 - rqrq |
|||
loadAreaOptions() { |
|||
getAreaOptionsForChange({ |
|||
site: this.site |
|||
}).then(({ data }) => { |
|||
if (data.code === 0) { |
|||
this.areaOptions = data.rows || []; |
|||
} else { |
|||
this.areaOptions = []; |
|||
this.$message.error('获取区域选项失败'); |
|||
} |
|||
}).catch(error => { |
|||
console.error('获取区域选项失败:', error); |
|||
this.areaOptions = []; |
|||
}); |
|||
}, |
|||
|
|||
// 区域变化 - rqrq |
|||
handleAreaChange(areaId) { |
|||
this.selectedStation = ''; |
|||
this.stationOptions = []; |
|||
|
|||
if (!areaId) { |
|||
return; |
|||
} |
|||
|
|||
getStationsByArea({ |
|||
site: this.site, |
|||
areaId: areaId |
|||
}).then(({ data }) => { |
|||
if (data.code === 0) { |
|||
this.stationOptions = data.rows || []; |
|||
} else { |
|||
this.stationOptions = []; |
|||
this.$message.error('获取站点选项失败'); |
|||
} |
|||
}).catch(error => { |
|||
console.error('获取站点选项失败:', error); |
|||
this.stationOptions = []; |
|||
}); |
|||
}, |
|||
|
|||
// 确认位置选择 - rqrq |
|||
handleConfirmLocation() { |
|||
if (!this.selectedArea) { |
|||
this.$message.error('请选择目标区域'); |
|||
return; |
|||
} |
|||
|
|||
// 二次确认 - rqrq |
|||
this.$confirm('确定要叫料并运输到指定位置？', '提示', { |
|||
confirmButtonText: '确认', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.submitLoading = true; |
|||
|
|||
const params = { |
|||
site: this.site, |
|||
palletId: this.selectedPallet.palletId, |
|||
partNo: this.selectedPallet.partNo, |
|||
qty: this.selectedPallet.qty, |
|||
batchNo: this.selectedPallet.batchNo, |
|||
targetArea: this.selectedArea, |
|||
targetStation: this.selectedStation || '', // 空表示自动分配 - rqrq |
|||
username: this.username |
|||
}; |
|||
|
|||
// 调用后端接口 - rqrq |
|||
callOutToStation(params).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
this.$message.success('任务下达成功'); |
|||
this.locationModalVisible = false; |
|||
this.cleanData(); |
|||
} else { |
|||
this.$alert(data.msg || '任务下达失败', '错误', { |
|||
confirmButtonText: '确定' |
|||
}); |
|||
} |
|||
}).catch(error => { |
|||
console.error('任务下达失败:', error); |
|||
this.$message.error(error.message || '任务下达失败'); |
|||
}).finally(() => { |
|||
this.submitLoading = false; |
|||
}); |
|||
}).catch(() => { |
|||
// 用户取消 - rqrq |
|||
}); |
|||
}, |
|||
|
|||
// 清空数据 - rqrq |
|||
cleanData() { |
|||
this.formData = { |
|||
palletId: '', |
|||
partNo: '', |
|||
partDesc: '', |
|||
batchNo: '', |
|||
site: localStorage.getItem('site') |
|||
}; |
|||
this.palletList = []; |
|||
this.selectedPallet = null; |
|||
this.selectedArea = ''; |
|||
this.selectedStation = ''; |
|||
this.areaOptions = []; |
|||
this.stationOptions = []; |
|||
} |
|||
}, |
|||
mounted() { |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 按钮禁用状态样式 - rqrq */ |
|||
.action-btn:disabled { |
|||
opacity: 0.6; |
|||
cursor: not-allowed; |
|||
background-color: #ccc !important; |
|||
border-color: #ccc !important; |
|||
} |
|||
|
|||
/* 位置选择区域样式 - rqrq */ |
|||
.location-selection { |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
.dialog-footer { |
|||
text-align: center; |
|||
} |
|||
|
|||
/* 修复模态框层级问题 - rqrq */ |
|||
::v-deep .el-dialog__wrapper { |
|||
z-index: 2000 !important; |
|||
} |
|||
|
|||
::v-deep .el-overlay { |
|||
z-index: 2000 !important; |
|||
} |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue