为了方便入库员操作，我们可以使用扫码设备让入库员在移动终端上进行入库操作，在点击入库功能时，入库员即可看见即将需要入库的产品及数量，扫码后通过颜色标记，让入库员能快速辨别哪些产品入库了多少。

准备工作：

1、在白码低代码开发平台上创建产品数据表，并录入若干产品数据

2、创建入库单数据表，并录入若干待数据

3、创建入库记录表

实现步骤:

1、创建入库功能，并添加“集合-获取-入库单”步骤（未入库列表），筛选状态不为“已入库”的数据。

2、添加“集合-新增-入库记录”步骤（入库信息），“$关联”设为“未入库列表”；“产品”设为填写，开启扫码枪，搜索编号属性，绑定“实际入库数量”属性；“拟入库数量”设为“未入库列表”的“待入库数量”，操作员及入库时间设为系统。

3、获取相关id属性

未入库列表步骤id：

入库信息步骤id：

以及两个步骤对应的属性id：

4、添加“交互-预处理”步骤，编写下方代码

function prepare($programStore, $form, vue) {
    //扫码枪使用硬件扫码枪而非摄像头
    vue.$store.dispatch("view/extend/scanGun/setMode", "hardware");
    _.delay(function () {//延迟100ms再执行，避免未渲染就执行了
        //监控表单数据
        let procedure1 = "60af103e4ba5ab636e2f3c31";//步骤：未入库列表步骤id
        let procedure2 = "60af113f4ba5ab636e2f3c4e";//步骤：入库信息步骤id
        vue.$watch(() => { return programStore.getters["getFormValue"](procedure2) },//监控入库信息步骤
            function (value, oldValue) {
                vue.$nextTick(() => {
                    let list = value.data || [];//当前数据
                    let oldList = oldValue.data || [];//改变前数据
                    if (!_.isEqual(list, oldList)) {//数据发生变化时处理
                        //未入库列表数据
                        let proList = programStore.getters["getFormValue"](procedure1);
                        //入库信息步骤移动端删除按钮元素，class名请自行在前端F12切换到移动端查找，一般就叫 item-remove
                        let remove_list = document.querySelectorAll(".item-remove");
                        //入库信息步骤移动端的行元素，class名请自行在前端F12切换到移动端查找，一般就是 local-list 下的 item
                        let itemList = document.querySelectorAll(".local-list .item");
                        for (let i = 0; i < list.length; i++) {//循环入库信息步骤数据
                            //隐藏删除按钮
                            let remove_item = remove_list.item(i);
                            if (remove_item) { remove_item.hidden = true; }
                            //给入库信息的产品属性与未入库列表的产品属性一 一对应
                            list[i]["60af11d2cec155636dbe5dd3"] = proList.data[i]["60af07be01f2e53925cc9f64"];
                            //是否入库:实际入库数量大于等于拟入库数量
                            let isSWarehousing = new Number(list[i]["60af11d8b6c7d5637c90586b"]) >= new Number(list[i]["60af12d04ba5ab636e2f3ce8"]);
                            if (isSWarehousing) {
                                //将对应的行背景变色
                                if (itemList[i]) {
                                    itemList[i].style.background = "#efefef";
                                }
                            }
                        }
                        //将更新后的数据赋给入库信息步骤
                        value.data = list;
                        programStore.dispatch("set", { procedure: procedure2, value });
                    }
                })
            });
    }, 100);
}

5、添加编程步骤，编写以下代码

async function runProcess($model = model, $plugin = plugin, $params = params) {
    let orderList = $params.orderList;
    let recordList = $params.recordList;
    recordList.forEach(item => {
        if (item["60af11d8b6c7d5637c90586b"] != "0") {
            let order = orderList.find(o => {
                //返回入库记录产品等于入库单产品的入库单
                return o["60af07be01f2e53925cc9f64"] == item["60af11d2cec155636dbe5dd3"];
            });
            if (order) {
                let orderNeedNum=new Number(order["60af0f2a0cbcf66375d08bca"]);//原待入库数量
                let orderNum = new Number(order["60af07ce04d983391fd5b35d"]);//原已入库数量
                let recordNum = new Number(item["60af11d8b6c7d5637c90586b"]);//实际入库数量
                $plugin.data.updateData("60af07a004d983391fd5b35b", order._id, {
                    "60af07ce04d983391fd5b35d": orderNum + recordNum,//已入库
                    "60af0f2a0cbcf66375d08bca": orderNeedNum - recordNum,//待入库
                    "60af0fb80cbcf66375d08bd1": orderNeedNum - recordNum > 0 ? "待入库" : "已入库",
                });
            }
        } else {
            //删除无效入库记录
            $plugin.data.removeData("60af11c7b6c7d5637c90586a", item._id);
        }
    });
}

6、效果（PC上模拟扫码枪焦点输入）