移动BOS控件介绍-HTML片段

栏目：eas cloud知识作者：金蝶来源：金蝶云社区发布：2024-09-22浏览：1

移动BOS控件介绍-HTML片段

HTML片段说明

HTML片段可用于通过自行编写html和JavaScript代码来实现页面和交互逻辑，让页面不局限于组件，你可以自行通过编写代码来实现你想要的页面和效果。

效果展示

流程助手里使用HTML片段实现的单据联查效果。

控件属性

属性名	属性ID	类型	默认值	说明
ID	ID	String	htmlContent1	HTML片段ID,可以用于jquery找元素或者设置样式,也可以使用mbos('对应ID')设置控件属性
类型	type	String	HTML片段	无
HTML源码	HTML片段	String	无	HTML源码用于在里面编写html和JavaScript代码

控件演示实例

1. 添加HTML片段控件后点击HTML源码的设置按钮

2. 你可在编辑代码里编写自己的代码

为了演示你可以在里面填写如下演示代码观看效果：

<!DOCTYPE html>
<html>
<head>  
<style>    
.bd3 {     
    position: relative;    
    width: 100%;     
    height: auto;    
    background: #FFFFFF;   
    margin-top: 12px;  
}    
 
.word1 {      
    width: 64px;      
    height: 24px;      
    overflow-wrap: break-word;      
    color: rgba(33, 33, 33, 1);      
    font-size: 16px;      
    font-family: PingFangSC-Medium;      
    white-space: nowrap;      
    line-height: 24px;      
    text-align: left;    
 }    
 
.word2 {      
     width: 303px;      
     height: 24px;      
     display: block;      
     overflow-wrap: break-word;      
     color: rgba(33, 33, 33, 1);      
     font-size: 16px;      
     font-family: PingFangSC-Regular;      
     white-space: nowrap;      
     line-height: 24px;      
     text-align: left;    
}    
 
.txt1 {      
     height: 20px;      
     overflow-wrap: break-word;      
     color: rgba(153, 153, 153, 1);      
     font-size: 14px;      
     font-family: PingFangSC-Regular;      
     white-space: nowrap;      
     line-height: 20px;      
     text-align: right;      
     margin: 2px 0 0 208px;    
}    
 
.flexdiv {      
     display: flex;      
     justify-content: space-between;      
     align-items: center;      
     height: 48px;    
}    
 
 .countDiv {      
     width: 25%;    
 }    
 
.blackDiv {      
     padding-bottom: 10px;    
}    
 
.infoDiv {      
     background-color: rgb(248, 249, 250);      
     margin-left: 12px;      
     margin-right: 12px;     
     padding-left: 12px;      
     margin-bottom: 10px;    
}    
  
 .bottomflexdiv {      
      display: flex;      
      justify-content: space-between;      
      align-items: center;      
      height: 48px;    
}    
  
  .bottomstyle {      
      color: #ffc107;      
      border-color: #ffc107;      
      padding: .25rem .5rem;      
      border-radius: .2rem;      
      background-color: #FAFAFA;      
      border: 1px solid #ffc107;    
}    
  
  .bottomstyle:hover {     
       background-color: #ffc107;      
       color: #000000;    
}    
   
.imageDiv {      
       margin-left: 6px;    
}		
   
.newline{		
       word-wrap:break-word; 		
       word-break:break-all; 		
       overflow: hidden;	
}  
</style>
   	
<script>	
   $(document).ready(function() {		
   //当前单据		
   $("#currentName").text(billAlias);		
   $("#currentId").text(number);								
   //上游单据		
   var upSize = upList.length;		
   console.info("上游大小："+upSize);		
   $("#upcount").text("共"+upSize+"项");		
   for(var i=0;i<upList.length;i++){			
       var uptemp = upList[i];			
       console.info("上游v："+uptemp);			
       var upHtmlStart = '<div class="infoDiv"><span class="word2">'+uptemp.billName+
       '</span><div class="bottomflexdiv"><div class="newline"><span class="
       text-black-50  fontSize">'+uptemp.billCodeName+'</span></div><div class="
       countDiv"><button type="button" class="
       bottomstyle" id="'+uptemp.billId+'">查看单据</button></div></div></div>';
       $("#upPage").append(upHtmlStart); 			
   }		
   //上游单据为空则不显示		
   if(upSize<=0){			
       $("#upBlock").hide(); 			
   }						
   //下游单据		
   var downSize = downList.length;		
   console.info("下游大小："+downSize);		
   $("#downcount").text("共"+downSize+"项");		
   for(var i=0;i<downList.length;i++){			
       var downtemp = downList[i];			
       console.info("下游v："+downtemp);			
       var downHtml = '<div class="infoDiv"><span class="word2">'+downtemp.billName+
       '</span><div class="bottomflexdiv"><div class="newline"><span class="
       text-black-50  fontSize">'+downtemp.billCodeName+'</span></div><div class="
       countDiv"><button type="button" class="
       bottomstyle" id="'+downtemp.billId+'">查看单据</button></div></div></div>';					
       $("#downPage").append(downHtml); 			
   }		
   //下游单据为空则不显示		
   if(downSize<=0){			
       $("#downBlock").hide(); 			
   }				
   //点击按钮时通过url跳转		 
   $("button").click(function (e) {		    
       var bill_Id = e.target.id;			
       console.info("url："+window.location.href);	  		
       console.info("bill_Id："+bill_Id);						
       //当前url			
       var originUrl = window.location.href;			
       var array = originUrl.split("?");			
       var originParam = array[1].split("&");			
       var param = "";			
       for(var i=0;i<originParam.length;i++){				
           console.info("originParam："+originParam[i]);				
           if(originParam[i].indexOf("eid=") != -1){				   
               param=param+originParam[i]+"&";				
           }				
           if(originParam[i].indexOf("path=") != -1){				   
               param=param+originParam[i]+"&";				
           }				
           if(originParam[i].indexOf("name=") != -1){				   
               param=param+originParam[i]+"&";				
           }				
           if(originParam[i].indexOf("storeEid=") != -1){				   
               param=param+originParam[i]+"&";				
           }				
           if(originParam[i].indexOf("appid=") != -1){				   
               param=param+originParam[i]+"&";				
           }			
       }			
       var  billIdEncode = encodeURIComponent(bill_Id);			
       param=array[0]+"?"+param+"&billId="+billIdEncode;						
       var processIdParam="";			
       if(upProcessIdList.length>0){				
           for(var i=0;i<upProcessIdList.length;i++){					
               var processArray = upProcessIdList[i].split("_");					
               if(processArray.length==2){						
               processIdParam=processArray[1];					
           }				
       }			
   }			
   if(downProcessIdList.length>0){				
       for(var i=0;i<downProcessIdList.length;i++){					
           var processArray = downProcessIdList[i].split("_");					
           if(processArray.length==2){						
               processIdParam=processArray[1];					
           }				
       }			
   }			
   //对于没有流程实例id的上下游单据使用showRelatedBill=true，有流程实例id则拼接fprocinstid	
    if(processIdParam!=""){				
        param = param+"&fprocinstid="+processIdParam;			
    }else{					
        param = param+"&showRelatedBill=true";		
    }						
    //加入djlcPage用于点击返回按钮时跳回			
    if(param.indexOf("djlcPage=") == -1){					
        var jumpUrl = originUrl.split("#/djlc/");					
        var  originUrlEncode = encodeURIComponent(jumpUrl[0]);				  
        param =param+"&djlcPage="+originUrlEncode;			
    }					
    console.info("param："+param);			
    window.location.href=param;      
    });	
  });  
</script>
</head>
     
<body style="background-color:rgb(242, 242, 242)">  
  <div class="bd3">    
     <div class="flexdiv">      
           <div>        
              <img class="imageDiv" referrerpolicy="no-referrer"  src="/mbos/img/current.webp" />
              <span class="word1">当前单据</span>      
           </div>    
    </div>
         
    <div class="blackDiv">      
       <div class="infoDiv">        
           <span class="word2" id="currentName">费用报销单</span>        
           <div class="bottomflexdiv">         
                <div class="newline">            
                    <span class="text-black-50  fontSize" id="currentId">rytytjuyu</span>         
                 </div>        
            </div>      
         </div>    
      </div>  
  </div>  
         
         
  <div class="bd3" id="upBlock">    
     <div class="flexdiv">     
         <div>        
              <img class="imageDiv" referrerpolicy="no-referrer"   src="/mbos/img/up.webp" />  
               <span class="word1">上游单据</span>      
          </div>     
         <div class="countDiv" id="upcount">共0项</div>    
     </div>    
     <div class="blackDiv" id="upPage"></div>  
  </div>  
 
 <div class="bd3" id="downBlock">    
    <div class="flexdiv">
        <div>       
            <img class="imageDiv" referrerpolicy="no-referrer"   src="/mbos/img/down.webp" />        
            <span class="word1">下游单据</span>      
         </div>
        
          <div class="countDiv" id="downcount">共0项</div>    
     </div>    
      <div class="blackDiv" id="downPage"></div>  
 </div>
  
 </body>
</html>

使用最终效果