474 lines
14 KiB
Vue
474 lines
14 KiB
Vue
<template>
|
||
<view class="accept page-common">
|
||
<uni-row :gutter="24" class="search-form">
|
||
<uni-col :span="16">
|
||
<view><uni-easyinput placeholder="请输入内容" v-model="searchValue"/></view>
|
||
</uni-col>
|
||
<uni-col :span="4">
|
||
<view class="search" @click="getCodeList()">查询</view>
|
||
</uni-col>
|
||
<uni-col :span="4">
|
||
<view class="addBtn" @click="scanStart">扫码</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<div class="card" style="margin-top: 10px;">
|
||
<uni-forms :model="boxInfo" label-width="200rpx" :border="true">
|
||
<uni-forms-item label="标准箱名称：" name="boxName">
|
||
<span style="height: 100%;display: flex;align-items: center;">{{ boxInfo.boxName }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="标准箱编码：" name="boxCode">
|
||
<span style="height: 100%;display: flex;align-items: center;">{{ boxInfo.boxCode }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="物资类型：" name="typeName">
|
||
<span style="height: 100%;display: flex;align-items: center;">{{ boxInfo.typeName }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="规格型号：" name="typeModelName">
|
||
<span style="height: 100%;display: flex;align-items: center;">{{ boxInfo.typeModelName }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="已录入数量：" name="devNum">
|
||
<span style="height: 100%;display: flex;align-items: center;">{{ boxInfo.devNum }}</span>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
<div style="width: 98%;height: auto;">
|
||
<div style="margin-bottom: 10px;">绑定清单</div>
|
||
<uni-table border stripe emptyText="暂无更多数据" >
|
||
<!-- 表头行 -->
|
||
<uni-tr>
|
||
<uni-th width="70px" align="center" style="font-size: 24rpx;">编码</uni-th>
|
||
<uni-th width="55px" align="center" style="font-size: 24rpx;">状态</uni-th>
|
||
<uni-th width="55px" align="center" style="font-size: 24rpx;">录入人</uni-th>
|
||
<!-- <uni-th width="80px" align="center" style="font-size: 24rpx;">录入时间</uni-th> -->
|
||
<uni-th width="50px" align="center" style="font-size: 24rpx;">操作</uni-th>
|
||
</uni-tr>
|
||
<!-- 表格数据行 -->
|
||
<uni-tr v-for="item in codeList" :key="item.id">
|
||
<uni-td style="font-size: 22rpx;" align="center">{{item.maCode}}</uni-td>
|
||
<uni-td style="font-size: 22rpx;" align="center">{{item.maStatus}}</uni-td>
|
||
<uni-td style="font-size: 22rpx;" align="center">{{item.createBy}}</uni-td>
|
||
<!-- <uni-td style="font-size: 22rpx;">{{item.createTime}}</uni-td> -->
|
||
<uni-td>
|
||
<view class="uni-group">
|
||
<span style="color: red;margin-left:10px;font-size: 20rpx;" @click="delRow(item)">删除</span>
|
||
</view>
|
||
</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn">
|
||
<button class="btn-cont" style="width: 90%;" @click="transfer">移交</button>
|
||
</div>
|
||
|
||
<ScanQrCode
|
||
ref="scanQrCodeRef"
|
||
@scanSuccess="handleScanSuccess"
|
||
@scanError="handleScanError"
|
||
/>
|
||
|
||
<uni-popup ref="keeperPopup" type="bottom" border-radius="10px 10px 0 0">
|
||
<view class="keeper-popup">
|
||
<view class="handle-box">
|
||
<view class="handle-box-btn" style="background: #CCC;color: #FFF;" @click="closePopup">取消</view>
|
||
<view class="handle-box-btn" style="background: #3784fb;color: #FFF;" @click="confirmTransfer">确定</view>
|
||
</view>
|
||
<scroll-view scroll-y style="padding-bottom: 85rpx" class="keeper-box" v-if="keeperList.length>0">
|
||
<view class="table-list-item" v-for="item in keeperList" :key="item.id">
|
||
<uni-row :gutter="24">
|
||
<uni-col :span="4">
|
||
<checkbox-group @change="onChangeChecked(item)">
|
||
<label>
|
||
<checkbox
|
||
color="#409eff"
|
||
borderColor="#409eff"
|
||
activeBorderColor="#409eff"
|
||
:checked="item.checked"
|
||
style="transform: scale(0.7)"
|
||
/>
|
||
</label>
|
||
</checkbox-group>
|
||
</uni-col>
|
||
<uni-col :span="12">
|
||
<view class="cont">{{ item.userName }}</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
</scroll-view>
|
||
<view v-else style="width: 100%;margin-top: 20px;text-align: center;">暂无库管员...</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue'
|
||
import { onLoad,onShow } from '@dcloudio/uni-app'
|
||
import { getAppBoxDetailListApi,appBindMaCodeApi,appUnbindMaCodeApi,getTransferKeepsListApi,appTransferApi } from '../../services/standard.js';
|
||
import { getMaCodeByQrCodeApi } from '@/services/index.js';
|
||
import { baseURL } from '@/utils/http'
|
||
import ScanQrCode from '@/pages/devicesSearch/ScanQrCode.vue'
|
||
const scanQrCodeRef = ref(null)
|
||
const keeperPopup = ref(null);
|
||
const searchValue = ref('')
|
||
const boxInfo = ref({})
|
||
const codeList = ref([])
|
||
const keeperList = ref([])
|
||
const transferUser = ref("")
|
||
const imgBeseUrl = ref("")
|
||
const bmFileInfos = ref([])//请求图片参数
|
||
const getCodeList = () => {
|
||
console.log(boxInfo.value)
|
||
let param = {
|
||
"boxId":boxInfo.value.boxId
|
||
}
|
||
getAppBoxDetailListApi(param).then(res => {
|
||
console.log(res)
|
||
if(res.code=200){
|
||
codeList.value = res.data.rows;
|
||
boxInfo.value.devNum = codeList.value.length;
|
||
if(codeList.value.length>0){
|
||
boxInfo.value.typeName=codeList.value[0].typeName;
|
||
boxInfo.value.typeModelName=codeList.value[0].typeModelName;
|
||
}else{
|
||
boxInfo.value.typeName="";
|
||
boxInfo.value.typeModelName="";
|
||
}
|
||
getKeeperList()
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
// 扫码识别按钮
|
||
// 二维码扫码
|
||
const scanStart = async () => {
|
||
// var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
|
||
// mpaasScanModule.mpaasScan({
|
||
// // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
|
||
// 'scanType': ['qrCode','barCode'],
|
||
// // 是否隐藏相册，默认false不隐藏
|
||
// 'hideAlbum': false,
|
||
// //ios需要设置这个参数，只支持中英文 zh-Hans、en，默认中文
|
||
// 'language' : 'en',
|
||
// //相册选择照片识别错误提示(ios)
|
||
// 'failedMsg': '未识别到二维码，请重试',
|
||
// //Android支持全屏需要设置此参数
|
||
// 'screenType': 'full'
|
||
// },(ret) => {
|
||
// console.log(ret)
|
||
// if(ret.resp_code==10){
|
||
// uni.showToast({ title: '用户取消', icon: 'none' })
|
||
// }
|
||
// if(ret.resp_code==11){
|
||
// uni.showToast({ title: '扫码失败', icon: 'none' })
|
||
// }
|
||
// if(ret.resp_code==1000){
|
||
// let qrCode = ret.resp_result.split("qrcode=")[1];
|
||
// bindMa(qrCode)
|
||
// }
|
||
// })
|
||
if (scanQrCodeRef.value) {
|
||
scanQrCodeRef.value.scanQrCode()
|
||
}
|
||
|
||
}
|
||
|
||
// 处理扫描成功事件
|
||
const handleScanSuccess = (result) => {
|
||
const qrCode = result?.text || '';
|
||
if (qrCode === '') {
|
||
uni.showToast({ title: '扫码识别失败', icon: 'none' })
|
||
} else {
|
||
// 原代码中 split 处理逻辑
|
||
const actualQrCode = qrCode.split("qrcode=")[1] || qrCode;
|
||
bindMa(actualQrCode)
|
||
}
|
||
}
|
||
|
||
// 处理扫描失败事件
|
||
const handleScanError = (error) => {
|
||
console.error('扫描出错:', error.message)
|
||
uni.showToast({ title: error.message, icon: 'none' })
|
||
}
|
||
|
||
//绑定接口
|
||
const bindMa = (qrCode) => {
|
||
console.log(qrCode)
|
||
let param = {
|
||
"qrCode":qrCode,
|
||
"boxId":boxInfo.value.boxId,
|
||
}
|
||
console.log(param)
|
||
appBindMaCodeApi(param).then(res => {
|
||
console.log(res)
|
||
if(res.code==200){
|
||
uni.showToast({ title: '绑定成功', icon: 'none' })
|
||
getCodeList()
|
||
setTimeout(()=>{
|
||
scanStart()
|
||
},500)
|
||
}else{
|
||
uni.showToast({ title: '绑定失败', icon: 'none' })
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
//解绑
|
||
const delRow = (item) => {
|
||
console.log(item)
|
||
// 弹框确认
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要解绑吗？',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
let param = {
|
||
id: item.id,
|
||
boxId: boxInfo.value.boxId,
|
||
}
|
||
console.log(param)
|
||
appUnbindMaCodeApi(param).then(res => {
|
||
console.log(res)
|
||
if(res.code==200){
|
||
uni.showToast({ title: '解绑成功', icon: 'none' })
|
||
|
||
getCodeList()
|
||
}else{
|
||
uni.showToast({ title: '解绑失败', icon: 'none' })
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
const getKeeperList = () => {
|
||
//{"maTypeId":codeList.value[0].maTypeId}
|
||
getTransferKeepsListApi({"maTypeId":codeList.value[0].maTypeId}).then(res => {
|
||
console.log(res)
|
||
if(res.code=200){
|
||
keeperList.value = res.data;
|
||
if (keeperList.value.length > 0) {
|
||
keeperList.value = keeperList.value.map((e) => {
|
||
return { ...e, checked: false }
|
||
})
|
||
}
|
||
console.log(keeperList)
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
|
||
// 复选框事件
|
||
const onChangeChecked = (item) => {
|
||
item.checked = !item.checked
|
||
if(item.checked){
|
||
keeperList.value.forEach((e) => {
|
||
if(e.userId==item.userId){
|
||
transferUser.value=item.userId;
|
||
e.checked=true
|
||
}else{
|
||
e.checked=false
|
||
}
|
||
})
|
||
}else{
|
||
transferUser.value="";
|
||
}
|
||
|
||
}
|
||
const transfer = () => {
|
||
keeperPopup.value.open('bottom');
|
||
}
|
||
const closePopup = () => {
|
||
keeperPopup.value.close();
|
||
}
|
||
const confirmTransfer = () => {
|
||
if(transferUser.value!=""){
|
||
let param = {
|
||
"boxId":boxInfo.value.boxId,
|
||
"transferUser":transferUser.value,
|
||
}
|
||
appTransferApi(param).then(res => {
|
||
console.log(res)
|
||
if(res.code=200){
|
||
keeperPopup.value.close();
|
||
uni.showToast({ title: '移交成功!', icon: 'none' })
|
||
setTimeout(()=>{
|
||
uni.navigateBack({
|
||
delta: 1 // 返回到已存在的页面
|
||
});
|
||
},500)
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
}else{
|
||
uni.showToast({ title: '请先勾选移交人!', icon: 'none' })
|
||
}
|
||
|
||
}
|
||
|
||
|
||
onLoad((options)=>{
|
||
console.log(options)
|
||
boxInfo.value = JSON.parse(options.boxInfo)
|
||
boxInfo.value.typeName="";
|
||
boxInfo.value.typeModelName="";
|
||
console.log(boxInfo.value)
|
||
// getCodeList()
|
||
})
|
||
onShow(()=>{
|
||
getCodeList()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.accept {
|
||
padding: 10px;
|
||
height: 95vh;
|
||
word-break: break-all;
|
||
}
|
||
.card {
|
||
padding: 10px;
|
||
background-color: #fff;
|
||
border-radius: 6px;
|
||
box-shadow: 0 2upx 4upx 0 rgba(0, 0, 0, 0.1);
|
||
:deep(.uni-forms-item--border) {
|
||
padding: 5px 0;
|
||
}
|
||
|
||
|
||
}
|
||
.coding-btn {
|
||
padding: 5rpx 0;
|
||
background-color: #409eff;
|
||
border-radius: 6rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
.upload {
|
||
width: 80px;
|
||
height: 80px;
|
||
background-color: #f5f5f5;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 20px;
|
||
color: #ccc;
|
||
margin-top: 10px;
|
||
}
|
||
.search-form {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #fff;
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||
|
||
:deep(.uni-easyinput__content) {
|
||
background-color: #f7f8fa;
|
||
border: 2rpx solid #e8e8e8;
|
||
border-radius: 12rpx;
|
||
height: 80rpx;
|
||
transition: all 0.3s ease;
|
||
|
||
&:focus-within {
|
||
border-color: #3784fb;
|
||
box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
|
||
}
|
||
}
|
||
}
|
||
|
||
.search {
|
||
height: 80rpx;
|
||
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
color: #fff;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: translateY(2rpx);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
.addBtn {
|
||
height: 80rpx;
|
||
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
color: #fff;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: translateY(2rpx);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
.btn {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-top: 30px;
|
||
|
||
.btn-cont {
|
||
width: 40%;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
background-color: #3784fb;
|
||
color: #fff;
|
||
border-radius: 20px;
|
||
// 取消按钮淡蓝色
|
||
// &:first-child {
|
||
// background-color: #aacefb;
|
||
// }
|
||
}
|
||
}
|
||
.keeper-popup{
|
||
width: 100%;
|
||
height: 40vh;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
|
||
.handle-box{
|
||
width: 94%;margin: 10px auto;
|
||
padding-top: 10px;
|
||
display: flex;
|
||
align-items: center;justify-content: space-between;
|
||
.handle-box-btn{
|
||
width: 60px;
|
||
height: 32px;line-height: 32px;
|
||
text-align: center;
|
||
border-radius: 5px;
|
||
}
|
||
}
|
||
.keeper-box{
|
||
width: 94%;margin: 10px auto;
|
||
height: 36vh;
|
||
}
|
||
.table-list-item{
|
||
width: 90%;
|
||
margin: 5px auto;
|
||
height: 30px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
}
|
||
</style>
|