赠品模态框

  • 上传的代码仅仅是一个module,需要将其引入自己的后端脚手架运行
  • 代码链接
  • 密码:hjcd

一、页面建模

1.1、页面布局效果

图1

1.2、新建一个单表页面【赠品弹框】

图1 图1

1.3、【赠品弹框】页面设计器调整

进入页面设计器,删除列表头部栏,删除表格按钮区

图1 图1

页面建模右键插入表格

图1

选中表格,右侧属性点击字段设置,添加字段

图1 图1

表格新增加一个文本框,如下图修改属性信息 联查主表,显示主表的规则名称

图1

新增底部栏-》工具栏-》两个按钮-》修改按钮的标题名称;如下图

图1

页面模板增加属性"templateType": "modal",并设置模态框显示宽度(如果不知道怎么操作请查看模态框章节)

图1

二、扩展开发

2.1、新增加一个规则链

后端脚手架代码

图1

页面设计器,命令管理增加动作、命令

图1

新增一个规则保存一次,直至如下图(速度可能会有点慢,请耐心等待下)

图1 图1

新增命令,绑定刚才增加的动作

图1 图1

2.2、页面初始化函数

图1

查看viewModel属性,获取指定表格

图1

  • 设置表格样式
  • 设置显示复选框
  • 根据复选框控制子表数据显示


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、取消动作事件

图1

function (event) {
  var viewModel = this;
  //关闭模态框
  viewModel.communication({type:'modal',payload:{data:false}});
}

2.4、确定动作事件

后端手脚架-获取订单详情

图1

确定绑定点击事件

图1


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}});
        }
    });
}

三、实现效果

图1 图1

Copyright © 用友 -【生态技术部】 2022-2023 all right reserved,powered by Gitbook修订时间: 2024-02-02 12:53:34

results matching ""

    No results matching ""