在线表单和表单设计

概述

介绍目前版本表单设计和在线表单的关联使用包括:

创建表单设计页面自动生成一个在线表单.
表单设计字段配置和在线表单字段配置同步.
表单设计和在线表单的数据存储.
在线表单调用表单设计页面.

创建表单设计自动生成在线表单

目前版本是创建一个表单设计页面,点击发布后, 会自动生成一个对应的在线表单

在线表单的表描述和表单设计的表描述一致
在线表单的表名是自动生成的,和表单设计自动生成的 desformCode 有关联,例如:生成表单设计 desformCode 为:form_code_1687660626805, 对应在线表单表名为:form_1687660626805, 并且可以在表单设计页面列表中可以看到 online 表单名称

表单设计和在线表单名称对应

表单设计的配置和 online 表单的配置

表单设计配置的字段标题,控件类型(部分),是否查询,必填,校验规则,字段名是会同步到 online 表单的
目前只能在表单设计器使用的控件有: 颜色选择器,滑块,按钮,计算公式,手写签名,位置,布局组件,子表,这些在在线表单中显示为普通文本输入框

表单设计字段配置同步到在线表单1

表单设计字段配置同步到在线表单2

表单设计和在线表单的数据

目前在表单设计页面,填报数据,修改数据,都会存储到对应的在线表单中,可以在在线表单中查看和管理,但是在线表单中的数据修改,不会同步到表单设计中

在线表单调用表单设计页面

对于创建表单设计自动生成的在线表单,会默认开启在线表单两个配置:使用表单设计和表单编码.
当这两个配置开启时, 点击新增,就会打开一个表单设计填报页面,点击编辑和详情,会使用当前表单行数据 ID 打开对应表单设计页面的编辑或详情页面
当关闭这两个配置后, 在线表单新增,编辑,详情,都会使用在线表单的页面
关闭后可以手动开启, 再单独配置表单设计的表单编码,只要数据 ID 对的上,就可以打开任意的表单设计页面

在线表单配置使用表单设计页面

使用 JS 增强打开表单设计填报页面

可以拦截列表的新增,编辑,详情按钮点击事件(beforeAdd/beforeEdit/beforeDetail), 手动打开表单设计页面
可以自定义按钮打开

openDesignForm(that,record){

  const desFormCode = 'form_code_1686644054016' // 或者本身的 that.desFormCode

  const dataId = '1668532375283421185' // 或者本条数据的ID record.id

  const urlParams = { fd_name:"小明", fd_age:12 }; // 额外添加到表单设计页面URL里面的参数, 会在提交时合并进去, 不需要就传递个空对象就好

  // 打开新增
  // that.$emit('desform', 'add', desFormCode, null, '新增数据', false, urlParams);

  //打开编辑
  // that.$emit('desform', 'edit', desFormCode, dataId, '编辑数据', true, urlParams)

  //打开详情
  that.$emit('desform', 'detail', desFormCode, dataId, '查看数据', true, urlParams)
}

在线表单打开表单设计页面

感谢您的反馈。如果您有关于如何使用 KubeSphere 的具体问题，请在 Slack 上提问。如果您想报告问题或提出改进建议，请在 GitHub 存储库中打开问题。

页面内容