弹窗

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

弹窗目前支持的功能有：弹窗和提示支持全屏遮罩、自定义弹窗、弹窗支持两秒自动关闭、弹窗嵌套懒加载DIV配置。

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.弹窗嵌套懒加载DIV配置

弹窗需支持嵌套懒加载DIV配置，弹窗DIV配置。

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

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

配置

  1. Basecontroller.js需要更新至5.4.J.0以上版本，会增加一个baseAlert和baseShow方法。

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

controls: {
    // resource: {
    //     httpRequestEventDelayTime: 1000
    // },
    layoutDispSettings: {
        defaultOperate: false,
        key: "activeTable"
    },
    resetRefresh: true,
    isFinishRenderResize: false,
    globalMask: true,
    buttonGroupHeight: 100,
    optimizeObjs: true,
    patimizeObjs: true,
    pagination: {
        showTotal: false
    },
    dataGrid: {
        disableCopyEditing: true,
        validation: {
            requireDisabled: true
        },
        keydownNewRow: true,
        beforeSelectedHintFlag: 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.弹窗嵌套懒加载DIV配置

配置

  1. 对象建模–业务对象–业务对象管理：编辑业务对象，找到弹窗的方法定义名称，把方法类型改成弹窗窗口(DIV形式)类型，填写URL地址，如果弹出的页面是另外一个业务对象，则要选择业务对象名。
    123

  2. 重新生成前台代码。

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

3.2. 弹窗传参判断 3.2. 新增报文时判断当前报文能否新增

  1. 常见场景：新增为自定义按钮，点击时，会弹出新增弹窗，然后弹窗会将查询框中的船名航次等信息带过去，但是弹窗是只取执行中航次的，带过去的话，可能会带出未执行或者已完成航次，所以加了这一层判断。
    QQ图片20181122141746
  2. 代码部分
    初始化将查询框的执行中的船名航次赋值到弹窗
//TODO 自定义js函数 /** * 提供给用户使用的初使化方法 */ $scope.customAddshipreportTwoInit=function(){
debugger;
if(Params.msg){
GillionMsg.alert("提示",Params.msg);
}
if(Params.flag=="1"){
if(Params.voyage&&Params.voyage!='undefined'){
$scope.addshipreportTwo.voyage = Params.voyage;
}
if(Params.shipName && Params.shipCode &&Params.shipName!='undefined' && Params.shipCode!='undefined'){
$scope.addshipreportTwo.shipName = Params.shipName;
$scope.addshipreportTwo.shipCode = Params.shipCode;
}
if(Params.voyageState){
$scope.addshipreportTwo.voyageState = Params.voyageState;
}
if(Params.voyage2){
$scope.addshipreportTwo.voyage = Params.voyage2;
}
if(Params.voyageId){
$scope.addshipreportTwo.voyageId = Params.voyageId;
}

}
};

打开弹窗方法

//自定义JS方法 boName:Auditshipmessage layoutBoName:Auditshipmessage
//TODO 自定义js函数 /** * 新增 */ $scope.addTwoCustomAuditshipmessage = function(){
//debugger;
var shipName=$scope.quickSearchF01100.shipNameTxt;
var shipCode=$scope.quickSearchF01100.shipCode;
var voyage=$scope.quickSearchF01100.voyage;
var params = {
"voyage":voyage,
"shipCode":shipCode
};
$http.post($config.ctx+'/leavePortReport/getvoyageId',params).success(function(data){
if (data.success != undefined && data.success == true) {

var voyageId=data.map.voyageId;
var voyageState=data.map.voyageState;
var voyage2=data.map.voyage2;
var msg=data.msg;
var flag=data.map.flag;
var urlStr="&shipName="+shipName+"&voyage="+voyage+"&shipCode="+shipCode+"&voyageId="+voyageId+"&voyageState="+voyageState+"&msg="+msg+"&flag="+flag+"&voyage2="+voyage2;

var url = "/html/rpt/addshipreportTwo/addshipreportTwoManage.html";
var openType = "2";
if (url.indexOf("?")>=0){
url = url + "&openType=" + openType+urlStr;
} else {
url = url + "?openType=" + openType+urlStr;
}
var options = {
title : '新增报文' ,
closable : true ,
modal : true ,
url : url ,
width:200,
height:305
};
var indexScope = top.angular.element("body").scope();
indexScope.showUrl(options);
}
});

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

5.4.J，2019.6.12

新特性

  • 弹窗和提示支持全屏遮罩

    • 5.4.F，2019.4.12

    新特性

  • 弹窗嵌套懒加载DIV配置

    • 5.4.D，2019.3.28

    新特性

  • 弹窗支持两秒自动关闭