## 介绍
~~~
A.使用说明
此规范用于第三方对表单进行定制化开发满足标准开发未满足的需求
B.版本支持
文档默认是v7.0sp2开始支持,新增内容会备注开始支持版本号,删除内容会备注顶用版本号
~~~
## 提供的API载体(window.thirdPartyFormAPI)
该全局对象是第三方事件处理的载体,主要包括事件池和功能api两部分。
### 1 表单事件池操作
~~~
可用作注册事件和触发事件
~~~
| 属性 | 说明 | 参数 |
| --- | --- | --- |
| registerEvent | 注册事件 | key:事件名称,fn:回调函数 |
| triggerEvent | 触发事件 | key:事件名称,params:回调参数 |
注:事件触发是做扩展用,第三方可在事件池中自定义事件并自己触发事件,但是表单内部提供的监听等不需要第三方去触发
* 事件池注册示例:
~~~javascript
// 注册事件
window.thirdPartyFormAPI.registerEvent('key', function(params){
// params 接收参数
});
// 触发事件
window.thirdPartyFormAPI.triggerEvent('key', params);
~~~
#### 1.1 表单中控件失去焦点后触发事件(afterFormFieldChange)
~~~
第三方开发要注册此方法
~~~
~~~javascript
// 注册事件
window.thirdPartyFormAPI.registerEvent('afterFormFieldChange', function(params){
...//params是当前失去焦点的控件的数据
//如果需要获取主表或明细表数据可用功能api中的getFormData获取
});
// params 是一个对象(当前变化控件数据)
~~~
![](https://img.kancloud.cn/75/ba/75baff09ca6ab4068152b75db89dfadc_352x566.png)
~~~javascript
/**
* 说明:这是获取的前端控件数据对象(Object),是具体每个字段的说明
*
* */
{
attachmentInfo : 附件信息 (里面包含附件列表和基础附件信息)
attrs : 视图里面的简单控件信息
auth: 权限 (‘edit’ : 编辑,’hide’: 隐藏)
ctrlType : 视图里面的控件状态(这个,自定义控件的是"suiCustomControl")
customFieldInfo : 自定义控件的信息,里面包含pc,移动的js信息和入口方法信息,路径信息。
digitNum : 小数位长度
display : 控件名
enums : 控件的枚举列表
extra :设计器给控件设置的样式信息
fieldLength :控件内字符的限制长度
fieldType :字段类型
formType : 控件所在的表的类型
formatType : 数据格式
id :字段名
inputType :控件类型(标准控件判断)
isInCalculate : 是否计算(1为计算)
isInCondition : 是否是条件字段
isNotNull : 必填校验(1为必填)
isCustomFiled : 是否是自定义控件(1是自定义控件)
placeHolder : 提示语言
radioAlignType :
relation : 关联信息(控件公用的基础信息)
relationData : 当前控件的关联数据
showValue : 显示值
value : 计算值
type : 类型
valueId : 值
}
~~~
#### 1.2 表单中控件双击后触发事件(formFieldDbclick)
~~~
第三方开发要注册此方法
~~~
~~~javascript
// 注册事件
window.thirdPartyFormAPI.registerEvent('formFieldDbclick', function(params){
...//params是当前失去焦点的控件的数据
//如果需要获取主表或明细表数据可用功能api中的getFormData获取
});
~~~
#### 1.3 表单中控件右键后触发事件(formFieldContextmenu)
~~~
第三方开发要注册此方法
~~~
~~~javascript
/**
* 参数:params => (Object) 失去焦点的控件数据
* */
// 注册事件
window.thirdPartyFormAPI.registerEvent('formFieldContextmenu', function(params){
...//params是当前失去焦点的控件的数据
//如果需要获取主表或明细表数据可用功能api中的getFormData获取
});
~~~
* 注意:标准接口代码中不会去阻止浏览器右键默认事件,如果希望阻止浏览器右键默认弹出框可以用该接口返回参数中的event完成,如下
~~~javascript
/**
* 参数:params => (Object) 右键的控件数据
* */
window.thirdPartyFormAPI.registerEvent('formFieldContextmenu', function(params){
if (params.event) {
params.event.preventDefault();
}
});
~~~
### 2 表单提供的功能api
可以操作表单内部回填等功能,事件触发为同步。
| 属性 | 说明 | 参数 | 详细介绍 |
| --- | --- | --- | --- |
| getFormData | 获取表单数据 | fn:回调函数(可不传,为可选参数) | 2.1 |
| backfillFormControlData | 回填数据 | data | 2.2 |
| backfillFormAttachment | 回填附件,图片 | data | 2.3 |
| changeFormFieldAuth | 改变控件权限 | params | 2.4 |
| getChooseFormsonRecord | 获取页面内明细表选中行 | 无参数 | 2.5 |
| insertFormsonRecords | 新增明细行 | params | 2.6 |
| copyFormsonRecods | 复制明细行 | params | 2.7 |
| deleteFormsonRecods | 删除明细行 | params | 2.8 |
#### 2.1 getFormData(fn)
~~~javascript
/**
* 说明:获取当前表单的数据
* 参数:result => (Object)
* {
* formData : {}, // 表单数据
* formmains :{}, // 主表数据
* formsons : {} // 明细表数据
* }
*
* */
// 直接返回值
window.thirdPartyFormAPI.getFormData();
// 传入回调方法,值进入回调方法
window.thirdPartyFormAPI.getFormData(function(result) {
// result 是返回的数据
});
~~~
![](http://mall.seeyon.com/help/Public/dev/static/img/thirdgetform.4d065d5.png "获取表单数据")
#### 2.2 backfillFormControlData(data)
~~~javascript
/**
* 示例:
* 说明:此接口是用于自定义控件回填表单其他控件数据
* 参数:data -> (Object || Array) 组织的回填的数据
* Object格式 :
* {
* tableName : (表名),
* tableCategory : (表类型(formmain || formson)),
* updateData : {
* filedName(表单对应控件名) :{} (回填控件的数据对象)
* },
* updateRecordId : (更新对应的数据行Id,主表控件没有,明细表控件有)
* }
* Array格式:
* [
* {
* tableName : (表名),
* tableCategory : (表类型(formmain || formson)),
* updateData : {
* filedName(表单对应控件名) :{} (回填控件的数据对象)
* },
* updateRecordId : (更新对应的数据行Id,主表控件没有,明细表控件有)
* }
* ]
* 注意:
* 1.回填是根据后端控件值格式
* 2.回填输的数据对象里面有三个值很特殊 :从入口方法获取的前端控件对象里面三个属性名是showValue, value, valueId.对应的回填对象里面格属性名是showValue,showValue2, value (非常重要)
* 3. 2里面获取的前端控件数据对象里面的属性名和回填控件的数据对象属性名 showValue = showValue, value = showValue2, valueId = value (非常重要)
* */
window.thirdPartyFormAPI.backfillFormControlData(data);
~~~
#### 2.3 backfillFormAttachment(data)
~~~javascript
/**
* 示例:
* 说明:此接口用于回填表单里面控件的附件
* 参数:data -> (Object || Array) 组织的回填附件数据
* Object格式:
* {
* tableName : (表名),
* tableCategory : (表类型),
* updateRecordId : (更新对应的数据行Id,主表控件没有,明细表控件有),
* handlerMode : (操作类型值:添加add和删除delete),
* fieldName : (表单回填的对应控件名),
* addAttchmentData : [{}], // 回填控件的附件信息列表,附件信息对象需要经过后端对应的格式生成
* deleteAttachmentData :[] // 回填控件附件列表中要删除的对应Id数组
* }
* Array格式:
* [
* {
* tableName : (表名),
* tableCategory : (表类型),
* updateRecordId : (更新对应的数据行Id,主表控件没有,明细表控件有),
* handlerMode : (操作类型值:添加add和删除delete),
* fieldName : (表单回填的对应控件名),
* addAttchmentData : [{}], // 回填控件的附件信息列表,附件信息对象需要经过后端对应的格式生成
* deleteAttachmentData :[] // 回填控件附件列表中要删除的对应Id数组
* }
* ]
* 注意:
* 1.handlerMode属性有两个值必填其一
* 2.handlerMode属性为‘add’ => 只会去读取addAttchmentData属性列表,所以必填
* 3.handlerMode属性为‘delete’ => 只会去读取deleteAttachmentData属性数组,所以必填
*
*
* */
window.thirdPartyFormAPI.backfillFormAttachment(data);
~~~
#### 2.4 changeFormFieldAuth(params)
~~~javascript
/**
* 说明: 更新表单控件的权限
* 参数:params => (Object)
* {
* formType : 'formmain', // 'formmain','formson'
* tableName : 'formmain_5614',
* fieldID : 'field0001',
* recordId : '', // 明细表用,主表传空
* auth : 'hide' // 'edit','browse','hide'
* }
*
* */
// 更新权限
window.thirdPartyFormAPI.changeFormFieldAuth(params)
~~~
#### 2.5 getChooseFormsonRecord(); (v7.0sp2 1130版本新增)
~~~javascript
/**
* 说明:获取明细表选中行
* 返回结果 : {
* (明细表front表名) :(当前明细表选中行的索引),
* (明细表表名) : {
* index : (当前明细表选中行的索引),
* recordId : (当前明细表选中行的recordId)
* },
* newChooseTableName : {} // 最近一次操作明细表选中行的信息对象
* }
*
* */
let indexObj = window.thirdPartyFormAPI.getChooseFormsonRecord();
~~~
#### 2.6 insertFormsonRecords(params) (v7.0sp2 1130版本新增)
~~~javascript
/**
* 说明:js新增明细行
* 参数: params => (Object)
* {
* tableName : (明细表表名), // 必填
* isFormRecords :(是否在明细表中选中行后面插入)// true, false 两个值。 必填
* chooseRecords : { // 指定明细行后面插入
* tableName (修改的明细表表名) :index (明细表索引行 Number类型)
* },
* callbackFn : (Function) 操作成功后回调
* }
* 注意:
* isFormRecords 为true的时候chooseRecords就不生效
*
* */
window.thirdPartyFormAPI.insertFormsonRecords(params);
~~~
#### 2.7 copyFormsonRecods(params) (v7.0sp2 1130版本新增)
~~~javascript
/**
* 说明:js复制明细行
* 参数: params => (Object)
* {
* tableName : (明细表表名), // 必填
* isFormRecords :(是否在明细表中选中行后面插入复制)// true, false 两个值。 必填
* chooseRecords : { // 指定明细行后面插入复制
* tableName (修改的明细表表名) :index (明细表索引行 Number类型)
* },
* callbackFn : (Function) 操作成功后回调
* }
* 注意:
* isFormRecords 为true的时候chooseRecords就不生效
* isFormRecords 为true 或者chooseRecords 其一必须满足
*
* */
window.thirdPartyFormAPI.copyFormsonRecods(params);
~~~
#### 2.8 deleteFormsonRecods(params) (v7.0sp2 1130版本新增)
~~~javascript
/**
* 说明:js删除明细行
* 参数: params => (Object)
* {
* tableName : (明细表表名), // 必填
* isFormRecords :(是否在明细表中选中行删除)// true, false 两个值。 必填
* chooseRecords : { // 指定明细行删除
* tableName (修改的明细表表名) :index (明细表索引行 Number类型)
* },
* callbackFn : (Function) 操作成功后回调
* }
* 注意:
* isFormRecords 为true的时候chooseRecords就不生效
* isFormRecords 为true 或者chooseRecords 其一必须满足
*
* */
window.thirdPartyFormAPI.copyFormsonRecods(params);
~~~
- 概要
- 技术介绍
- 框架与环境
- vue开发
- 开发规范
- 前端开发规范
- 总体原则
- HTML规范
- HTML&css规范
- vue编码规范
- Javascript规范
- 后端开发规范
- cap4
- 自定义控件
- 前端2.0(PC+移动)
- PC前端
- 后端
- 移动端
- 移动端接口
- 低版本协同升级到V5 8.0适配说明
- 自定义按钮
- 自定义按钮(无流程)
- 自定义控件(列表插槽)
- 自定义按钮(筛选条件)
- 低版本协同升级到V5 8.0适配说明
- 门户空间
- 门户与栏目挂载
- 栏目开发及流程说明
- 页面模板
- 客开通路及插件体系
- 表单设计器扩展配置
- 使用步骤
- 配置说明
- 事件API
- Demo示例
- 运行态客开通路
- 插件使用步骤
- 插件接口
- 事件接口
- 钩子相关接口
- 表单操作接口
- Demo示例
- 插件机制
- 表单运行态接口(旧)
- 白名单插件
- 版本记录
- vue组件库
- 开发指南
- 开发文档规范
- 业务组件介绍
- 业务组件
- table组件
- 分页组件
- title组件
- 统计排队组件
- code组件
- 条件筛选
- 批量导入
- 上传Excel
- 批量更新
- 批量刷新
- UI组件
- 按钮组件
- 复选组件
- 取色器组件
- 示例组件
- 水平选择组件
- 选图标组件
- 提示组件
- 单选组件
- 搜索组件
- 选择组件
- 穿梭框组件
- 标签组件
- 文本组件
- 树组件
- 验证组件
- 菜单组件
- iframe组件
- toolbar
- 统计组件
- 饼图
- 柱状图
- 图标
- 业务关系开发指南
- 自定义触发
- 自定义关联
- 后端API
- 更新表单数据缓存
- 发起表单流程
- 取得指定表单PDF或截图
- 无流程批量添加
- 无流程批量删除
- 无流程批量更新
- 无流程批量导出
- 客开培训文档
- Vue基础培训
- Vue实战培训
- Vue进阶培训
- VueCLI3培训
- cap3
- 自定义控件
- 后端
- 移动端
- 前端编译
- 表单运行态接口
- 协同云