- 1. 单行输入框 - textField
- 2. 多行输入框 - textareaField
- 3. 数字输入框 - numberField
- 4. 单选 - radioField
- 5. 下拉单选 - selectField
- 8. 日期 - dateField
- 9. 日期区间 - cascadeDate
- 10. 上传图片 - imageField
- 11. 上传附件 - attachmentField
- 12. 人员搜索框 - employeeField
- 13. 地区选择 - citySelectField
- 14. 级联选择 - cascadeSelectField
- 15. 部门选择 - departmentField
- 16. 明细组件 - tableField
- 17. 评分 - rateField
- 18. 国家选择 - countrySelectField
- 19. 公司选择 - companyField
- 20. word模板组件
- 21. 关联实例组件 - instanceField
1. 单行输入框 - textField
单行文字输入框组件
2. 多行输入框 - textareaField
多行文字输入框组件
3. 数字输入框 - numberField
只允许输入数字的单行输入框组件。
(1) 格式化
格式化输入的数字，最大长度为25位。有下列四种情况：
| 选项 | 说明 |
|---|---|
| 无 | 不启用格式化，保留原有格式 |
| 金额 | 金额格式，可以设置分隔符和小数位数 |
| 大陆手机号 | 手机号格式，可以设置分隔符 |
| 卡号 | 银行卡号格式，可以设置分隔符 |
(2) 单位名称
数字的单位，比如“元”、“本”、“页”等等。
(3) 对齐方式
数字对齐的方式，有左对齐(默认)和右对齐两种形式。
4. 单选 - radioField
单选选择组件。
(1) 排列风格 (仅PC端生效)
① 横向排列(默认)：选项横向排列成一行；
② 纵向排列：选项纵向排列成一列；
(2) 选项
① 自定义：自定义添加选项；
② 关联其它表单数据：以关联其他表单的数据作为选项；
③ 数据联动：以数据联动的数据作为选项；
④ 网关数据：以来自网关的数据作为选项；
(3) 关联选项设置
当目标选项被选择后，显示该选项所关联的组件。一个选项可以对应一个或多个组件的显示隐藏。
5. 下拉单选 - selectField
下拉方式的单项选择组件，带搜索和清除按钮。当数据量大于20条时，将自动开启搜索模式。
(1) 选项
① 自定义：自定义添加选项；
② 关联其它表单数据：以关联其他表单的数据作为选项；
③ 数据联动：以数据联动的数据作为选项；
④ 网关数据：以来自网关的数据作为选项；
(2) 关联选项设置
当目标选项被选择后，显示该选项所关联的组件。一个选项可以对应一个或多个组件的显示隐藏。
(3) 快速添加
启用快速添加后，将允许用户快速新增关联表单的数据作为新的选项。
(4) 允许清空 (仅PC端生效)
是否显示清空
所选项的按钮，默认显示。
(5) 网关数据做选项值
- 网关数据，带表单变量请求用${组件唯一id}
- json值格式。
{success: true,content: [{text: '选项label',value: '选项value'，defaultChecked: true},{text: '选项label2',value: '选项value2'}]，errorCode: '',errorMsg: ''}
(6)代码或者数据池的变量给组件赋值
- 从接口获取的数据，需要给下拉选择组件，id 为 selectField_jyy302c4 的组件赋值选项。 ```json // 情形一：options数据从接口获取，赋值给表单中某个下拉选择组件 const selectField = ctx.store.get(‘selectField_jyy302c4’); selectField.set(‘options’, [ { “defaultChecked”: true, “text”: “苹果”, “value”: “apple” }, { “defaultChecked”: false, “text”: “香蕉”, “value”: “banana” } ]);
// 情形二：options直接定义为变量，则数据格式如下： { “options”: [ { “defaultChecked”: true, “text”: “苹果”, “value”: “apple” }, { “defaultChecked”: false, “text”: “香蕉”, “value”: “banana” } ] } // 外层需要包一层 { options: [] }
<a name="3abbb82d"></a>### 6. 多选 - checkboxField多选选择组件。<a name="a78b83ab-1"></a>#### (1) 排列风格 (仅PC端生效)① 横向排列(默认)：选项横向排列成一行；<br />② 纵向排列：选项纵向排列成一列；<a name="c586bf64-1"></a>#### (2) 选项① 自定义：自定义添加选项；<br />② [关联其它表单数据](https://yuque.com/yida/help/yuw948)：以关联其他表单的数据作为选项；<br />③ [数据联动](https://yuque.com/yida/help/hggo6n)：以数据联动的数据作为选项；<br />④ 网关数据：以来自网关的数据作为选项；<a name="4fa39306"></a>### 7. 下拉多选 - multiSelectField下拉式多项选择组件，默认列表模式，带搜索。<a name="ae80a6f4"></a>#### (1) 多选方式① 复选：支持全选功能<br />② 列表：支持筛选功能<br /><a name="c586bf64-2"></a>#### (2) 选项① 自定义：自定义添加选项；<br />② [关联其它表单数据](https://yuque.com/yida/help/yuw948)：以关联其他表单的数据作为选项；<br />③ [数据联动](https://yuque.com/yida/help/hggo6n)：以数据联动的数据作为选项；<br />④ 网关数据：以来自网关的数据作为选项；<a name="94a2926e"></a>#### (4) 变量（包括数据源变量）作选项值```json{"options": [{"text": "选项一","value": "1"},{"text": "选项二","value": "2"}]}
8. 日期 - dateField
日期选择组件。
(1) 格式
① 年：以 yyyy 格式显示日期；
② 年月：以 yyyy-MM 格式显示日期；
③ 年月日(默认)：以 yyyy-MM-dd 格式显示日期；
④ 年月日时分：以 yyyy-MM-dd HH:mm 格式显示日期；
(2) 不可选时间限制
① 无：无限制，整个时间区间都可以选择；
② 今天之前(不含今天)：以昨天开始往前的区间为不可选区间；
③ 今天之后(不含今天)：以明天开始往后的区间为不可选区间；
④ 指定区间：以开始时间(包含)和结束时间(包含)的区间为不可选区间；
⑤ 自定义：需要用户自己在js函数disabledDate来判断用户选择的日期是否需要被禁用掉
案例1：下面针对自定义函数举一个简单的示例：
需求：不可选择时间限制内容为“今天之前（包含今天）”，因为在默认选项里面没有提供，只能编写js函数来实现了，不过也是非常简单的：
function disabledDate(date) {var today = new Date();if(date > today ){return true;}return false;}
选中日期组件“登记时间”，不可选择时间范围选择“自定义”，接着点击编辑“代码按钮”，在代码输入框中粘贴上述的js代码，然后点击页面设计器的保存按钮，准备去测试。
当前的测试的时间点为2020年2月16日，表单中的日期组件只允许选择今天和之前的日期，测试通过。
9. 日期区间 - cascadeDate
日期区间选择组件，格式为“开始时间 — 结束时间”。
(1) 日期格式
① 年月日(默认)：以 yyyy-MM-dd 格式显示日期；
② 年月：以 yyyy-MM 格式显示日期；
③ 年：以 yyyy 格式显示日期；
(2) 默认值
设置“开始日期”和“结束日期”的默认值。“开始日期”不能晚于“结束日期”。
(3) 可选日期 (仅PC端生效)
可选时间范围为“开始日期”和“结束日期”之间的时间段。“开始日期”不能晚于“结束日期”。
10. 上传图片 - imageField
上传图片组件，为用户提供上传图片的功能。
注：默认最大只支持20M的图片。如果有大于20M的图片上传需求，请将图片上传到其它存储空间，然后将链接贴在页面上面供查看下载。
(1) 是否多选（仅支持PC端）
在选择图片时是否可以同时选择多个（默认开启）。
(2) 最多上传（仅支持PC端）
限制上传图片的数量。
(3) 横向排列（仅支持PC端）
是否开启横向排列，图片横向排列且隐藏文件名称。
开启状态：
不开启状态：
其中每张上传后的图片上面都有三个按钮，“查看大图”、“下载”和“删除”按钮。
11. 上传附件 - attachmentField
为用户提供附件上传功能。
注：默认最大只支持20M的附件。如果有大于20M的附件上传需求，请将附件上传到其它存储空间，然后将链接贴在页面上面供查看下载。
(1) 是否多选（仅支持PC端）
在选择附件时是否可以同时选择多个（默认开启）。
(2) 格式限制
限制上传附件的格式。
注：移动端受限于该功能，不支持配置该项，非钉钉容器内只支持图片上传。
(3) 最多上传
限制上传附件的数量。
12. 人员搜索框 - employeeField
为用户提供人员选择的功能。
(1) 多选
是否支持一次选择多个人员（默认开启）。
(2) 默认值
可以选择指定人员作为默认值。
13. 地区选择 - citySelectField
为用户提供地区选择功能。
(1) 类型
提供三种选择类型：
① 省/市/区：省市区三级级联选择。
② 省/市：省市二级级联选择。
③ 省：省份一级选择。
(2) 编辑默认值
默认的城市值使用的 Code 列表请参考：CityCode列表
['110000', '110100', '110101']
14. 级联选择 - cascadeSelectField
为用户提供级联选择的功能。
(1) 每列宽度
定义每一列的宽度值，单位仅支持px。当文字显示不全，文字溢出时，可设置适当的宽度来显示。
(2) 编辑默认值
格式如下：
["part","part_b"]
(3) 列标题
注意：列标题的个数决定了当前级联的层数。
数组的每个元素类型可以为国际化结构或字符串，格式如下：
[{"type": "i18n","en_US": "column one","zh_CN": "第一列one"},"第二列"]
(4) 数据源
注意：所有的选项数据中，应保持 value 值的唯一，不能存在相同或重复的 value 值。(即使在数据的不同层级，也需要保持此原则)
数据外层封装，DATA类型如下：
{"type": "DATA","process": "function process(content){\n return content; \n}","willFetch": "function willFetch(params){\n return params; \n}","data": [{"value": "part","label": {"type": "i18n","en_US": "dep","zh_CN": "部门"},"children": [{"value": "part_a","label": "A部门"},{"value": "part_b","label": "B部门"}]},{"value": "product","label": "产品","children": [{"value": "product_a","label": "a产品"},{"value": "product_b","label": "b产品"}]}]}
① URL类型：使用远程数据作为数据源
方式：GET、POST、JSONP；
地址：URL地址
参数：请求携带的参数
请求处理函数：在请求发送前处理请求携带的参数
数据处理函数：在请求响应后处理请求响应的数据
{"dataSource": {"type": "URL","process": "function process(content){\n return content; \n}","willFetch": "function willFetch(params){\n return params; \n}","data": [{"value": "part","label": {"type": "i18n","en_US": "dep","zh_CN": "部门"},"children": [{"value": "part_a","label": "A部门"},{"value": "part_b","label": "B部门"}]},{"value": "product","label": "产品","children": [{"value": "product_a","label": "a产品"},{"value": "product_b","label": "b产品"}]}],"url": "http://www.example.com","params": [{"name": "a","value": "1","__sid__": "serial_j9xti6wn"}]}}
② DATA类型：使用用户自定义的数据作为数据源，数据格式如下
[{"value": "part","label": "部门","children": [{"value": "part_a","label": "A部门"},{"value": "part_b","label": "B部门"}]},{"value": "product","label": "产品","children": [{"value": "product_a","label": "a产品"},{"value": "product_b","label": "b产品"}]}]
15. 部门选择 - departmentField
为用户提供部门选择的功能。
(1) 搜索数据源（仅PC端支持）
① 方式：GET或JSONP；
② 地址：数据源地址；
③ 请求处理函数：在请求发送前处理请求携带的参数；
④ 数据处理函数：在请求响应后处理请求响应的数据。
(2) 移动端专有设置项（仅移动端支持）
① 为空文案：设置搜索内容存在时的文案；
16. 明细组件 - tableField
一种高级的容器组件，可以在其内部添加多个组件，并且重复多次。
(1) 排列方式（表格方式只在PC模式下有效）
① 平铺方式：
展现方式(只在平铺方式下有效)：横向和纵向
② 表格方式：
显示序号：只在PC表格方式下有效，是否显示前面的序号。
主题：只在PC表格方式下有效，分为斑马纹、分割线和边框线。
显示表头：只在PC表格方式下有效，是否隐藏显示表头。
(2) 按钮名称
添加一组明细组件按钮的名称。
(3) 删除按钮
删除一组明细组件按钮的名称。
17. 评分 - rateField
为用户提供评分功能的组件。
(1) 尺寸
评分五角星⭐️的大小，有大尺寸和小尺寸两种
(2) 总分数
一颗五角星⭐️代表一分，总的五角星数即为总分数
(3) 默认值
默认选中五角星⭐️的颗数，即默认分数值
(4) 显示描述
是否显示提示开关
(5) 提示方式（仅PC端支持）
下方展示：默认显示在评分的下方
悬浮展示：当鼠标移动到评分上面时，Tooltip形式显示
(6) 描述信息
每一颗星星的说明信息
18. 国家选择 - countrySelectField
为用户提供国家选择的功能。
(1) 多选模式（仅PC端支持）
是否支持多选开关
(2) 移动端专有设置项
① 搜索文案：搜索的文案；
② 为空文案：搜索内容不存在时的文案；
③ 取消文案：取消搜索的文案。
19. 公司选择 - companyField
为用户提供公司选择的功能。
(1) 搜索数据源（仅PC端支持）
① 方式：GET或JSONP；
② 地址：数据源地址；
③ 请求处理函数：在请求发送前处理请求携带的参数；
④ 数据处理函数：在请求响应后处理请求响应的数据。
(2) 移动端专有设置项
① 为空文案：搜索内容不存在时的文案；
注意：
- 公司组件默认数据是由法务提供的，通过公司库动态获取的，数据对不上可以找 曦妃 确认下
😋如果上述帮助文档未能解决您的问题，请联系 幸福的棉花糖
20. word模板组件
为用户提供根据word模板和表单内容生成word附件的功能
说明：该组件只能在流程页面中使用
（1）准备word模板
word模板支持表单变量替换，需要符合书写格式，word中的变量部分使用：${xxxxx} 格式，大括号内为表单变量的名称，示意图如下：
word模板中的变量支持的组件类型：
- 单行输入框
- 多行输入框
- 数字输入框
- 单选
- 下拉单选
- 多选
- 下拉多选
- 日期
- 图片
注意：
- 图片类型的变量如果需要在word模板中使用，组件的标识需要以 attachmentField** 或者 imageField **开头，例如：attachmentField_kdtv9ayf 、 imageField_kdtv9aye
-
（2）上传word模板
拖入word模板组件
选中组件，在右侧属性中上传word模板文件
word模板中支持表单变量，但需要按照一定的格式书写
注意：这里只允许上传word模板（仅支持docx），且大小不宜太多，系统限制20M以内
- 上传word模板后的效果如下
（3）在流程中的使用
流程提交后，「姓名」中的内容将被替换到word模板中对应的变量位置
其他操作和附件组件一致，不再赘述
21. 关联实例组件 - instanceField
关联实例组件的作用是在设计态去关联某个应用下的某个流程页面，然后在运行态可以选择关联所配置流程下的已经提交的流程实例数据。
下面亦图文的形式，详细的介绍下该控件的用法：
若有收获，就点个赞吧
0 人点赞
