【列表系列】在完成日期字段后面添加延期情况的图标

guoguo

一、实现效果
如图1所示，在列表这个完成时间字段后面添加图标，显示延期了几天或者已完成。


二、实现思路
1、在该字段的列内容格式化写事件即可。
三、具体操作
1、在该字段的列内容格式化写事件，如图2所示：

2、如图3所示，分析代码。

1）定义好对应的样式
2）获取时间字段，对时间进行拆解分析。
3）在业务条件下，输出value+对应的显示格式的天数。
四、相关代码（可选）

1. function(value,metaData,record,rowIndex,colIndex,store,view){
   
2.     var style = 'color: #ffffff;background: #D24D57;border-radius: 3px;position: relative;display: inline-block;padding: 3px 5px;font-size: 12px;font-weight: 400;vertical-align: middle;';
   
3.         var style2 = 'color: #ffffff;background: #376bd0;border-radius: 3px;position: relative;display: inline-block;padding: 3px 5px;font-size: 12px;font-weight: 400;vertical-align: middle;';
   
4.           var dvalue = JE.DATE.parseDate(value);
   
5.     var tdate = new Date();
   
6.           var cz = JE.DATE.diffDays(dvalue, tdate);
   
7.           var zt = record.get("TASK_GZTYLE_CODE");
   
8.     if(zt == '04' || zt == '05' || zt == '01'){
   
9.       return value;
   
10.     }else{
    
11.       if(cz < 0){
    
12.         return value + ' 还剩<span style = "color:#386bd0" > '+(0-cz)+' </span>天';
    
13.       }else if(cz == 0){
    
14.         return value + ' <span style = "'+style2+'"> 最后一天 </span>';
    
15.       }else{
    
16.         return value + ' <span style = "'+style+'"> 延期'+(cz)+'天</span>';
    
17.       }
    
18.     }
    
19. }

复制代码

五、总结（可选）
列表上的字段通过列内容格式化可以呈现出各种各样的效果。可以自行摸索。
六、关键字

列内容格式化，时间解析，剩余多少天展示，延期天数，日期