...
序号 | 功能分类 | 脚本名称/关键字 | 功能描述 | 适用范围/场景 | 脚本示例说明 | 备注 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | 关键字 | this.obj | 表单绑定的类的对象,如果没有条件限制默认获取的是绑定类的最新一条记录 是一个JSON对象 | 1)操作动作为visit/edit时,this.obj有数据 2)操作的前处理脚本中写了return{obj:obj},表单的this.obj会有对应值 使用范围: 在表单上绑定的前端脚本均可用 | console.log(this.obj); this.obj.[属性名] 关联类的话 this.obj.left_[左类属性名] this.obj.right_[右类属性名] this.obj.relation_[关联属性名] | this.obj是当前表单绑定类的对象,可以通过类上的属性获取返回对象的某一项的值 调试查看this.obj的返回值: console.log(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.data); | ||||||||||||||
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); | ||||||||||||||
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.comfirmData | 弹窗表单新增对象/编辑对象成功后提交的表单数据,在后处理脚本中可用 | 仅适用于操作的后处理脚本中 | 在后处理脚本中可以使用 console.log(this.confirmData); | ||||||||||||||
this.className | 表单所属的实体类或者关联类的名称 | 任何表单的脚本中都可以使用 | console.log(this.className); | ||||||||||||||
$env | 获取当前环境的基本信息,返回一个JSON对象,包括属性如下:
| 需要获取当前环境的基本信息的时候,可以使用$env | debugger; and obj.attributeName= '${env.serverURL} and obj.attributeName= '${env.serverIp}`;//以此类推可以自定义增加或减少env和user | ||||||||||||||
$user | debugger; and obj.attributeName= '${env.serverURL} and obj.attributeName= '${env.serverIp}`;//以此类推可以自定义增加或减少env和user | ||||||||||||||||
$obj | obj.attributeName=$obj.attributeName | ||||||||||||||||
$form | 指定控件联动查询 | obj.attributeName= '$form["id"]' | |||||||||||||||
2 | 数据访问 | this.handleQueryData () | 表格后台数据强制刷新/查询 | //查询条件 let queryConditon = { targetClass: "Part" , query:{query:`and obj.id= '${this.obj.name}' `}, fresh: true //是否从后台强制刷新查询(建议默认值为true) }; //基于DB进行查询 this .handleQueryData(queryConditon).then(res => { //针对res值(查询返回值)直接处理… }); | |||||||||||||
this.create() | 支持实体类和关联类表单中执行新增操作
| 用于系统新增时控制是否弹出信息和关联类表单新增实体类并控制是否弹出信息 | //系统新增时控制是否弹出信息 this.create(obj, "WorkOrder", {showMessage:true}); //关联类表单新增实体类并控制是否弹出信息 this.create/edit(obj, "WorkOrderToPart", { | ||||||||||||||
this.createObj() | /创建前端内存对象 let obj = this.createObj(this.className).then((res) => { let param = | ||||||||||||||||
this.edit() | 支持实体类和关联类表单中执行编辑操作
| 用于系统编辑时控制是否弹出信息和关联类表单编辑实体类并控制是否弹出信息 | //系统编辑时控制是否弹出信息 this.edit(obj, "WorkOrder", {showMessage:true}); //关联类表单新增实体类并控制是否弹出信息 this.edit(obj, "WorkOrderToPart", { | ||||||||||||||
this.delete() | 支持实体类和关联类表单中执行删除操作
| 用于系统编辑时控制是否弹出信息和关联类表单删除实体类并控制是否弹出信息 | //系统删除时控制是否弹出信息 this.delete(obj, "WorkOrder", { //关联类表单删除实体类并控制是否弹出信息 this.delete(obj, "WorkOrder", {isRelation:false, | ||||||||||||||
this.dwf_axios() | 在回调中处理 | 调用app的restful API示例1 //this.dwf_axios.post(`http://192.168.30.63/workorder/init`,param); let param = { }; this .dwf_axios.post(`/workorder/init?tyWorkOrderOid=${ this .obj.oid}`,param).then(initRes => { //在回调中处理 if (initRes && initRes.data && initRes.data.result && initRes.data.result == true ){ this .msgbox.success( '已完成基于专家库作业信息的初始创建!' ); } else if (initRes && initRes.data && initRes.data.msg){ alert(initRes.data.msg); } }); | |||||||||||||||
this.dwf_modeler_axios() | 调用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进行调用,并且允许修改已有操作的操作样式和动作。
|
| |||||||||||||||
this.queryEntity() | 在回调中处理resMetaObj值… |
| |||||||||||||||
this.queryRelation() | 在回调中处理resMetaObj值… |
| |||||||||||||||
3 | 表单间交互 | this.openForm() | 新的标签打开界面 | var targetClass = 'part' ; var viewName = 'allPartList' ; var args = {}; //args是{ conditionExpre: 查询条件, params: 初始化脚本 },如果没有args可以传空 this .openForm(targetClass, viewName, args); | |||||||||||||
this.returnSync() | 保证异步前处理脚本处理之后再打开弹窗用的 | //创建前端内存对象 let obj = this.createObj(this.className).then((res) => { let param = | |||||||||||||||
this.closeDialog() | 关闭弹窗 | this.closeDialog() | |||||||||||||||
this.openTab() | queryOpr中的参数 @param targetClass:表示对应的类 @param viewName:表示需要打开的表单名称 @param action:动作 @param authority:英文名 @param extSettings:是否打开默认操作 @param args中的参数
| 打开tab |
| ||||||||||||||
this.closeTab() | 分为不带参数和带参数两种方式。他们的功能分别是关闭tab和关闭tab传值到后处理
| 关闭tab和关闭tab传值到后处理 | //不带参数:关闭tab this.closeTab(); //带参数:关闭tab传值到后处理 this.closeTab(data); | ||||||||||||||
this.closeTabById() | 分为不带参数和带参数两种方式。他们的功能分别是关闭指定tab和指定tab关闭传值。
| 指定tab关闭和指定tab关闭传值 | this.closeTabById('moduleName-authority');不知道这个moduleName-authority什么意思,无法说明这里面填了个什么值进去 this.closeTabById('moduleName-authority',data); | ||||||||||||||
this.openDrawer() | 支持打开滑窗的功能,规则如下: opendrawer( @param @param viewName:表示需要打开的表单名称 @param left/right:表示右滑窗还是左滑窗 @param args:打开表单时的其他参数,在之前的实现保持不变的前提下,保证兼容性,推荐使用null @param displaType:tab页签打开时的状态 @param initParams:nitParams:object,与操作中的前处理脚本中return { obj:{...}, query: {...}, data: {...}} 返回的格式一致,可以设置对象,查询条件和夹带的数据 | 脚本打开滑窗 |
| ||||||||||||||
this.msgbox() | 消息提示 | //目前如下几种消息提示都是在界面上方提示后自动关闭 this .msgbox.success( "成功的提示" ); this .msgbox.info( "一般的提示" ); this .msgbox.error( "错误的提示" ); | |||||||||||||||
this.msgboxDialog() | 模态弹窗提示后需手动关闭的msg提示框 | //建议补充模态弹窗提示后需手动关闭的msg提示框,参考如下: this .msgboxDialog.success(“title标题”, "成功的提示" ); this .msgboxDialog.info(“title标题”, "一般的提示" ); this .msgboxDialog.error(“title标题”, "错误的提示" ); //@扩展点(暂不支持) //建议补充comfirm确认弹窗(包括确认与取消按钮) this .msgboxDialog.confirm (“title标题”, "请确认是否删除?" , < function >(点击确定之后的回调函数), < function >(点击取消之后的回调函数)); | |||||||||||||||
this.spinShow() | 已遮罩 | spinShow(); | |||||||||||||||
this.spinHide() | 取消遮罩 | this.spinHide(); | |||||||||||||||
this.validateForm() | 控件效验 | if(this.validateForm()){ console.log('表单验证成功') }else{ console.log('表单验证失败') } | |||||||||||||||
this.freshData() | 不带参数: 带参数:没看到带参的脚本 | 使用原有查询条件控制表单刷新,更新数据会触发原有页面初始化事件 |
| ||||||||||||||
4 | 使用控件 | this.getAddinById() | 多对象控件组中的'表单点选器'控件【内置的控件】 | var grdiAddin = this .GetAddinById( "控件的id" ); | |||||||||||||
5 | this.getTargetAddin() | 获取操作绑定的控件 | var grid = this.getTargetAddin(); | ||||||||||||||
6 | this.getSourceAddin() | 获取操作触发对象 | debugger // this.getSourceAddin(); console.log(this.getSourceAddin.args.text) label =this.getAddinById("Label4"); label.setValue(this.getSourceAddin.args.text) | ||||||||||||||
7 | 脚本互相调用 | this.executeOperation() | 自定义操作对象(在现在的脚本中定义操作对象,无需事先定义操作)通过executeOperation进行调用
|
| |||||||||||||
8 | 单对象表单控件脚本 | this.getAddinById("控件代号").getValue() | 获取控件的值 |
| |||||||||||||
9 | this.getAddinById("控件代号").getDisplayValue() | 获取界面显示值key |
| ||||||||||||||
10 | this.getAddinById("控件代号").setValue() | 设置控件的值 |
| ||||||||||||||
11 | this.getAddinById("控件代号").args | 设置附件上传类型 |
| ||||||||||||||
12 | this.getAddinById("控件代号").triggerEvent() | 触发值变化事件 |
| ||||||||||||||
13 | this.getAddinById("控件代号").setTooltip() | 鼠标悬停 | var grid = this.getAddinById('Grid1'); var index = Math.round(Math.random() * 10) | ||||||||||||||
14 | this.getAddinById("控件代号").setError() | 设置信息 | //控件的id可在app端开发者工具中拾取,后期可在modeler中直接拷贝 var addinElement = this .GetAddinById( "指定控件的id" ); //设置控件在界面中的错误信息提示 addinElement.setError( "存在异常" ); //$el为指定控件的dom元素,可以直接对dom元素修改其样式 addinElement.$el.style.display = "none" ; | ||||||||||||||
15 | this.getAddinById("控件代号").getSelected() | 获取选中对象的信息 |
| ||||||||||||||
16 | this.getAddinById("控件代号").getKVValue() | 获取动态参数框的KV键值对数据 |
| ||||||||||||||
17 | |||||||||||||||||
18 | 多对象表单控件脚本(卡片还有特殊包含的关键字) | 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); | ||||||||||||
19 | setRowClass | 设置行样式 | //行样式设置 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'; } }); | ||||||||||||||
20 | setColumnDefs | 设置列定义 | //列样式设置 var grid = this.getAddinById('Grid3'); | ||||||||||||||
21 | setColumnVisible | 设置列可见 | debugger; var grdiAddin = this.GetAddinById("id"); grdiAddin.setColumnVisible(0, false) | ||||||||||||||
22 | setRowData | 设置表格数据 |
| ||||||||||||||
23 | getRowData | 获取表格数据 | |||||||||||||||
24 | deleteRowData | /删除表格数据(参数对应行) | |||||||||||||||
25 | updateRowData | 修改表格数据 | |||||||||||||||
26 | getAll | 对象集合 |
| ||||||||||||||
27 | getDefaultColumnDef | 获取一列的默认列定义 | //内存表格 ar grid = this.getAddinById('Grid3'); | ||||||||||||||
28 | setPageInfo | 设置当前页码 | |||||||||||||||
29 | 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)) } }); | ||||||||||||||
30 | setTooltip | 鼠标悬停 | var grid = this.getAddinById('Grid1'); var index = Math.round(Math.random() * 10) | ||||||||||||||
31 | setDisplayType() | create、visit、edit三态 | |||||||||||||||
32 | getSelected | 获取表格中选中的(多)行数据 | debugger var grid = this.getAddinById('Grid2'); var button = this.getAddinById("Operation3"); var selectedObjs = grid.getSelected(); console.log('getSelected',selectedObjs); | ||||||||||||||
33 | getParentAddin | 获取父控件 | //卡片之间值传递 var FormEngine1 = this.getAddinById('FormEngine1');//获取卡片1控件id | ||||||||||||||
34 | updateShow | 刷新子表单的数据显示 | //为子表单设置对象 var FormEngine1 = this.getAddinById('FormEngine1'); let query = ` and obj.dataname = '数据111' `; //查询条件 | ||||||||||||||
35 | 36 | 37 | 38 | 39 | 40 | 可视化表单控件脚本 | 41 | 42 | 43 | 编码扩展表单控件脚本 | 44getRootAddin | 获取控件 | var subFormAddin = this .getRootAddin( ); | ||||
36 | freshObj(res) | 修改信息后刷新卡片 | this.edit({product: '上海米老头', oid: '04D0D88571046C4C9EA6546FE6245784'}, 'salevalue').then(res => { this.getSourceAddin().getParentAddin().freshObj(res) }); | ||||||||||||||
37 | createOpr.args.hided | 初次进入卡片时初始化事件 | var createOpr = this.getAddinById('Operation1'); var editOpr = this.getAddinById('Operation2'); var deleteOpr = this.getAddinById('Operation3'); if(this.obj.workinghours == 12345){ createOpr.args.hided = true; }else if(this.obj.workinghours ==12){ editOpr.args.hided = true; } | ||||||||||||||
38 | 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) }); | ||||||||||||||
39 | editNodeObj() | 编辑树 |
let fixObj = { | ||||||||||||||
40 | setError() | 设置信息 | //控件的id可在app端开发者工具中拾取,后期可在modeler中直接拷贝 var addinElement = this .GetAddinById( "指定控件的id" ); //设置控件在界面中的错误信息提示 addinElement.setError( "存在异常" ); //$el为指定控件的dom元素,可以直接对dom元素修改其样式 addinElement.$el.style.display = "none" ; | ||||||||||||||
41 | start(args) | 启动消息订阅 | var addin = this.getAddinById("TextInput1"); var wm = this.getAddinById('WatchMessage2'); | ||||||||||||||
42 | pause() | 暂停消息订阅 | var wm = this.getAddinById('WatchMessage2'); wm.pause(); | ||||||||||||||
43 | resume() | 恢复消息订阅 | var wm = this.getAddinById('WatchMessage2'); wm.resume(); | ||||||||||||||
44 | stop() | 停止消息订阅 | var wm = this.getAddinById('WatchMessage2'); wm.stop(); | ||||||||||||||
45 | this.param | 获取后端返回值 | console.log(this.param); var label = this.getAddinById("Label1"); label.setValue(this.param.data.operationResult); | ||||||||||||||
46 | 可视化表单控件脚本 | getSelected() | 获取选中系列 | //获取可视化控件 var grid = this.GetAddinById("控件id"); //打印当前所有系列 console.log(grid.getAll()); | |||||||||||||
47 | getAll() | return全部定制对象 | //获取可视化控件 var grid = this.GetAddinById("控件id"); //打印当前选中的系列 | ||||||||||||||
48 | freshData(query) | 根据传入的查询条件刷新 | //获取可视化控件 var grid = this.GetAddinById("控件id"); //设置过滤条件 //根据query过滤显示可视化控件 | ||||||||||||||
49 | setDisplayType(type) | 设置显示类型 type:create、edit、visit | |||||||||||||||
50 | freshData(extendArr, extendGrid, extendSTime, extendETime) | @param extendArr 外部选择的序列集合 * @param extendGrid 外部指定图表排列方式 * @param extendSTime 外部指定查询起始时间 * @param extendETime 外部指定查询结束时间, | |||||||||||||||
51 | getToolsSeries() | 返回当前工具栏所选全部序列 | |||||||||||||||
52 | getToolsGridType() | 返回当前工具栏所选图标排列方式 | |||||||||||||||
53 | getToolsStartTime() | 返回当前工具栏日期起始时间 | |||||||||||||||
54 | getToolsEndTime() | 返回当前工具栏日期结束时间 | |||||||||||||||
55 | clickData | 回填选中的值 | let chart = this.getAddinById('EChart1'); console.log(chart.clickData) return { obj: { price2: chart.clickData } } | ||||||||||||||
56 | option.legend | 设置图例位置 | let myChart = this.getAddinById('EchartBar1'); myChart.args.option.legend.right = 60;//可以写left ,right,top,bottom myChart.args.option.legend.bottom = 'auto'; | ||||||||||||||
57 | 编码扩展表单控件脚本 | HTML | 动画实例 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> /* 可以设置不同的进入和离开动画 */ /* 设置持续时间和动画函数 */ .fade-enter-active, .fade-leave-active { transition: opacity 2s } .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ { opacity: 0 } </style> </head> <body> <div id = "databinding"> <button v-on:click = "show = !show">点我</button> <transition name = "fade"> <p v-show = "show" v-bind:style = "styleobj">动画实例</p> </transition> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { show:true, styleobj :{ fontSize:'30px', color:'red' } }, methods : { } }); </script> </body> </html> | |||||||||||||
58 | VUE | vue-超级控件 | <template> @import "../../node_modules/iview/dist/styles/iview.css"; </style> |