登录
文档目录
图片名称

如何使用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

临时授权


图片名称
  • 1. 表单开发Q&A
  • 2. 表单生命周期API
  • 3. 表单控件API
  • 4. 表单控件选项API