TreeviewCopyright © aleen42 all right reserved, powered by aleen42
赠品模态框
- 上传的代码仅仅是一个module,需要将其引入自己的后端脚手架运行
- 代码链接
- 密码:hjcd
一、页面建模
1.1、页面布局效果
1.2、新建一个单表页面【赠品弹框】
1.3、【赠品弹框】页面设计器调整
进入页面设计器,删除列表头部栏,删除表格按钮区
页面建模右键插入表格
选中表格,右侧属性点击字段设置,添加字段
表格新增加一个文本框,如下图修改属性信息 联查主表,显示主表的规则名称
新增底部栏-》工具栏-》两个按钮-》修改按钮的标题名称;如下图
页面模板增加属性"templateType": "modal",并设置模态框显示宽度(如果不知道怎么操作请查看模态框章节)
二、扩展开发
2.1、新增加一个规则链
后端脚手架代码
页面设计器,命令管理增加动作、命令
新增一个规则保存一次,直至如下图(速度可能会有点慢,请耐心等待下)
新增命令,绑定刚才增加的动作
2.2、页面初始化函数
查看viewModel属性,获取指定表格
- 设置表格样式
- 设置显示复选框
- 根据复选框控制子表数据显示
function (event) {
var viewModel = this;
//设置样式
loadStyle(".public_fixedDataTable_main {height:200px !important; }");
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);
}
var gfRows = [];
var gridModelGifts = viewModel.get('giftsnishchList'); //获取指定表格
var gridModelGiftsRule = viewModel.get('giftsrulenishch_2339502786089216'); //获取指定表格
gridModelGiftsRule.setState("showCheckBox",true); //显示复选框
//选中后事件
gridModelGiftsRule.on('afterSelect',function(rowIndexes){
gridMODELGiftsSetRows();
})
//取消选中后事件
gridModelGiftsRule.on('afterUnselect',function(){
gridMODELGiftsSetRows();
})
//选中所有事件
gridModelGiftsRule.on('afterSelectAll',function(){
gridMODELGiftsSetRows();
})
gridModelGiftsRule.on('afterUnselectAll',function(){
gridMODELGiftsSetRows();
})
function gridMODELGiftsSetRows(){
if(gfRows.length>0){
gridModelGifts.clear(); //清除所有行
var rows = gridModelGiftsRule.getSelectedRows(); //获取所有选中行
var ids = [];
if(rows.length>0){
for(let i in rows){
ids.push(rows[i].id);
}
}
for(let j in gfRows){
if(ids.indexOf(gfRows[j].giftsrulenishch_id)>-1)
gridModelGifts.appendRow(gfRows[j]);
}
}
}
viewModel.on("afterMount",function(){
var params = viewModel.getParams();
var parentParams = viewModel.getCache('parentViewModel').getParams();
//调用后台接口
var proxy = cb.rest.DynamicProxy.create({
settle: {
url: 'gifts/list',
method: 'POST'
}
});
//传参
var reqParams = {
"ownDomain":params.domainKey,
'billnum':params.billNo,
'data':{
'rows':parentParams.billData.orderDetailsnishchList,
'vouchdate':parentParams.billData.vouchdate,
'oriSum':parentParams.billData.oriSum,
'agentId':parentParams.billData.agentId
}
}
proxy.settle(reqParams, function(err, res) {
if (err) {
cb.utils.alert(err.message, 'error');
return;
}else{
if(res.recordList.length==0)return;
var data = res.recordList[0];
var rulesRows = data.giftsrule;
gfRows = data.gifts;
for(let i in rulesRows){
gridModelGiftsRule.appendRow(rulesRows[i]);
}
}
});
})
}
2.3、取消动作事件
function (event) {
var viewModel = this;
//关闭模态框
viewModel.communication({type:'modal',payload:{data:false}});
}
2.4、确定动作事件
后端手脚架-获取订单详情
确定绑定点击事件
function (event) {
var viewModel = this;
var gridModel = viewModel.get("giftsList");
var rows = gridModel.getRows();
console.log(rows);
//请求后台进行拼装赠品信息
//调用后台接口
var proxy = cb.rest.DynamicProxy.create({
settle: {
url: 'salesOrder/detailch',
method: 'POST'
}
});
var reqParams = {
'rows':rows
}
proxy.settle(reqParams, function(err, res) {
if (err) {
cb.utils.alert(err.message);
return;
}else{
var parentViewModel = viewModel.getCache('parentViewModel');
//给父表格赋值
var orderDetailsList = parentViewModel.get("orderDetailsList");
for(let i in res){
orderDetailsList.appendRow(res[i]);
}
viewModel.communication({type:'modal',payload:{data:false}});
}
});
}