bonus-material-app/src/pages/standardBox/codeList.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>