1 功能简介

该控件用于特定的业务场景下,需要对某个文本内容进行阅读确认后,才能进行下一步操作,例如需要阅读诚信承诺书以后才能提交表单数据。

通常为了保证内容阅读的质量,一般不允许用户不经阅读就手动勾选,另外内容确认按钮允许设置倒计时,让用户在阅读页面停留来一定程度上保证阅读效果。

例如我们现在需要实现一个业务实例:当协议未被阅读时表单无法提交保存,且协议内容页面需保持5秒后才支持关闭。

2 配置说明

元数据配置

  • 该控件支持的数据类型有:字符型、文本型、整型、长整型、短整型、字节型、实数型、布尔型。
  • 控件本质类似于“开关”控件,存储值为控件高级设置中设置“选中值”和“非选中值”,选中/非选中值默认为1/0。
  • 协议设置:可以在打开的弹窗中设置控件在编辑页面和详情页面的显示内容。

单击“协议设置”打开配置界面如下图。

可以看到这里需要配置的是一个数据视图,因此我们需要提前准备好协议内容的数据内容将其在设计器中制作成一个数据视图对象。协议的内容至少包含外部控件显示的“标题”和“内容”两部分。

例如我们准备如下如所示一个最简单结构的协议内容数据表。

对内容维护如下如所示:

注意:其中“内容”可以允许富文本的格式展示,因此如对格式有要求的话可以使用富文本控件对内容进行维护和格式编辑。

这里省略制作数据视图的步骤,制作好数据视图以后,可以回来进行协议相关配置。

  • 若数据视图有参数,可以通过参数设置指定协议标题和内容的取值,如示例中我们将协议编码作为参数,希望协议内容的展示可以根据另一个字段的值变化而变化
  • 协议标题&协议内容:必须从数据视图返回字段中选取对应的字段,否则前端界面将无法显示协议信息。
  • 联动相关字段设置:在打开的弹窗中选择字段作为前端在编辑页面需要关注的控件,即选中的控件值发生变化时,需要通过数据视图查询更新协议名称和内容的数据,以达到数据联动的效果。不选择时,仅页面加载时加载一次协议数据,无法达到数据联动效果。前文我们已将协议编码参数值设置为来源于表单另外一个字段,因此此处需要勾选那个字段,否则将无法实现联动效果,如下图所示。

至此,我们已经完成的控件的基本配置,涉及具体业务和应用,还可以进行一些高级设置:控件高级设置、自动赋值、字段高级设置等。

这里对控件高级设置做简要说明:

  • 确认按钮文本:默认为空,不配置时前端显示为“我已知晓”
  • 确认按钮控制:默认选中“不控制”,支持配置“倒计时”并设置倒计时时长,默认15秒。
  • 布尔值设置同“开关控件”
  • 自动填充,填充值来源支持:选中状态(值)、协议名称(值)、协议内容(值)。触发时机:协议控件从未选中切换至选中时,进行填充。
  • 描述信息:字段描述信息。

这里按照实例的要求,我们只需将确认按钮控制设置为5秒即可,暂不需要配置其余配置项。

控件其他特殊规则说明:

  • 参数、筛选功能:同开关控件,参数设置仅支持选择输入框和开关,筛选功能操作符同开关
  • 不支持列表编辑
  • PC统计时仅支持计数/计数(含空值)

    表单配置

    创建一个最基础的单表模型,按实例场景要求“当协议未被阅读时表单无法提交保存”,那么就需要将协议字段的选中作为提交保存的校验条件,如下图。

    至此,我们的实例场景要求的协议阅读功能我们就基本配置完成了,让我们来看下效果。

3 显示&交互

PC端

控件初始化状态:

协议内容联动变化:

校验提示(前端校验):

协议阅读界面(倒计时读秒):

协议阅读界面(倒计时结束或无倒计时):

阅读后自动勾选:

移动端

未勾选状态:

校验提示(前端校验):

协议阅读界面(倒计时读秒):

协议阅读界面(倒计时结束或无倒计时):

阅读后自动勾选:

作者:Eric  创建时间:2023-07-27 11:56
最后编辑:Eric  更新时间:2025-04-24 13:55