功能分类 | 脚本名称/关键字 | 功能描述 | 适用范围/场景 | 脚本示例说明 |
---|---|---|---|---|
关键字 | this.obj | 表单绑定的类的对象,如果没有条件限制默认获取的是绑定类的最新一条记录 是一个JSON对象 this.obj是当前表单绑定类的对象,可以通过类上的属性获取返回对象的某一项的值 调试查看this.obj的返回值: console.log(this.obj); | 1)操作动作为visit/edit时,this.obj有数据 2)操作的前处理脚本中写了return{obj:obj},表单的this.obj会有对应值 使用范围: 在表单上绑定的前端脚本均可用 | 实体类:
关联类:
|
this.selectedObjs | 表单中含有唯一的多对象控件时,通过此数组获得用户选中的对象,如果是有多个多对象控件可以在表单设置中绑定多对象控件 是一个JSON对象数组 | 使用范围: 表单中有多对象控件(表格),并且在表单的基础配置中设置了默认多对象控件,该脚本有效,否则为null | console.log(this.selectedObjs); | |
this.data | 打开表单的初始化参数 在表单中的任何操作的前端脚本都可以直接使用this.data获取初始化参数 是一个JSON对象 | 可以使用的场景有两类: 1)操作的前处理脚本,通过return{ data:this.obj} 可以传递json对象到打开的表单 2)使用脚本打开表单传参,可用的有:this.openTab,this.openForm,this.openDrawer | console.log(this.selectedObjs); | |
this.env | 当前DWF前端的上下文信息,返回一个JSON对象,JSON对象属性包括:
| 可以用在所有的前端脚本中,不限位置 | console.log(this.env); console.log(this.env.serverIp); console.log(this.env.serverPort); console.log(this.env.serverURL); console.log(this.env.metaServicePort); console.log(this.env.objServicePort); console.log(this.env.appConfig); console.log(this.env.locale); | |
this.user | 当前登录用户的基本信息,返回一个JSON对象,包括属性如下:
| 需要获取到用户的基本信息的时候,可以使用this.user | console.log(this.user.userName); console.log(this.user.userId); console.log(this.user.oid); console.log(this.user.token); console.log(this.user.userGroups); console.log(this.user.displayName); | |
this.store | DWF内部变量,缓存了当前访问表单的基本信息 是一个JSON对象,可用的对象如下:
| 需要获取到配置系统的配置信息的时候可以使用this.store | console.log(this.store.DWF_form); console.log(this.store.DWF_global); console.log(this.store.user); console.log(this.store); | |
this.confirmData | 弹窗表单新增对象/编辑对象成功后提交的表单数据,在后处理脚本中可用 | 仅适用于操作的后处理脚本中 | console.log(this.confirmData); | |
this.className | 表单所属的实体类或者关联类的名称 | 任何表单的脚本中都可以使用 | console.log(this.className); | |
this.generateUUID() | 生成uuid的函数 | console.log("打印自动生成的uuid:"+this.generateUUID()); | ||
查询条件关键字 | $env | 仅在拼接过滤条件等场景下使用,获取当前环境的基本信息,返回一个JSON对象,包括属性如下:
| 1、操作动作为url的时候,在URL地址中可用$env 2、在过滤条件中可以使用$env 3、嵌入网页的连接地址中可以使用$env 4、功能模型->应用管理->编辑应用中的起始操作可以使用$env | |
$user | 仅在拼接过滤条件等场景下使用,当前登录用户的基本信息,返回一个JSON对象,包括属性如下:
| 1、操作动作为url的时候,在URL地址中可用$user 2、在过滤条件中可以使用$user 3、嵌入网页的连接地址中可以使用$user 4、功能模型->应用管理->编辑应用中的起始操作可以使用$user | ||
$obj | 仅在拼接过滤条件等场景下使用,表单绑定的类的对象,如果没有条件限制默认获取的是绑定类的最新一条记录 是一个JSON对象 | 1、在表单中的事件操作动作为url的时候,在URL地址中可用$obj 2、在过滤条件中可以使用$obj 3、嵌入网页控件的连接地址中可以使用$obj 注意:当表单以create状态打开,如果未初始化数据$obj的各项属性为空,慎用 | obj.[attributeName类属性英文名]=$obj.[attributeName类属性英文名] | |
$form | 获取表单的单对象控件的取值 示例:$form["控件代号"] | 该关键字可用到过滤条件中,并且仅对单对象控件有效(有getValue方法的有效) 注意:如果是单选框、复选框、选择框等设置了数据的回填和显示属性不一致,则此处返回的是该控件的回填属性的取值 | 在过滤obj.attributeName= '$form["id"]' | |
应用配置 | this.env.setCollapsed(); |
| PC应用菜单 | //控制侧边栏收起 this.env.setCollapsed(true); |
this.env.setOpenNames | 指定某些菜单展开
| PC应用菜单 | //分组菜单默认折叠,如需展开: this.env.setOpenNames([['招聘管理','人事管理'],['招聘管理','个人信息'],['外部模块','iotdb外部映射','A']]) | |
数据访问 | this.handleQueryData() | 获取DWF定制的实体类、关联类的数据对象的脚本,支持回调,入参的查询条件为JSON对象,分别是:(返回方式为异步请求,如果在前端脚本要等待返回成功做处理需要将处理内容写到回调函数中)
| 表格后台数据强制刷新/查询 |
//查询条件 let queryConditon = { targetClass:"Part", queryObjReq:{condition:`and obj.id='${this.obj.name}'`} }; //基于DB进行查询 this.handleQueryData(queryConditon).then(res => { //调用成功返回结果为一个Part对象组成的数组 console.log(res) });
let queryConditon = { targetClass:"Asset", queryObjReq:{ pageSize:3, returnAttrs:["oid", "id","assetName"], refs:[{ sourceAttr:"partOid", targetClass:"Part", targetAttr:"oid", returnAttrs:["partName", "oid"] }] }}; //基于DB进行查询 this.handleQueryData(queryConditon).then(res => { console.log(res) }); //打印得到的对象数组如下: { "queryResult": [ { "assetName": "", "oid": "6ADCD23CDC7EBF45A2DEC0B42E5AEFD6", "id": "我自闭了" }, { "assetName": "", "oid": "0909498BE13D644B80ACC643A27BF4EB", "id": "我想开了" }, { "assetName": "搅拌车", "oid": "05C2B5311CBE1B42B60A3ED6FFCF6734", "id": "BC1010313113" } ], "refResult": { "partOid": [] } } |
this.handleQueryBySQL() | 提供在DWF数据库中接入的数据源,执行原始SQL语句的能力,接受一个对象,包含下面的属性:
返回结果:
| 切记,不要一次查询上巨量数据,例如:上百万量级,导致OOM(Out Of Memory) |
//用SQL查询DWF的数据库 this.handleQueryBySQL({"condition": "select plt_name as 姓名 from plt_org_user "}).then(res => { let header = res.data.data.head; let data = res.data.data.data; console.log(header); //输出结果为:["姓名"] console.log(data); //输出结果为:["admin"...] });
//查询配置到DWF中的IoTDB数据源,假设外部数据连接的名字是IoTDB let query = { dataSourceName: 'IoTDB', condition: 'select v_in from root.test.round00 limit 100' } this.handleQueryBySQL(query).then(res => { let header = res.data.data.head; let data = res.data.data.data; console.log(header); //输出结果为:["Time, root.test.round00.v_in"] console.log(data); //输出结果为:带时间戳的100个值 }); | |
this.handleQueryByApi() | 要求先在DWF建模工具中的“数据集成”-“API接口管理”的功能下面将外部接入的API先配置好,给其设定一个名字,如:“新闻报道”,在脚本中,直接将这个名字传递给函数,获得返回结果。 | 要先配置好API,并且为其命名才能起作用。 | //假设已经在建模工具的“数据集成”-“API接口管理”配置好名为:“新闻头条”的API this.handleQueryByApi("新闻头条").then((res) => { console.log(res); }); //返回结果随API的不同而不同 | |
this.create() | 支持实体类和关联类表单中执行新增操作
| 用于系统新增时控制是否弹出信息和关联类表单新增实体类并控制是否弹出信息 | 新增实体类对象 //系统新增并弹出信息提示 this.create(obj, "WorkOrder", {showMessage:true}).then(res => { //res即为被新增的对象 console.log(res); }) 新增关联类对象 //关联类表单新增实体类并控制是否弹出信息 this.create(obj, "WorkOrderToPart", { isRelation:true, relationClass:'WorkOrderToPart', leftClass:'WorkOrder', rightClass:'Part', showMessage:true}).then(res => { //res为被新增的关联类对象 console.log(res); }) | |
this.createObj() | 在前端创建内存对象,临时对象不保存到数据库。 | 如果在异步调用的响应函数then中,使用this.returnSync({obj: res}),则会实现同步传递。 | //创建前端内存对象 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.edit() | 支持实体类和关联类表单中执行编辑操作
| 用于系统编辑时控制是否弹出信息和关联类表单编辑实体类并控制是否弹出信息 | 实体类编辑 //系统编辑时控制是否弹出信息 this.edit(obj, "WorkOrder", {showMessage:true}).then(res => { console.log(res); }) 关联类编辑 //关联类表单新增实体类并控制是否弹出信息 this.edit(obj, "WorkOrderToPart", { isRelation:true, relationClass:'WorkOrderToPart', leftClass:'WorkOrder', rightClass:'Part', showMessage:true}); | |
this.delete() | 支持实体类和关联类表单中执行删除操作
| 用于系统编辑时控制是否弹出信息和关联类表单删除实体类并控制是否弹出信息 | //系统删除时控制是否弹出信息 this.delete(obj, "WorkOrder", { showMessage:true}); //关联类表单删除实体类并控制是否弹出信息 this.delete(obj, "WorkOrder", {isRelation:false, showMessage:true}); | |
this.deleteByCondition(condition, className) | 根据条件删除类对象 参数: condition:查询条件 className:要操作的目标类 | //删除实体类对象 var oid = this.getAddinById('Grid1').getSelected()[0].oid; this.deleteByCondition(`and obj.oid='${oid}'`, 'WorkOrder').then(() => { this.getAddinById('Grid1').freshData(); }) //删除关联类对象 var oid1 = this.getAddinById('Grid2').getSelected()[0].relation_oid; this.deleteByCondition(`and obj.oid='${oid1}'`, 'WorkOrderToPart').then(() => { this.getAddinById('Grid2').freshData(); }) | ||
this.axios | 在前端调用接口可能的第三方接口 | 需要在config中补充接口信息,如headers: {'Authorization': this.user.token}。 由于是前端调用,要密切注意不会出现跨域调用被拒绝的问题CORS,如果出现该问题,改用后端脚本实现调用。 | //从iotdb中获取最新的时间序列数据 var token = btoa("root:root"); var headers = { headers: { Authorization: `Basic ${token}` } } var url = `http://i-vi6spj.cloud.nelbds.cn:8180/iotdb/rest/v1/query`; var params = { sql: `select last * from root.fleet.*` }; this.axios.post(url, params, headers).then(res => { console.log(res.data); }); | |
this.dwf_axios | 在前端调用APP端的restfull接口,主要是实体类、关联类等数据的增删改查的接口,同时该接口还支持调用第三方服务的接口 支持post、get 注意:
| 由于是前端调用,要密切注意不会出现跨域调用被拒绝的问题CORS,如果出现该问题,改用后端脚本实现调用。 | //调用app的restful API示例1 let param = { }; this.dwf_axios.post(`/omf/entities/${this.className}/objects`,param).then(res => { //在回调中处理结果 console.log(res.data.data); }); | |
this.dwf_modeler_axios | 在前端调用modeler端的restful接口,主要是一些模型类的数据、用户、授权、应用等建模相关接口 注意:
| 调用modeler端的restful API | //获取当前服务器端IP var curServerIP = this.env.serverIp; //获取当前登录用户 var curUserId = this.user.oid; //调用modeler端的restful API this.dwf_modeler_axios("/dwf/v1/org/users/${curUserId}/groups"); | |
this.QueryResultAll() | 根据查询条件获取Store中缓存的数据 | 该接口已经不推荐使用! | //查询条件 let queryConditon = { targetClass:"Part", query:{query:`and obj.id='${this.obj.name}'`}, fresh: true //是否从后台强制刷新查询(建议默认值为true) }; //该接口主要在store中进行查询(不查询后台DB) let queryResult = this.QueryResultAll(queryConditon); //TODO:查询结果queryResult处理 | |
this.getOperation() | 根据类、操作名称获取操作的定义,通过getOperation获取到已有的操作(需要存储到数据库中),再通过executeOperation进行调用,并且允许修改已有操作的操作样式和动作。
| 在前端脚本中需要调用定义的其他前后端脚本操作,可以利用getOperation得到对应的脚本,然后借助executeOperation实现交互 | //调用已有的操作,假设实体类WorkOrder有createWO的操作 this.getOperation("WorkOrder", "createWO").then(res =>{ //先取出原始操作 var opr = res.data.data; // 替代前处理脚本,不用的话可以不写 opr.beforeExecute = () => { //新的前处理脚本 return { obj:{...},//选填,对象 query:"",//选填,查询条件 data:{...}}//选填,自定义属性 } }; // 替代原来操作的后处理脚本,不用的话可以不写 opr.afterExecute = () => { //新的后处理脚本,可根据需要编写 ... }; this.executeOperation(opr); }); | |
this.queryEntity() | 获取实体类的元模型信息,传入字符串表示的实体类的类名 | //获取实体类的元模型信息 this.queryEntity(targetClassName).then(resMetaObj => { //在回调中处理resMetaObj值… }); | ||
this.queryRelation() | 获取关联类的元模型信息,传入字符串表示的关联类的类名 | //获取关联类的元模型信息 this.queryRelation(targetClassName).then(resMetaObj => { //在回调中处理resMetaObj值… }); | ||
this.cudBatchObjs() | 传入一个代表增删改事件的数组,批量增删改对象,在包含多个不同类型的实体类的复杂结构表单中,利用数据容器控件的this.getObj()提取对象,然后一次性提交数据修改,非常方便。 this.cudBtachObjs接受的是一个代表批量操作的动作数组,数组中的每个元素是一个JSON对象,包含下面的属性:
返回值为,被传入的动作数组,照原样返回,其中objs是实际增删改的数据。 | var wo = this.getAddinById('DataView1').getObj(); var rt = this.getAddinById('DataView2').getObj(); var cudEvents = [ { action: 'update', className: 'ReqWorkorder', objs: [wo] }, { action: 'update', className: 'WorkorderReport', objs: [rt] }, { "action" :"delete", "className":"TyPartDelivery", "oids": ["7F8802A65B643E4FA1058E16197A23A3", "B075591C7FE45E43BFA0978CC409DCAA"] } ]; this.cudBatchObjs(cudEvents); | ||
表单间交互 | this.openForm() | 脚本打开弹窗,参数如下:
如果,initialScript中初始化了返回的对象与initParams的含义冲突,以initParam里面的为准。 | // 表单类名 let targetClass = 'ClaimResult' // 表单名称 let viewName = 'ClaimResultSingle' // 弹框的基本操作 let args = { curDialogWidth: '1000px', /*弹窗宽*/ curDialogHeight: '800px', /*弹窗高*/, needDialogDefaultOpr:false, /*是否显示右下角保存按钮*/ displayName: "openDialog标题", /*弹窗标题*/ }; // 弹框的类型:create,edit,visit let displayType = 'edit'; // 前端脚本中Dialog弹窗脚本示例: let initParams = { obj:this.selectedObjs[0], data: { woDesc1: 'cheney' } } // 前端脚本中Dialog弹窗脚本示例: this.openForm( targetClass, viewName, args, displayType, initParams ); | |
this.getRootForm() | 在有多层弹窗的情况下可以使用该方法获取最底层表单的句柄 | |||
this.getParentForm() | 出现弹窗的时候想在弹窗中获取父表单的控件可以使用该方法获取父表单句柄 | |||
前处理脚本:return false 表单默认操作:return false | 如果无异步调用,在操作的前处理脚本中可用,并且操作样式为弹框方式,使用return false表示不继续弹窗。 同样的,在操作控制以弹框的方式显示表单,在默认操作里面使用retrun false也会阻止弹框的关闭。 | |||
this.returnSync() | 当前端调用后端服务接口需要等待返回后在执行返回操作可以使用该方法 | 这样的话就能够保证在前处理中请求接口数据初始化弹框的内容 , var _this = this; | //创建前端内存对象 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:
| 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传值到后处理
| 关闭tab和关闭tab传值到后处理 | //不带参数:关闭tab this.closeTab(); //带参数:关闭tab传值到后处理 this.closeTab(data); | |
this.closeTabById() | 分为不带参数和带参数两种方式。他们的功能分别是关闭指定tab和指定tab关闭传值。
页签的ID获取方式:moduleName-authority
data为回传给后处理脚本的参数,可以在后处理脚本中利用this.confirmData获取 | //关闭页签 this.closeTabById('moduleName-authority'); //关闭页签并触发打开页签的后处理脚本 this.closeTabById('moduleName-authority',data); | ||
this.openDrawer() | 支持打开滑窗的功能,规则如下:
如果,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 早期版本只接受一个字符串,后来发现有时候要停留更长时间,所以增加了输入一个配置的JSON对象的方法,这个JSON对象的具体的属性为:
| //目前如下几种消息提示都是在界面上方提示后自动关闭 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}); 更多的参数设置如下: | ||
this.msgboxDialog() | 模态弹窗提示后需手动关闭的msg提示框,支持确定和取消两种回调方式,示例脚本如下: 注意: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进行调用
| 可以和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 => { | 说明:该调用方式仅仅试用与在同一个操作内编写的后端脚本有效 参数说明: customData:为前端调用后端脚本的参数JSON格式 default: 为后端脚本的脚本名称 返回结果: 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页签名称"); |
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 |
| 数据导入控件绑定数据导入完成事件 | 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 | 表格控件 | 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包含:
可设置的配置项如下:
| 表格控件 | //行样式设置 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> |
概览
内容工具