弹窗/Tab

1.基本功能 1.基本功能

1.1.弹窗和提示支持全屏遮罩 1.1.弹窗和提示支持全屏遮罩

弹出框的提示会将这个窗口的界面遮住,不许用户操作菜单等配置。
TD9N)7_NHK2FPJ]O4)}4$T3

1.2.自定义弹窗 1.2.自定义弹窗

自定义js弹出一个页面,且弹窗上的操作由用户自己通过扩展js实现。例子:点击按钮【VGM联系人】,跳转到弹框页面,在弹框页面输入值,点击【确定】按钮后,将值传回到页面上的表格上。
自定义弹框效果1

自定义弹框效果2

自定义弹框效果3

1.3.弹框支持两秒自动关闭 1.3.弹框支持两秒自动关闭

在一些操作成功的场景下,可以减少鼠标点击次数,提高用户体验性,对操作成功的提示消息设定两秒自动关闭配置。例如下图:编辑-修改数据后,提示框内容为“修改成功!”,然后提示框将会在2秒后自动关闭。
TIM图片20190528135806

1.4.弹窗、tab嵌套懒加载DIV配置 1.4.弹窗、tab嵌套懒加载DIV配置

弹窗、tab需支持嵌套懒加载DIV配置,弹窗DIV配置,tab延时加载配置,DIV延时加载。

1.5.单据打开tab要支持多个 1.5.单据打开tab要支持多个

单据打开tab要支持多个、Tab要支持同时打开多个页签
1

2.配置方法 2.配置方法

2.1.弹窗和提示支持全屏遮罩 2.1.弹窗和提示支持全屏遮罩

配置

  1. Basecontroller.js需要加入的更新代码
        scope.baseAlert = function(title, msg, fn, options){
            if(_config.controls.globalMask){
                return top.$('body').injector().get("GillionMsg").alert(title,msg,fn,options);
            }
            else{
                return angular.element(document).injector().get("GillionMsg").alert(title,msg,fn,options);
            }
        };

        scope.baseConfirm = function(title, msg, fn, options){
            if(_config.controls.globalMask){
                return top.$('body').injector().get("GillionMsg").confirm(title,msg,fn,options);
            }
            else{
                return angular.element(document).injector().get("GillionMsg").confirm(title,msg,fn,options);
            }
        };

        scope.baseShow = function(options){
            if(_config.controls.globalMask){
                return top.$('body').injector().get("GillionMsg").show(options);
            }
            else{
                return angular.element(document).injector().get("GillionMsg").show(options);
            }
        };

2.对于需要对提示语进行全屏遮罩的项目组,需要在config.properties.js里面进行配置:globalMask:true

  globalMask:true,

2.2.自定义弹窗 2.2.自定义弹窗

配置

1..对象建模–业务对象–业务对象管理:编辑业务对象,点击【方法定义】tab页,新增一个自定义js的方法。
弹窗1

2.对象建模–业务对象–业务对象管理:编辑业务对象,点击【可视化布局】按钮,进入到可视化界面,将刚才新增的方法配置到界面上。
弹窗2

3.在生成的供用户二次开发的js文件中编写自定义方法内容,具体代码可参考3.1.自定义弹窗

2.3.弹框支持两秒自动关闭 2.3.弹框支持两秒自动关闭

  1. 更新对应的 BaseController.js版本5.4.D.0
  2. config.properties.js 中添加以下配置项
   alertTimeout: { 
        matchMsgs: ['修改成功!'], // 消息提示语列表,消息提示语与列表中某一项相同的时候,提示框会自动关闭 
        timeout: 2000 // 提示框自动关闭时间,单位毫秒 
    }

2.4.tab嵌套懒加载DIV配置 2.4.tab嵌套懒加载DIV配置

1.弹窗DIV配置
对象建模–业务对象–业务对象管理:编辑业务对象,找到弹窗的方法定义名称,把方法类型改成弹窗窗口(DIV形式)类型,填写URL地址,如果弹出的页面是另外一个业务对象,则要选择业务对象名。
123
2.tab延时加载配置
对象建模–业务对象–业务对象管理:编辑业务对象,点击【可视化布局】按钮,进入到可视化界面,找到tab页并选中,在右边属性页签生成方式改成DIV延时加载。
tab页DIV
3.重新生成前台代码

2.5.单据打开tab要支持多个 2.5.单据打开tab要支持多个

单据打开tab要支持多个

1.如果需要实现该功能,需要项目组在config.properties.js中设置multipleTabsControl为true
2
2.如果项目组希望新增页面也支持同时打开多个tab,请在IndexModule.js中调整$scope.addTab方法。具体可参考下图。
3

2.6.tab页只读控制 2.6.tab页只读控制

1.在页面布局中对Tab标签设置事件类型

tab129

tab130

tab131

如果tab中的只读事件执行内容表达式为true时则tab下面的元素就会只读方式显示

tab132

3.常用扩展 3.常用扩展

3.1.自定义弹窗 3.1.自定义弹窗

自定义弹窗的JS方法,其中openType为2是弹框类型。option为弹框的一些信息,使用index中的作用域调用showUrl打开弹窗。

            //TODO 自定义js函数
            /**
             * VGM联系人
             */
            $scope.bkContainerVGMBkContainer = function(){
                if($scope.bkContainerCheckedRows.length == 0){
                    GillionMsg.alert("提示","请选择集装箱信息!");
                    return;
                }
                var url = "/html/fms/mf/bkContainerVGM.html?requestKind=mfbk";
                var openType = "2";
                if (url.indexOf("?")>=0){
                    url = url + "&openType=" + openType;
                } else {
                    url = url + "?openType=" + openType;
                }
                var options = {
                    title : 'VGM联系人' ,
                    closable : true ,
                    modal : true ,
                    url : url ,
                    width:600,
                    height:550
                };
                var indexScope = top.angular.element("body").scope();
                indexScope.showUrl(options);
            };

4.版本更新 4.版本更新