bonus-material-app/src/pages/picking/outbound/code-outScan.vue

<template>
    <!-- 编码出库-->
    <view class="page-container">
        <view class="table-list-item">
            <uni-forms :model="formData" label-width="100" :border="true">
                <uni-forms-item label="领料单位：" name="leaseUnit">
                    <span class="form-view">{{ queryParams.leaseUnit }}</span>
                </uni-forms-item>
                <uni-forms-item label="领料工程：" name="leaseProject">
                    <span class="form-view">{{ queryParams.leaseProject }}</span>
                </uni-forms-item>
                <uni-forms-item label="物资类型：" name="maTypeName">
                    <span class="form-view">{{ queryParams.maTypeName }}</span>
                </uni-forms-item>
                <uni-forms-item label="规格型号：" name="typeName">
                    <span class="form-view">{{ queryParams.typeName }}</span>
                </uni-forms-item>
                <uni-forms-item label="待出库数量：" name="maxNum">
                    <span class="form-view">{{ maxNum }}</span>
                </uni-forms-item>
            </uni-forms>
        </view>

        <view class="table-list-item">
            <button class="scan-btn" @click="scanStart">开始扫码</button>
        </view>
        <view class="table-list-item">
            <uni-row :gutter="24" style="display: flex; align-items: center">
                <uni-col :span="6">
                    <view> 设备编码 </view>
                </uni-col>
                <uni-col :span="12">
                    <view>
                        <uni-easyinput v-model="queryCodeParams.maCode" placeholder="请输入内容" />
                    </view>
                </uni-col>
                <uni-col :span="6">
                    <view
                        class="coding-btn"
                        style="
                            padding: 10rpx 0;
                            color: #fe9a09;
                            background-color: #fff7eb;
                            border: 1px solid #fe9a09;
                        "
                        @click="getMaInfo"
                        >编码检索</view
                    >
                </uni-col>
            </uni-row>
        </view>
        <view class="table-list-item">
            <uni-forms :model="codeData" label-width="100" :border="true">
                <uni-forms-item label="物资类型：" name="materialName">
                    <span class="form-view">{{ codeData.materialName }}</span>
                </uni-forms-item>
                <uni-forms-item label="规格型号：" name="materialModel">
                    <span class="form-view">{{ codeData.materialModel }}</span>
                </uni-forms-item>
                <uni-forms-item label="设备状态：" name="statusName">
                    <span class="form-view">{{ codeData.statusName }}</span>
                </uni-forms-item>
                <uni-forms-item label="设备数量：">
                    <span class="form-view">1</span>
                </uni-forms-item>
            </uni-forms>
        </view>

        <view class="outbound-btn" @tap="onHandleOutbound"> 出库 </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { getCodeDeviceListAPI, setOutboundNumAPI } from '@/services/picking/outbound.js'
import { onBackPress } from '@dcloudio/uni-app'
import { debounce } from 'lodash-es'
import { onShow } from '@dcloudio/uni-app'
import { onLoad } from '@dcloudio/uni-app'
// const query = defineProps() // 获取上级页面传递的路由参数
// const queryParams = JSON.parse(query.queryParams)
const queryParams = ref({})
const formData = ref({})
const codeData = ref({})
const codeNum = ref(0)
// 编码设备列表查询参数
const queryCodeParams = ref({
    pageNum: 1,
    pageSize: 10,
    typeId: '',
    maStatus: 1,
    maCode: '',
})

onLoad((options) => {
    queryParams.value = JSON.parse(options.queryParams)
    queryCodeParams.value.typeId = queryParams.value.typeId
})
// 计算出库最大数量
const maxNum = computed(() => {
    // 通过预领数量和已领数量计算剩余待出库数量
    const waitNum = queryParams.value.preNum - queryParams.value.alNum - codeNum.value
    return waitNum
})
// 扫码识别按钮
const scanStart = () => {
    console.log('编码识别--')
    // 只允许通过相机扫码
    uni.scanCode({
        onlyFromCamera: true,
        scanType: ['qrCode', 'pdf417'],
        success: (res) => {
            console.log('扫码结果：' + res.result)
            queryCodeParams.value.maCode = res.result
        },
        fail: (err) => {
            // uni.showToast({
            // 	title: '取消',
            // 	icon: 'none'
            // });
        },
    })
}

//根据编码获取设备类型
const getMaInfo = async () => {
    console.log('queryCodeParams', queryCodeParams.value)
    const res = await getCodeDeviceListAPI(queryCodeParams.value)
    console.log(res)
    if (res.code == 200) {
        if (res.rows && res.rows.length > 0) {
            codeData.value = res.rows[0]
        } else {
            uni.showToast({ title: '未查询到该编码', icon: 'none' })
        }
    }
}

// 出库按钮
const onHandleOutbound = async () => {
    // 组装出库参数
    const paramsList = [codeData.value]
    const res = await setOutboundNumAPI({ leaseOutDetailsList: paramsList })
    if (res.code === 200) {
        uni.showToast({
            title: '出库成功！',
            icon: 'none',
        })
        queryCodeParams.value.maCode = ''
        codeData.value = {}
        codeNum.value = codeNum.value + 1
        uni.$emit('onUpdate', codeNun.value)
    }
}
// 页面加载完毕
onShow(() => {
    setTimeout(() => {
        scanStart()
    }, 500)
})
</script>

<style lang="scss" scoped>
.page-container {
    display: flex;
    height: 100%;
    padding: 0 15rpx;
    flex-direction: column;
    background-color: #e8f5fb;

    .table-list-item {
        margin: 5rpx 0;
        padding: 10rpx;
        background-color: #fff;
        border-radius: 10rpx;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .coding-btn {
            padding: 5rpx 0;
            background-color: #409eff;
            border-radius: 6rpx;
            text-align: center;
            color: #fff;
            font-size: 14px;
        }
    }
}
.scan-btn {
    width: 94%;
    margin: 5px auto;
}
.form-view {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
// 加载提示文字
.loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
}

.outbound-btn {
    position: fixed;
    bottom: 15rpx;
    left: 15%;
    width: 70%;
    height: 65rpx;
    line-height: 65rpx;
    text-align: center;
    background-color: #19be6b;
    border-radius: 12rpx;
    color: #fff;
}
</style>