入职管理入职状态关键步骤亮灯显示效果实现配置sql输出html

需求描述

1.1需求内容

现关键步骤是安页面所属步骤显示当前步骤亮灯。

变更为：根据关键步骤状态，完成则亮灯。

资料提交状态，审核通过亮灯，否则置灰。

工卡制作状态，已发送亮灯，否则置灰。

入职报到状态，已入职亮灯，否则置灰。

文档归档状态，已归档亮灯，否则置灰。

1.2现状效果

1.3执行方案

1.关于显示：字段属性输出html到多行文本（支持html）实现显示。

2.关于html：通过视图统一输出，之后字段属性从视图取数。

3.关于亮灯：通过两张图替换实现，1-0.png灰色，1-1.png黄色。

4.注意事项：建模编辑模板不要放置关键步骤显示多行文本，否则出现关键步骤状态不变的问题。

功能配置

2.1配置视图

1. 查询已有数据
2. 取状态数据
3. 做初步亮灯状态判断
4. 做实际亮灯状态判断
5. 取关键步骤状态名
6. 获取html模板-多行文本插入表格
7. 获取html模板-模板效果
8. 获取html模板-模板代码<table align="center" border="0" cellpadding="0" id="rzglgjbz" style="height:60px;width:600px;">
   <tbody>
   <tr>
   <td style="padding: 0px; text-align: center;"><img 150px="" alt="" src="/weaver/weaver.file.FileDownload?fileid=a040b38c632b3587f1dec4ad3411ca51e8346c34c413a10ddee5ef620efe978dc664bc6bc544a1132769a5b7716487a7a6e8662b6d7f37c27" width:="150px" /></td>
   <td style="padding: 0px; text-align: center;"><img 150px="" alt="" src="/weaver/weaver.file.FileDownload?fileid=a040b38c632b3587f1dec4ad3411ca51e8346c34c413a10ddee5ef620efe978dc664bc6bc544a1132769a5b7716487a7a6e8662b6d7f37c27" width:="150px" /></td>
   <td style="padding: 0px; text-align: center;"><img 150px="" alt="" src="/weaver/weaver.file.FileDownload?fileid=a040b38c632b3587f1dec4ad3411ca51e8346c34c413a10ddee5ef620efe978dc664bc6bc544a1132769a5b7716487a7a6e8662b6d7f37c27" width:="150px" /></td>
   <td style="padding: 0px; text-align: center;"><img 150px="" alt="" src="/weaver/weaver.file.FileDownload?fileid=a040b38c632b3587f1dec4ad3411ca51e8346c34c413a10ddee5ef620efe978dc664bc6bc544a1132769a5b7716487a7a6e8662b6d7f37c27" width:="150px" /></td>
   </tr>
   <tr>
   <td style="padding: 0px; text-align: center;"><b><span style="font-family:Microsoft YaHei; color:#999999;font-size: 12px;">待审核</span></b></td>
   <td style="padding: 0px; text-align: center;"><b><span style="font-family:Microsoft YaHei; color:#999999;font-size: 12px;">已发送</span></b></td>
   <td style="padding: 0px; text-align: center;"><b><span style="font-family:Microsoft YaHei; color:#999999;font-size: 12px;">已入职</span></b></td>
   <td style="padding: 0px; text-align: center;"><b><span style="font-family:Microsoft YaHei; color:#999999;font-size: 12px;">待归档</span></b></td>
   </tr>
   </tbody>
   </table>
9. 根据html模板，通过SQL拼接生成html

SELECT

`u`.`id` AS `id`,

`u`.`zlhdzt` AS `zlhdzt`,

`u`.`gpzt` AS `gpzt`,

`u`.`rzbdzt` AS `rzbdzt`,

`u`.`wdgdzt` AS `wdgdzt`,

( CASE WHEN ( `u`.`zlhdzt` = 3 ) THEN 1 ELSE 0 END ) AS `bz1ldzt`,

( CASE WHEN ( `u`.`gpzt` = 1 ) THEN 1 ELSE 0 END ) AS `bz2ldzt`,

( CASE WHEN ( `u`.`rzbdzt` = 2 ) THEN 1 ELSE 0 END ) AS `bz3ldzt`,

( CASE WHEN ( `u`.`wdgdzt` = 1 ) THEN 1 ELSE 0 END ) AS `bz4ldzt`,

(

SELECT

`ws`.`SELECTNAME`

FROM

`workflow_selectitem` `ws`

WHERE

( ( `ws`.`FIELDID` = 10111 ) AND ( `ws`.`SELECTVALUE` = `u`.`zlhdzt` ) )

) AS `bz1ztm`,

(

SELECT

`ws`.`SELECTNAME`

FROM

`workflow_selectitem` `ws`

WHERE

( ( `ws`.`FIELDID` = 10108 ) AND ( `ws`.`SELECTVALUE` = `u`.`gpzt` ) )

) AS `bz2ztm`,

(

SELECT

`ws`.`SELECTNAME`

FROM

`workflow_selectitem` `ws`

WHERE

( ( `ws`.`FIELDID` = 13081 ) AND ( `ws`.`SELECTVALUE` = `u`.`rzbdzt` ) )

) AS `bz3ztm`,

(

SELECT

`ws`.`SELECTNAME`

FROM

`workflow_selectitem` `ws`

WHERE

( ( `ws`.`FIELDID` = 13084 ) AND ( `ws`.`SELECTVALUE` = `u`.`wdgdzt` ) )

) AS `bz4ztm`,

concat(

'<table align="center" border="0" cellpadding="0" id="rzglgjbz" style="height:60px;width:600px;"><tbody><tr><td style="padding: 0px; text-align: center;"><img 150px="" alt="" src="/page/resource/userfile/image/hrm/1T',

( CASE WHEN ( `u`.`zlhdzt` = 3 ) THEN 1 ELSE 0 END ),

'.png" width:="150px" /></td><td style="padding: 0px; text-align: center;"><img 150px="" alt="" src="/page/resource/userfile/image/hrm/2T',

( CASE WHEN ( `u`.`gpzt` = 1 ) THEN 1 ELSE 0 END ),

'.png" width:="150px" /></td><td style="padding: 0px; text-align: center;"><img 150px="" alt="" src="/page/resource/userfile/image/hrm/3T',

( CASE WHEN ( `u`.`rzbdzt` = 2 ) THEN 1 ELSE 0 END ),

'.png" width:="150px" /></td><td style="padding: 0px; text-align: center;"><img 150px="" alt="" src="/page/resource/userfile/image/hrm/4T',

( CASE WHEN ( `u`.`wdgdzt` = 1 ) THEN 1 ELSE 0 END ),

'.png" width:="150px" /></td></tr><tr><td style="padding: 0px; text-align: center; width: 150px;"><b><span style="font-family:Microsoft YaHei; color:#999999;font-size: 12px;">',

(

SELECT

`ws`.`SELECTNAME`

FROM

`workflow_selectitem` `ws`

WHERE

( ( `ws`.`FIELDID` = 10111 ) AND ( `ws`.`SELECTVALUE` = `u`.`zlhdzt` ) )

),

'</span></b></td><td style="padding: 0px; text-align: center; width: 150px;"><b><span style="font-family:Microsoft YaHei; color:#999999;font-size: 12px;">',

(

SELECT

`ws`.`SELECTNAME`

FROM

`workflow_selectitem` `ws`

WHERE

( ( `ws`.`FIELDID` = 10108 ) AND ( `ws`.`SELECTVALUE` = `u`.`gpzt` ) )

),

' </ span ></ b ></ td >< td style = "padding: 0px; text-align: center; width: 150px;" >< b >< span style = "font-family:Microsoft YaHei; color:#999999;font-size: 12px;" > ',

(

SELECT

`ws`.`SELECTNAME`

FROM

`workflow_selectitem` `ws`

WHERE

( ( `ws`.`FIELDID` = 13081 ) AND ( `ws`.`SELECTVALUE` = `u`.`rzbdzt` ) )

),

' </ span ></ b ></ td >< td style = "padding: 0px; text-align: center; width: 150px; " >< b >< span style = "font-family:Microsoft YaHei; color:#999999;font-size: 12px;" > ',

(

SELECT

`ws`.`SELECTNAME`

FROM

`workflow_selectitem` `ws`

WHERE

( ( `ws`.`FIELDID` = 13084 ) AND ( `ws`.`SELECTVALUE` = `u`.`wdgdzt` ) )

),

' </ span ></ b ></ td ></ tr ></ tbody ></ TABLE > '

) AS `gjbznr`

FROM

`uf_rzryzlk` `u`

1. 生成的html拿到前端回测
2. 创建视图CREATE VIEW view_hrm_gjbzxs AS
3. 查询视图

2.2处理图片

因是单独裁剪，很难对齐，后续需重新切换做图

图片尺寸150*80（高度可根据实际需要调整）；

图标都要居中（要与下面的状态文字对齐）；

拼接中间容易出现缝隙，所以建议不要有中间这一杠。

2.3修改字段属性

字段属性SQL ：select gjbznr from view_hrm_gjbzxs where id=

效果：