应用平台

# Demo示例

# demo-1 表单设计与流程管理分权

# 需求

表单管理员可以做表单设计、操作设置和应用绑定的切换，流程管理员被表单管理员授权制作流程，但不能设计表单，设计器界面对流程管理员来说需要做表单设计的相关屏蔽处理。

# 解决方法

流程管理员进入表单设计器首个页面时只能预览

window.formDesignerExtend = {
    config: {
        baseCfg: {
            supportDesign: false //是否支持设计器编辑
        }
    }
};

配合URL参数onlyEditWF(仅流程管理员有)解析

# 效果

# demo-2 带条件隐藏表格

# 需求

根据不同的条件隐藏相应的表格（主表区域、明细表）。

# 分析与解决

1.标准产品默认不支持条件格式设置，需要配置对应能力(supportConditionFormat)

2.设置条件后需要选取对应表格，默认不支持主表块的识别（主表区域的唯一名称），故还需要配置设置主表名的能力(supportMasterTbName)

window.formDesignerExtend = {
    config: {
        settingArea: {
            //表单属性设置
            formSetting: {
                supportConditionFormat: true //是否支持条件格式设置
            },
            //控件属性设置
            ctrlSetting: {
                supportMasterTbName: true //是否支持主表名设置
            }
        }
    },
    event: {
        onConditionFormatClick: onConditionFormatClick
    }
};

3.添加条件格式设置窗逻辑

function onConditionFormatClick(data) {
    var defId = data.formId;//表单ID
   var viewId = data.currentView.id;
   if(viewId ==  ""){
    $.alert("请先保存表单");
    return false;
   }
   var plat = data.currentView.plat;
   dialogCondSet = $.dialog({
    width:620,
    height:450,
    targetWindow:getCtpTop(),
    transParams: {
              transData: data,
              winObj : window
          },
    url:_ctxPath + "/ext/formCond.do?method=formConditionHidden&formId="+defId+"&hideType=table&viewId="+viewId+"&plat="+plat,
       title : "视图条件格式设置",
       buttons : [{
         text : $.i18n('common.button.ok.label'),
         id:"doOk",
         isEmphasize: true,
         handler : function() {
          var retValue = dialogCondSet.getReturnValue({"operationId":"doOk"});
          var cssObj = $("<i class='icon CAP cap-icon-duigou' style='color: rgb(126, 211, 33);'></i>");
          if(!$("#formdesign-frame").contents().find(".form-setting-button:eq(2)").find(".cap-icon-duigou").length > 0){
           $("#formdesign-frame").contents().find(".form-setting-button:eq(2)").append(cssObj);
          }
         }
       },{
          text : $.i18n('common.button.empty.label'),
          id:"deleteAndExit",
       isEmphasize: true,
          handler : function() {
           var retValue = dialogCondSet.getReturnValue({"operationId":"deleteAndExit"});
           $("#formdesign-frame").contents().find(".form-setting-button:eq(2)").find(".cap-icon-duigou").remove();
          }
        },{
         text : $.i18n('common.button.cancel.label'),
         handler : function() {
          dialogCondSet.close();
         }
       } ]
   });
}

# 效果

# demo-3 带条件隐藏明细表列

# 需求

根据不同的条件隐藏某个明细表的指定列。

# 分析与解决

1.默认不支持列隐藏设置，需要配置对应能力(supportColumnHide)

2.对于已设置列隐藏后的明细表，选中时需要标识是否已经设置过，即在表格选中事件(viewTableSelected)触发时更新其样式

window.formDesignerExtend = {
    config: {
        settingArea: {
            //控件属性设置
            ctrlSetting: {
                supportColumnHide: true //是否支持列隐藏设置
            }
        }
    },
    event: {
     viewTableSelected: viewTableSelectedFn
        onTableColumnHideClick: onTableColumnHideClick
    }
};

3.onTableColumnHideClick中实现列隐藏设置逻辑，viewTableSelectedFn中添加列隐藏按钮样式更新逻辑

function viewTableSelectedFn(data,obj){
    var cssObj = $("<i class='icon CAP cap-icon-duigou' style='color: rgb(126, 211, 33);'></i>");
    var formId = data.formId;
    var viewId ="";
    var platForm="";
    if(obj && "tabSwitch" == obj){
        viewId = data.toView.id;
        platForm = data.toView.plat;
    }else{
        viewId = data.currentView.id;
        platForm = data.currentView.plat;
    }
    //是否已经设置隐藏列
    callBackendMethod("capExtendManager","getCssSet",formId,viewId,platForm,"","",{
        success : function(returnList){
         var $btn = $("#formdesign-frame").contents().find(".form-setting-button:eq(2)");
            if(returnList.columnHidden == "true"){
                $btn.append(cssObj);
            }else if(returnList.columnHidden == "false"){
                $btn.find(".cap-icon-duigou").remove();
            }
        }
    });
}

function onTableColumnHideClick(data){
    var defId = data.formId;//表单ID
    var viewId = data.currentView.id;
    var detailTableName = data.currentTable.tableName;
    if(viewId ==  ""){
        $.alert("请先保存表单");
        return false;
    }
    var colArray = data.currentTable.cells;
    if(colArray.length > 0 && colArray[0].rowIndex == 1){
        $.alert("请先设置表头信息");
        return false;
    }
    var plat = data.currentView.plat;
    dialogCondSet = $.dialog({
        width:620,
        height:450,
        targetWindow:getCtpTop(),
        transParams: {
            transData: data,
            winObj : window
        },
        url:_ctxPath + "/ext/formCond.do?method=formConditionHidden&formId="+defId+"&hideType=column&" +
            "viewId="+viewId+"&plat="+plat+"&detailTableName="+detailTableName,
        title : "隐藏列设置",
        buttons : [{
            text : $.i18n('common.button.ok.label'),
            handler : function() {
                var retValue = dialogCondSet.getReturnValue({"operationId":"doOk"});
                var cssObj = $("<i class='icon CAP cap-icon-duigou' style='color: rgb(126, 211, 33);'></i>");
                if(!$("#formdesign-frame").contents().find(".ctrl-setting-button").find(".cap-icon-duigou").length > 0){
                    $("#formdesign-frame").contents().find(".ctrl-setting-button").append(cssObj);
                }
            }
        },{
            text : $.i18n('common.button.empty.label'),
            id:"deleteAndExit",
            isEmphasize: true,
            handler : function() {
                var retValue = dialogCondSet.getReturnValue({"operationId":"deleteAndExit"});
                $("#formdesign-frame").contents().find(".ctrl-setting-button").find(".cap-icon-duigou").remove();
            }
        },{
            text : $.i18n('common.button.cancel.label'),
            handler : function() {
                dialogCondSet.close();
            }
        } ]
    });
}

# 效果

# 示例源码下载

[附件][[源码下载|path:../../../code/demo-extend.zip]]

创建人：yinyanting

快速跳转

← 1.插件使用步骤 →