【JIT/极态云】技术文档--表单

112 阅读13分钟

一、简介

表单可以基于模型操作某条数据,有三种模式:

  • 录入模式:用于新增录入数据;
  • 编辑模式:用于编辑修改某条数据;
  • 查看模式:用于查看某条数据详情。

二、展示效果

(一)PC 端

(二)移动端

在移动端仅支持一行一列

三、组件数据源

初始化配置时,模型类型可以选择数据表、聚合表、扩展表,当选择聚合表时,录入模式和编辑模式无法提交数据。

四、组件设计器

(一)显示字段

配置表单组件中显示哪些字段

(二)按钮

表单中支持添加自定义按钮,根据按钮的位置,可分为:顶部按钮、底部按钮、中间按钮。添加的按钮会作为组件的一个事件,可编写相应的业务逻辑

顶部按钮和底部按钮支持设置对齐方式(左对齐、居中、右对齐),中间按钮支持在表单中随意摆放位置。

按钮的配置项:

  1. 按钮名称:必填,也是作为组件事件的名称;
  2. 显示按钮标题:默认选中,只显示按钮的图标;
  3. 图标:按钮图标;
  4. 类型:按钮显示的样式;
  5. 显示条件:可以设置筛选条件,当满足条件时才显示按钮,否则不显示。当然,若不设置筛选条件,则按钮一直都会显示。

提交按钮

提交按钮是表单组件自带的一个底部按钮,不可被删除,点击可提交表单的数据,仅在表单的录入和编辑模式生效,在查看模式不会显示。

如果想在录入模式或编辑模式也不想显示“提交”按钮,可以设置筛选条件将“提交 ”按钮隐藏掉。

暂存按钮

暂存按钮可以在录入数据时,将数据临时保存,不直接提交数据,下次在录入时可以使用临时保存的数据。

暂存功能仅在表单的录入模式中生效,默认不开启。

(三)显示

显示暂存按钮

默认不选中,暂存功能仅在表单的录入模式中生效,默认是关闭状态。

暂存按钮可以在录入数据时,将数据临时保存,不直接提交数据,下次在录入时可以使用临时保存的数据。

显示再次录入按钮

在提交数据后,提交成功页面显示“再次录入”的按钮,点击可以再打开表单录入数据。再次录入也会执行表单刷新函数,表单设置的默认值也会生效。

再次录入仅在表单的录入模式中生效,默认是关闭状态。

显示审批记录

展示表单数据关联的审批流程的审批记录,前提是已经基于表单绑定的数据表创建了审批流程,也可支持多个审批流程。

审批记录仅在表单的查看/编辑模式中生效,默认是关闭状态。

显示操作记录

展示表单数据的历史操作记录,记录的内容有:操作人、操作时间、修改的字段、修改前的值、修改后的值。

操作记录仅在表单的查看/编辑模式中生效,默认是关闭状态。

(四)快捷操作

批量设置字段状态

一次性将表单中所有字段设置为:仅可见、可编辑、隐藏、清空,不需要针对每个字段单独设置状态。

快速设置表单布局

对表单所有的字段快速布局,支持:一行一列、一行两列、一行三列、一行四列。

(五)业务规则

校验规则

校验规则用于校验表单提交的数据是否符合规范,所以只会在表单的录入和编辑模式中生效。

主要配置有:

  • 规则名称:方便识别;

  • 校验条件:表单提交的数据需要满足的条件;

  • 不符合校验规则时的处理方式:

    • 警告后仍可保存:表单提交的数据不满足校验条件,会有警告提示,点击“继续保存”,还是可以提交数据;点击“取消”,取消提交数据;

  • 禁止提交:不满足校验条件的数据禁止保存,会有错误提示,数据无法提交。

  • 不符合校验规则时的提示语:警告提示或错误提示中的内容。

特别说明:

当一个表单组件中有多个校验规则,从上往下依次校验“禁止提交”的规则,再依次校验“警告后仍可保存”的规则。

显隐规则

显隐规则用于表单数据满足一定条件才显示某些字段或布局控件。在录入/编辑/查看模式中会生效。

主要配置有:

  • 规则名称:方便标识;
  • 筛选条件:表单数据需满足的条件;
  • 才显示的字段:当表单数据满足上面的筛选条件,会在表单中显示的字段;
  • 才显示选中的标签页/折叠面板:当表单数据满足上面的筛选条件,才会显示标签页/折叠面板,否则会是隐藏状态。

特别说明:

  • 为了达到显隐规则效果,在不满足条件时或者表单初始状态,一般需要配置的字段是隐藏状态。所以,在保存显隐规则后,若字段在表单中的不是隐藏状态,会自动将字段设为隐藏。这不是强制的,你还是可以将字段改为非隐藏状态;
  • 在表单实际运行时,若表单数据不满足筛选条件,显隐规则不会将“才显示的字段”自动置为隐藏,保持为字段本身设置的状态;
  • 当一个表单组件有多个显隐规则,从上往下依次执行。

必填规则

必填规则用于表单数据满足一定条件时才必填某些字段。仅在录入/编辑模式中生效。

主要配置有:

  • 规则名称:方便标识;
  • 筛选条件:表单数据需满足的条件;
  • 才必填的字段:当满足筛选条件时,字段都会置为必填。

特别说明:

  • 为了达到必填规则效果,在不满足条件时或者表单初始状态,一般需要配置的字段是非必填状态。在保存必填规则后,若字段在表单是必填状态,会自动将字段设为非必填。
  • 在表单实际运行时,若表单数据不满足筛选条件,必填规则不会将“才必填的字段”自动置为非必填;
  • 当一个表单组件有多个显隐规则,依次执行;
  • 当必填的字段被隐藏规则隐藏,则提交时不做必填校验。

编辑规则

编辑规则用于表单数据满足一定条件时才可以编辑某些字段。仅在录入/编辑模式中生效。

主要配置有:

  • 规则名称:方便标识;
  • 筛选条件:表单数据需满足的条件;
  • 才编辑的字段:当满足筛选条件时,字段状态置为可编辑状态。

特别说明:

  • 为了达到编辑规则效果,在不满足条件时或者表单初始状态,一般需要配置的字段是只读。在保存必填规则后,若字段在表单中的编辑/隐藏状态,会自动将字段设为只读。这不是强制,你还是更改字段的状态;
  • 在表单实际运行时,若表单数据不满足筛选条件,编辑规则不会将“才编辑的字段”自动置为只读,保持为字段本身设置的状态;
  • 当一个表单组件有多个编辑规则,从左往右依次执行。

(六)布局控件

布局控件可以丰富表单组件的排版布局。当前支持四种布局控件:标签页、折叠面板、占位符、分割线。

标签页

表单的字段可以移入到标签页中,标签页中可以添加多个标签。

主要配置项:

  • 标签页名称:方便识别,也可以在表单中隐藏标签页面的名称;
  • 位置:标签在表单标签页容器的相对位置;
  • 风格:支持简约和卡片;
  • 标签,可以添加多个标签和调整标签顺序。

将字段移动到标签页中,在表单字段上面点击“移动到”,可以将字段移入到标签页中。

折叠面板

表单的字段可以移入到折叠面板中,折叠面板中可以添加多个面板。

主要配置项:

  • 折叠面板名称:方便识别,也可以在表单中隐藏标签页面的名称;
  • 手风琴模式:默认是选中状态,开启后每次只展开一个面板;
  • 风格:支持简约和卡片;
  • 默认全部打开:非手风琴模式才可使用;
  • 背景色:自定义面板中的背景颜色,默认为白色;
  • 标签,可以添加多个标签和调整标签顺序。

将字段移动到标签页中,在表单字段上面点击“移动到”,可以将字段移入到标签页中。

占位符

占位符可以占据一块空白区域,不会被其他字段或控件排挤覆盖。

在表单实际运行,因显隐规则、用户字段权限等因素,表单在渲染时会根据显示的字段自动填充布局。这时,可以添加占位符,防止因自动布局而导致字段排版错乱。

分割线

分割线配置:

展示效果:

(七)字段布局

在表单字段的设计区域可以任意调整字段显示宽度及拖动布局。

选中字段,可以对字段进行:设置必填、设置可编辑、设置仅可见、删除等操作,删除字段并不是将字段从模型中删除,只是从表单组件中移除,还可以从左侧的数据源拖入该字段。

(八)字段配置

大部分字段在表单中的设置如下:

  • 字段名称:默认显示的是模型中字段标题,支持修改,也可以隐藏字段名称;
  • 字段权限:可编辑、仅可见、隐藏;
  • 字段占比:25、50、75、100,也可以在外面任意调整字段的占比;
  • 校验:必填或非必填;
  • 字段描述显示配置:若字段在模型上面设置了描述说明,则可以配置在表单中的显示样式

    • 在字段名称下方显示
    • 鼠标悬停图标时显示
  • 组件触发事件:

    • 当字段是可编辑状态,触发事件:{XXX 字段}字段改变后,选中后,字段值的值发生改变后即可触发;
    • 当字段是仅可见时,触发事件:{XXX 字段}点击后,选中后,字段在表单中是可点击的。

部分字段会有特殊的配置:

下拉框单选/选项组单选

显示配置,在字段为仅可见时生效:

  • 仅显示已选中选项,默认选中该项

  • 显示全部选项,选中的选项突出显示

图片

设置图片缩略图在表单中显示规则

  • 默认

  • 按容器宽度缩放

关联单选

关联单选在表单中显示的关联表的数据标题,可以对关联的数据设置筛选和下拉列表中显示的顺序

子表

子表在表单中的配置比较丰富。

  • 显示字段,设置子表显示的字段,默认是子表本身的全部字段;
  • 允许新增子表记录,勾选后显示新增子表的入口,否则不显示,支持修改按钮名称和样式;
  • 允许选择多行数据,勾选后子表前一列显示复选框;
  • 允许删除选中的行数据,前提是勾选了“允许选择多行数据”,勾选后可批量删除选中的多行数据,支持修改按钮名称;
  • 允许复制行数据,勾选后显示复制的按钮,支持修改按钮名称和样式;
  • 允许删除行数据,勾选后显示删除的入口,支持修改按钮名称和样式;
  • 可上移/下移子表顺序,勾选后子表的操作行显示上移和下移图标;
  • 可插入子表数据,勾选后子表的操作行显示插入数据的图标;
  • 支持添加工具栏按钮操作按钮;
  • 支持对子表设置筛选条件,若子表是可编辑状态,设置了筛选条件,若录入的子表数据不满足筛选条件,可能会导致录入的数据不可见;
  • 业务规则,可针对子表的字段设置可编辑规则;
  • 字段列宽调整,在弹窗中可设置子表字段列宽。

五、组件变量

变量 title变量 name读写值类型说明
表单数据formData可读写单行数据
显示模式mode可读写选项(录入 add |查看 read |编辑 edit)

六、组件函数

函数 title函数 name参数返回值说明
刷新call表单数据:单行数据没有传参数时,就是刷新已有的表单数据;再次录入也会执行刷新

七、组件事件

事件 title事件 name输出参数说明
刷新后afterCall表单数据:单行数据formData每次执行组件函数 【刷新/call】 之后触发;
提交前beforeSubmit表单数据:单行数据formData
提交后afterSubmit
{按钮}点击后click{Btn}表单数据:单行数据formData
{字段}点击后click{FieldName}表单数据:单行数据formData
{字段}值变更后after${FieldName}Change表单数据:单行数据formData

八、组件权限

在应用角色中可以针对不同的用户设置不同组件权限

(一)按钮权限

可以针对表单中添加的按钮设置权限

  1. 底部按钮
  2. 中部按钮
  3. 顶部按钮

(二)字段权限

设置字段的只读、可编辑权限。

九、注意事项

怎么判断表单中的字段给用户呈现的是什么状态?

表单中的字段有 3 种状态:被隐藏、只读、可编辑。

影响字段的状态主要分为三大阶段:

  1. 模型上对字段的配置;
  2. 表单组件对字段的配置(表单组件作为一个整体,不管表单组件内部哪种方式影响的,以表单对外输出最终的字段状态为准);
  3. 应用角色的权限的控制。

这三个阶段,在表单使用区实际渲染时,按字段状态的优先级:被隐藏>只读>可编辑!

例如:在这三个阶段中,有任何一个阶段设置了隐藏字段,则在使用区不显示该字段;若没有阶段设置字段隐藏,在任何一个阶段被设置为只读,则在使用区该字段只读,

……

以此类推。

而在表单组件内部对字段的影响又可以细分为三种情况:

  1. 表单组件的显示模式;
  2. 在表单组件中对该字段设置隐藏、仅可见、可编辑;
  3. 通过显隐规则或编辑规则;

判断的优先级就是:显示模式>显隐规则或编辑规则>在表单中直接对字段设置状态。

进一步了解极态云,体验产品?

请访问 极态云使用手册docs.jit.pro