330 lines
6.5 KiB
Vue
330 lines
6.5 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 出口选择框 -->
|
||
<view class="input-group">
|
||
<view class="input-label">出口：</view>
|
||
<uni-data-select
|
||
v-model="selectedExit"
|
||
:localdata="exitOptions"
|
||
placeholder="请选择出口"
|
||
class="select-input"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 托盘条码输入框 -->
|
||
<view class="input-group">
|
||
<view class="input-label">物料条码：</view>
|
||
<uni-easyinput
|
||
v-model="trayCode"
|
||
placeholder="请扫码输入物料条码"
|
||
:clearable="true"
|
||
@input="handleInput"
|
||
@clear="handleClear"
|
||
ref="trayCodeInput"
|
||
>
|
||
<template #right>
|
||
<text class="scan-icon" @click="handleScan">📷</text>
|
||
</template>
|
||
</uni-easyinput>
|
||
</view>
|
||
|
||
<view class="table-container" v-if="materialList.length > 0">
|
||
<view class="table">
|
||
<view class="table-header">
|
||
|
||
<view class="table-cell">物资编码</view>
|
||
<view class="table-cell">物料名称</view>
|
||
</view>
|
||
<view v-for="(item, index) in materialList" :key="index" class="table-row">
|
||
|
||
<view class="table-cell">{{ item.productId }}</view>
|
||
<view class="table-cell">{{ item.productName }}</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="button-group">
|
||
<button class="confirm-button" @click="handleConfirm">确认出库</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getTaskDetail, ckMakeSure } from '@/api/out/productOut.js'
|
||
|
||
export default {
|
||
onLoad(options) {
|
||
if (options.trayCode) {
|
||
this.trayCode = options.trayCode
|
||
this.fetchTrayInfo(options.trayCode)
|
||
}
|
||
},
|
||
onReady() {
|
||
setTimeout(() => {
|
||
this.$nextTick(() => {
|
||
// console.log(this.$refs.trayCodeInput)
|
||
this.$refs.trayCodeInput.onFocus()
|
||
})
|
||
}, 100)
|
||
},
|
||
data() {
|
||
return {
|
||
trayCode: '',
|
||
materialList: [],
|
||
selectedExit: '',
|
||
// 出口选项
|
||
exitOptions: [
|
||
{ value: 'L1021', text: 'L1021' },
|
||
{ value: 'L1022', text: 'L1022' },
|
||
{ value: 'L2002', text: 'L2002' },
|
||
{ value: 'L2008', text: 'L2008' }
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
// 处理输入事件
|
||
handleInput(value) {
|
||
if(!this.selectedExit){
|
||
uni.showToast({
|
||
title: '请选择出口',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (value) {
|
||
this.fetchTrayInfo(value)
|
||
}
|
||
},
|
||
// 处理清除事件
|
||
handleClear() {
|
||
this.materialList = []
|
||
},
|
||
// 处理扫码事件
|
||
handleScan() {
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
this.trayCode = res.result
|
||
this.fetchTrayInfo(res.result)
|
||
}
|
||
})
|
||
},
|
||
// 获取托盘信息
|
||
async fetchTrayInfo(trayCode) {
|
||
try {
|
||
const response = await getTaskDetail({trayCode:trayCode,exitId:this.selectedExit})
|
||
// 为每个物料添加选择状态和绑定数量
|
||
this.materialList = response.data.map(item => ({
|
||
...item
|
||
|
||
}))
|
||
} catch (error) {
|
||
uni.showToast({
|
||
title: '获取托盘信息失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
// 确认出库
|
||
async handleConfirm() {
|
||
// 验证出口选择
|
||
if (!this.selectedExit) {
|
||
uni.showToast({
|
||
title: '请选择出口',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (!this.trayCode) {
|
||
uni.showToast({
|
||
title: '请输入托盘条码',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
const response=await ckMakeSure({
|
||
trayCode: this.trayCode,
|
||
exitId: this.selectedExit
|
||
})
|
||
if (response.code==200) {
|
||
uni.showToast({
|
||
title: '出库成功',
|
||
icon: 'success'
|
||
})
|
||
// 清空数据
|
||
this.trayCode = ''
|
||
this.materialList = []
|
||
this.selectedExit = ''
|
||
}else{
|
||
uni.showToast({
|
||
title: response.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
// 切换全选状态
|
||
toggleSelectAll() {
|
||
this.isAllSelected = !this.isAllSelected
|
||
this.materialList.forEach(item => {
|
||
item.selected = this.isAllSelected
|
||
})
|
||
},
|
||
// 切换单个选择状态
|
||
toggleSelect(index) {
|
||
this.materialList[index].selected = !this.materialList[index].selected
|
||
this.isAllSelected = this.materialList.every(item => item.selected)
|
||
},
|
||
// 处理绑定数量输入
|
||
handleBindQuantityInput(event, index) {
|
||
const value = Number(event.target.value)
|
||
if (!isNaN(value)) {
|
||
this.materialList[index].bindQuantity = value
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
padding: 30rpx;
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.input-group {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
|
||
.input-label {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #606266;
|
||
margin-bottom: 16rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.select-input {
|
||
width: 100%;
|
||
}
|
||
|
||
:deep(.uni-easyinput__content) {
|
||
background-color: #f8f8f8;
|
||
border-radius: 8rpx;
|
||
height: 80rpx;
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
// uni-data-select 样式
|
||
:deep(.uni-select) {
|
||
.uni-select__input-box {
|
||
background-color: #f8f8f8;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #dcdfe6;
|
||
transition: all 0.3s ease;
|
||
height: 80rpx;
|
||
|
||
.uni-select__input-text {
|
||
font-size: 28rpx;
|
||
color: #606266;
|
||
}
|
||
|
||
.uni-select__input-placeholder {
|
||
font-size: 28rpx;
|
||
color: #c0c4cc;
|
||
}
|
||
}
|
||
|
||
.uni-select__input-box:hover {
|
||
border-color: #c0c4cc;
|
||
}
|
||
}
|
||
}
|
||
|
||
.scan-icon {
|
||
font-size: 40rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.table-container {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
margin-bottom: 120rpx;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.table-header {
|
||
display: flex;
|
||
background-color: #f8f8f8;
|
||
border-top-left-radius: 16rpx;
|
||
border-top-right-radius: 16rpx;
|
||
}
|
||
|
||
.table-row {
|
||
display: flex;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.table-cell {
|
||
padding: 20rpx;
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.checkbox-cell {
|
||
flex: 0 0 80rpx;
|
||
justify-content: center;
|
||
}
|
||
|
||
.quantity-input {
|
||
width: 120rpx;
|
||
height: 60rpx;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
padding: 0 16rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.button-group {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.confirm-button {
|
||
width: 100%;
|
||
background-color: #3B7FFF;
|
||
color: #fff;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
font-size: 32rpx;
|
||
border-radius: 44rpx;
|
||
}
|
||
|
||
.rack-code-input {
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
border-bottom-left-radius: 16rpx;
|
||
border-bottom-right-radius: 16rpx;
|
||
}
|
||
</style>
|