179 lines
4.3 KiB
Vue
179 lines
4.3 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar back-text="返回" title="物料收货" :background="background"></u-navbar>
|
||
<view v-show="loadding" style="width: 100%; height: 900rpx; display: flex; justify-content: center; align-items: center;">
|
||
<u-loading mode="circle" :size="70" color="#00aaff"></u-loading>
|
||
</view>
|
||
<view class='content' v-show="!loadding">
|
||
<u-form
|
||
:model="form"
|
||
ref="uProdBankInForm"
|
||
label-width="160rpx"
|
||
>
|
||
<u-form-item label="BOX 条码" left-icon="tags">
|
||
<u-input
|
||
style="background: #ffffff;"
|
||
v-model="form.boxID"
|
||
:border="true"
|
||
:focus="true"
|
||
:trim="false"
|
||
@input="handlerInput"
|
||
/>
|
||
</u-form-item>
|
||
</u-form>
|
||
<view style="display: flex; justify-content: space-around;">
|
||
<view style="font-size: 30rpx;">已录入BOX个数：<u-tag style="vertical-align: top; font-size: 30rpx;" :text="datasource.length" type="primary" /></view>
|
||
<view style="font-size: 30rpx;">入库总数：<u-tag style="vertical-align: top; font-size: 30rpx;" :text="ProdCount" type="primary" /></view>
|
||
</view>
|
||
<u-card style="border: 1rpx solid #0081FF;" :show-head="false" :full="true" :body-style="{height: '220rpx'}" >
|
||
<view class="card-body" slot="body">
|
||
<u-row gutter="8" justify="between">
|
||
<u-col span="12">
|
||
<view class="info-label">BOX ID</view><view>{{ lastBox['box_id'] || "--" }}</view>
|
||
</u-col>
|
||
<u-col span="12">
|
||
<view class="info-label">录入时间</view><view>{{ lastBox['in_time'] || "--" }}</view>
|
||
</u-col>
|
||
<u-col span="6">
|
||
<view class="info-label">数量</view><view>{{ lastBox['cnt'] || "0" }}</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
</u-card>
|
||
<u-table
|
||
class="main-table"
|
||
>
|
||
<u-tr class="u-tr">
|
||
<u-th class="u-th">BOX ID</u-th>
|
||
<u-th class="u-th">录入时间</u-th>
|
||
<u-th class="u-th" width="140rpx">数量</u-th>
|
||
</u-tr>
|
||
<u-tr class="u-tr" v-for="(item,index) in datasource" :key="index">
|
||
<u-td class="u-td">{{ item.box_id }}</u-td>
|
||
<u-td class="u-td">{{ item.in_time }}</u-td>
|
||
<u-td class="u-td" width="140rpx">{{ item.cnt }}</u-td>
|
||
</u-tr>
|
||
</u-table>
|
||
</view>
|
||
<u-toast ref="uTakeOverToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {MaterialTakeOver} from '../../../common/api.js'
|
||
import {dateFormat} from "../../../utils/utils.js"
|
||
|
||
let timer = null;
|
||
export default {
|
||
data() {
|
||
return {
|
||
background: {
|
||
backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
|
||
},
|
||
form: {
|
||
boxID: '',
|
||
previewID: ''
|
||
},
|
||
datasource: [],
|
||
lastBox: {},
|
||
loadding: true,
|
||
username: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(function(){
|
||
this.loadding = false
|
||
timer = setInterval(() => {
|
||
uni.hideKeyboard()
|
||
}, 10)
|
||
})
|
||
this.username = uni.getStorageSync('username')
|
||
},
|
||
destroyed() {
|
||
if(timer) {
|
||
clearInterval(timer)
|
||
}
|
||
},
|
||
computed: {
|
||
ProdCount() {
|
||
let result = 0
|
||
for (let d of this.datasource) {
|
||
result += parseInt(d['cnt'])
|
||
}
|
||
return result
|
||
}
|
||
},
|
||
methods: {
|
||
handlerInput(value) {
|
||
if((value.length - this.form.previewID.length) > 1){
|
||
MaterialTakeOver({box_id: value,username: this.username}).then(res => {
|
||
if(res && res['mesg'] === 'success'){
|
||
this.showToast("收货成功", "success")
|
||
this.datasource.push(res['res'])
|
||
this.lastBox = res['res']
|
||
}else{
|
||
this.showToast("收货失败："+res['reason'], "error")
|
||
}
|
||
setTimeout(() => {
|
||
this.form.previewID = ''
|
||
this.form.boxID = ''
|
||
}, 100)
|
||
}).catch(err => {
|
||
this.showToast(err, 'error')
|
||
})
|
||
}
|
||
this.form.previewID = value
|
||
},
|
||
showToast(text, type) {
|
||
this.$refs.uTakeOverToast.show({
|
||
title: text,
|
||
type: type,
|
||
position: "bottom"
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
margin: 5rpx 18rpx;
|
||
}
|
||
|
||
.card-body {
|
||
::v-deep .u-col {
|
||
margin-bottom: 16rpx;
|
||
|
||
view {
|
||
display: inline-block;
|
||
}
|
||
|
||
view+view {
|
||
margin-left: 20rpx;
|
||
color: #068bff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.u-td {
|
||
height: 60rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
width: 120rpx;
|
||
}
|
||
|
||
.info-label{
|
||
width: 120rpx;
|
||
}
|
||
|
||
.main-table {
|
||
margin-bottom: 110rpx;
|
||
|
||
::v-deep .u-th {
|
||
background: #0081FF !important;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
</style>
|