# Demo示例 ## demo-1 表單設計與流程管理分權 ### 需求 表單管理員可以做表單設計、操作設置和應用綁定的切換，流程管理員被表單管理員授權制作流程，但不能設計表單，設計器界面對流程管理員來說需要做表單設計的相關屏蔽處理。 ### 解決方法 流程管理員進入表單設計器首個頁面時只能預覽 ```javascript window.formDesignerExtend = { config: { baseCfg: { supportDesign: false //是否支持設計器編輯 } } }; ``` 配合URL參數onlyEditWF(僅流程管理員有)解析 ### 效果  ## demo-2 帶條件隱藏表格 ### 需求 根據不同的條件隱藏相應的表格（主表區域、明細表）。 ### 分析與解決 1.標準產品默認不支持條件格式設置，需要配置對應能力(supportConditionFormat) 2.設置條件后需要選取對應表格，默認不支持主表塊的識別（主表區域的唯一名稱），故還需要配置設置主表名的能力(supportMasterTbName) ```javascript window.formDesignerExtend = { config: { settingArea: { //表單屬性設置 formSetting: { supportConditionFormat: true //是否支持條件格式設置 }, //控件屬性設置 ctrlSetting: { supportMasterTbName: true //是否支持主表名設置 } } }, event: { onConditionFormatClick: onConditionFormatClick } }; ``` 3.添加條件格式設置窗邏輯 ```javascript 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)觸發時更新其樣式 ```javascript window.formDesignerExtend = { config: { settingArea: { //控件屬性設置 ctrlSetting: { supportColumnHide: true //是否支持列隱藏設置 } } }, event: { viewTableSelected: viewTableSelectedFn onTableColumnHideClick: onTableColumnHideClick } }; ``` 3.onTableColumnHideClick中實現列隱藏設置邏輯，viewTableSelectedFn中添加列隱藏按鈕樣式更新邏輯 ```javascript 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(); } } ] }); } ``` ### 效果  ## 示例源碼下載 [附件]<a href="../../../code/demo-extend.zip" target="_blank">源碼下載</a>