7 changed files with 714 additions and 70 deletions
-
9src/api/automatedWarehouse/palletPacking.js
-
1src/router/index.js
-
6src/views/main.vue
-
100src/views/modules/automatedWarehouse/palletAssembly.vue
-
100src/views/modules/automatedWarehouse/palletPacking.vue
-
382src/views/modules/automatedWarehouse/palletSearch.vue
-
96src/views/modules/automatedWarehouse/palletSorting.vue
@ -0,0 +1,382 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="pda-container"> |
||||
|
<!-- 头部栏 --> |
||||
|
<div class="header-bar"> |
||||
|
<div class="header-left" @click="handleBack"> |
||||
|
<i class="el-icon-arrow-left"></i> |
||||
|
<span>查看托盘</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="palletCode" |
||||
|
placeholder="请扫描栈板编码" |
||||
|
class="form-input" |
||||
|
clearable |
||||
|
inputmode="none" |
||||
|
autocomplete="off" |
||||
|
autocorrect="off" |
||||
|
spellcheck="false" |
||||
|
@keyup.enter.native="handlePalletScan" |
||||
|
ref="palletInput" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 筛选条件 (扫描栈板后显示) - rqrq --> |
||||
|
<div v-if="palletScanned" class="input-group"> |
||||
|
<label class="input-label">位置</label> |
||||
|
<div style="display: flex; gap: 8px;"> |
||||
|
<el-select |
||||
|
v-model="selectedPosition" |
||||
|
placeholder="请选择位置" |
||||
|
style="flex: 0.75;" |
||||
|
> |
||||
|
<el-option label="ALL" value=""></el-option> |
||||
|
<el-option |
||||
|
v-for="position in positionOptions" |
||||
|
:key="position" |
||||
|
:label="position" |
||||
|
:value="position" |
||||
|
/> |
||||
|
</el-select> |
||||
|
<button |
||||
|
class="action-btn secondary" |
||||
|
style="flex: 0.25; margin: 0; white-space: nowrap;" |
||||
|
@click="refreshTable" |
||||
|
> |
||||
|
刷新 |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 栈板明细表格 (扫描栈板后显示) - rqrq --> |
||||
|
<div v-if="palletScanned" class="rma-list"> |
||||
|
<div class="list-title-row" style="display: flex; gap: 8px; align-items: center; padding: 0;"> |
||||
|
<div class="list-title" style="flex: 1; margin: 0;"> |
||||
|
<button class="action-btn primary" style="margin: 0;" @click="showDetailModal" > |
||||
|
{{ '浏览明细' }} |
||||
|
</button> |
||||
|
<label style="margin-left: 5px;">条码数:{{detailList.length}}</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail-table"> |
||||
|
<div class="table-header"> |
||||
|
<div class="col-position">位置</div> |
||||
|
<div class="col-layer">层数</div> |
||||
|
<div class="col-serial">标签号</div> |
||||
|
</div> |
||||
|
<div |
||||
|
v-for="(detail, index) in detailList" |
||||
|
:key="index" |
||||
|
class="table-row" |
||||
|
> |
||||
|
<div class="col-position">{{ detail.position }}</div> |
||||
|
<div class="col-layer">{{ detail.layer }}</div> |
||||
|
<div class="col-serial">{{ detail.serialNo }}</div> |
||||
|
</div> |
||||
|
<!-- 暂无数据提示 --> |
||||
|
<div v-if="detailList.length === 0" class="table-row empty-row"> |
||||
|
<div class="empty-hint">暂无栈板明细数据</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 浏览明细弹窗 - rqrq --> |
||||
|
<el-dialog |
||||
|
:title="'栈板明细 (共'+detailList.length+'条)'" |
||||
|
:visible.sync="detailModalVisible" |
||||
|
width="90%" |
||||
|
:close-on-click-modal="false" |
||||
|
:show-close="false" |
||||
|
:modal="true" |
||||
|
:modal-append-to-body="true" |
||||
|
:append-to-body="true" |
||||
|
> |
||||
|
<div class="table-body" style="max-height: 400px; overflow-y: auto;"> |
||||
|
<div class="detail-table"> |
||||
|
<div class="table-header"> |
||||
|
<div class="col-position">位置</div> |
||||
|
<div class="col-layer">层数</div> |
||||
|
<div class="col-serial">标签号</div> |
||||
|
</div> |
||||
|
<div |
||||
|
v-for="(detail, index) in detailList" |
||||
|
:key="index" |
||||
|
class="table-row" |
||||
|
> |
||||
|
<div class="col-position">{{ detail.position }}</div> |
||||
|
<div class="col-layer">{{ detail.layer }}</div> |
||||
|
<div class="col-serial">{{ detail.serialNo }}</div> |
||||
|
</div> |
||||
|
<!-- 暂无数据提示 --> |
||||
|
<div v-if="detailList.length === 0" class="table-row empty-row"> |
||||
|
<div class="empty-hint">暂无栈板明细数据</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<button class="action-btn secondary" @click="detailModalVisible=false">关闭</button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
getPalletInfoSimple, |
||||
|
getPalletDetails |
||||
|
} from '../../../api/automatedWarehouse/palletPacking' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
site: localStorage.getItem('site'), |
||||
|
palletCode: '', |
||||
|
palletScanned: false, |
||||
|
detailModalVisible: false, |
||||
|
|
||||
|
// 筛选条件 - rqrq |
||||
|
selectedPosition: '', |
||||
|
positionOptions: [], |
||||
|
|
||||
|
// 栈板明细 - rqrq |
||||
|
detailList: [] |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
// 返回上一页 - rqrq |
||||
|
handleBack() { |
||||
|
this.$router.back(); |
||||
|
}, |
||||
|
|
||||
|
// 重置页面到初始状态 - rqrq |
||||
|
resetPage() { |
||||
|
this.palletCode = ''; |
||||
|
this.palletScanned = false; |
||||
|
this.selectedPosition = ''; |
||||
|
this.positionOptions = []; |
||||
|
this.detailList = []; |
||||
|
this.detailModalVisible = false; |
||||
|
|
||||
|
// 聚焦到栈板输入框 - rqrq |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.palletInput) { |
||||
|
this.$refs.palletInput.focus(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 扫描栈板（使用无校验的简单查询）- rqrq |
||||
|
handlePalletScan() { |
||||
|
if (!this.palletCode.trim()) { |
||||
|
this.$message.error('请输入栈板编码'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
getPalletInfoSimple({ |
||||
|
site: this.site, |
||||
|
palletId: this.palletCode |
||||
|
}).then(({ data }) => { |
||||
|
if (data.code === 0) { |
||||
|
this.palletCode = data.palletId; |
||||
|
this.palletScanned = true; |
||||
|
this.positionOptions = data.positions || []; |
||||
|
this.refreshTable(); |
||||
|
} else { |
||||
|
let errorMsg = data.msg || '栈板不存在'; |
||||
|
if (errorMsg.length > 100) { |
||||
|
errorMsg = errorMsg.substring(0, 100) + '...'; |
||||
|
} |
||||
|
this.$alert(errorMsg, '错误', { |
||||
|
confirmButtonText: '确定', |
||||
|
callback: () => { |
||||
|
this.palletCode = ''; |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.palletInput) { |
||||
|
this.$refs.palletInput.focus(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error('查询栈板失败:', error); |
||||
|
let errorMsg = error.message || '查询栈板失败'; |
||||
|
if (errorMsg.length > 100) { |
||||
|
errorMsg = errorMsg.substring(0, 100) + '...'; |
||||
|
} |
||||
|
this.$alert(errorMsg, '错误', { |
||||
|
confirmButtonText: '确定', |
||||
|
callback: () => { |
||||
|
this.palletCode = ''; |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.palletInput) { |
||||
|
this.$refs.palletInput.focus(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
// 刷新表格 - rqrq |
||||
|
refreshTable() { |
||||
|
getPalletDetails({ |
||||
|
site: this.site, |
||||
|
palletId: this.palletCode, |
||||
|
position: this.selectedPosition, |
||||
|
layer: '' |
||||
|
}).then(({ data }) => { |
||||
|
if (data.code === 0) { |
||||
|
this.detailList = data.details || []; |
||||
|
} else { |
||||
|
this.detailList = []; |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error('获取栈板明细失败:', error); |
||||
|
this.detailList = []; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 显示明细弹窗 - rqrq |
||||
|
showDetailModal() { |
||||
|
this.detailModalVisible = true; |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.palletInput) { |
||||
|
this.$refs.palletInput.focus(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 表格样式 */ |
||||
|
.detail-table { |
||||
|
background: white; |
||||
|
border-radius: 6px; |
||||
|
overflow: hidden; |
||||
|
border: 1px solid #e0e0e0; |
||||
|
} |
||||
|
|
||||
|
.table-header, |
||||
|
.table-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 8px; |
||||
|
border-bottom: 1px solid #e0e0e0; |
||||
|
} |
||||
|
|
||||
|
.table-header { |
||||
|
background: #f5f5f5; |
||||
|
font-weight: bold; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.table-row { |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.table-row:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.col-position { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.col-layer { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.col-serial { |
||||
|
flex: 4; |
||||
|
text-align: center; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
|
||||
|
/* 空数据提示 */ |
||||
|
.empty-hint { |
||||
|
text-align: center; |
||||
|
color: #999; |
||||
|
padding: 20px; |
||||
|
background: white; |
||||
|
border-radius: 6px; |
||||
|
margin-top: 16px; |
||||
|
} |
||||
|
|
||||
|
/* 模态框样式 */ |
||||
|
.scan-modal-content { |
||||
|
padding: 10px 0; |
||||
|
} |
||||
|
|
||||
|
.modal-form { |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.dialog-footer { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
/* 修复模态框层级问题 */ |
||||
|
::v-deep .el-dialog__wrapper { |
||||
|
z-index: 2000 !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-overlay { |
||||
|
z-index: 2000 !important; |
||||
|
} |
||||
|
|
||||
|
/* 修复单选框样式 */ |
||||
|
::v-deep .el-radio { |
||||
|
margin-right: 8px !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-radio__label { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
/* 标题行样式 */ |
||||
|
.list-title-row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.list-title-row .list-title { |
||||
|
margin: 0; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
/* 空数据行样式 */ |
||||
|
.empty-row { |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding: 20px; |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.empty-row .empty-hint { |
||||
|
text-align: center; |
||||
|
color: #999; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue