材料梳理

功能目标

左树右表，单页面操作

元数据

材料梳理

操作	描述
名称	材料梳理
编码	material_clearup
父实体
引用接口	自动编码
	属性	编码	名称	类型	引用
		item_wbs	项目档案	单选引用	项目档案
		name	材料名称	文本
		Product	物料	单选引用	物料
		design_num	设计数量	数值

功能实现

新建页面

新建【左树右表】页面

图 1

图 2

效果显示

图 3

调整布局

进入【材料梳理】页面设计器

图 4

新增编辑按钮

图 5

增加底部栏及按钮

图 6

右键【DIV块】点击【打开编辑器】，修改uitype、cControlType属性值为：groupcontainer

图 7

右键【DIV块】新增【表单】控件

图 8

右键【表单】点击【打开编辑器】复制nid属性的值。记录至文本文件中备用

图 9

右键【底部栏】点击【打开编辑器】赋值(Ctrl+A Ctrl+C)所有的属性，关闭弹框;
右键【表单】点击【打开编辑器】Ctrl+A 全部选中然后 Delete 删除所有属性。 Ctrl+V 复制【底部栏】的属性至【表单】;
将记录的nid属性值，覆盖【底部栏】里面的nid 。然后选中整个【底部栏】删除

图 10

图 11

图 12

还原【DIV块】uitype、cControlType属性值为：div

图 13

设置保存按钮规格类型为【主按钮】

图 14

函数扩展

【材料梳理单卡】做成弹框

设置【材料梳理单卡】为模态框

图 15

图 16

图 17

删除底部栏内的字段控件，下图为删除后效果
删除整个表单头部栏

图 18

删除标题,修改标题(按下图操作)

图 19

图 20

【材料梳理单卡】初始化函数增加样式，调整按钮显示位置

图 21

图 22

图 23

function (event) {
  var viewModel = this;
  loadStyle('.tab-bottom-txt{position: relative;height:30px;}')
  loadStyle('.alignRight{position:absolute;right:30px;}')

  function loadStyle(params){
    var headobj=document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';
    headobj.appendChild(style);
    style.sheet.insertRule(params, 0);
  }
}

图 24

编辑/取消按钮扩展

点击编辑按钮,设置表格可编辑。底部按钮栏显示,表头工具栏隐藏
点击取消按钮,刷新页面，设置表格不可编辑，设置底部栏隐藏，表头工具栏显示

图 25

function (event) {
  var viewModel = this;
  var gridModel = viewModel.getGridModel();
  //初始化设置底部栏隐藏
  viewModel.on('afterMount',function(){
    setlayoutDisplay('footer8bd',false);
  })
  //点击编辑按钮，工具栏隐藏，底部栏显示
  viewModel.get('button8kj').on('click',function(){
    setlayoutDisplay('TreeTableHeader',false);  //表头工具栏隐藏
    setlayoutDisplay('footer8bd',true);  //底部栏显示
    gridModel.setState('actionStatesVisible',false);  //表格按钮栏隐藏
    gridModel.setReadOnly(false);     //设置表格允许编辑
  })

  //点击取消刷新页面
  viewModel.get('button10ki').on('click',function(){
    viewModel.execute('refresh');    //刷新页面
    setlayoutDisplay('TreeTableHeader',true);  //表头工具栏显示
    setlayoutDisplay('footer8bd',false);  //底部栏隐藏
    gridModel.setState('actionStatesVisible',true);  //表格按钮栏显示
    gridModel.setReadOnly(true);  //设置表格不允许编辑
  })


  //设置布局的隐藏显示
  function setlayoutDisplay(cGroupCode,boolean){
    viewModel.execute('updateViewMeta',{code:cGroupCode,visible:boolean}); 
  }
}

上述函数功能解析

设置布局隐藏显示, cGroupCode为容器编码

图 26

viewModel.execute('updateViewMeta',{code:cGroupCode,visible:boolean});

设置表格是否可编辑

viewModel.getGridModel().gridModel.setReadOnly(boolean);

刷新页面

viewModel.execute('refresh');

实现的效果

图 27

图 28

保存按钮扩展

点击保存按钮，更新保存的数据

新增前端函数

图 29

function (event) {
  var viewModel = this;
  var gridModel = viewModel.getGridModel();
  var proxy = cb.rest.DynamicProxy.create({
        settle: {
            url: 'bill/save',
            method: 'POST'
        }
    });
    //传参
    var param = gridModel.getDirtyData();
    var reqParams = {
      'billnum':'2d798483SingleCard',   //TODO：需要更改
      'data':param
    }
    proxy.settle(reqParams, function(err, result) {
        if (err) {
          cb.utils.alert(err.message, 'error');
          return;
        }else{
          cb.utils.alert('保存成功');
          viewModel.execute('refresh');
          setlayoutDisplay('TreeTableHeader',true);
          setlayoutDisplay('footer8bd',false);
          //设置表格不允许编辑
          gridModel.setReadOnly(true);
        }
    });


  //设置布局的隐藏显示
  function setlayoutDisplay(cGroupCode,boolean){
    viewModel.execute('updateViewMeta',{code:cGroupCode,visible:boolean}); 
  }
}

如何查看billnum?