196 lines
3.8 KiB
Vue
196 lines
3.8 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="input-group">
|
||
<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">
|
||
<uni-card v-for="(item, index) in materialList" :key="index" class="material-card">
|
||
<view class="card-content">
|
||
<view class="info-row">
|
||
<text class="label">物资编码：</text>
|
||
<text class="value">{{ item.productId }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">物料名称：</text>
|
||
<text class="value">{{ item.extraField.materialDesc }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">出库数量：</text>
|
||
<text class="value">{{ item.outQuantity }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">拣选数量：</text>
|
||
<text class="value">{{ item.pickQuantity }}</text>
|
||
</view>
|
||
</view>
|
||
</uni-card>
|
||
</view>
|
||
|
||
<view class="button-group" v-if="materialList.length > 0">
|
||
<button class="submit-button" @click="handleSubmit">提交</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getTaskDetail,submitError} from '@/api/out/productOut.js'
|
||
|
||
export default {
|
||
onReady() {
|
||
setTimeout(() => {
|
||
this.$nextTick(() => {
|
||
this.$refs.trayCodeInput.onFocus()
|
||
})
|
||
}, 100)
|
||
},
|
||
data() {
|
||
return {
|
||
trayCode: '',
|
||
materialList: []
|
||
}
|
||
},
|
||
methods: {
|
||
// 处理输入事件
|
||
async handleInput(value) {
|
||
if (value) {
|
||
try {
|
||
const response = await getTaskDetail({trayCode: value,inOut:'2'})
|
||
if (response.code === 200) {
|
||
this.materialList = response.data || []
|
||
} else {
|
||
uni.showToast({
|
||
title: response.msg || '暂无数据',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('获取托盘信息失败', error)
|
||
uni.showToast({
|
||
title: '获取托盘信息失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
},
|
||
// 处理清除事件
|
||
handleClear() {
|
||
this.materialList = []
|
||
},
|
||
// 处理扫码事件
|
||
handleScan() {
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
this.trayCode = res.result
|
||
this.handleInput(res.result)
|
||
}
|
||
})
|
||
},
|
||
// 处理提交事件
|
||
async handleSubmit() {
|
||
if (!this.materialList.length) {
|
||
uni.showToast({
|
||
title: '请先扫描托盘条码',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
try {
|
||
const response = await submitError({
|
||
trayCode: this.trayCode
|
||
|
||
})
|
||
if (response.code === 200) {
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
icon: 'success'
|
||
})
|
||
// 清空数据
|
||
this.trayCode = ''
|
||
this.materialList = []
|
||
} else {
|
||
uni.showToast({
|
||
title: response.msg || '提交失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('提交失败', error)
|
||
uni.showToast({
|
||
title: '提交失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.input-group {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.scan-icon {
|
||
font-size: 40rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.table-container {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.material-card {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.card-content {
|
||
.info-row {
|
||
display: flex;
|
||
margin-bottom: 10rpx;
|
||
|
||
.label {
|
||
color: #666;
|
||
width: 160rpx;
|
||
}
|
||
|
||
.value {
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.button-group {
|
||
margin-top: 40rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.submit-button {
|
||
background-color: #007aff;
|
||
color: #fff;
|
||
border-radius: 8rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.submit-button:active {
|
||
background-color: #0056b3;
|
||
}
|
||
</style> |