如何使用onLoad函数
渲染前修改数据
<script id="customScript"> (function(form){ //数据加载后,渲染之前,this为window form.on('onLoad',function(data, dataPermission){ data.txtName = 'txt'; },'cover'); }) </script>
渲染前等待接口修改数据
<script id="customScript"> (function(form){ //数据加载后,渲染之前,this为window form.on('onLoad',function(data, dataPermission){ // 拼接api地址,并发送ajax请求 var url = config.apiHost + '/user'; return axios.get(url).then(function(res){ data.txtName = res.name; }); },'cover'); }) </script>
渲染前修改数据权限
<script id="customScript"> (function(form){ //数据加载后,渲染之前 form.on('onLoad',function(data, dataPermission){ //不可编辑 dataPermission.txt.e = false; //不可见 dataPermission.txt.v = false; //必填 dataPermission.txt.r = true; },'cover'); }) </script>
如何定制表单操作按钮
隐藏提交按钮
隐藏系统按钮
<script id="customScript"> (function(form){ //数据加载后,渲染之前,this为window form.on('onLoad',function(action,data){ var btnSubmit = this.actions.find(function(a){ return a.code === 'submit'; }); if(btnSubmit){ btnSubmit.visible = false; } }); }) </script>
隐藏自定义按钮
自定义按钮是获取到表单元数据中的自定义按钮配置数据追加进去的,需要在onRendered中编写隐藏逻辑,且自定义按钮本身也有显示条件,所以需要在actionController上进行隐藏;
<script id="customScript"> (function(form){ //渲染完成后 form.on('onRendered',function(data){ console.log('=>this.actions',this.actions); console.log('=>data',data); this.actions.forEach((item)=>{ // data.Number1735095458291 === 1 if (item.code === 'button01') { item.actionController.visible = false; } }); }); }) </script>
阻止按钮的默认行为
<script id="customScript"> (function(form){ //操作前(包含自定义按钮)执行,返回false阻止按钮操作 form.on('onPreAction',function(action,data){ if(action.code === 'save'){ return false; } }); }) </script>
添加自定义按钮,发送请求
<section id="toolbar"> <action text="按钮1" code="btn1"></action> </section> <script id="customScript"> (function(form){ //自定义按钮执行 form.on('onCustomAction',function(action,data){ if(action.code === 'btn1'){ // 拼接api地址,并发送ajax请求 var url = config.apiHost + '/user'; axios.get(url).then(function(res){}); } }); }) </script>
如何显示对话框、提示框
显示提示框
// 成功 this.$message.success('success'); // 失败 this.$message.error('error'); // loading this.$message.loading(); this.$message.loading('加载中'); //0不自动隐藏,大于0显示的秒数 var closeLoading = this.$message.loading('加载中', 0); closeLoading();
显示对话框
this.$confirm({ title:'对话框', content:'ddddd', onOk(){ alert('onOk') }, onCancel(){ alert('onCancel') } })
如何使用onValidate函数
添加自定义校验
form.on('onValidate',function(action,data){ if(this.txtName.value !== 'a'){ this.$message.error('校验失败'); return false; //校验失败,阻止后续动作执行 } });
异步自定义校验
form.on('onValidate',function(action,data){ var closeLoading = this.$message.loading('正在校验数据',0); var form = this; return new Promise(function(resolve,reject){ setTimeout(function(){ if(form.txtName.value !== 'a'){ closeLoading(); form.$message.error('校验失败'); resolve(false); } },5000); }); });
如何自定义HTML
添加HTML片段
html片段必须添加在节点下
<section type="template" id="template"> <a-row> <a-col> <div>div1</div> </a-col> </a-row> </section>
为HTML片段绑定事件
<section type="template" id="template"> <a-row> <a-col> <button id="btn1" onclick="show()">按钮</button> </a-col> </a-row> </section> <script> function show(){ alert('aaabbbb'); } </script> <script id="customScript"> </script>
如何操作控件的属性、订阅控件的事件
获取、修改控件的值
控件的类型不同获得的值类型也不同,详见表单控件API
// 获取、设置文本的值,txtName是控件的key var name = this.text1.value; this.text1.value = 'a'; // 设置数值的值 this.number1.value = 1; // 设置日期的值 this.date1.value = new Date(2019); // 设置选人控件的值 this.userSelect1.value = [{ type: 1, //1部门,3人员 name: 'name1', imgUrl: '//www.baidu.com/img1.png', id: 'id1', //departmentId : 'departmentId' 配置了选人控件属于、包含表达式时必需, //departments : [] 配置了选人控件属于、包含表达式时必需 }]; // 关联表单 this.relevanceForm1.value = { id: 'bizObjectId', name: '数据摘要' }; // 复选框 this.checkbox1.value = ['a','b'];
监听控件的值变化事件
// txtName是控件的key,控件的类型不同获得的值类型也不同,详见表单控件API this.txtName.valueChange.subscribe(function(change){ //最新值 console.log(change.value); //旧值 console.log(change.oldValue); }); // 订阅属性变化 this.txtName.propertryChange.subscribe(function(change){ change.name //属性名称:display、required等等 change.value //最新值 change.oldValue //旧值 });
控制控件的显示与隐藏
// 隐藏 this.txtName.display = false; // 显示 this.txtName.display = true;
设置控件的编辑状态
// 编辑 this.txtName.edit = true; // 只读 this.txtName.edit = false;
获取、设置下拉框、单选、复选的选项
//设置 this.dropdown1.items = ['a','b']; //获取 var items = this.dropdown1.items;
子表赋值
//整表赋值 this.sheet1.value = [{ text1: 'a', text2: 'b' },{ text1: 'a', text2: 'b' }]; //整行赋值 this.sheet1.rows[0].value = { text1: 'a', text2: 'b' }; //单元格赋值,第1行第1列 this.sheet1.getCell(0, 0).value = 'a'; //删除第一行 this.sheet1.removeRow(0);
子表事件订阅
//订阅第1行的行值变化 this.sheet1.getRowValueChange(0).subscribe(function(change){}); //订阅整列的列值变化 const subject = this.sheet1.getColumnValueChange('text1'); if(subject){ subject.subscribe(function(change){}); } //订阅子表的行变化 this.sheet1.rowChange.subscribe(function(change){ if(change.type === 'insert'){ //新增行 }else if(change.type === 'insertMulti'){ //批量新增行 }else if(change.type === 'remove'){ //删除行 }else if(change.type === 'removeMulti'){ //批量删除行 } })
生命周期
onLoad 加载数据后,渲染之前
onRendered 渲染后
onValidate 内置校验通过后
onPreAction 按钮事件执行前
onActionDone 按钮事件执行后
onCustomAction 自定义按钮事件
onLoad
参数0 data
API表单数据,可直接修改,数据结构如下:
{ [ key : string ] : any }
data.sequenceStatus 流程状态
DRAFT 草稿
PROCESSING 进行中
COMPLETED 已完成
CANCELED 已取消
EXCEPTION 流程异常
参数1 dataPermission
API表单数据权限,来源于流程设计-数据权限,可直接修改,因此可修改对应的值来控制可读可写,数据结构如下:
{ [ key:string ] : { e : boolean, // 可写 r : boolean, // 必填 v : boolean, // 可见 subDataPermission ?: [] //子表列的数据权限 } }
返回值
如果onLoad返回Promise,表单会等待其完成;如果有返回数据,将会完全覆盖API返回的data
onRendered
表单完成渲染后,因此可以在这里做一些DOM操作;由于自定义表单在iframe加载和解析,因此需要下面语法
window.parent.document.getElementById('signin_error')
onRendered
方法内可以获取到表单控件对象,可以进行控件值监听和赋值.
注意: onRendered
中不要使用箭头函数,如果是IE浏览器则需要通过window.h3form
拿控件对象.
onValidate
表单submit前,内置校验通过后触发,返回false表示校验失败,会中断submit
如果onValidate返回Promise,表单会等待其完成
onPreAction
按钮事件执行前,包括自定义按钮事件,return false
会阻止事件执行
onActionDone
按钮事件执行后,包括自定义按钮事件
返回值
return false
会阻止默认行为,如提交后的自动跳转
onCustomAction
自定义按钮事件执行
全局对象
全局对象是挂在window下的对象,是除了标准对象外扩充的对象
axios
config
axios
第三方ajax库
config
项目环境参数配置对象,来源项目public/config.js
3个端都有的配置,其他入口会根据需要扩展
oauthHost: // OAuth地址 redirectHost: // OAuth回调地址 client_id: // OAuth参数 scope: // OAuth参数 secret: // OAuth参数, apiHost: // 后台API地址,
示例
// 拼接api地址,并发送ajax请求 var url = config.apiHost + '/api/meeting/validate?meetingId=' + meetingId; axios.get(url).then(function(res){ });
表单对象
表单对象是在生命周期函数中,通过this可访问的对象,有以下几类型:
Vue组件
表单按钮数组接口
表单逻辑执行接口
表单控件控制器
Vue组件
$message
$confirm
$router
表单按钮数组接口
通过actions访问,可通过该对象获知当前用户可操作的权限,对象有如下属性:
code: // 权限编码 text: // 按钮文本 visible:// 是否可见,默认为true
因此通过visible我们可以隐藏默认的按钮,如暂存、提交等:
//数据加载后,渲染之前 form.on('onLoad', function (data) { const codes = ['save','submit']; this.actions.filter(function(ac){ return codes.indexOf(ac.code) > -1; }).forEach(function(ac){ return ac.visible = false; }); }, 'cover');
表单逻辑执行接口
执行表单内置逻辑,如暂存、提交等,目前公开的函数:
doAction
submit
submit是doAction('submit')的简写,doAction唯一的参数是action.code
表单控件控制器
详见 表单控件API
访问控件API必须在onLoad之后
控件属性未标识为只读的,均可获取和设置
表单实例API
表单实例属性
成员 | 类型 | 默认值 | 说明 |
$confirm | object | 只读,对话框 | |
$message | object | 只读,成功、错误、加载中消息框 | |
$router | object | 只读,Vue路由对象 | |
$i18n | object | 只读,Vue多语言对象,v1.4.0-alpha20+ | |
actions | object[] | 只读,表单按钮列表 | |
workflowInfo | object | null | 只读,流程信息,v1.4.0-alpha20+ | |
currentUser | object | 只读,当前登录用户,v1.4.0-alpha20+ | |
submited | boolean | 只读,是否提交过,v1.4.0-alpha20+ | |
isNew | boolean | 只读,是否新增状态,v1.4.0-alpha20+ | |
value | object | 只读,当前表单所有控件的值 | |
errors | object | 只读,当前表单所有控件的校验错误信息 |
actions属性
成员 | 类型 | 默认值 | 说明 |
code | string | 按钮编码 | |
text | string | 按钮文本 | |
disabled | boolean | 禁用的 | |
visible | boolean | 可见的 |
workflowInfo属性
成员 | 类型 | 默认值 | 说明 |
code | string | 流程编码 | |
instanceId | string | 流程实例ID | |
instanceName | string | 流程实例名称 | |
tokenId | string | 流程活动实例ID | |
itemId | string | 流程任务ID | |
version | number | 流程版本 | |
activityCode | string | 当前流程节点编码 | |
activityName | string | 当前流程节点名称 |
表单实例方法
成员 | 参数 | 返回值 | 说明 |
validate | boolean | 校验表单 | |
doAction | code: string | 执行表单动作,提交submit、暂存save等 | |
submit | 提交表单,doAction('submt')快捷方法 |
控件共有API
所有控件共有属性
成员 | 类型 | 默认值 | 说明 |
key | string | 只读,唯一标识 | |
type | number | 只读,控件类型,对应枚举FormControlType | |
options | object | 只读,控件选项,不同控件有不同的选项对象 | |
parentKey | string | undefined | undefined | 只读,父级key,目前只有子表行列控件有该属性 |
errors | string[] | [] | 只读,校验后错误code |
invalid | boolean | 只读,无效的,校验不通过 | |
inSheet | boolean | 只读,是否在子表中 | |
propertyChange | Rxjs Observable | 只读,属性变化可观察对象,回调函数(change: ControlPropertyChange) => void | |
value | any | null | 获取或设置控件值,不同控件具有不同类型的值 |
display | boolean | true | 获取或设置是否显示 |
基础控件共有属性
基础控件指除子表、子表行以外的控件
成员 | 类型 | 默认值 | 说明 |
hasValue | boolean | 只读,是否有值,不为null、undefined | |
valueChange | Rxjs Observable | 只读,值变化可观察对象,回调函数(change: ControlValueChange) => void | |
required | boolean | false | 获取或设置是否必填 |
edit | boolean | 获取或设置编辑模式,v1.3.0+ |
ControlValueChange属性
成员 | 类型 | 说明 |
value | any | 当前值 |
oldValue | any | undefined | 旧值 |
ControlPropertyChange属性
ControlPropertyChange 继承自 ControlValueChange
成员 | 类型 | 说明 |
name | string | 属性名称有:display、value、required、min、max、errors、disabled、readonly |
所有控件共有方法
成员 | 参数 | 返回值 | 说明 |
validate | boolean | 校验 |
示例
// text1是控件的key //隐藏控件 this.text1.display = false; //设为必填 this.text1.required = true; //清空值 this.text1.value = null; // 进入编辑状态 this.text1.edit = true; // 进入只读状态 this.text1.edit = false; // 订阅值变化 var subscription = this.text1.valueChange.subscribe((change)=>{ change.value //最新值 change.oldValue //旧值 }); // 取消订阅 subscription.unsubscribe(); // 订阅属性变化 display required value等等 this.text1.propertyChange.subscribe((change)=>{ change.name //属性名称 change.value //最新值 change.oldValue //旧值 });
类型对照表
控件类型 | type值 | value类型 | value默认值 | 说明 |
短文本 | 1 | string | null | null | |
长文本 | 2 | string | null | null | |
日期 | 3 | Date | null | null | |
数值 | 4 | number | null | null | |
单选 | 5 | string | null | null | |
复选 | 6 | string[] | null | null | |
下拉 | 7 | string[] | null | null | |
逻辑 | 8 | boolean | true | |
附件 | 9 | object[] | null | null | |
图片 | 10 | object[] | null | null | |
位置 | 11 | object | null | null | |
地址 | 14 | object | null | null | |
人员单选 | 50 | object[] | null | null | |
人员多选 | 51 | object[] | null | null | |
部门单选 | 60 | object[] | null | null | |
部门多选 | 61 | object[] | null | null | |
关联表单 | 80 | object | null | null |
附件&图片值类型
成员 | 类型 | 说明 |
refId | string | 唯一标识 |
fileExtension | string | 文件扩展名 |
mimeType | string | 文件类型 |
name | string | 文件名称 |
位置&地址值类型
成员 | 类型 | 说明 |
provinceName | string | 省名 |
provinceAdcode | string | 省编码 |
cityName | string | 城市名 |
cityAdcode | string | 城市编码 |
districtName | string | 区名 |
districtAdcode | string | 区编码 |
address | string | 详细地址 |
lat | number | string | 纬度 |
lng | number | string | 经度 |
人员&部门值的数据格式
成员 | 类型 | 说明 |
type | number | 1部门,3人员 |
name | string | 名称 |
imgUrl | string | 头像 |
id | string | |
departmentId | string | 主部门ID |
departments | object[] | 所属部门列表(包含兼职) |
userId | string | |
sourceId | string | |
corpId | string |
注意: 不应该自定义value给选人控件或部门控件赋值.
关联表单值类型
成员 | 类型 | 说明 |
id | string | 关联记录的ID |
name | string | 关联记录的数据摘要 |
单行文本&长文本API
属性
成员 | 类型 | 默认值 | 说明 |
type | number | 1 | 只读,类型 |
value | string | null | null | 获取或设置当前值 |
minLength | number | undefined | undefined | 获取或设置最小长度 |
maxLength | number | undefined | undefined | 获取或设置最大长度 |
pattern | RegExp | undefined | undefined | 获取或设置格式正则校验 |
方法
成员 | 参数 | 返回值 | 说明 |
validateRequired | boolean | 校验必填 | |
validatePattern | boolean | 校验格式 | |
validateMinLength | boolean | 校验最小长度 | |
validateMaxLength | boolean | 校验最大长度 |
日期&数值API
T,日期Data,数值number
属性
成员 | 类型 | 默认值 | 说明 |
type | number | 只读,类型,日期3,数值4 | |
value | T | null | null | 获取或设置当前值 |
min | T | null | null | 获取或设置最小值 |
max | T | null | null | 获取或设置最大值 |
方法
成员 | 参数 | 返回值 | 说明 |
validateRequired | boolean | 校验必填 | |
validateMin | boolean | 校验最小值 | |
validateMax | boolean | 校验最大值 | |
compare | a: T | null, b: T | null | number, -1小于, 0等于, 1大于 | 比较大小 |
示例
//设置日期的显示格式 this.date1.options.format = 'YYYY-MM'; //设置数值的显示格式 this.number1.options.format = 'integer'; // 整数 200
日期格式对照表
格式 | 示例 |
YYYY-MM | 2012-08 |
YYYY-MM-DD | 2012-08-20 |
YYYY-MM-DD HH | 2012-08-20 14 |
YYYY-MM-DD HH:mm | 2012-08-20 14:00 |
YYYY-MM-DD HH:mm:ss | 2012-08-20 14:00:00 |
数字格式对照表
格式 | 示例 | 说明 |
none | 无格式 | |
integer | 200 | 整数 |
tenths | 2,000.0 | 十分位 |
percentile | 2,000.00 | 两位小数点 |
ratio | 20% | 百分比,无小数点 |
ratio.tenths | 20.0% | 百分比单小数点 |
ratio.percentile | 20.00% | 百分比双小数点 |
RMB.percentile | ¥2,000.00 | 货币-人民币 |
RMB.Millimeter | ¥2,000.000 | 货币-人民币 |
RMB.tenThousand | ¥2,000.0000 | 货币-人民币 |
dollar.percentile | $2,000.00 | 货币-美元 |
dollar.Millimeter | $2,000.000 | 货币-美元 |
dollar.tenThousand | $2,000.0000 | 货币-美元 |
euro.percentile | €2,000.00 | 货币-欧元 |
euro.Millimeter | €2,000.000 | 货币-欧元 |
euro.tenThousand | €2,000.0000 | 货币-欧元 |
HK.percentile | HK2,000.00 | 货币-港币 |
HK.Millimeter | HK2,000.000 | 货币-港币 |
HK.tenThousand | HK2,000.0000 | 货币-港币 |
单选框API
属性
成员 | 类型 | 默认值 | 说明 |
type | number | 5 | 只读,类型 |
value | string | null | null | 获取或设置当前值 |
items | string[] | [] | 获取或设置选项列表,v1.3.2+ |
方法
成员 | 参数 | 返回值 | 说明 |
validateRequired | boolean | 校验必填 |
复选框&下拉框API
属性
成员 | 类型 | 默认值 | 说明 |
type | number | 只读,类型,复选框6,下拉框7 | |
value | string[] | null | null | 获取或设置当前值 |
items | string[] | [] | 获取或设置选项列表,v1.3.2+ |
minCount | number | undefined | undefined | 获取或设置最小数量 |
maxCount | number | undefined | undefined | 获取或设置最大数量 |
方法
成员 | 参数 | 返回值 | 说明 |
validateRequired | boolean | 校验必填 | |
validateMinCount | boolean | 校验最小数量 | |
validateMaxCount | boolean | 校验最大数量 |
子表API
属性
成员 | 类型 | 默认值 | 说明 |
type | number | 201 | 只读,类型 |
rows | object[] | [] | 只读,所有行对象 |
errors | { [key:string] : string[] } | {} | 只读,校验后所有行的错误code |
rowChange | Rxjs Observable | 只读,行变化可观察对象,回调函数(change: RowChange) => void | |
value | object[] | null | null | 获取或设置当前值 |
RowChange属性
成员 | 类型 | 说明 |
type | string | 行变化类型,insert新增行,remove删除行,insertMulti批量新增行(v1.4.0-alpha20+),removeMulti批量删除行(v1.4.0-alpha20+) |
index | number | 行索引 |
value | object | undefined | 当前值 |
oldValue | object | undefined | 变化前的值 |
removeIndexs | number[] | undefined | 批量删除的行索引集合,批量删除时有值,v1.4.0-alpha20+ |
insertCount | number | undefined | 批量插入的行数,批量新增时有值,v1.4.0-alpha20+ |
方法
成员 | 参数 | 返回值 | 说明 |
validate | boolean | 校验子表所有行 | |
getCell | rowIndex: number, columnIndex: number | string | object | 获取单元格对象 columnIndex也可为列的数据项编码 |
insertRow | index: number, value?: object | object | 插入新行 |
insertRows | index: number, values: object[] | 批量插入新行,v1.4.0-alpha20+ | |
appendRow | rowValue?: object | object | 在最后追加新行 |
appendRows | values: object[] | 批量追加新行,v1.4.0-alpha20+ | |
removeRow | index: number | 移除指定行 | |
removeRows | indexs: number[] | 批量移除指定行,v1.4.0-alpha20+ | |
removeAllRow | 移除所有行,v1.3.0+ | ||
getRowValueChange | index: number | Rxjs Observable | 获取行值变化可观察对象,回调函数(change: RowValueChange) => void |
getColumnValueChange | key: string | Rxjs Observable | undefined | 获取列值变化可观察对象,回调函数(change: ColumnValueChange) => void |
RowValueChange属性
成员 | 类型 | 说明 |
index | number | 行索引 |
columnIndex | number | 变化的列索引,v1.3.0+ |
value | object | undefined | 当前值 |
oldValue | object | undefined | 变化前的值 |
ColumnValueChange属性
成员 | 类型 | 说明 |
key | string | 列key |
index | number | 列索引 |
rowIndex | number | 变化的行索引,v1.3.0+ |
value | any[] | undefined | 当前值 |
oldValue | any[] | undefined | 变化前的值 |
示例
子表支持表、行、单元格取赋值
//整表赋值 this.sheet1.value = [{ text1: 'a', text2: 'b' },{ text1: 'a', text2: 'b' }]; //整行赋值 this.sheet1.rows[0].value = { text1: 'a', text2: 'b' }; //单元格赋值,第1行第1列 this.sheet1.getCell(0, 0).value = 'a'; //订阅第1行的值变化 this.sheet1.getRowValueChange(0).subscribe((change)=>{}); //订阅整列的值变化 const subject = this.sheet1.getColumnValueChange('text1'); if(subject){ subject.subscribe((change)=>{}); } //订阅子表的行变化 this.sheet1.rowChange.subscribe((change)=>{});
在表单控件API文档中我们得知不同类型控件的选项是不同的,控件选项是在表单设计器设计时生成的。在运行时只有极少数的属性修改会产生影响,尽管如此也不建议在运行时修改选项属性,了解属性详细含义有助于我们排查错误。
输入类控件
共有属性
成员 | 类型 | 默认值 | 说明 |
name | string | '' | 控件名称 |
name_i18n | object | null | null | 多语言 |
visible | boolean | true | 是否可见 |
style | string | null | null | 控件样式 |
displayFormula | string | '' | 显示条件表达式 |
onChange | string | null | null | 变更事件 |
requiredFormula | string | '' | 必填条件表达式 |
单文本
成员 | 类型 | 默认值 | 说明 |
defaultValue | string | null | null | 默认值 |
placeholder | string | '请输入' | 水印 |
regexp | string | null | null | 正则校验表达式 |
regexpText | string | '' | 正则错误提示 |
maxLength | number | 128 | 最大长度 |
长文本
成员 | 类型 | 默认值 | 说明 |
defaultValue | string | null | null | 默认值 |
maxLength | number | 2000 | 最大长度 |
数值
成员 | 类型 | 默认值 | 说明 |
defaultValue | string | null | null | 默认值 |
placeholder | string | '请输入' | 水印 |
computeFormula | string | '' | 计算规则表达式 |
format | string | 'integer' | 显示格式 |
日期
成员 | 类型 | 默认值 | 说明 |
defaultValue | 'none' | 'current' | 'dataItemDefault' | 'none' | 默认值 |
dataItemDefault | string | '' | 数据项默认值 |
format | string | 'YYYY-MM-DD' | 显示格式 |
minDate | string | '' | 最小值 |
maxDate | string | '' | 最大值 |
位置
成员 | 类型 | 默认值 | 说明 |
range | string | '500m' | 精确范围 |
displayMode | 'accurate' | 'arbitrary' | 'accurate' | 显示模式 accurate准确定位 arbitrary任意的 |
onChange | string | null | null | 变更事件 |
地址
成员 | 类型 | 默认值 | 说明 |
locationType | 'pp-cc-aa' | 'pp-cc' | 'pp' | 'pp-cc-aa' | 位置类型 |
addressDetail | string | 'true' | 是否显示详细地址 |
showEmpty | string | 'false' | 是否显示空选项 |
emptyValue | string | '请选择' | 空值 |
onChange | string | null | null | 变更事件 |
选人控件
成员 | 类型 | 默认值 | 说明 |
multi | boolean | false | 是否多选 |
deptVisible | string | 'all' | 可选类型,all组织和用户 user用户 org组织 |
defaultValue | any[] | null | null | 默认值 |
defaultValueType | string | '' | 默认值类型,originator创建人、originatorDept创建人部门、ref引用控件值 |
orgRoot | any[] | string | null | null | 组织根节点,数组:选定的值;字符串:值表达式 |
orgRootValueType | string | '' | 组织根节点值类型,同默认值类型 |
recursive | boolean | true | 递归的 |
roles | string | '' | 角色范围 |
mappings | string | '' | 映射关系 |
displayType | string | 'tag' | 显示类型,tag标签,text文本 |
关联表单
成员 | 类型 | 默认值 | 说明 |
schemaCode | string | '' | 业务模型 |
queryCode | string | '' | 查询列表编码 |
conditions | string | '' | 查询条件 |
mappings | string | '' | 映射关系 |
linkMode | boolean | true | 显示链接模式 |
isAuthorize | boolean | true | 是否临时授权 |
selectMode | string | true | 选择数据方式,popup弹出框,dropdown下拉框 |
选择类控件
共有属性
成员 | 类型 | 默认值 | 说明 |
name | string | '' | 控件名称 |
name_i18n | object | null | null | 多语言 |
visible | boolean | true | 是否可见 |
style | string | null | null | 控件样式 |
displayFormula | string | '' | 显示条件表达式 |
onChange | string | null | null | 变更事件 |
requiredFormula | string | '' | 必填条件表达式 |
defaultValue | string | '' | 默认值 |
options | string | '' | 选项 |
单选 & 复选
成员 | 类型 | 默认值 | 说明 |
direction | 'horizontal' | 'vertical' | 'horizontal' | 方向 horizontal 水平 vertical 垂直 |
下拉
成员 | 类型 | 默认值 | 说明 |
displayEmpty | boolean | true | 是否显示空选项 |
emptyValue | string | '请选择' | 空选项 |
multi | boolean | false | 是否多选 |
布局类控件
共有属性
成员 | 类型 | 默认值 | 说明 |
name | string | '' | 控件名称 |
align | 'left' | 'center' | 'right' | 'left' | 对齐 |
style | string | null | null | 控件样式 |
displayFormula | string | '' | 显示条件表达式 |
分组标题
成员 | 类型 | 默认值 | 说明 |
expand | boolean | true | 是否展开 |
系统控件
共有属性
成员 | 类型 | 默认值 | 说明 |
name | string | '' | 控件名称 |
name_i18n | object | null | null | 多语言 |
visible | boolean | true | 是否可见 |
style | string | null | null | 控件样式 |
单据号
成员 | 类型 | 默认值 | 说明 |
prefix | string | null | null | 流水号编码 |
maxLength | string | '6' | 最大长度 |
resetDate | string | 'YEAR' | 重置策略时间 'none' | 'YEAR' | 'MONTH' | 'DAY' |
创建时间
成员 | 类型 | 默认值 | 说明 |
format | string | 'YYYY-MM-DD' | 显示格式 |
上传类控件
共有属性
成员 | 类型 | 默认值 | 说明 |
name | string | '' | 控件名称 |
name_i18n | object | null | null | 多语言 |
visible | boolean | true | 是否可见 |
style | string | null | null | 控件样式 |
displayFormula | string | '' | 显示条件 |
requiredFormula | string | '' | 必填条件 |
limit | string | '5M' | 文件大小限制 |
batch | boolean | true | 是否可批量下载 |
附件
成员 | 类型 | 默认值 | 说明 |
fileTypes | string | null | null | 文件类型 |
onUpload | string | null | null | 上传附件事件 |
onDelete | string | null | null | 删除附件事件 |
图片
成员 | 类型 | 默认值 | 说明 |
number | 'batch' | 'unique' | 'batch' | 上传数量 单张 unique 多张 batch |
addWatermark | boolean | true | 是否添加水印 |
imageQuality | number | 50 | 图片质量30...100 |
compressible | boolean | false | 可压缩 |
onlyShoot | boolean | false | 是否只允许拍照 |
onUpload | string | null | null | 上传附件事件 |
onDelete | string | null | null | 删除附件事件 |
手写签名
成员 | 类型 | 默认值 | 说明 |
displayEnd | string | '移动端' | 显示端 |
审批意见
成员 | 类型 | 默认值 | 说明 |
showUpload | boolean | true | 是否可上传附件 |
fileTypes | string | null | null | 文件类型 |
defaultValue | string | null | null | 默认审批意见 |
showSignature | boolean | true | 手写签名 |
signatureIsRequired | boolean | false | 手写签名是否必填 |
子表
子表
成员 | 类型 | 默认值 | 说明 |
name | string | '' | 控件名称 |
name_i18n | object | null | null | 多语言 |
visible | boolean | true | 是否可见 |
style | string | null | null | 控件样式 |
rows | number | 2 | 默认行数 |
editable | boolean | true | 能否编辑 |
exportable | boolean | true | 能否导出 |
showTotal | boolean | false | 显示合计 |
displayFormula | string | '' | 显示条件表达式 |
onAddRow | string | null | null | 行新增事件 |
onDeleteRow | string | null | null | 行删除事件 |
mobileDisplayMode | string | 'page' | 移动端显示模式,waterfall瀑布,page分页,table二维 |
子表统计选项
成员 | 类型 | 默认值 | 说明 |
statisticMode | string | 'sum' | 统计模式,none不统计,sum求和,avg平均,min最小值,max最大值 |
format | string | 'integer' | 显示格式,参数控件API设置显示格式 |
关联查询(反向关联)
成员 | 类型 | 默认值 | 说明 |
name | string | '' | 控件名称 |
name_i18n | object | null | null | 多语言 |
visible | boolean | true | 是否可见 |
style | string | null | null | 控件样式 |
schemaCode | string | '' | 业务模型 |
fieldCode | string | '' | 关联字段 |
displayMode | string | 'list' | 显示模式,list列表,link链接 |
listCode | string | '' | 是否列表编码可批量下载 |
isAuthorize | boolean | true | 临时授权 |