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

<template>
    <!-- 编码出库-->
    <view class="page-container">
        <view class="table-list-item">
            <uni-row :gutter="24">
                <uni-col :span="6">领料单位：</uni-col>
                <uni-col :span="18">
                    <view class="cont">{{ queryParams.leaseUnit }}</view>
                </uni-col>
            </uni-row>
            <uni-row :gutter="24">
                <uni-col :span="6">领料工程：</uni-col>
                <uni-col :span="18">
                    <view class="cont">{{ queryParams.leaseProject }}</view>
                </uni-col>
            </uni-row>
            <uni-row :gutter="24">
                <uni-col :span="6">当前出库物资：</uni-col>
                <uni-col :span="18"
                    ><view class="cont">{{ queryParams.maTypeName }}</view>
                </uni-col>
            </uni-row>
            <uni-row :gutter="24">
                <uni-col :span="6">待出库数量：</uni-col>
                <uni-col :span="18">
                    <view class="cont">{{ maxNum }}</view>
                </uni-col>
            </uni-row>
        </view>

        <view class="table-list-item">
            <uni-row :gutter="24">
                <uni-col :span="6">出库方式：</uni-col>
                <uni-col :span="6">
                    <view class="coding-btn">编码识别</view>
                </uni-col>
                <uni-col :span="6">
                    <view class="coding-btn">编码识别</view>
                </uni-col>
                <uni-col :span="6">
                    <view class="coding-btn">二维码识别</view>
                </uni-col>
            </uni-row>
        </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 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;
                        "
                        @tap="onCodeSearch"
                        >编码检索
                    </view>
                </uni-col>
            </uni-row>
        </view>

        <scroll-view scroll-y @scrolltolower="onScrollTolower" style="padding-bottom: 85rpx">
            <view class="table-list-item" v-for="item in codeDeviceList" :key="item.maId">
                <uni-row :gutter="24">
                    <uni-col :span="5">物资类型：</uni-col>
                    <uni-col :span="15">
                        <view class="cont">{{ item.materialName }}</view>
                    </uni-col>
                    <uni-col :span="4">
                        <checkbox-group @change="onChangeChecked(item)">
                            <label>
                                <checkbox
                                    color="#409eff"
                                    borderColor="#409eff"
                                    activeBorderColor="#409eff"
                                    :checked="item.checked"
                                    :disabled="maxNum === isSelectNum && !item.checked"
                                    style="transform: scale(0.7)"
                                />
                            </label>
                        </checkbox-group>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="5">规格型号：</uni-col>
                    <uni-col :span="18">
                        <view class="cont">{{ item.materialModel }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="5">设备状态：</uni-col>
                    <uni-col :span="18">
                        <view class="cont">{{ item.statusName }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="5">设备数量：</uni-col>
                    <uni-col :span="18">
                        <view class="cont">1</view>
                    </uni-col>
                </uni-row>
            </view>

            <view class="loading-text">
                {{ finish ? '没有更多数据了~' : '正在加载...' }}
            </view>
        </scroll-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'
const query = defineProps() // 获取上级页面传递的路由参数
const queryParams = JSON.parse(query.queryParams)
const codeDeviceList = ref([])
const total = ref(0)

// 编码设备列表查询参数
const queryCodeParams = ref({
    pageNum: 1,
    pageSize: 10,
    typeId: queryParams.typeId,
    maStatus: 1,
})

// 计算出库最大数量
const maxNum = computed(() => {
    // 1. 先通过预领数量和已领数量计算剩余待出库数量
    const waitNum = queryParams.preNum - queryParams.alNum

    // 2. 判断库存数量是否大于待出库数量 如大于则取待出库数量 如小于则取库存书看了
    return total.value > waitNum ? waitNum : total.value
})

// 获取编码列表
const getCodeDeviceListData = async () => {
    // console.log('queryCodeParams', queryCodeParams)
    const res = await getCodeDeviceListAPI(queryCodeParams.value)
    codeDeviceList.value.push(...res.rows)

    if (codeDeviceList.value.length > 0) {
        codeDeviceList.value = codeDeviceList.value.map((e) => {
            return { ...e, checked: false }
        })
    }
    total.value = res.total
}
getCodeDeviceListData()

// 编码搜索按钮
const onCodeSearch = () => {
    codeDeviceList.value = []
    getCodeDeviceListData()
}

// 滚动触底事件
const onScrollTolower = () => {
    console.log('滚动触底--')
    if (total.value > codeDeviceList.value.length) {
        queryCodeParams.value.pageNum++
        getCodeDeviceListData()
    }
}

// 判断数据是否加载完毕
const finish = computed(() => {
    if (total.value === codeDeviceList.value.length) return true
})

// 复选框事件
const onChangeChecked = (item) => {
    item.checked = !item.checked
}

// 计算已选择数量
const isSelectNum = computed(() => {
    const isSelectList = codeDeviceList.value.filter((e) => e.checked === true)
    if (maxNum.value === isSelectList.length) {
        uni.showToast({
            title: '勾选设备已达到最大待出库数量！',
            icon: 'none',
        })
    }
    return isSelectList.length
})

// 出库按钮
const onHandleOutbound = async () => {
    const isSelect = codeDeviceList.value.some((e) => e.checked === true)

    if (!isSelect) {
        uni.showToast({
            title: '请勾选需要出库的设备',
            icon: 'none',
        })
        return
    }

    // 解构所需要的数据
    const { typeId, parentId } = queryParams
    // 组装出库参数
    const paramsList = []
    codeDeviceList.value.map((e) => {
        if (e.checked) {
            paramsList.push({
                leaseType: 0,
                maId: e.maId,
                manageType: 0,
                outNum: 1,
                parentId,
                typeId,
            })
        }
    })

    const res = await setOutboundNumAPI({ leaseOutDetailsList: paramsList })

    if (res.code === 200) {
        uni.showToast({
            title: '出库成功！',
            icon: 'none',
        })

        setTimeout(() => {
            // 返回上一个页面
            uni.navigateBack({
                delta: 1,
                success() {
                    uni.$emit('onUpdate')
                },
            })
        }, 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: 20rpx;
        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;
        }
    }
}
// 加载提示文字
.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>