模态框

释义

是指覆盖在父窗体的子窗体。通常,目前是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互。

1、创建模态框主体(单表转换模态框)

  • 创建单表

    图1

    图2

  • 对单表进行模态框的变形

    图3

    图4

    图5

    图6

    图7

    图8

    图9

  • 设置非必要字段不展示(只保留手机型号为展示控件)

    图10

    图11

  • 设置编码列不展示

    图12

  • 给单表添加如下属性、转换成模态框

    "templateType": "modal"
    

    图13

    图14

    图15

  • 调整模态框弹出的大小

    图16

2、创建弹出模态框的父窗体及弹出动作

  • 弹出模态框主体(即:哪个单据弹出模态框)的创建(创建一个单卡以及列表)

    图17

    图18

  • 增加弹出按钮(详情查看)

    图19

    图20

  • 添加按钮的前端函数

    图21

    图22

    图23

    图24

  • 代码部分

    function (event) {
      var viewModel = this;
      //获取选中行的行号
      var line  = event.params.index;
      //获取选中行数据信息
      var shoujixinghao = viewModel.getGridModel().getRow(line).id;
      //传递给被打开页面的数据信息
      let data = {
        //TODO:填写单据类型及单据号
        billtype: 'VoucherList',// 单据类型
        billno: '4806bd9b',// 单据号
        params: {
          mode: 'browse', // (编辑态edit、新增态add、浏览态browse)
          //传参
          shoujixinghao:shoujixinghao
        },
      };
      //打开一个单据,并在当前页面显示
      cb.loader.runCommandLine('bill', data, viewModel);
    }
  • 模态框的单据ID

    图25

  • 模态框(手机详细参数单表)添加初始化函数

    图26

    图27

    图28

    图29

  • 代码部分

      function (event) {
        var viewModel = this;
        debugger;
        var bh = viewModel.getParams().shoujixinghao;
        viewModel.on('afterMount', function(){
          // 获取查询区模型
          const filtervm = viewModel.getCache('FilterViewModel'); 
          filtervm.on('afterInit', function () {
            // 进行查询区相关扩展
            filtervm.get('shoujixinghao').getFromModel().setValue(bh);
            });
        });
      }
    
  • 为取消、确定按钮添加关闭模态框事件

图32

图33

  • 代码部分

      function(event){
          var viewModel = this;
          viewModel.communication({type:'modal',payload:{data:false}});
      }
    

如果需要刷新父页面,则按照以下代码编写详情逻辑


var parentViewModel = viewModel.getCache('parentViewModel'); //模态框中获取父页面
parentViewModel.execute("refresh");  //刷新父页面
viewModel.communication({type:'modal',payload:{data:false}});  //关闭模态框

3、 查看最终弹出模态框的效果

图30

图31

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

results matching ""

    No results matching ""