捡货单案例

一、分析原型图

• 首先梳理原型图(UI设计图)，了解需求，看我们要实现什么样的效果
• 利用我们强大的YonBuilder，一定可以帮我们实现
• 接下来我为大家展示一个案例，下图为原型图

二、根据分析，浮现操作流程(数据建模)

• 如上图得知，下表跟上表的数据是联动的。因此我们需要创建上下俩张表，我们让其为父子关系，(上表为父，下表为子)然后要通过数据建模，建立对应的字段，为了让每个字段名语义化，所以介意字段名写为一些有意义的英文(下图为上表数据建模的字段)

  

• 下图为下表数据建模的字段

  

• 上面说到上表与下表为父子关系，所以在建模的时候也要注意(下图为强调上下表在数据建模的关系)

三、页面建模

• 点到页面建模页，选择一主多子(如下图所示)

• 紧接着就是下图的操作

  

• 然后点击完成后，就会出现下图页面，

• 在按照下图的操作，我们点一下小眼睛就会预览页面

• 点击进去后，不要懵，这就是我们强大的YonBuilder为我们实现的，至于里面的数据呢，是我通过点击新增按钮添加的(如下图)

• 到了这里，我们要的上表已经出来了，此时是不是很有信心，跟着我接着往下操作，我们到了实现下表的时候了，此时需要我们打开我下图箭头标注的页面进行预览。

• 下图就是我打开页面的预览效果,是我们想要的下表吧

• 接着就需要下图的操作了

• 再接着就是下图的操作，点击到层级按钮，选中我们的子级页，右击打开编辑器，将其全部复制
• 复制后打开带有List页，右击页面模板新增一个按钮栏与表格(这里新增按钮栏就是为了添加按钮)

• 新增后的表格需要右击打开编辑器把nid记下来，接着把我们上面刚才复制的代码全部替换，

• 需要把新增表格的nid替换子页表格的nid

• 此刻我们的页面就实现了

• 点击保存进行预览(页面就实现了，需要添加逻辑了)

• 此处展示一下数据的来源,在上面我们提到过数据的来源，我们通过新增按钮，可以手动加入一些数据

  四、流程自动化

• 点击流程自动化，点击函数，选中后端，点击新建，就会自动生成一个后端函数(如下图)

• Api函数代码块

     let AbstractAPIHandler = require('AbstractAPIHandler');
  class MyAPIHandler extends AbstractAPIHandler {
   execute(request){
   // 编写详情的查询SQL
              var managerSql = "select choose,ordernumber,itemnumber,productID," +
               "weight,goodsallocation,objectID from     GT15123AT45.GT15123AT45.dome02 where dome01_id ='" + request.dome001_id + "'";
           var res = ObjectStore.queryByYonQL(managerSql);
           return {
               res: res
           };
  }
  }
  exports({"entryPoint":MyAPIHandler});
  

  五、添加逻辑

• 打开带有List的页面，右击图中捡货单(父页)列表，点击动作，出现一个点击设置，通过点击设置，会出现一个配置函数的页面，我们点击前端函数，进行配置
• YonBuilder为我们自动生成

• 接下来就需要我们自己写逻辑了

• 前端逻辑代码块

    function (event) {
    var viewModel = this;
    // loadStyle(".u-input-group, .u-form-control {width: 30px !important; }");
         debugger;
        var gridModel = viewModel.getGridModel();
        // 存储详情数据
        var resultData = [];
        //设置子页的复选框
        var gridModelCh = viewModel.get("dome02List");
        gridModelCh.setState("showCheckBox",true);
  
        // 定义行选中
        gridModel.on('afterSelect', function (data) {
            debugger;
            // data数据形式： [0,1,2]
            //获取行号
            let res = data[data.length - 1];
            // 获取选中行数据
            var currentRow = viewModel.getGridModel().getRow(res);
  
            // // 获取子级下表
            var gridmodel1 = viewModel.get('dome02List');
            // // 清空下表数据
            // gridmodel1.clear();
  
            //TODO: API函数id
            cb.rest.invokeFunction("GT15123AT45.backDefaultGroup.  swapApi", {
  
                dome001_id: currentRow.id
            },
                // 回调函数
                function (err, rtnData) {
                if (err != null) {
                    cb.utils.alert('查询数据异常');
                    resultData = [];
                    return false;
                } else {
                    // 返回具体数据 
                    resultData = rtnData.res;
                    // 下表添加行数据
                    console.log(resultData);
                    gridmodel1.setData(resultData);
                }
            })
  
        });
  
        // 取消行选中的时候
        gridModel.on('afterUnselect', function (data) {
            // 获取子级下表
            var gridmodel1 = viewModel.get('dome02List');
            // 清空下表数据
            gridmodel1.clear();
  
        });
  }
  

• 保存后进行预览，页面完美实现

六、配置事件，通过点击按钮触发事件

• 在按钮栏中添加了按钮后，需要修改成我们UI图的按钮，如下图

• 按钮添加完后绑定事件(全选事件)

• 按图中加入逻辑代码

• 事件就绑定成功了

• 全选事件函数代码块

function (event) {
  var viewModel = this;
  var gridModel2 = viewModel.get('dome02List')
  gridModel2.selectAll('showCheckBox',true)
}

• 绑定全消按钮事件

• 全消事件函数代码块

function (event) {
  var viewModel = this;
   var gridModel2 = viewModel.get('dome02List');
  gridModel2.unselectAll('showCheckBox',false);
}

• 绑定资料更新按钮事件

• 修改项次按钮事件与资料更新按钮事件一样