return false; |
代码块 |
---|
//创建前端内存对象
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} |
|
this.closeDialog() | 表单以弹窗样式打开,该方法有效,关闭当前弹窗,可以传递一个confirmData,在操作回到后处理脚本的时候,利用this.confirmData得到这个对象。 |
| 在弹框的操作脚本中调用 代码块 |
---|
| this.closeData({key1:'hello'}) |
在弹框关闭后触发的后处理脚本中通过this.confirmData获得 代码块 |
---|
| console.log(this.confirmData) //前端控制台输出:{key1:'hello'} |
|
this.openTab() | 以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); |
|
this.closeTab() | 分为不带参数和带参数两种方式。他们的功能分别是关闭tab和关闭tab传值到后处理 - 不带参数:this.closeTab()
- 带参数:this.closeTab(data)
| 关闭tab和关闭tab传值到后处理 |
代码块 |
---|
| //不带参数:关闭tab
this.closeTab(); |
代码块 |
---|
| //带参数:关闭tab传值到后处理
this.closeTab(data); |
|
this.closeTabById() | 分为不带参数和带参数两种方式。他们的功能分别是关闭指定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); |
|
this.openDrawer() | 支持打开滑窗的功能,规则如下: - 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() | 消息提示,支持三种: 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}); |
更多的参数设置如下: Image Modified |
this.msgboxDialog() | 模态弹窗提示后需手动关闭的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.spinShow(); //打开遮罩
this.edit(editObj, className).then(rtnObj =>{
//返回的rtnObj为后台修改保存后返回的对象
this.spinHide(); //编辑完成,关闭遮罩
}); |
|
this.spinHide() | 关闭遮罩 | 事件处理完成,关闭遮罩,在异步交口调用完成后可以关闭遮罩 |
代码块 |
---|
| this.spinShow(); //打开遮罩
this.edit(editObj, className).then(rtnObj =>{
//返回的rtnObj为后台修改保存后返回的对象
this.spinHide(); //编辑完成,关闭遮罩
}); |
|
this.validateForm() | 表单单对象控件规则校验 | 提交保存表单之前,可以使用该脚本校验单对象控件是否满足设定的规则 |
代码块 |
---|
// 一般性前端校验
if(this.validateForm()){
console.log('表单验证成功')
}else{
console.log('表单验证失败')
}
// 为了满足验重配置项的接口校验,将校验方法调整为如下:
this.validateForm().then(res=>{
if(res){
console.log('表单验证成功')
}else{
console.log('表单验证失败')
}
}); |
|
this.freshData() | 使用原有查询条件控制表单刷新,更新数据会触发原有页面初始化事件 | 当数据同步被修改,可以利用this.freshData()获取到最新数据 |
代码块 |
---|
| this.freshData();
this.msgbox.info("fresh success") |
|
使用控件
| this.getAddinById() | 根据控件代号获取控件对象,以便能够操作控件 | 在表单的前端脚本中都可以获取到当前表单的控件对象 |
代码块 |
---|
| var grdiAddin = this.getAddinById("控件代号"); |
|
this.getTargetAddin() | 获取控件绑定的多对象控件,这种用法不必在脚本里面使用字符串常量去得到目标控件。 | 仅在按钮上有效,获取的是按钮绑定的多对象控件 |
代码块 |
---|
var grid = this.getTargetAddin(); |
|
this.getSourceAddin() | 获取当前操作绑定的控件,无需控件代号,避免了复用操作对应的脚本时,使用this.getAddinById必须指定字符串常量的局限性。 |
|
代码块 |
---|
| let addin = this.getSourceAddin();
if (addin) {
console.log(addin.args)
} |
|
this.getSocketId(); | 获取当前客户端的socketId |
|
|
脚本互相调用 | this.executeOperation() | 调用并执行已有的后端脚本,支持回调 自定义操作对象(在现在的脚本中定义操作对象,无需事先定义操作)通过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:表示后处理函数,代表后处理脚本
| 可以和getOperation配合使用 |
代码块 |
---|
| //定义新的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(customData,'default').then(res => { console.log("后端回调结果"); console.log(res); }) | 说明:该调用方式仅仅试用与在同一个操作内编写的后端脚本有效 参数说明: customData:为前端调用后端脚本的参数JSON格式 default: 为后端脚本的脚本名称 返回结果: res:后端通过this.res给前端脚本传参 注意: 在同一个操作内编写的后端接口获取前端脚本传参可以利用this.customData获取callServer的第一个参数 返回结果需要通过this.res={}来给前端赋值回调结果 | 该方法属于操作内方法,调用的后端脚本仅支持在同一个操作内新建的后端脚本操作,如图: Image Modified | 一个操作中的前端脚本: 代码块 |
---|
| 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页签名称"); |
|
hideTab | 控制指定页签的隐藏 | 标签页 |
代码块 |
---|
| var tabAddin = this.getAddinById("Tab1");
tabAddin.showTab("tab页签名称");
tabAddin.hideTab("tab页签名称"); |
|
getSelectedTab | 获取Tab控件当前选中的子页签 | 标签页 |
代码块 |
---|
| var tabAddin = this.getAddinById("Tab1");
tabAddin.getSelectedTab(); |
|
turnTo | 跳转激活子页签 | 标签页 |
代码块 |
---|
| var tabAddin = this.getAddinById("Tab1");
tabAddin.turnTo('tab1'); |
|
dropName | 获取点击次数 | 标签页 |
代码块 |
---|
| var dropName = ''
tabAddin.args.tabs.forEach(item => {
if(name == item.name){
dropName = item.dropName
}
})
dropName = tabAddin.args.tabs[i].dropName
tabAddin.clickObj[dropName] |
|
导入导出按钮控件 | responseData | 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([ '属性名' ], '类名' , `查询条件 `) | 数据导出并下载文件 | 数据导出控件绑定点击事件 |
代码块 |
---|
| // 脚本调用数据导出方法,不传参数,以控件上设置的条件导出;有参数,就根据输入的参数导出
this.exportData(['oid'], 'echo', `and obj.oid='9948A73560B48D44AF3894FC7DF98E7E'`) |
|
setDisable() | 设置控件禁用/可用 | 按钮、数据导入按钮、数据导出按钮、标签页 |
代码块 |
---|
| //设置标签页的页签"页签1"禁用
var tabAddin = this.getAddinById("Tab1");
tabAddin.setDisable('tab1', true);
//设置按钮禁用
var tabAddin = this.getAddinById("Operation1");
tabAddin.setDisable(true); |
|
单对象表单控件脚本
| this.getAddinById("控件代号").getValue() | 获取控件取值 | 除按钮外的单对象控件,包括:数字框、文本框、标签、富文本、选择框、单选框、复选框、对象标签。 |
代码块 |
---|
| let mySelect = this.getAddinById('SelectInput1');//绑定选择框,这个绑定的控件id需要根据自己的表单内的控件调整
let result = mySelect.getValue(); |
|
this.getAddinById("控件代号").getDisplayValue() | 获取界面显示的值,该方法仅在单选框、选择框、复选框中有效 | 单选框、选择框、复选框控件有效 |
代码块 |
---|
| 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); |
|
this.getAddinById("控件代号").setValue() | 给控件设置取值,并在控件上展示 | 单对象控件 |
代码块 |
---|
| var place = this.getAddinById("CheckBox1");//绑定复选框
place.setValue('nanjing');//设置地点的值 |
|
this.getAddinById("控件代号").args | 获取控件上的其他配置参数 示例: args.hided //控件的显示隐藏 true 隐藏 false:显示 | 所有控件 |
代码块 |
---|
| let myAttach = this.getAddinById('Attachments1');//绑定附件,这个绑定的控件id需要根据自己的表单内的控件调整
myAttach.args.allowType = 'jpg';//设置附件上传文件类型
//可以通过console.log查看每个控件支持的args的参数
myAttach.args.hided = true;//隐藏控件 |
|
this.getAddinById("控件代号").triggerEvent() | 需要被触发的事件名称,跟中文名一样,例如:在控件的选项区中发现有:“值变化事件”,那么事件的名称即为:“值变化” |
|
代码块 |
---|
| var place = this.getAddinById("CheckBox1");//绑定复选框
place.setValue('nanjing');//设置地点的值
place.triggerEvent('值变化')//触发控件上绑定的值变化事件 |
|
this.getAddinById("控件代号").setTooltip() | 设置控件的鼠标悬停事件 |
|
代码块 |
---|
| 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); |
|
this.getAddinById("控件代号").setError() | 设置控件的提示信息 | 设置信息 |
代码块 |
---|
| //控件的id可在app端开发者工具中拾取,后期可在modeler中直接拷贝
var addinElement = this.getAddinById("指定控件的id");
//设置控件在界面中的错误信息提示
addinElement.setError("存在异常");
//$el为指定控件的dom元素,可以直接对dom元素修改其样式
addinElement.$el.style.display = "none"; |
|
this.getAddinById("控件代号").getSelected() | 获取选中的对象信息 | 仅支持多对象控件,如:表格、卡片、目录树、关联结构树 |
代码块 |
---|
| 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("单击");//删除后执行刷新
})//删除关联类的关联关系 |
|
this.getAddinById("控件代号").getKVValue() | 获取动态参数看的KV键值数据 | 仅支持动态参数控件 |
代码块 |
---|
| //动态参数控件对象
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); |
|
this.getAddinById("控件代号").getSelectedFileList() | 点击预览事件,获得被点击的文件列表 | 多文件上传控件 |
代码块 |
---|
| this.getAddinById("控件代号").getSelectedFileList(); |
|
this.getAddinById("控件代号").getDeleteFileList() | 针对删除文件事件,获取已经删除的文件列表 | 多文件上传控件 |
代码块 |
---|
| this.getAddinById("控件代号").getDeleteFileList(); |
|
this.getAddinById("控件代号").getFileList(withUrl:false);
| 获得上传成功的所有文件列表,默认不获取全部URL,withUrl为真表示获取全部Url,自动拼接好 | 多文件上传控件 |
代码块 |
---|
| 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); |
|
setRowClass | 设置行样式,是一个函数,表格会遍历每行,传入名为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';
}
}); |
|
setColumnDefs | 设置列定义 | 表格控件 |
代码块 |
---|
| //列样式设置
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); |
|
setColumnVisible | 设置列可见 | 表格控件 |
代码块 |
---|
| var grdiAddin = this.getAddinById("id");
grdiAddin.setColumnVisible(0, false) |
|
setRowData | 设置表格数据 | 表格控件 |
代码块 |
---|
| //表格头部生成与数据结构数据操作(增删改,浏览器内存实现,不涉及数据库)
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'}); |
|
getRowData | 获取表格数据 | 表格控件 |
deleteRowData | 删除表格数据(参数对应行) | 表格控件 |
updateRowData | 修改表格数据 | 表格控件 |
getAll | 获取表格的所有数据 | 表格控件 |
代码块 |
---|
| //获取表格中所有的的行数据对象集合
let workItemTable = this.getAddinById("Grid1");
var Table = workItemTable.getAll();
console.log(Table);
this.msgbox.info('Table'); |
|
getDefaultColumnDef | 获取一列的默认列定义 | 表格控件 |
代码块 |
---|
| 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);
}
}
});
} |
|
setPageInfo | 设置当前页码 | 表格控件 |
getPageInfo | 获取表格页码信息 | 表格控件 |
代码块 |
---|
| 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
)
);
}
}); |
|
setTooltip | 表格单元格的鼠标悬停事件 | 表格控件 |
代码块 |
---|
| 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); |
|
setDisplayType() | 设置卡片的展示类型,支持 craete、visit、edit | 卡片控件 |
|
getSelected | 获取选中行数据,支持多选对象 | 表格控件、卡片控件 |
代码块 |
---|
| var grid = this.getAddinById('Grid2');
var button = this.getAddinById("Operation3");
var selectedObjs = grid.getSelected();
console.log('getSelected',selectedObjs); |
|
getParentAddin | 获取卡片控件所在的表单 | 卡片控件 |
代码块 |
---|
| //卡片之间值传递
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的文本框赋值
}
}
}
|
|
updateShow | 刷新子表单的数据显示 | 卡片控件 |
代码块 |
---|
//为子表单设置对象
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] });
}
);
|
|
getRootAddin | 获取控件 | 卡片控件,子表单中使用 | var subFormAddin = this .getRootAddin( ); |
freshObj(res) | 修改信息后刷新卡片,只是前端刷新 | 卡片控件 |
代码块 |
---|
| this.edit(
{ product: "上海米老头", oid: "04D0D88571046C4C9EA6546FE6245784" },
"salevalue"
).then((res) => {
this.getSourceAddin().getParentAddin().freshObj(res);
});
|
|
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);
}); |
|
editNodeObj() | 编辑树 | 树控件 |
代码块 |
---|
| var tree = this.getAddInByID('TreeID');
let fixObj = {
right_uintname: "value",
}
tree.editNodeObj(fixObj, true) |
|
start(args) | 启动消息订阅 | 订阅控件 |
代码块 |
---|
| var addin = this.getAddinById("TextInput1");
var wm = this.getAddinById('WatchMessage2');
var params = {
data: addin.getValue()
}
wm.start(params); |
|
pause() | 暂停消息订阅 | 订阅控件 |
代码块 |
---|
| var wm = this.getAddinById('WatchMessage2');
wm.pause(); |
|
resume() | 恢复消息订阅 | 订阅控件 |
代码块 |
---|
| var wm = this.getAddinById('WatchMessage2');
wm.resume(); |
|
stop() | 停止消息订阅 | 订阅控件 |
代码块 |
---|
| var wm = this.getAddinById('WatchMessage2');
wm.stop(); |
|
this.param | 获取后端返回值,当调用后端脚本完成后,后端脚本返回的数据会存储在this.param变量中,需要的时候可以取到 | 调用后端脚本或restful接口返回的结果存储在this.param中,当调用后该对象有值 |
代码块 |
---|
| console.log(this.param);
var label = this.getAddinById("Label1");
label.setValue(this.param.data.operationResult); |
|
getValue(); | 获取查询框中控件的取值 | 查询框 |
代码块 |
---|
| //获取查询框中的控件的2种方式:var value = this.getSourceAddin().getAddinById('parentOidEcho&2').getValue();
this.getAddinById("控件代号").getAddinById("查询框内控件的控件代号").getValue() |
|
freshData | 获取查询框中的查询条件和 重新执行查询条件 | 查询框 |
代码块 |
---|
| this.getSourceAddin().getSelected('Grid1').then(res => {
var query = res
console.log('getselected');
console.log(query);
//重新执行查询事件
this.getSourceAddin().freshData(query)
}) |
|
freshObj | 支持返回结果,如改用API查询或者自定义sql查询 | 查询框 |
代码块 |
---|
| var rowData = [
{field: 'field1', oid: 'oid1'},
{field: 'field2', oid: 'oid2'},
]
//更新列表数据
this.getSourceAddin().freshObj(rowData) |
|
可视化表单控件脚本
| this.getAddinById('可视化控件代号').clickData | 获取选中系列 | 可视化控件 |
代码块 |
---|
| let chart = this.getAddinById('EChart1');
console.log(chart.clickData) |
|
freshData(query) | 根据过滤条件更新数据 | 多对象控件、可视化控件 |
代码块 |
---|
| //获取可视化控件
var grid = this.getAddinById("控件id");
//设置过滤条件
let query = `and obj.number = '${this.obj.number}'`;
//根据query过滤显示可视化控件
grid.freshData(query); |
|
freshData(extendArr, extendGrid, extendSTime, extendETime) | @param extendArr 外部选择的序列集合 @param extendGrid 外部指定图表排列方式 @param extendSTime 外部指定查询起始时间 @param extendETime 外部指定查询结束时间, | 时序看板 |
|
getToolsSeries() | 返回当前工具栏所选全部序列 | 时序看板 |
|
getToolsGridType() | 返回当前工具栏所选图标排列方式 | 时序看板 |
|
getToolsStartTime() | 返回当前工具栏日期起始时间 | 时序看板 |
|
getToolsEndTime() | 返回当前工具栏日期结束时间 | 时序看板 |
|
option.legend | 设置图例位置 | 可视化控件 |
代码块 |
---|
| let myChart = this.getAddinById('EchartBar1');
myChart.args.option.legend.right = 60;//可以写left ,right,top,bottom
myChart.args.option.legend.bottom = 'auto'; |
|
编码扩展表单控件脚本 | HTML | 超级控件扩展,支持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> |
|
VUE | vue-超级控件 | 支持Iview的组件,如需其他组件需要在服务器安装后才可以被引用,如要使用elementUI的组件库,可以预先在dwf服务器下载安装,然后才能再此处加入引用 |
代码块 |
---|
| <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> |
|