318 lines
6.7 KiB
Vue
318 lines
6.7 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="input-group">
|
||
<uni-easyinput
|
||
v-model="formData.trayCode"
|
||
placeholder="请输入或扫码输入托盘条码"
|
||
:clearable="true"
|
||
@clear="handleClear"
|
||
@confirm="handleConfirm"
|
||
ref="trayCodeInput"
|
||
auto-focus
|
||
>
|
||
<template #right>
|
||
<text class="scan-icon" @click="handleScan">📷</text>
|
||
</template>
|
||
</uni-easyinput>
|
||
</view>
|
||
|
||
<view class="info-group">
|
||
<view class="info-item">
|
||
<text class="info-label">品名：</text>
|
||
<text class="info-value">{{productInfo.name}}</text>
|
||
</view>
|
||
<!-- <view class="info-item">
|
||
<text class="info-label">批号：</text>
|
||
<text class="info-value">{{productInfo.lotNo}}</text>
|
||
</view> -->
|
||
<view class="info-item">
|
||
<text class="info-label">数量：</text>
|
||
<uni-easyinput
|
||
v-model="formData.inQuantity"
|
||
type="number"
|
||
:maxlength="String(productInfo.quantity).length"
|
||
:placeholder="'最大可输入' + productInfo.quantity"
|
||
@input="handleQuantityInput"
|
||
ref="quantityInput"
|
||
/>
|
||
<!-- <text class="info-value" style="margin-left: 10rpx;">/{{productInfo.quantity}}</text> -->
|
||
</view>
|
||
</view>
|
||
<view class="button-group">
|
||
<button class="bind-button" @click="handleBind" :disabled="productInfo.quantity == 0" :class="{'bind-button-disabled': productInfo.quantity == 0}">绑定托盘</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getOrderGoods, bindTray } from '@/api/in/order.js'
|
||
|
||
export default {
|
||
|
||
onReady() {
|
||
setTimeout(() => {
|
||
this.$nextTick(() => {
|
||
// console.log(this.$refs.trayCodeInput)
|
||
this.$refs.trayCodeInput.onFocus()
|
||
})
|
||
}, 100)
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
formData: {
|
||
trayCode: '',
|
||
stockinDetailId: '',
|
||
inQuantity:''
|
||
},
|
||
productInfo: {
|
||
name: '',
|
||
productId:'',
|
||
quantity: 0
|
||
|
||
}
|
||
}
|
||
},
|
||
async onLoad(options) {
|
||
if (options.stockinDetailId) {
|
||
this.formData.stockinDetailId = options.stockinDetailId
|
||
|
||
|
||
try {
|
||
const response = await getOrderGoods({
|
||
stockinDetailId: options.stockinDetailId
|
||
})
|
||
const product = response[0]
|
||
console.log(product)
|
||
// if (product) {
|
||
this.productInfo = {
|
||
name: product.extraField.materialDesc || '',
|
||
productId: product.extraField.productId || '',
|
||
quantity: product.quantity || 0
|
||
// }
|
||
}
|
||
} catch (error) {
|
||
console.error('获取物料信息失败：', error)
|
||
uni.showToast({
|
||
title: '获取物料信息失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
},
|
||
methods: {
|
||
|
||
handleClear() {
|
||
this.formData.trayCode = ''
|
||
},
|
||
handleQuantityInput(value) {
|
||
const numValue = Number(value)
|
||
if (numValue <= 0) {
|
||
this.formData.inQuantity = ''
|
||
uni.showToast({
|
||
title: '数量必须大于0',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (numValue > this.productInfo.quantity) {
|
||
this.formData.inQuantity = String(this.productInfo.quantity)
|
||
uni.showToast({
|
||
title: '不能超过最大数量',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
this.formData.inQuantity = String(numValue)
|
||
},
|
||
handleConfirm() {
|
||
// 处理确认事件
|
||
console.log('确认输入：', this.formData)
|
||
// 将焦点转移到数量输入框
|
||
this.$refs.quantityInput.focus()
|
||
},
|
||
handleScan() {
|
||
// 调用扫码功能
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
this.formData.trayCode = res.result
|
||
}
|
||
})
|
||
},
|
||
|
||
async handleBind() {
|
||
// 验证必填信息
|
||
if (!this.formData.trayCode) {
|
||
uni.showToast({
|
||
title: '请输入托盘条码',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (!this.formData.inQuantity || Number(this.formData.inQuantity) <= 0) {
|
||
uni.showToast({
|
||
title: '请输入大于0的数量',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 确保提交的数量不超过最大可用数量
|
||
const submitQuantity = Number(this.formData.inQuantity)
|
||
if (submitQuantity > this.productInfo.quantity) {
|
||
this.formData.inQuantity = String(this.productInfo.quantity)
|
||
uni.showToast({
|
||
title: '已自动调整为最大可用数量',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
// try {
|
||
const response = await bindTray(this.formData)
|
||
|
||
console.log(response)
|
||
|
||
if (response.code === 200) {
|
||
uni.showToast({
|
||
title: '绑定成功',
|
||
icon: 'success'
|
||
})
|
||
// 返回上一页并传递刷新标记
|
||
setTimeout(() => {
|
||
const pages = getCurrentPages()
|
||
const prevPage = pages[pages.length - 2]
|
||
if (prevPage) {
|
||
prevPage.$vm.needRefresh = true
|
||
}
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
} else {
|
||
uni.showToast({
|
||
title: response.msg || '绑定失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
// } catch (error) {
|
||
// // console.error('绑定托盘失败：', error)
|
||
// uni.showToast({
|
||
// title: '绑定托盘失败',
|
||
// icon: 'none'
|
||
// })
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.container {
|
||
padding: 20rpx;
|
||
background-color: #f5f7fa;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.input-group {
|
||
margin-bottom: 20rpx;
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.scan-icon {
|
||
font-size: 40rpx;
|
||
padding: 0 20rpx;
|
||
color: #409eff;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.scan-icon:active {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.info-group {
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.info-item {
|
||
margin-bottom: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.info-label {
|
||
color: #606266;
|
||
margin-right: 16rpx;
|
||
font-size: 28rpx;
|
||
min-width: 140rpx;
|
||
}
|
||
|
||
.info-value {
|
||
color: #303133;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
:deep(.uni-easyinput__content) {
|
||
background-color: #f5f7fa;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #dcdfe6;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
:deep(.uni-easyinput__content-input) {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
:deep(.is-input-border) {
|
||
border-color: #dcdfe6 !important;
|
||
}
|
||
|
||
:deep(.uni-easyinput__content:hover) {
|
||
border-color: #c0c4cc;
|
||
}
|
||
|
||
:deep(.uni-easyinput__content.is-focus) {
|
||
border-color: #409eff;
|
||
}
|
||
|
||
:deep(.is-disabled) {
|
||
background-color: #f5f7fa;
|
||
border-color: #e4e7ed;
|
||
}
|
||
|
||
.button-group {
|
||
margin-top: 40rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.bind-button {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background: linear-gradient(90deg, #409eff, #007aff);
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
border-radius: 44rpx;
|
||
border: none;
|
||
}
|
||
|
||
.bind-button:active {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.bind-button-disabled {
|
||
background: linear-gradient(90deg, #a0cfff, #8cc5ff);
|
||
cursor: not-allowed;
|
||
}
|
||
</style>
|