功能点:阅读记录列表弹框
功能目标
- 列表页面通过弹框的方式,查看阅读记录
弹框知识点
通过表格按钮打开一个页面
【异常记录列表】打开【阅读记录】页面
function (event) {
var viewModel = this;
//获取选中行的行号
var line = event.params.index;
//获取选中行数据信息
var abnormalevent = viewModel.getGridModel().getRow(line).id;
//传递给被打开页面的数据信息
let data = {
billtype: 'VoucherList',// 单据类型
billno: '43472ef5List',// 单据号
params: {
mode: 'browse', // (编辑态edit、新增态add、浏览态browse)
//传参
abnormalevent:abnormalevent
},
};
//打开一个单据,并在当前页面显示
cb.loader.runCommandLine('bill', data, viewModel);
}
获取父页面传递参数并实现过滤
【阅读记录】页面获取【异常记录列表】传递的参数,并过滤数据
function (event) {
var viewModel = this;
var bh = viewModel.getParams().abnormalevent;
viewModel.on('afterMount', function(){
// 获取查询区模型
const filtervm = viewModel.getCache('FilterViewModel');
filtervm.on('afterInit', function () {
// 进行查询区相关扩展
filtervm.get('abnormalevent').getFromModel().setValue(bh);
});
});
}
关闭模态框
绑定【阅读记录】取消确定按钮点击可以关闭模态框
function(event){
var viewModel = this;
viewModel.communication({type:'modal',payload:{data:false}});
}
弹出框获取父页面ViewModel
function(event){
var viewModel = this;
var parentViewModel = viewModel.getCache('parentViewModel');
}
阅读记录弹框功能实现
【阅读记录列表】增加弹框按钮及动作
新增【异常记录列表】表格行按钮【阅读记录】

图 1

图 2

图 3
【阅读记录】按钮绑定点击事件

图 4
函数设计器中添加以下函数

图 5

图 6

图 7
function (event) {
var viewModel = this;
//获取选中行的行号
var line = event.params.index;
//获取选中行数据信息
var abnormalevent = viewModel.getGridModel().getRow(line).id;
//传递给被打开页面的数据信息
let data = {
//TODO:填写单据类型及单据号
billtype: 'VoucherList',// 单据类型
billno: 'e3e52ae2',// 单据号
params: {
mode: 'browse', // (编辑态edit、新增态add、浏览态browse)
//传参
abnormalevent:abnormalevent
},
};
//打开一个单据,并在当前页面显示
cb.loader.runCommandLine('bill', data, viewModel);
}
【阅读记录】设置弹框及进行条件过滤
设置模态框
将页面设置为模态框

图 8

图 9
选中页面模板,点击右键,打开编辑,增加下列属性
"templateType": "modal",

图 10
改变模态框宽度并保存

图 11
数据过滤
点击层级-》阅读记录-》新增前端函数

图 12
函数内容
function (event) {
var viewModel = this;
var bh = viewModel.getParams().abnormalevent;
viewModel.on('afterMount', function(){
// 获取查询区模型
const filtervm = viewModel.getCache('FilterViewModel');
filtervm.on('afterInit', function () {
// 进行查询区相关扩展
filtervm.get('abnormalevent').getFromModel().setValue(bh);
});
});
}
关闭模态框
绑定【阅读记录】【取消】【确定】按钮点击可以关闭模态框
function(event){
var viewModel = this;
viewModel.communication({type:'modal',payload:{data:false}});
}

图 13
调整页面
新建调整参照

图 14

图 15
阅读记录页面调整

图 16

图 17
测试

图 18

图 19

图 20