325 lines
7.2 KiB
Vue
325 lines
7.2 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">
|
|
<view class="table">
|
|
<view class="table-header">
|
|
<view class="table-cell checkbox-cell">
|
|
<checkbox :checked="isAllSelected" @click="toggleSelectAll" />
|
|
</view>
|
|
<view class="table-cell">物资编码</view>
|
|
<view class="table-cell">物料名称</view>
|
|
<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 checkbox-cell">
|
|
<checkbox :checked="item.selected" @click="toggleSelect(index)" />
|
|
</view>
|
|
<view class="table-cell">{{ item.productId }}</view>
|
|
<view class="table-cell">{{ item.extraField.materialDesc }}</view>
|
|
<view class="table-cell">{{ item.outQuantity }}</view>
|
|
<view class="table-cell">
|
|
<input type="number" v-model.number="item.bindQuantity" @input="handleBindQuantityInput($event, index)" class="quantity-input" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="rack-code-input" v-if="materialList.length > 0 && (!materialList[0].spare2 || materialList[0].spare2 !== '2')">
|
|
<uni-easyinput
|
|
v-model="rackCode"
|
|
placeholder="请输入料架码"
|
|
:clearable="true"
|
|
>
|
|
</uni-easyinput>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="button-group" v-if="materialList.length > 0">
|
|
<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: [],
|
|
isAllSelected: false,
|
|
rackCode: ''
|
|
}
|
|
},
|
|
methods: {
|
|
// 处理输入事件
|
|
handleInput(value) {
|
|
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,status:'3'})
|
|
// 为每个物料添加选择状态和绑定数量
|
|
this.materialList = response.data.map(item => ({
|
|
...item,
|
|
selected: false,
|
|
bindQuantity: item.pickQuantityReal
|
|
}))
|
|
} catch (error) {
|
|
uni.showToast({
|
|
title: '获取托盘信息失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
// 确认出库
|
|
async handleConfirm() {
|
|
const selectedItems = this.materialList.filter(item => item.selected)
|
|
if (this.materialList[0].spare2 === '2') {
|
|
try {
|
|
await ckMakeSure({
|
|
trayCode: this.trayCode,
|
|
containerCode: 'MOCK_CONTAINER',
|
|
mydoJobDetailList: [{
|
|
jobDetailId: 'MOCK_JOB_DETAIL_ID',
|
|
pickQuantity: 1
|
|
}]
|
|
})
|
|
uni.showToast({
|
|
title: '出库确认成功',
|
|
icon: 'success'
|
|
})
|
|
// 清空数据
|
|
this.trayCode = ''
|
|
this.rackCode = ''
|
|
this.materialList = []
|
|
return
|
|
} catch (error) {
|
|
uni.showToast({
|
|
title: '出库确认失败',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
}
|
|
|
|
if (selectedItems.length === 0) {
|
|
uni.showToast({
|
|
title: '请选择要出库的物料',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!this.rackCode) {
|
|
uni.showToast({
|
|
title: '请输入料架码',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
for (const item of selectedItems) {
|
|
if (item.bindQuantity <= 0 || item.bindQuantity > item.outQuantity) {
|
|
uni.showToast({
|
|
title: '绑定数量必须大于0且不能超过出库数量',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
}
|
|
|
|
try {
|
|
await ckMakeSure({
|
|
trayCode: this.trayCode,
|
|
containerCode: this.rackCode,
|
|
mydoJobDetailList: selectedItems.map(item => ({
|
|
jobDetailId: item.jobDetailId,
|
|
pickQuantity: item.bindQuantity
|
|
}))
|
|
})
|
|
uni.showToast({
|
|
title: '出库确认成功',
|
|
icon: 'success'
|
|
})
|
|
// 清空数据
|
|
this.trayCode = ''
|
|
this.rackCode = ''
|
|
this.materialList = []
|
|
} catch (error) {
|
|
uni.showToast({
|
|
title: '出库确认失败',
|
|
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);
|
|
|
|
:deep(.uni-easyinput__content) {
|
|
background-color: #f8f8f8;
|
|
border-radius: 8rpx;
|
|
height: 80rpx;
|
|
padding: 0 24rpx;
|
|
}
|
|
}
|
|
|
|
.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>
|