概述
下面的表格列举了DWF的前端脚本提供的基础调用,以及一些控件的用法要领:
- 全局变量:DWF脚本引擎中可以直接访问到的变量数据
- 查询条件:在查询条件配置界面和URL操作的链接中可以使用的全局变量
- 应用配置:可以用来控制app端的一系列函数,例如:在应用打开的时候把那些模块展开
- 数据交互:DWF脚本访问数据或者通过接口访问数据,与前端进行消息通讯等
- 表单交互:DWF脚本实现表单直接的切换,表单本身数据的更新,表单间参数传递
- 控件访问:DWF脚本直接访问表单的控件、获取控件上的方法等
- 控件要领:对部分控件的脚本使用要领
评论区则是在实战中积累的经验,作为备忘尚未整理但是在解决实际问题时肯定会用到的脚本。
详情
序号 | 功能分类 | 脚本名称/关键字 | 功能描述 | 适用范围/场景 | 脚本示例说明 | 备注|||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | 关键字全局变量 | this.obj | 表单绑定的类的对象,如果没有条件限制默认获取的是绑定类的最新一条记录 是一个JSON对象 this.obj是当前表单绑定类的对象,可以通过类上的属性获取返回对象的某一项的值 调试查看this.obj的返回值: console.log(this.obj); | 1)操作动作为visit/edit时,this.obj有数据 2)操作的前处理脚本中写了return{obj:obj},表单的this.obj会有对应值 使用范围: 在表单上绑定的前端脚本均可用 | 实体类:
关联类:
| this.obj是当前表单绑定类的对象,可以通过类上的属性获取返回对象的某一项的值 调试查看this.obj的返回值: console.log(this.obj); | ||||||||||||||||||||
2 | this.selectedObjs | 表单中含有唯一的多对象控件时,通过此数组获得用户选中的对象,如果是有多个多对象控件可以在表单设置中绑定多对象控件 是一个JSON对象数组 | 使用范围: 表单中有多对象控件(表格),并且在表单的基础配置中设置了默认多对象控件,该脚本有效,否则为null |
| ||||||||||||||||||||||
3 | this.data | 打开表单的初始化参数 在表单中的任何操作的前端脚本都可以直接使用this.data获取初始化参数 是一个JSON对象 | 可以使用的场景有两类: 1)操作的前处理脚本,通过return{ data:this.obj} 可以传递json对象到打开的表单 2)使用脚本打开表单传参,可用的有:this.openTab,this.openForm,this.openDrawer |
| ||||||||||||||||||||||
4 | this.env | 当前DWF前端的上下文信息,返回一个JSON对象,JSON对象属性包括:
| 可以用在所有的前端脚本中,不限位置 |
| ||||||||||||||||||||||
5 | this.user | 当前登录用户的基本信息,返回一个JSON对象,包括属性如下:
| 需要获取到用户的基本信息的时候,可以使用this.user |
| ||||||||||||||||||||||
6 | this.store | DWF内部变量,缓存了当前访问表单的基本信息 是一个JSON对象,可用的对象如下:
| 需要获取到配置系统的配置信息的时候可以使用this.store |
| ||||||||||||||||||||||
7 | this.confirmData | 弹窗表单新增对象/编辑对象成功后提交的表单数据,在后处理脚本中可用 | 仅适用于操作的后处理脚本中 | 在后处理脚本中可以使用
| ||||||||||||||||||||||
8 | this.className | 表单所属的实体类或者关联类的名称 | 任何表单的脚本中都可以使用 |
| ||||||||||||||||||||||
9 | this.generateUUID() | 生成uuid的函数 |
| |||||||||||||||||||||||
10 | 查询条件关键字 | $env | 仅在拼接过滤条件等场景下使用,获取当前环境的基本信息,返回一个JSON对象,包括属性如下:
| 1、操作动作为url的时候,在URL地址中可用$env 2、在过滤条件中可以使用$env 3、嵌入网页的连接地址中可以使用$env 4、功能模型->应用管理->编辑应用中的起始操作可以使用$env | ||||||||||||||||||||||
11 | $user | 仅在拼接过滤条件等场景下使用,当前登录用户的基本信息,返回一个JSON对象,包括属性如下:
| 1、操作动作为url的时候,在URL地址中可用$user 2、在过滤条件中可以使用$user 3、嵌入网页的连接地址中可以使用$user 4、功能模型->应用管理->编辑应用中的起始操作可以使用$user | |||||||||||||||||||||||
12 | $obj | 仅在拼接过滤条件等场景下使用,表单绑定的类的对象,如果没有条件限制默认获取的是绑定类的最新一条记录 是一个JSON对象 | 1、在表单中的事件操作动作为url的时候,在URL地址中可用$obj 2、在过滤条件中可以使用$obj 3、嵌入网页控件的连接地址中可以使用$obj 注意:当表单以create状态打开,如果未初始化数据$obj的各项属性为空,慎用 | obj.[attributeName类属性英文名]=$obj.[attributeName类属性英文名] | ||||||||||||||||||||||
13 | $form | 获取表单的单对象控件的取值 示例:$form["控件代号"] | 该关键字可用到过滤条件中,并且仅对单对象控件有效(有getValue方法的有效) 注意:如果是单选框、复选框、选择框等设置了数据的回填和显示属性不一致,则此处返回的是该控件的回填属性的取值 | 在过滤obj.attributeName= '$form["id"]' | ||||||||||||||||||||||
14 | 应用配置 | this.env. | generateUUIDsetCollapsed() | 生成uuid的函数 | console.log("打印自动生成的uuid========"+this.generateUUID()); | 数据访问 | this.handleQueryData() | ; |
| PC应用菜单 |
| |||||||||||||||
15 | this.env.setOpenNames | 指定某些菜单展开
| PC应用菜单 |
| ||||||||||||||||||||||
数据访问 | this.handleQueryData() | 获取DWF定制的实体类、关联类的数据对象的脚本,支持回调,入参的查询条件为JSON对象,分别是:(返回方式为异步请求,如果在前端脚本要等待返回成功做处理需要将处理内容写到回调函数中)
| 表格后台数据强制刷新/查询 |
| 表格后台数据强制刷新/查询 |
| ||||||||||||||||||||
17 | this.handleQueryBySQL() | 提供在DWF数据库中接入的数据源,执行原始SQL语句的能力,接受一个对象,包含下面的属性:
返回结果:
| 切记,不要一次查询上巨量数据,例如:上百万量级,导致OOM(Out Of Memory) |
| ||||||||||||||||||||||
18 | this.handleQueryByApi() | 要求先在DWF建模工具中的“数据集成”-“API接口管理”的功能下面将外部接入的API先配置好,给其设定一个名字,如:“新闻报道”,在脚本中,直接将这个名字传递给函数,获得返回结果。 | 要先配置好API,并且为其命名才能起作用。 |
| ||||||||||||||||||||||
19 | this.create() | 支持实体类和关联类表单中执行新增操作
| 用于系统新增时控制是否弹出信息和关联类表单新增实体类并控制是否弹出信息 | 新增实体类对象
新增关联类对象
| ||||||||||||||||||||||
20 | this.createObj() | 在前端创建内存对象,临时对象不保存到数据库。 | 如果在异步调用的响应函数then中,使用this.returnSync({obj: res}),则会实现同步传递。 |
| ||||||||||||||||||||||
21 | this.edit() | 支持实体类和关联类表单中执行编辑操作
| 用于系统编辑时控制是否弹出信息和关联类表单编辑实体类并控制是否弹出信息 | 实体类编辑
关联类编辑
| ||||||||||||||||||||||
22 | this.delete() | 支持实体类和关联类表单中执行删除操作
| 用于系统编辑时控制是否弹出信息和关联类表单删除实体类并控制是否弹出信息 |
| ||||||||||||||||||||||
23 | this.deleteByCondition(condition, | className) | 根据条件删除类对象 参数: condition:查询条件 className:要操作的目标类 |
| ||||||||||||||||||||||
24 | this.axios | 在前端调用接口可能的第三方接口 | 需要在config中补充接口信息,如headers: {'Authorization': this.user.token}。 由于是前端调用,要密切注意不会出现跨域调用被拒绝的问题CORS,如果出现该问题,改用后端脚本实现调用。 |
| ||||||||||||||||||||||
25 | this.dwf_axios | 在前端调用APP端的restfull接口,主要是实体类、关联类等数据的增删改查的接口,同时该接口还支持调用第三方服务的接口 支持post、get 注意:
| 由于是前端调用,要密切注意不会出现跨域调用被拒绝的问题CORS,如果出现该问题,改用后端脚本实现调用。 |
| ||||||||||||||||||||||
26 | this.dwf_modeler_axios | 在前端调用modeler端的restful接口,主要是一些模型类的数据、用户、授权、应用等建模相关接口 注意:
| 调用modeler端的restful API |
| ||||||||||||||||||||||
27 | this.QueryResultAll() | 根据查询条件获取Store中缓存的数据 | 该接口已经不推荐使用! |
| ||||||||||||||||||||||
28 | this.getOperation() | 根据类、操作名称获取操作的定义,通过getOperation获取到已有的操作(需要存储到数据库中),再通过executeOperation进行调用,并且允许修改已有操作的操作样式和动作。
| 在前端脚本中需要调用定义的其他前后端脚本操作,可以利用getOperation得到对应的脚本,然后借助executeOperation实现交互 |
| ||||||||||||||||||||||
29 | this.queryEntity() | 获取实体类的元模型信息,传入字符串表示的实体类的类名 |
| |||||||||||||||||||||||
30 | this.queryRelation() | 获取关联类的元模型信息,传入字符串表示的关联类的类名 |
| |||||||||||||||||||||||
31 | this.cudBatchObjs() | 传入一个代表增删改事件的数组,批量增删改对象,在包含多个不同类型的实体类的复杂结构表单中,利用数据容器控件的this.getObj()提取对象,然后一次性提交数据修改,非常方便。 this.cudBtachObjs接受的是一个代表批量操作的动作数组,数组中的每个元素是一个JSON对象,包含下面的属性:
返回值为,被传入的动作数组,照原样返回,其中objs是实际增删改的数据。 |
| |||||||||||||||||||||||
32 | 表单间交互 | this.openForm() | 脚本打开弹窗,参数如下:
如果,initialScript中初始化了返回的对象与initParams的含义冲突,以initParam里面的为准。 |
| ||||||||||||||||||||||
33 | this.getRootForm() | 在有多层弹窗的情况下可以使用该方法获取最底层表单的句柄 | ||||||||||||||||||||||||
34 | this.getParentForm() | 出现弹窗的时候想在弹窗中获取父表单的控件可以使用该方法获取父表单句柄 | ||||||||||||||||||||||||
35 | 前处理脚本:return false 表单默认操作:return false | 如果无异步调用,在操作的前处理脚本中可用,并且操作样式为弹框方式,使用return false表示不继续弹窗。 同样的,在操作控制以弹框的方式显示表单,在默认操作里面使用retrun false也会阻止弹框的关闭。 | ||||||||||||||||||||||||
36 | this.returnSync() | 当前端调用后端服务接口需要等待返回后在执行返回操作可以使用该方法 | 在操作的前处理脚本中可用,并且操作样式为弹框方式这样的话就能够保证在前处理中请求接口数据初始化弹框的内容 |
代码块 |
---|
//创建前端内存对象
let obj = this.createObj(this.className).then((res) => {
console.log("新增内存对象oid=" + res.oid);
this.returnSync({obj: res})
})
console.log("新增内存对象oid=" + obj.oid);
return {sync:true} |
如果无异步调用,使用return false表示不继续弹窗;
var
_this =
this
;
setTimeout(() => {
var
params = {
obj: {
AnimateName:
,
var _this = this;
setTimeout(() => {
var params = {
obj: {
AnimateName: 'a1'
}
}
_this.openDialog(params);
}, 2000)
//弹窗的前处理脚本返回false时阻止弹窗打开,通过新增加的openDialog()脚本打开,参数与前处理脚本返回obj,query是一样的
return
false
return false;
代码块 |
---|
//创建前端内存对象 let obj = this. |
createObj(this.className) |
在弹框的操作脚本中调用
language | js |
---|
.then((res) => {
console.log("新增内存对象oid=" + res.oid);
this.returnSync({obj: res})
})
console.log("新增内存对象oid=" + obj.oid);
return {sync:true} |
在弹框的操作脚本中调用
代码块 | ||
---|---|---|
| ||
this.closeData({key1:'hello'}) |
在弹框关闭后触发的后处理脚本中通过this.confirmData获得
代码块 | ||
---|---|---|
| ||
console.log(this.confirmData) //前端控制台输出:{key1:'hello'} |
以tab页签方式打开表单,传入两个参数,queryOpr和args:
queryOpr:object,中的参数
targetClass:表示对应的类
viewName:表示需要打开的表单名称
action:动作
authority:英文名
extSettings:是否打开默认操作
args中的参数
initScript:object,与操作中的前处理脚本中return { obj:{...}, query: {...}, data: {...}} 返回的格式一致,可以设置对象,查询条件和夹带的数据
displayType:create/edit/visit
代码块 | ||
---|---|---|
| ||
var grid=this.getAddinById("D0050C68B42743D79C646E1F8FB7D397"); obj=grid.getSelected(); let queryOpr = { targetClass: this.className, viewName:'SingleWO', action: 'edit',//动作 authority: 'hihilalal',//英文名可随意给 displayName: '设置的显示名',//显示名 extSettings: JSON.stringify({needDefaultOpr:true}) } let args = { initScript:`return{ obj:this.selectedObjs[0] }`, displayType:'edit' } this.openTab(queryOpr, args); |
分为不带参数和带参数两种方式。他们的功能分别是关闭tab和关闭tab传值到后处理
不带参数:this.closeTab()
带参数:this.closeTab(data)
代码块 | ||
---|---|---|
| ||
//不带参数:关闭tab this.closeTab(); |
代码块 | ||
---|---|---|
| ||
//带参数:关闭tab传值到后处理 this.closeTab(data); |
分为不带参数和带参数两种方式。他们的功能分别是关闭指定tab和指定tab关闭传值。
不带参数:this.closeTabById(id)
带参数:this.closeTabById(id, data)
页签的ID获取方式:moduleName-authority
moduleName:新建操作的时候的模块名,即打开页签的操作所在的类名
authority:打开页签操作的操作名即打开页签操作的英文名
data为回传给后处理脚本的参数,可以在后处理脚本中利用this.confirmData获取
代码块 | ||
---|---|---|
| ||
//关闭页签 this.closeTabById('moduleName-authority'); //关闭页签并触发打开页签的后处理脚本 this.closeTabById('moduleName-authority',data); |
支持打开滑窗的功能,规则如下:
targetClass:字符串,表示对应的类
viewName:字符串,表示需要打开的表单名称
direction:字符串,表示右滑窗还是左滑窗分成'left','right','top','buttom'四种
args:JSON对象,如果打算不传要使用null作为占位符,包含弹框的大小和高度,标题,初始化脚本和后处理脚本,具体有:
curDrawerWidth:字符串,抽屉宽度,仅对左右抽屉效果有效,取值为数值和单位的字符串,例如:'800px'
curDrawerHight:字符串,抽屉高度,仅对上下抽屉效果有效,取值为数值和单位的字符串,例如:'800px'
needDialogDefaultOpr:布尔,是否显示默认操作的按钮
displayName:字符串,弹窗以后标题的名字
initialScript:字符串,可以不传,前处理脚本
afterScript:字符串,可以不传,后处理脚本
displayType:字符串,打开方式,包含'edit', 'create', 'visit'。
initParams:JSON对象,用于完成弹窗打开前的初始化,与操作中的前处理脚本中return { obj:{...}, query: {...}, data: {...}} 返回的格式一致,可以设置对象,查询条件和夹带的数据
obj:对象,用于初始化的对象
query:字符串,默认查询条件
data:对象,外部带入的数据
如果,initialScript中初始化了返回的对象与initParams的含义冲突,以initParam里面的为准。
代码块 |
---|
//传入初始化脚本,可以传一个对象obj,也支持query,也支持自定义内容data let initParams = { obj: this.selectedObjs[0], data: { woDesc1: "cheney", }, }; this.openDrawer( this.className, "SingleWOTest", "left", null, "edit", initParams ); |
消息提示,支持三种:
this.msgbox.success
this.msgbox.info
this.msgbox.error
早期版本只接受一个字符串,后来发现有时候要停留更长时间,所以增加了输入一个配置的JSON对象的方法,这个JSON对象的具体的属性为:
content:字符串,表示消息内容
duration:数字,表示停留时间,单位为秒
代码块 | ||
---|---|---|
| ||
//目前如下几种消息提示都是在界面上方提示后自动关闭 this.msgbox.success("成功的提示"); this.msgbox.info("一般的提示"); this.msgbox.error("错误的提示"); //特殊需求,对于提示时间需要加长的,可以参考如下写法:10 单位为秒 this.msgbox.success({content: "成功的提示",duration: 10}); this.msgbox.info({content: "一般的提示",duration: 10}); this.msgbox.error({content: "错误的提示",duration: 10}); |
更多的参数设置如下:
模态弹窗提示后需手动关闭的msg提示框,支持确定和取消两种回调方式,示例脚本如下:
this.msgboxDialog.confirm (
“title标题”,
"请确认是否删除?",
<function>(点击确定之后的回调函数),
<function>(点击取消之后的回调函数));
注意:comfirm有点击确定和取消的回调函数,可以自行编辑,由于使用函数作为参数,使用回调里面需要对this进行重定义,否则无法使用相关方法。
代码块 | ||
---|---|---|
| ||
//由于使用函数作为参数,使用回调里面需要对this进行重定义,否则无法使用相关方法。 var _this = this; this.msgboxDialog.confirm("title标题","请确认是否关闭?", function() { console.log("确认关闭function"); _this.closeDialog(); }, function() { console.log("取消关闭function") } ); |
表单遮罩,该脚本执行会弹出一个遮罩层,防止表单此时再去编辑
弹出遮罩
代码块 | ||
---|---|---|
| ||
this.spinShow(); //打开遮罩 this.edit(editObj, className).then(rtnObj =>{ //返回的rtnObj为后台修改保存后返回的对象 this.spinHide(); //编辑完成,关闭遮罩 }); |
事件处理完成,关闭遮罩,在异步交口调用完成后可以关闭遮罩
代码块 | ||
---|---|---|
| ||
this.spinShow(); //打开遮罩 this.edit(editObj, className).then(rtnObj =>{ //返回的rtnObj为后台修改保存后返回的对象 this.spinHide(); //编辑完成,关闭遮罩 }); |
代码块 |
---|
// 一般性前端校验 if(this.validateForm()){ console.log('表单验证成功') }else{ console.log('表单验证失败') } // 为了满足验重配置项的接口校验,将校验方法调整为如下: this.validateForm().then(res=>{ if(res){ console.log('表单验证成功') }else{ console.log('表单验证失败') } }); |
使用原有查询条件控制表单刷新,更新数据会触发原有页面初始化事件
代码块 | ||
---|---|---|
| ||
this.freshData(); this.msgbox.info("fresh success") |
代码块 | ||
---|---|---|
| ||
var grdiAddin = this.getAddinById("控件代号"); |
代码块 |
---|
var grid = this.getTargetAddin(); |
代码块 | ||
---|---|---|
| ||
let addin = this.getSourceAddin(); if (addin) { console.log(addin.args) } |
51
this.getSocketId();
调用并执行已有的后端脚本,支持回调
自定义操作对象(在现在的脚本中定义操作对象,无需事先定义操作)通过executeOperation进行调用
opr:定义的操作对象,包含下面的属性:
targetClass:目标类的类名
viewName:目标类中的表单名称
oprName:操作英文名
displayName: 操作中文名
displayType:动作支持create、edit、visit、next_create、url
url: 如果displayType是url需要增加这个参数来传url地址
oprStyle:操作样式dialog、tab、drawerL、 drawerR
displayOperation:默认操作 true、false
beforeExecute:表示前处理函数,代表前处理脚本
afterExecute:表示后处理函数,代表后处理脚本
代码块 | ||
---|---|---|
| ||
//定义新的create动作的dialog样式的操作 var opr = { targetClass: "WorkOrder", //目标类的类名 viewName:"SinlgeWO" ,//目标类中的表单名称 oprName: "openCreatedial" , //操作英文名,生造操作时可以自定义 displayName:"创建工单" , //操作中文名 displayType:"create" ,//动作支持create、edit、visit、next_create、url oprStyle:"dialog", //操作样式dialog、tab、drawer displayOperation:true, //默认操作 true、false beforeExecute:() => { //前处理函数,代表前处理脚本 //新的前处理脚本 return { obj:this.selectedObjs[0],//选填,当前表单多对象控件选中的对象 //query:"and obj.woTitle = '工单1'", //选填,非必填 data:{ "woDesc1":"自定义属性"//选填,woDesc1是自定义的属性, } } }, afterExecute:() => { //表示后处理函数,代表后处理脚本 //新的后处理脚本,可根据实际情况维护 var data = this.confirmData; console.log(`自定义后处理`) console.log(data) } } this.executeOperation(opr); |
this.callServer(
).then(res => {
console.log("后端回调结果");
console.log(res);
})
完成前后端脚本的配合,传入参数并获得返回结果。
参数说明:
customData:为前端调用后端脚本的参数JSON格式
default: 为后端脚本的脚本名称customData:对象,调用后端脚本准备传递过去的自定义参数,JSON格式,后端脚本通过this.customData获取传递过去的参数结果。
scriptName:字符串,默认为“default”,后端脚本的脚本名称,在配置操作的时候,可以一次性新建多个后端脚本,每个后端脚本有一个英文名,传递这个英文名就意味着指示激活哪个后端脚本,也可以不传。
返回结果:
callServer的调用为异步调用,如果希望从后端脚本向前端返回数据,方法是给后端脚本的this.res赋值:
res:对象,通过this.
res向前端脚本传参,一般是结果。
注意:
在同一个操作内编写的后端接口获取前端脚本传参可以利用this.customData获取callServer的第一个参数
返回结果需要通过this.res={}来给前端赋值回调结果
该方法属于操作内方法,调用的后端脚本仅支持在同一个操作内新建的后端脚本操作,如图:
一个操作中的前端脚本:
代码块 | ||
---|---|---|
| ||
this.callServer(customData,'default').then(res => {
console.log("后端回调结果");
console.log(res.result);
}) |
统一操作中的后端脚本(default):
代码块 |
---|
this.logger.info("前端传递给后端脚本的参数:"+this.customData);
this.res = {
"result":"后端脚本执行成功"
} |
结果:
打开console控制台,可以看到控制台输出了两行记录:
后端回调结果
后端脚本执行成功
showTab()
代码块 | ||
---|---|---|
| ||
var tabAddin = this.getAddinById("Tab1");
tabAddin.showTab("tab页签名称");
tabAddin.hideTab("tab页签名称"); |
代码块 | ||
---|---|---|
| ||
var tabAddin = this.getAddinById("Tab1");
tabAddin.showTab("tab页签名称");
tabAddin.hideTab("tab页签名称"); |
代码块 | ||
---|---|---|
| ||
var tabAddin = this.getAddinById("Tab1");
tabAddin.getSelectedTab(); |
代码块 | ||
---|---|---|
| ||
var tabAddin = this.getAddinById("Tab1");
tabAddin.turnTo('tab1'); |
代码块 | ||
---|---|---|
| ||
var dropName = ''
tabAddin.args.tabs.forEach(item => {
if(name == item.name){
dropName = item.dropName
}
})
dropName = tabAddin.args.tabs[i].dropName
tabAddin.clickObj[dropName] |
responseData:
code: 200
data: Object
allNum: 导入的数据条数
failedNum: 导入数据的失败条数
msg: "succeed"/“failed”
succeedNum: 导入数据的成功条数
message: "OK"
success: true
数据导入控件绑定数据导入完成事件
代码块 | ||
---|---|---|
| ||
console.log('导入完成事件');
// 获取到导入接口返回的数据
let responseData = this.getSourceAddin().responseData;
console.log(responseData);
// 导入成功
if(responseData.success){
console.log('导入成功');
console.log(responseData.data);
// responseData.data = {
// "msg": "succeed",
// "failedNum": 0,
// "succeedNum": 5,
// "allNum": 5
// };
}else{
console.log('导入失败')
} |
代码块 | ||
---|---|---|
| ||
// 脚本调用数据导出方法,不传参数,以控件上设置的条件导出;有参数,就根据输入的参数导出
this.exportData(['oid'], 'echo', `and obj.oid='9948A73560B48D44AF3894FC7DF98E7E'`) |
代码块 | ||
---|---|---|
| ||
//设置标签页的页签"页签1"禁用
var tabAddin = this.getAddinById("Tab1");
tabAddin.setDisable('tab1', true);
//设置按钮禁用
var tabAddin = this.getAddinById("Operation1");
tabAddin.setDisable(true); |
代码块 | ||
---|---|---|
| ||
let mySelect = this.getAddinById('SelectInput1');//绑定选择框,这个绑定的控件id需要根据自己的表单内的控件调整 let result = mySelect.getValue(); |
获取界面显示的值,该方法仅在单选框、选择框、复选框中有效
代码块 | ||
---|---|---|
| ||
let mySelect = this.getAddinById('SelectInput1');//绑定选择框,这个绑定的控件id需要根据自己的表单内的控件调整 let myRadio = this.getAddinById('RadioButton1');//绑定单选框,这个绑定的控件id需要根据自己的表单内的控件调整 let myCheckBox = this.getAddinById('CheckBox2');//绑定复选框,这个绑定的控件id需要根据自己的表单内的控件调整 let displayResult = mySelect.getDisplayValue();//获取选择框的界面显示值key let result = mySelect.getValue();//获取选择框的界面显示值value let displayRadioResult = myRadio.getDisplayValue();//获取单选框的界面显示值key let displayCheckResult = myCheckBox.getDisplayValue();//获取复选框的界面显示值key let result1 = myRadio.getValue();//获取单选框的界面显示值value let result2 = myCheckBox.getValue();//获取复选框的界面显示值value console.log('select',displayResult, result);//打印 console.log('radio',displayRadioResult,result1); console.log('checkBox',displayCheckResult,result2); |
代码块 | ||
---|---|---|
| ||
var place = this.getAddinById("CheckBox1");//绑定复选框 place.setValue('nanjing');//设置地点的值 |
获取控件上的其他配置参数
示例:
args.hided //控件的显示隐藏
true 隐藏
false:显示
代码块 | ||
---|---|---|
| ||
let myAttach = this.getAddinById('Attachments1');//绑定附件,这个绑定的控件id需要根据自己的表单内的控件调整 myAttach.args.allowType = 'jpg';//设置附件上传文件类型 //可以通过console.log查看每个控件支持的args的参数 myAttach.args.hided = true;//隐藏控件 |
代码块 | ||
---|---|---|
| ||
var place = this.getAddinById("CheckBox1");//绑定复选框 place.setValue('nanjing');//设置地点的值 place.triggerEvent('值变化')//触发控件上绑定的值变化事件 |
代码块 | ||
---|---|---|
| ||
var grid = this.getAddinById('Grid1'); var index = Math.round(Math.random() * 10) var cellData = grid.getCellData(); //获取当前单元格数据集 var cellValue = cellData.value var toolTipContent = `<p>${cellValue}</p>` grid.setTooltip(toolTipContent); |
代码块 | ||
---|---|---|
| ||
//控件的id可在app端开发者工具中拾取,后期可在modeler中直接拷贝 var addinElement = this.getAddinById("指定控件的id"); //设置控件在界面中的错误信息提示 addinElement.setError("存在异常"); //$el为指定控件的dom元素,可以直接对dom元素修改其样式 addinElement.$el.style.display = "none"; |
代码块 | ||
---|---|---|
| ||
var grid = this.getAddinById('Grid3');//绑定表格,这个里面是控件id,需要修改成表单内需要绑定的表格控件id var button = this.getAddinById("Operation10");//绑定刷新按钮,这个里面是按钮的控件id,需要修改成表单内需要绑定的按钮控件id var selectedObjs = grid.getSelected();//获取选中的对象的信息,信息包括oid,属性值等 var targetClass = 'Recordsheet';//指定要删除关联关系的关联类,这个根据自己需要改 var infoid={ relation_oid: selectedObjs[0].relation_oid //获取选中对象的oid } var params = { isRelation:true, }//关联关系,这个地方可以改,当关联类和实体类没有关联的时候改成false this.delete(infoid,targetClass,null,params).then(res => { button.invokeEvent("单击");//删除后执行刷新 })//删除关联类的关联关系 |
代码块 | ||
---|---|---|
| ||
//动态参数控件对象 var addin = this.getAddinById('DynamicParameterFrame1'); //获取控件全部数据(包括原schema与新输入值) var formValue = addin.getValue(); /*获取控件KV键值对数据,即不包括原schema元数据,返回数据如下: {"number": 1,"date":"2020-03-01 10:30:00" ,"name": "桌子", "price":100,"type":"家具","description": "测试数据..."} */ var formOBJ = addin.getKVValue(); //TODO:针对formOBJ的后续处理 console.log(formValue); console.log(formOBJ); |
71
this.getAddinById("控件代号").getSelectedFileList()
代码块 | ||
---|---|---|
| ||
this.getAddinById("控件代号").getSelectedFileList(); |
72
this.getAddinById("控件代号").getDeleteFileList()
代码块 | ||
---|---|---|
| ||
this.getAddinById("控件代号").getDeleteFileList(); |
73
this.getAddinById("控件代号").getFileList(withUrl:false);
代码块 | ||
---|---|---|
| ||
this.getAddinById("控件代号").getFileList(withUrl:false); |
setExternalOprConfig(config)
表格操作列样式设置,其中用到uniLabel、type、shape、disabled、color
show脚本设置表格样式,用来根据数据的取值来动态修改操作按钮。
代码块 | ||
---|---|---|
| ||
var grid = this.getAddinById('Grid2'); var operationParams = [{ uniLabel: '修改过的编辑',//按钮文字 type: 'warning',//按钮样式 shape: true,//是否圆角 disabled: true, //是否禁用 color: 'red',//文字颜色 show: false//按钮是否显示 },{ uniLabel: '修改过的新增', type: (rowData) => { if(rowData.product === '草莓'){ return 'warning' }else{ return 'success' } }, shape: (rowData) => { if(rowData.product === '草莓'){ return 'circle'//圆角 }else{ return 'true' //直角 } },//是否圆角 disabled: (rowData) => { if(rowData.product === '草莓'){ return true }else{ return false } }, //是否禁用 color: (rowData) => { if(rowData.product === '草莓'){ return 'red' }else{ return 'blue' } },//文字颜色 show: (rowData) => { if(rowData.product === '草莓'){ return true }else{ return false } } //是否显示 }] grid.setExternalOprConfig(operationParams); |
设置行样式,是一个函数,表格会遍历每行,传入名为params的参数,其中params包含:
node:表示每行的信息,如rowIndex表示行号
data:表示每行显示的JSON对象。
可设置的配置项如下:
.grid-font-color-red
.grid-font-color-yellow
.grid-font-color-green
.grid-font-color-black
.grid-font-color-white
.grid-font-color-grey
.grid-font-color-blue
.grid-background-color-red
.grid-background-color-yellow
.grid-background-color-green
.grid-background-color-black
.grid-background-color-white
.grid-background-color-grey
.grid-background-color-blue
.grid-font-size-12
.grid-font-size-14
.grid-text-decoration-underline
.grid-text-decoration-line-through
.grid-font-weight-bold
.grid-font-weight-normal
代码块 | ||
---|---|---|
| ||
//行样式设置 var grid = this.getAddinById('Grid3'); grid.setRowClass((params) => { // 间隔行效果 if (params.node.rowIndex % 2 === 0) { return 'grid-font-color-red'; } if (params.node.rowIndex % 2 !== 0) { return 'grid-font-color-green'; } // 特殊数据标绿 if (params.data.companyd === '哈哈哈1') { return 'grid-font-color-green'; } }); |
代码块 | ||
---|---|---|
| ||
//列样式设置 var grid = this.getAddinById('Grid3'); var def = [{ // hide: true, cellClass: (params) => { return params.value==='哈哈哈1'?'grid-text-decoration-underline grid-font-color-blue grid-font-size-14':''; } }] grid.setColumnDefs(def); |
代码块 | ||
---|---|---|
| ||
var grdiAddin = this.getAddinById("id"); grdiAddin.setColumnVisible(0, false) |
代码块 | ||
---|---|---|
| ||
//表格头部生成与数据结构数据操作(增删改,浏览器内存实现,不涉及数据库) var grdiAddin = this.getAddinById("表格控件的id"); var rowData = [ {field: 'field1', oid: 'oid1'}, {field: 'field2', oid: 'oid2'}, ... ] //设置表格数据 grdiAddin.setRowData(rowData); //添加表格数据 grdiAddin.setRowData(rowData, 'add'); //删除表格数据(参数对应行) grdiAddin.deleteRowData('oid1'); grdiAddin.deleteRowData(['oid2','oid3']); //修改表格数据(参数对应行) grdiAddin.updateRowData('oid4', {field: 'updatefield'}); |
代码块 | ||
---|---|---|
| ||
//获取表格中所有的的行数据对象集合 let workItemTable = this.getAddinById("Grid1"); var Table = workItemTable.getAll(); console.log(Table); this.msgbox.info('Table'); |
代码块 | ||
---|---|---|
| ||
var grid = this.getAddinById("Grid3"); var pageInfo = grid.getPageInfo(); //获取当前表格页码信息 var defaultColumnDefs1 = grid.getDefaultColumnDef({ alignCode: 1, attrName: "companyd", editable: false, colId: "companyd_id", enableFilter: true, enableSorting: true, field: "companyd", headerName: "单位", }); var defaultColumnDefs2 = grid.getDefaultColumnDef({ alignCode: 1, attrName: "number", editable: false, colId: "number_id", enableFilter: true, enableSorting: true, field: "number", headerName: "数量", }); grid.setColumnDefs([defaultColumnDefs1, defaultColumnDefs2]); var modReq = { condition: "", }; if (!pageInfo.totalPage) { this.dwf_axios .post( "http://192.168.31.82:9090/dwf/v1/omf/entities/recruit/objects/count", modReq ) .then((res) => { if (res.data.code != 200) { } else { pageInfo.totalPage = res.data.data; //数据总数 pageInfo.pageSize = 2; //每页条数 pageInfo.pageIndex = 1; //当前页码 pageInfo.pageSizeOpts = [2]; //每页条数切换的配置 modReq = { condition: "", startIndex: pageInfo.pageIndex, pageSize: pageInfo.pageSize, }; grid.setPageInfo(pageInfo); //设置当前表格页码信息 this.dwf_axios .post( "http://192.168.31.82:9090/dwf/v1/omf/entities/recruit/objects", modReq ) .then((rsp) => { if (rsp.data.code != 200) { } else { grid.setRowData(rsp.data.data); } }); } }); } else { modReq = { condition: "", startIndex: pageInfo.pageIndex, pageSize: pageInfo.pageSize, }; this.dwf_axios .post( "http://192.168.31.82:9090/dwf/v1/omf/entities/recruit/objects", modReq ) .then((rsp) => { if (rsp.data.code != 200) { { var pageIndex = pageInfo.pageIndex; var pageSize = pageInfo.pageSize; grid.setRowData(rsp.data.data); } } }); } |
代码块 | ||
---|---|---|
| ||
var grid = this.getAddinById("Grid3"); var query = ""; var modReq = { condition: query, }; this.dwf_axios .post("http://192.168.31.82:9090/dwf/v1/omf/entities/recruit/objects", modReq) .then((rsp) => { if (rsp.data.code != 200) { } else { var rowData = rsp.data.data; var pageInfo = grid.getPageInfo(); grid.setRowData( rowData.slice( (pageInfo.pageIndex - 1) * pageInfo.pageSize, pageInfo.pageIndex * pageInfo.pageSize ) ); } }); |
代码块 | ||
---|---|---|
| ||
var grid = this.getAddinById('Grid1'); var index = Math.round(Math.random() * 10) var cellData = grid.getCellData(); //获取当前单元格数据集 var cellValue = cellData.value var toolTipContent = `<p>${cellValue}</p>` grid.setTooltip(toolTipContent); |
设置卡片的展示类型,支持
craete、visit、edit
代码块 | ||
---|---|---|
| ||
var grid = this.getAddinById('Grid2'); var button = this.getAddinById("Operation3"); var selectedObjs = grid.getSelected(); console.log('getSelected',selectedObjs); |
代码块 | ||
---|---|---|
| ||
//卡片之间值传递 var FormEngine1 = this.getAddinById("FormEngine1"); //获取卡片1控件id var FormEngine2 = this.getAddinById("FormEngine3"); //获取卡片2控件id var Text1InFormEngine = FormEngine1.getAddinById("TextInput1"); //获取卡片1控件中的文本框1 Text1InFormEngine.setValue(1); //为文本框1赋值为1 var FE1 = Text1InFormEngine.getParentAddin(); //获取文本框1的父控件,也就是卡片1 if (FE1) { var Form = FE1.getParentAddin(); //卡片1的父控件,也就是当前表单 debugger; if (Form) { var FE2 = Form.getAddinById("FormEngine3"); //获取当前表单的卡片2 if (FE2) { var TextInput1FormEngine2 = FE2.getAddinById("TextInput1"); //卡片2的文本框 if (TextInput1FormEngine2) TextInput1FormEngine2.setValue(3); //给卡片2的文本框赋值 } } } |
代码块 |
---|
//为子表单设置对象 var FormEngine1 = this.getAddinById("FormEngine1"); let query = {condition: ` and obj.dataname = '数据111' `}; //查询条件 //开始后台数据的查询 this.handleQueryData({ queryObjReq: query, targetClass: "Asset"}).then( (res) => { //updateShow('子表单类名','子表单名',{obj:res[0]}); FormEngine1.updateShow("Asset", "biaoqian", { obj: res[0] }); } ); |
var
subFormAddin =
this
.getRootAddin(
);
代码块 | ||
---|---|---|
| ||
this.edit( { product: "上海米老头", oid: "04D0D88571046C4C9EA6546FE6245784" }, "salevalue" ).then((res) => { this.getSourceAddin().getParentAddin().freshObj(res); }); |
代码块 | ||
---|---|---|
| ||
var newObj = { relation_leftOid: "34AC734FBFB2294E852EE50B54C00831", relation_number: 77, right_partName: "螺丝", left_partName: "头盔", relation_oid: "A7EEDE6CA7AE0748BEE6B195041EB877", relation_rightOid: "DAFB73D0B5202941A46AC896965682BE", }; // 假设点击的编辑按钮,在卡片的表单内部 this.edit(newObj, "PartToPart", { isRelation: true }).then((res) => { this.getSourceAddin().getParentAddin().freshObj(res); }); |
代码块 | ||
---|---|---|
| ||
var tree = this.getAddInByID('TreeID');
let fixObj = {
right_uintname: "value",
}
tree.editNodeObj(fixObj, true) |
代码块 | ||
---|---|---|
| ||
var addin = this.getAddinById("TextInput1"); var wm = this.getAddinById('WatchMessage2'); var params = { data: addin.getValue() } wm.start(params); |
代码块 | ||
---|---|---|
| ||
var wm = this.getAddinById('WatchMessage2'); wm.pause(); |
代码块 | ||
---|---|---|
| ||
var wm = this.getAddinById('WatchMessage2'); wm.resume(); |
代码块 | ||
---|---|---|
| ||
var wm = this.getAddinById('WatchMessage2'); wm.stop(); |
代码块 | ||
---|---|---|
| ||
console.log(this.param); var label = this.getAddinById("Label1"); label.setValue(this.param.data.operationResult); |
代码块 | ||
---|---|---|
| ||
//获取查询框中的控件的2种方式:var value = this.getSourceAddin().getAddinById('parentOidEcho&2').getValue();
this.getAddinById("控件代号").getAddinById("查询框内控件的控件代号").getValue() |
获取查询框中的查询条件和
重新执行查询条件
代码块 | ||
---|---|---|
| ||
this.getSourceAddin().getSelected('Grid1').then(res => {
var query = res
console.log('getselected');
console.log(query);
//重新执行查询事件
this.getSourceAddin().freshData(query)
}) |
代码块 | ||
---|---|---|
| ||
var rowData = [
{field: 'field1', oid: 'oid1'},
{field: 'field2', oid: 'oid2'},
]
//更新列表数据
this.getSourceAddin().freshObj(rowData) |
获取选中系列
代码块 | ||
---|---|---|
| ||
let chart = this.getAddinById('EChart1'); console.log(chart.clickData) |
代码块 | ||
---|---|---|
| ||
//获取可视化控件 var grid = this.getAddinById("控件id"); //设置过滤条件 let query = `and obj.number = '${this.obj.number}'`; //根据query过滤显示可视化控件 grid.freshData(query); |
@param extendGrid 外部指定图表排列方式
@param extendSTime 外部指定查询起始时间
@param extendETime 外部指定查询结束时间,
代码块 | ||
---|---|---|
| ||
let myChart = this.getAddinById('EchartBar1'); myChart.args.option.legend.right = 60;//可以写left ,right,top,bottom myChart.args.option.legend.bottom = 'auto'; |
超级控件扩展,支持Html和Vue两种格式
在控件内可以通过dwf_ctx调用dwf脚本引擎中的方法
获取dwf_ctx句柄的方法:
var _this = window.parent.dwf_ctx; //获取dwf的脚本句柄
1)自定义复杂的交互逻辑,如根据设置数据自动增加可控件等
2)酷炫的可视化看板功能
代码块 | ||
---|---|---|
| ||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=??????"></script> <title>地球模式</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // GL版命名空间为BMapGL var map = new BMapGL.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式 var ctx = window.parent.dwf_ctx; let param = {}; ctx.dwf_axios.post(`/omf/entities/Asset/objects`,param).then(initRes => { //在回调中处理 console.log(initRes.data.data); let assets = initRes.data.data; assets.forEach(a => { var marker = new BMapGL.Marker(new BMapGL.Point(a.locationX, a.locationY)); marker.asset = a; //先将标记点对应的数据绑定起来 marker.addEventListener('click', function () { console.log(marker.asset); // 单击的时候打开对话框 let initParams={ obj:marker.asset }; ctx.openForm('Asset','AssetComposition',null,'visit',initParams); }); map.addOverlay(marker); }); }); </script> |
代码块 | ||
---|---|---|
| ||
<template> <div> <Button>Hello World</Button> </div> </template> <script> import { Button } from 'iview'; export default { components: { Button }, data() { return { } }, } </script> <style> @import "../../node_modules/iview/dist/styles/iview.css"; </style> |
this.env.locale
PC应用/Mobile应用
代码块 |
---|
console.log(this.env.locale) |
- 侧边栏默认为展开,默认为fasle
- 参数为true时表示侧边栏展开
- 参数为false时表示侧边栏关闭
代码块 |
---|
//控制侧边栏收起
this.env.setCollapsed(true); |
指定某些菜单展开
- 展开菜单列表为二维数组,示例中['外部模块','iotdb外部映射','A'],按照格式['第一级菜单','第二级菜单','第三级菜单'],写入分组菜单的中文名称,只展开匹配到的下一个层级,再深层级的嵌套子集的不需展开