捡货单案例

一、分析原型图

  • 首先梳理原型图(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);
}
  • 绑定资料更新按钮事件

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

Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2021-09-29 17:44:21

results matching ""

    No results matching ""