bonus-material-app/src/pages/new-purchase/entry/code-inbound.vue

<template>
    <!-- 编码出库-->
    <view class="page-container">
        <!-- <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> -->


        <scroll-view scroll-y @scrolltolower="onScrollTolower" style="padding-bottom: 85rpx">
            <view class="table-list-item" v-for="item in codeDeviceList" :key="item.id">
                <uni-row :gutter="24">
                    <uni-col :span="7" >类型名称：</uni-col>
                    <uni-col :span="13">
                        <view class="cont">{{ queryParams.maTypeName }}</view>
                    </uni-col>
                    <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-row>
                <uni-row :gutter="24">
                    <uni-col :span="7">规格型号：</uni-col>
                    <uni-col :span="17">
                        <view class="cont">{{ queryParams.typeName }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="7">设备编码：</uni-col>
                    <uni-col :span="17">
                        <view class="cont">{{ item.maCode }}</view>
                    </uni-col>
                </uni-row>
            </view>

        </scroll-view>

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

<script setup>
import { ref, computed } from 'vue'
import { getMachineById,setInboundCodeAPI  } from '@/services/purchase.js'
import { onBackPress,onLoad } from '@dcloudio/uni-app'

const codeDeviceList = ref([])
const total = ref(0)
const query = defineProps() // 获取上级页面传递的路由参数
const queryParams = JSON.parse(query.queryParams)

// const typeId = ref('') 
// const taskId = ref('')
// const maTypeName = ref('')
// const typeName = ref('')

// 页面加载完毕
onLoad(() => {
    // typeId.value = options.typeId
	// taskId.value = options.taskId
    // maTypeName.value = options.maTypeName
    // typeName.value = options.typeName
    getCodeDeviceListData()

    // // 监听出库完成事件 刷新列表
    // uni.$on('onUpdate', () => {
    //     // console.log('监听事件')
    //     // 刷新列表
    //     getCodeDeviceListData()
    // })
})

// 获取编码列表
const getCodeDeviceListData = async () => {
    console.log('queryParams',queryParams)
    	let obj = {
		"typeId":queryParams.typeId,
		"taskId":queryParams.taskId,
	}
    const res = await getMachineById(obj)
    codeDeviceList.value.push(...res.data)

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


// 滚动触底事件
const onScrollTolower = () => {
    console.log('滚动触底--')
}


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

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

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

    // 组装入库参数
    const paramsList = []
    codeDeviceList.value.map((e) => {
        if (e.checked) {
            paramsList.push({
                maCode: e.maCode,
            })
        }
    })

    const res = await setInboundCodeAPI({taskId:queryParams.taskId, typeId:queryParams.typeId, purchaseId:queryParams.id, inPutList: 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>