材料梳理
功能目标
左树右表,单页面操作
元数据
材料梳理
操作 | 描述 | ||||
---|---|---|---|---|---|
名称 | 材料梳理 | ||||
编码 | 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?
图 30
图 31
测试
选择左侧分类,点击新增
图 32
图 33
图 34
点击编辑
图 35
图 36
图 37