464 lines
11 KiB
Vue
464 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
|
||
<!-- <div v-if="showPrompt" class="prompt">{{ promptMessage }}</div> -->
|
||
<!-- 添加新的加载效果 -->
|
||
<div v-if="showPrompt" class="custom-loading-overlay">
|
||
<div class="custom-loading-content">
|
||
<div class="custom-spinner"></div>
|
||
<p>{{ promptMessage }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<view class="btn-area">
|
||
<view @click="startVeri">开始识别</view>
|
||
<view @click="stopVeri">停止识别</view>
|
||
<view @click="openPop">接收</view>
|
||
</view>
|
||
<view class="number">
|
||
<h4>
|
||
待出库数：{{ waitOutNum }}
|
||
</h4>
|
||
<h4 style="margin-left: 15rpx;">
|
||
识别设备数：{{ veriDeviceNum }}
|
||
</h4>
|
||
</view>
|
||
<view class="table-container" v-show="tableData.length != 0">
|
||
<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
|
||
@selection-change="selectionChange">
|
||
<uni-tr>
|
||
<uni-th align="center">类型</uni-th>
|
||
<uni-th align="center">规格</uni-th>
|
||
<uni-th align="center">编码</uni-th>
|
||
</uni-tr>
|
||
<uni-tr v-for="(item, index) in tableData" :key="index">
|
||
<uni-td align="center">{{ item.typeName }}</uni-td>
|
||
<uni-td align="center">
|
||
<view class="name">{{ item.typeCode }}</view>
|
||
</uni-td>
|
||
<uni-td align="center">{{ item.maCode }}</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</view>
|
||
<uni-popup ref="popup1" type="center" :mask-click="false">
|
||
<view class="popup1">
|
||
<view class="pop-top">
|
||
<h4>接收类型</h4>
|
||
<uni-icons style="color: #AAAAAA; font-weight: bold;" type="closeempty" size="20"
|
||
@click="closePopup1">
|
||
</uni-icons>
|
||
</view>
|
||
<h5 style="width: 85%; margin: 2vh auto; font-weight: normal; text-align: center;">请选择接收方式</h5>
|
||
<view class="select-area">
|
||
<!-- <view @click="scanCode">二维码</view>
|
||
<view @click="codeOut">编码接收</view>
|
||
<view @click="rfidOut">RFID接收</view> -->
|
||
<uni-data-checkbox v-model="fixVal" :localdata="fixRange" @change="fixChange"></uni-data-checkbox>
|
||
</view>
|
||
<!-- <view class="ipt-area">
|
||
<uni-easyinput v-model="codeVal" placeholder="请输入编码"></uni-easyinput>
|
||
</view> -->
|
||
<view class="btn" @click="confirmDevice">确定</view>
|
||
</view>
|
||
</uni-popup>
|
||
<u-loading-page :loading="showLoading" color="#000" loading-text="获取设备中,请稍后..."></u-loading-page>
|
||
<u-loading-page :loading="showSubLoading" color="#000" loading-text="提交中,请稍后..."></u-loading-page>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const rfidMod = uni.requireNativePlugin('BNS-RfidRed')
|
||
export default {
|
||
data() {
|
||
return {
|
||
waitOutNum: '',
|
||
veriDeviceNum: 0,
|
||
searchVal: '',
|
||
tableData: [
|
||
/* {
|
||
type: '牵引机',
|
||
model: '90KN',
|
||
code: 'NSJJ432003524010010'
|
||
},
|
||
{
|
||
type: '牵引机',
|
||
model: '120KN',
|
||
code: 'NSXX226003524010010'
|
||
},
|
||
{
|
||
type: '牵引机',
|
||
model: '150KN',
|
||
code: 'NSRR432003524010010'
|
||
} */
|
||
],
|
||
// 每页数据量
|
||
pageSize: 10,
|
||
// 当前页
|
||
pageCurrent: 1,
|
||
// 数据总量
|
||
total: 0,
|
||
loading: false,
|
||
subList: [],
|
||
sendTypeId: '',
|
||
parentId: '',
|
||
taskId: '',
|
||
fixVal: '',
|
||
fixRange: [{
|
||
text: '合格',
|
||
value: '1'
|
||
},
|
||
{
|
||
text: '待修',
|
||
value: '2'
|
||
},
|
||
{
|
||
text: '待报废',
|
||
value: '3'
|
||
}
|
||
],
|
||
showLoading: false,
|
||
showSubLoading: false,
|
||
showPrompt: false, // 控制提示框的显示状态
|
||
promptMessage: '' // 存储提示信息
|
||
}
|
||
},
|
||
methods: {
|
||
selectedItems() {
|
||
return this.selectedIndexs.map(i => this.tableData[i])
|
||
},
|
||
selectionChange(e) {
|
||
let that = this
|
||
that.selectedIndexs = e.detail.index.sort((a, b) => {
|
||
return a - b
|
||
})
|
||
console.log(that.selectedIndexs);
|
||
},
|
||
openPop() {
|
||
if (this.selectedIndexs.length == 0) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '未选中设备！'
|
||
})
|
||
} else {
|
||
this.$refs.popup1.open()
|
||
}
|
||
},
|
||
confirmDevice() {
|
||
let that = this
|
||
console.log(that.subList)
|
||
console.log(that.sendTypeId)
|
||
let ifAllRight = that.subList.some(item => {
|
||
return item.typeId != that.sendTypeId
|
||
})
|
||
console.log(ifAllRight);
|
||
if (that.fixVal == '') {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请选择一种维修方式！'
|
||
})
|
||
} else if (ifAllRight == true) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '设备类型不完全匹配，请重新扫描！'
|
||
})
|
||
} else if (that.subList.length > that.waitOutNum) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '出库数量大于待出库数量！'
|
||
})
|
||
} else {
|
||
that.showSubLoading = true
|
||
console.log(that.subList);
|
||
that.subList = that.subList.map(item => {
|
||
return {
|
||
parentId: that.parentId,
|
||
typeId: that.sendTypeId,
|
||
backNum: '1',
|
||
backStatus: that.fixVal,
|
||
manageType: item['manageType'],
|
||
createBy: uni.getStorageSync('userInfo').userid,
|
||
maId: item['maId']
|
||
}
|
||
})
|
||
let param = {
|
||
taskId: that.taskId,
|
||
arr: that.subList
|
||
}
|
||
console.log(param);
|
||
// 提交设备信息
|
||
that.$api.backMaterialReceive.subRfid(param).then(res => {
|
||
console.log(res);
|
||
if (res.data.code == 200) {
|
||
that.showSubLoading = false
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.data.msg,
|
||
success: () => {
|
||
uni.navigateBack()
|
||
}
|
||
})
|
||
} else {
|
||
that.showSubLoading = false
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.data.msg
|
||
})
|
||
}
|
||
}).catch(err => {
|
||
console.log(err);
|
||
})
|
||
}
|
||
},
|
||
fixChange(e) {
|
||
let that = this
|
||
that.subList = []
|
||
for (let i = 0; i < that.selectedIndexs.length; i++) {
|
||
that.subList.push(that.tableData[that.selectedIndexs[i]])
|
||
}
|
||
},
|
||
/* outStore () {
|
||
let that = this
|
||
that.subList = []
|
||
for (let i = 0; i < that.selectedIndexs.length; i++) {
|
||
that.subList.push(that.tableData[that.selectedIndexs[i]])
|
||
}
|
||
that.subList = that.tableData.filter((item) => {
|
||
return item.checked == true
|
||
})
|
||
that.tableData = that.tableData.filter((item) => {
|
||
return item.checked != true
|
||
})
|
||
if (that.subList.length == 0) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请选择至少一台设备！'
|
||
})
|
||
} else {
|
||
that.subList = that.subList.map(item => {
|
||
return {
|
||
parentId: that.parentId,
|
||
typeId: that.sendTypeId,
|
||
backNum: '1',
|
||
|
||
}
|
||
})
|
||
console.log(that.subList);
|
||
}
|
||
}, */
|
||
startVeri() {
|
||
let that = this
|
||
that.showPrompt = true;
|
||
that.promptMessage = '识别中，请稍候...';
|
||
// 延迟关闭提示，显示Toast
|
||
setTimeout(() => {
|
||
let b = rfidMod.initUHF()
|
||
console.log(b);
|
||
let goVeri = rfidMod.redTag()
|
||
console.log(goVeri);
|
||
if (goVeri.code == 1001) {
|
||
that.showLoading = true
|
||
that.showPrompt = false; // 关闭提示
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '识别成功',
|
||
success: () => {
|
||
// 调用编码获取设备信息
|
||
that.$api.backMaterialReceive.searchRfid({
|
||
rfidCode: goVeri.res
|
||
}).then(res => {
|
||
console.log(res);
|
||
if (res.data.code == 200) {
|
||
that.showLoading = false
|
||
that.veriDeviceNum = that.veriDeviceNum + res.data.data
|
||
.length
|
||
if (res.data.data.length > 0) {
|
||
for (let i = 0; i < res.data.data.length; i++) {
|
||
that.tableData.push(res.data.data[i])
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: "未找到相关信息"
|
||
})
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
console.log(err);
|
||
})
|
||
}
|
||
})
|
||
} else if (goVeri.code == 1000) {
|
||
that.showPrompt = false; // 关闭提示
|
||
that.showLoading = false
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '获取设备信息失败，请重新扫描！'
|
||
})
|
||
}
|
||
}, 1000)
|
||
},
|
||
stopVeri() {
|
||
let endVeri = rfidMod.closeRfid()
|
||
console.log(endVeri);
|
||
if (endVeri.code == 1001) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: endVeri.res
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: endVeri.res
|
||
})
|
||
}
|
||
},
|
||
closePopup1() {
|
||
this.fixVal = ''
|
||
this.$refs.popup1.close()
|
||
}
|
||
},
|
||
onLoad(params) {
|
||
console.log(params);
|
||
this.selectedIndexs = []
|
||
this.waitOutNum = params.waitOut
|
||
this.sendTypeId = params.typeId
|
||
this.parentId = params.parentId
|
||
this.taskId = params.taskId
|
||
// 初始化rfid识别
|
||
const obj = rfidMod.initUHF()
|
||
console.log(obj);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.btn-area {
|
||
width: 90%;
|
||
margin: 20rpx auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
view {
|
||
width: 30%;
|
||
box-sizing: border-box;
|
||
padding: 15rpx;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #169BD5;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
|
||
view:last-child {
|
||
background-color: #70B603;
|
||
}
|
||
}
|
||
|
||
.number {
|
||
width: 90%;
|
||
margin: 20rpx auto;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
h4 {
|
||
font-weight: normal;
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.table-container {
|
||
width: 90%;
|
||
margin: 20rpx auto;
|
||
}
|
||
|
||
.popup1 {
|
||
width: 80vw;
|
||
height: 30vh;
|
||
background-color: #fff;
|
||
border-radius: 15rpx;
|
||
overflow: hidden;
|
||
background: linear-gradient(#D9E7FE, #fff, #fff, #fff);
|
||
|
||
.pop-top {
|
||
width: 100%;
|
||
height: 5vh;
|
||
box-sizing: border-box;
|
||
padding: 0 25rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.select-area {
|
||
width: 85%;
|
||
margin: 40rpx auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
/* view {
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
padding: 10rpx 20rpx;
|
||
border: 1px solid #D5D5D4;
|
||
border-radius: 20rpx;
|
||
} */
|
||
}
|
||
|
||
.ipt-area {
|
||
width: 85%;
|
||
margin: 40rpx auto;
|
||
}
|
||
|
||
.btn {
|
||
width: 60%;
|
||
margin: 2vh auto;
|
||
box-sizing: border-box;
|
||
padding: 15rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 15rpx;
|
||
color: #fff;
|
||
background-color: #169BD5;
|
||
}
|
||
}
|
||
|
||
// 添加新的加载效果样式
|
||
.custom-loading-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.custom-loading-content {
|
||
background-color: white;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.custom-spinner {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 4px solid #f3f3f3;
|
||
border-top: 4px solid #3498db;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin-bottom: 10px;
|
||
}
|
||
</style> |