2020亿信ABI

门户常用脚本

1.常用脚本收集

1.1 支持树上节点点击新开标签页

1)脚本位置

脚本写在树组件的鼠标单击事件里面,如下图所示。

复制代码
  1. //支持树上节点点击新开标签页
  2. if(url.indexOf("#")== 0){
  3.   EUI.openWindow(url.substring(1));
  4.   return;
  5. }

2)使用举例说明

链接地址前面加一个#即可完成新开浏览器窗口。

1.2 支持门户默认定位到指定的菜单或菜单下的树节点

1)脚本位置

复制代码
  1. //定位到指定的菜单下的树节点脚本
  2. function receiveMessage(e) {
  3.   var receiveData = e.data;
  4.   var jsonObj = JSON.parse(receiveData); 
  5.   var flag = jsonObj.hasOwnProperty("menuid");
  6.   if(!flag){
  7.       return;
  8.   }
  9.   var menuid = jsonObj.menuid;
  10.   var resid = jsonObj.resid;
  11.   var menuWidget = $p.$(menuid);
  12.   if(!menuWidget){
  13.       EUI.showMessage("菜单menuid:【" + menuid +"】无法找到,不能正确定位到该菜单下。");
  14.       return;
  15.   }
  16.   var find = $(menuWidget.getDom()).find("a");
  17.   if(find.length == 0){
  18.     EUI.showMessage("菜单menuid:【" + menuid +"】无法找到,不能正确定位到该菜单下。");
  19.     return;
  20.   } 
  21.      
  22.   var locatepath = [];
  23.   locatepath.push({"widgetid":menuid,"property":{"index":[0]}});
  24.   EUI.getRootWindow().locationOper = true;
  25.   menuWidget.setLocation(locatepath);
  26.   delete EUI.getRootWindow().locationOper;
  27.   if(isLocationMneu == true){
  28.     return;
  29.   }
  30.   var connxid = menuWidget.getProperty("connxtab");
  31.   var connidx = menuWidget.getProperty("connidx");
  32.   var etabCtrl = $p.$(connxid).getComponent();
  33.   var etabDom = etabCtrl.getBodyDom();
  34.   var treeDom = $(etabDom).find("div[widget-id=widget_xui_xtree]")[0];
  35.   if(!treeDom){
  36.     return;
  37.   }
  38.   var treeid = treeDom.getAttribute("data-id");
  39.   var treeWidget = $p.$(treeid);
  40.   var etree = treeWidget.getComponent();
  41.   var rootItem = etree.rootItem;
  42.   var index = [];
  43.   findChildItem(rootItem,resid,index);
  44.   stopTag = false;  
  45.   if(!targetIndex){
  46.       EUI.showMessage("资源resid:[" + resid +"]没有权限或不存在,不能定位到该树节点。");
  47.       return;
  48.   }
  49.   locatepath.push({"widgetid":connxid,"property":{"menutabctrl":"true","index":[0]}});
  50.   locatepath.push({"widgetid":treeid,"property":{"index":targetIndex}});
  51.   var tabctrlWidget = $p.$(connxid);
  52.   tabctrlWidget.setLocation(locatepath);
  53.   targetIndex = [];     
  54. }
  55. var targetIndex = [];
  56. var stopTag = false;
  57. var findChildItem = function(item,resid,index){
  58.     if(item.hasChildren()){
  59.         var childItems = item.getAllChildrenItems();
  60.         if(childItems.length > 0){
  61.           for(var y=0,len=childItems.length;y<len;y++){
  62.             index.push(y);  
  63.             var childItem = childItems[y];
  64.             var url = childItem.url;
  65.             var tempResid = childItem.resid;
  66.                
  67.             if(!stopTag && tempResid && tempResid === resid){
  68.                 targetIndex = [].concat(index);
  69.                 stopTag = true;
  70.                 return;
  71.             }    
  72.                
  73.             if(!stopTag && url){
  74.                 var currentResid = "";
  75.                 if(url.startsWith("../../resource/")){
  76.                     var lastIndex = url.indexOf("?");
  77.                     if(lastIndex !== -1){
  78.                         currentResid = url.substring(url.lastIndexOf("/") + 1,lastIndex);
  79.                     }else{
  80.                         currentResid = url.substring(url.lastIndexOf("/") + 1);
  81.                     }
  82.                 }else if(url.indexOf("resid=") != -1){
  83.                     var startIndex = url.indexOf("resid=") + 6;
  84.                     var lastIndex = url.indexOf("&",startIndex);
  85.                     if(lastIndex != -1){
  86.                         currentResid = url.substring(startIndex,lastIndex);
  87.                     }else{
  88.                         currentResid = url.substring(startIndex);
  89.                     }
  90.                 }
  91.                  
  92.                 if(currentResid === resid){
  93.                     targetIndex = [].concat(index);
  94.                     stopTag = true;
  95.                     return;
  96.                 }
  97.             }
  98.                
  99.             findChildItem(childItem,resid,index);
  100.             index.pop();
  101.           }
  102.         }
  103.     }
  104. }
  105. window.addEventListener("message", receiveMessage, false);
  106. //需要定位的按钮脚本格式,menuid:字符串类型,要定位到的菜单id; resid:字符串类型 资源id
  107.  window.locationFunc = function(menuid,resid){
  108.   var locationObj = {
  109.     "menuid" : menuid,
  110.     "resid" : resid
  111.   };
  112.   var locationStr = JSON.stringify(locationObj); 
  113.   EUI.getRootWindow().postMessage(locationStr, '*');
  114. }
  115.  
  116. var isLocationMneu = false;
  117. if(window.exparam && !EUI.isStrEmpty(exparam)){
  118.     var arr = exparam.split(",");
  119.     var resid = arr[0];
  120.     if(resid.startsWith("EDSO")){
  121.         if(resid == "EDSO$0$server"){
  122.             isLocationMneu = true;
  123.         }
  124.         window.locationFunc("menu3",resid);
  125.     }else if(resid.startsWith("EDF")){
  126.         if(resid == "EDF$3$etlprocessing"){
  127.             isLocationMneu = true;
  128.         }else{
  129.             window.__needopenframe = {
  130.                 workframeid: resid,
  131.                 url: "resource/" + resid
  132.             }   
  133.         }
  134.         window.locationFunc("menu4",resid);
  135.     }else if(resid.startsWith("EDSU")){
  136.         if(resid == "EDSU$1$server"){
  137.             isLocationMneu = true;
  138.             if(arr.length == 1 || (arr.length == 2 && arr[1] == "0")){
  139.                 window.locationFunc("menu5",resid);
  140.             }else if(arr.length == 2 && arr[1] == "1"){
  141.                 window.locationFunc("menu1",resid);
  142.             }
  143.         }
  144.     }else if(resid.startsWith("EPOR") || resid.startsWith("EMOB") || resid.startsWith("ECOL") ){
  145.         if(resid == "EPOR$1$portal"){
  146.             isLocationMneu = true;
  147.         }
  148.         window.locationFunc("menu2",resid);
  149.     }else if(resid.startsWith("EACL")){
  150.         if(exparam == "EACL$16$userpermission"){
  151.             isLocationMneu = true;
  152.         }
  153.         window.locationFunc("menu6",resid);
  154.     }   
  155.          
  156. }

说明:代码放在页面的加载完成事件最后面即可,根据不同的项目进行微修改。

2)使用举例

访问地址拼上exparam=xxx (xxx代表要定位的资源id),例如下图的地址。

复制代码
  1. http://localhost:8080/abi/eportal/pcportal/portal.do?id=QCStabY3&original=true&exparam=EDSO$1$interfacedatasource

1.3 支持菜单指定时间轮播自动切换菜单脚本

1)脚本位置

复制代码
  1. //设置轮播频率,5*1000代表5s切换一次
  2. var intervalTime = 5 * 1000;
  3. var menus = [];
  4. var menusDom =  $("div[widget-id='widget_menu']");
  5. for(var x=0,len=menusDom.length;x<len;x++){
  6.     var links = $(menusDom[x]).find("a");
  7.     if(links.length > 0){
  8.         menus.push(menusDom[x]);
  9.     }
  10. }
  11. if(menus.length < 1){
  12.     return;
  13. }
  14. var cell2Dom =  $("div[data-id='cell2']")[0]; 
  15. var button = document.createElement("button");
  16. button.setAttribute("type","button");
  17. EUI.addClassName(button, "eui-btn eui-btn-m eui-btn-sub");
  18. button.innerHTML = "停止轮播";
  19. button.style.cssText += "position:absolute;top:10px;right:10px;";
  20. cell2Dom.appendChild(button);
  21. var state = true;
  22. $(button).bind("click",function(){
  23.     if(state){
  24.         window.clearInterval(intervalFunc); 
  25.         button.innerHTML = "开启轮播";
  26.         state = false;
  27.     }else{
  28.         intervalFunc = window.setInterval(switchPicture.bind(this), intervalTime);
  29.         button.innerHTML = "停止轮播";
  30.         state = true;
  31.     }
  32. });
  33. var menuid = menus[0].getAttribute("data-id");
  34. var menuWidget = $p.$(menuid);
  35. var widget = menuWidget.getComponent();
  36. var property = widget._property;
  37. var itemnames = property.itemnames;
  38. var items = property.items;
  39. var index = 1;
  40. var len = itemnames.length;
  41. var switchPicture = function(){
  42.     var locatepath = [];
  43.     widget.doClick(itemnames[index]);
  44.     var item = items[itemnames[index]];
  45.     var iframe = $p.$(item.target);
  46.     iframe.setUrl(item.href);
  47.     index ++;
  48.     if(index >= len){
  49.         index = 0;
  50.     }
  51. }
  52. var intervalFunc = window.setInterval(switchPicture.bind(this), intervalTime);

说明:代码放在页面的加载完成事件最后面即可,根据不同的项目进行微修改。

2.效果图

2.门户常用样式收集

2.1 引入自己写的CSS样式文件写法

1)脚本位置

里面写的是脚本存放的vfs路径地址,这里以资源管理下的shdemo/shdemo.css样式文件为例。

复制代码
  1. EUI.addStyle(document, "../../vfs/root/products/eportal/pcportal/resources/shdemo/shdemo.css");

2)样式文件位置

2.2 常用门户样式

复制代码
  1. //tab页组件宽度调小
  2. EUI.addStyleSheet("div[widget-id=widget_tabctrl] .eui-tabctrl-header-item{margin:0 5px !important;}");
  3. //tab页组件高度调小
  4. EUI.addStyleSheet("div[widget-id=widget_tabctrl] .eui-tabctrl-header{height:32px !important;}");
  5. EUI.addStyleSheet("div[widget-id=widget_tabctrl] .eui-tabctrl-header-item{height:32px !important;line-height:32px !important;}");
  6. //增加树组件的节点距离
  7. EUI.addStyleSheet("div[widget-id=widget_xui_xtree] .eui-tree-container .eui-tree-item .eui-tree-node{height:36px !important;line-height:36px !important;}");

附件列表

文档内容仅供参考
如果您需要解决具体问题,还可以登录亿信社区
在提问求助板块提问,30分钟内帮您解决问题

如果您认为本词条还有待完善,请编辑

上一篇自定义echart图实现图表联动

下一篇如何去掉门户布局之间的白框

请先登录