- 一、概述
- 二、操作及示例
- 2.1、通过表单属性编写表单脚本
- 2.2、编写脚本示例
- 三、表单脚本接口API
- 3.1、加载事件
- 3.2、按钮加载事件【v.3.2.4+】
- 3.4、按钮的前置事件
- 3.5、按钮的后置事件
- 3.6、子表按钮的前置事件【v3.1.9+支持】
- 3.7、子表按钮的后置事件 【v3.1.9+支持】
- 3.8、子表合计方法 【v3.1.10+支持】
- 四、常用脚本示例
- 4.1、获取表单所有数据
- 4.2、获取表单某个字段数据(值)
- 4.3、修改表单某个字段数据(值)或者给字段赋值
- 4.4、子表操作
- 4.5、设置字段隐藏,只读,必填
- 4.6、字段事件
- 4.7、设置表单背景,字体,字体颜色
- 4.8、form DOM操作
- 4.9、子表合计自定义方法
- 4.10 监听表单的值变化
- 4.11 动态改变下拉选项的值
- 4.12 常用工具类
- 4.12.1. this.$request :可以通过this.$request 来ajax请求数据
- 4.12.2. this._ (注意是下划线): Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。
- 4.12.3. this.$dialog 【v3.3.0支持】: 简单封装element-ui的弹窗
- 4.13 自定义提示弹窗
- 1、默认的提示弹窗可以用element-ui的弹窗方式
- 2、个性化实现示例
- 3、平台样式实现【v3.5.0+支持】
- 4.14、设置子表某行单个表格的读写权限【v3.3.7+】
- 4.15、【推荐】增加快捷找到表单组件实例方法【v3.3.9+】
- 4.16、【详情表单】-[数据模版]选择的向表单赋值
- 4.17、【详情表单】-[数据模板]双击事件脚本并编辑表单
- 4.18、自定义组件引入
- 4.19、自定义按钮实现前置和后置的脚本示例
- 4.20、自定义按钮实现打开[数据模版] 案例
- 4.20、自定义按钮实现打开[在线表单] 案例
- 五、 FAQ
- 5.1、修改数据但界面还是旧的数据
- 1) 处理对象(Object)的4种方式:
- 1. 将本来要新增的属性提前在data中定义好
- 2. 直接替换掉userInfo
- 3. 使用Vue.set 【推荐该方式】
- 4. 使用$forceUpdate【不推荐使用】
- 2)针对数组(Array)的特定方式
- 1) 处理数组(Array)的方式:
- 1、使用Vue.set**
- 2、使用数组的包装变异方式** 【推荐该方式】
- 5.2、如何在表单脚本获取token
- 5.3、获取当前用户信息
- 5.4、获取当前流程相关信息
- 5.5、判断表单是新建还是编辑有判断标识
- 5.6、表单怎么刷新数据模版的页面
- 5.7、移动端和PC脚本的区别
- 5.8、一些常用脚本例子
- 5.9、怎么关闭表单的弹窗
- 5.10、怎么过滤子表附件不重复了
- 5.11、怎么判断数据进行修改了
- 5.11.1、方案1、你在表单
onLoad
方法定义一个全局变量 - 5.11.2、方案2、用vue 的$wactch处理
- 5.12、使用this.$request进行数据请求,但是报this.$request is not a function是什么情况?
- 5.13、【自定义对话框】根据子表选择的数据,过滤掉对话框列表内容
- 5.14 、怎么触发事件在新tab显示数据模版,而不是弹出页面。
- 5.15 、自定义按钮如何下载系统的附件
- 5.16 、怎么调用后端的groovry 方法
- 5.17 、自定义按钮怎么调用自定义弹窗
- 5.18 、 如何引用第三方 JS 资源
- 5.18.1、第三方CDN地址:
- 5.18.2、本地地址:该地址必须放在public的路径下
- 5.19 子表通过某个条件禁用字段
- 5.20 子表级联保存后回填的例子
- 5.21 监听子表中输入框的input等事件
- 5.22 表单数据不同条件按钮显示不同
- 5.23 流程不同节点设置当前用户签名默认值脚本
- 5.23 报表控件点击按钮请求接口更新数据(支持版本v3.5.7+)
说明:
本示例中的代码和截图可能和您现在手中的版本不同,但操作思路一样。
一、概述
对表单界面的字段实现设定其值,读取其值、修改其值,隐藏、显示,必填等操作如:给某个字段设置默认值,获取表单界面某个字段的值,修改表单界面某个字段显示的值。
有时候我们需要操作按钮的前后置事件 或者添加自定义按钮,点击自定义按钮时需要将列表中选中行的数据导入打开的其他表单。
有时候需要找到绑定字段,通过$on指定事件(click,blur等事件)进行操作。
二、操作及示例
2.1、通过表单属性编写表单脚本
2.2、编写脚本示例
三、表单脚本接口API
统一说明:以下不再说明
form
:是表单的vue实例数据,可以通过这个操作数据、dom,事件等。可以类似this,可以操作$router,$store,$utils等全局方法
也可以调用Element ui的全局方法,比如:$message、$msgbox、$alert等callback
:按钮事件回调,如果通过ajax异步提交需要回调,按钮等操作必须回调,不然操作没反应。返回true
是回调成功,false
表示回调失败,阻止继续操作【v3.1.8+支持】
$request
:可以通过this.$request 来ajax请求数据【v3.1.9+支持】
3.1、加载事件
3.2、按钮加载事件【v.3.2.4+】
参数说明:
参数 | 说明 | 是否必须 | 可选值 |
---|---|---|---|
action | 按钮别名,在使用页面传入的根据自己需求定义的值; | 是 | add、edit等 |
button | 按钮相关数据,包含位置(position)等信息 | - | |
type | 处理方式,hidden 隐藏,disabled 禁用 | - | hidden,disabled |
举例说明:
eg1:按钮(action为close) 隐藏
eg2:按钮(action为close) 禁用
3.4、按钮的前置事件
注意:自定义按钮必须设置按钮编码
表单按钮提交前触发,在具体的页面中调用.
特别说明:
如果采用if else 要保证每个if、else if、else 都有callback 如下:
//==== 或者这样====
参数说明:
参数 | 说明 | 是否必须 | 可选值 |
---|---|---|---|
action | 按钮code,在使用页面传入的根据自己需求定义的值; | - | close,save等 |
postValue | 提交给后台的数据,表单数据,避免对象引用该数据只可以读取,如果修改采用form.setData修改值 | - | |
callback | funtion【必须】,数据回调,一定要有回调方法,不然没反应 | 必须 | true,false |
3.5、按钮的后置事件
注意: 自定义按钮没有后置事件
表单按钮提交后触发,在具体的页面中调用.
参数说明:
参数 | 说明 | 是否必须 | 可选值 |
---|---|---|---|
action | 按钮code,在使用页面传入的根据自己需求定义的值; | - | close,save等 |
postValue | 提交给后台的数据,表单数据 ,避免对象引用该数据只可以读取,如果修改采用form.setData修改值 | - | |
callback | funtion【必须】,数据回调,一定要有回调方法,不然没反应,会阻止其他事件 | 必须 | true,false |
特别说明1:
form.formParams
可以获取到表单的回调参数,
可以获得表单提交后的数据,表单提交后的变量,包含业务主键
{
data,//表单提交后的数据
variables//表单提交后的变量,包含业务主键
}
特别说明2:
如果流程按钮,在postValue
包含提交后的数据和参数
{
data,//表单提交后的数据
variables//表单提交后的变量,包含业务主键,流程实例id,任务id等
}
3.6、子表按钮的前置事件【v3.1.9+支持】
注意:
1、自定义按钮必须设置按钮编码
2、如果多个子表要需要判断是那个子表的按钮tableForm.code
表单子表按钮提交前触发,在具体的页面中调用.
参数说明:
参数 | 说明 | 是否必须 | 可选值 |
---|---|---|---|
tableForm | 是表单子表的vue实例数据,可以通过这个操作数据、dom,事件等 | - | |
action | 按钮code,在使用页面传入的根据自己需求定义的值; | - | add、edit等 |
position | 按钮位置 | - | |
params | 参数传递,比如按钮,button,index | - | |
callback | funtion【必须】,数据回调,一定要有回调方法,不然没反应,会阻止其他事件,如果通过ajax异步提交需要回调 | 必须 | true,false |
3.7、子表按钮的后置事件 【v3.1.9+支持】
注意:
1、自定义按钮没有后置事件
2、如果多个子表要需要判断是那个子表的按钮tableForm.code
表单子表按钮提交后触发,在具体的页面中调用.
参数说明:
参数 | 说明 | 是否必须 | 可选值 |
---|---|---|---|
tableForm | 是表单子表的vue实例数据,可以通过这个操作数据、dom,事件等 | - | |
action | 按钮code,在使用页面传入的根据自己需求定义的值; | - | add、edit等 |
position | 按钮位置 | - | |
params | 参数传递,比如按钮,button,index | - | |
callback | funtion【必须】,数据回调,一定要有回调方法,不然没反应,会阻止其他事件,如果通过ajax异步提交需要回调 | 必须 | true,false |
3.8、子表合计方法 【v3.1.10+支持】
需要先开启子表合计的,该脚本才会生效
在具体的页面中调用.
参数说明:
参数 | 说明 | 是否必须 | 可选值 |
---|---|---|---|
tableForm | 是表单子表的vue实例数据,可以通过这个操作数据、dom,事件等 | - | |
tableName | 子表的表名区分多个子表 | - | |
params | 字段的参数{ columns, data },其中 columns 是字段的属性,data 是数据 | - |
四、常用脚本示例
4.1、获取表单所有数据
4.2、获取表单某个字段数据(值)
4.3、修改表单某个字段数据(值)或者给字段赋值
4.4、子表操作
//子表默认添加一行
//子表在原来基础上添加一行
4.5、设置字段隐藏,只读,必填
快捷方式(推荐):
权限(隐藏【h】,编辑【e】,只读【r】,必填【b】,子表或只有只读字段权限的字段控件-显示【s】)
也可以操作dom方式处理://TODO:需要编写
4.6、字段事件
如果是栅格布局、标签页、步骤条等嵌套布局需要知道布局key
例子1:选择器的事件监听回填
//最新版本建议采用form.getRefsField(‘test1’)方式获取,避免要层层查找
4.7、设置表单背景,字体,字体颜色
4.8、form DOM操作
form可以操作表单vue的方法(methods)、属性、DOM元素和事件
如果层级比较深。 先在脚本里面设置一个断点debugger
例子1:找子表的按钮例子
在console面板中
①、先找到子表
②、再观察,查找出你要找的按钮
③、最终form.$refs.dynamicForm.$refs.formItembtzb[0].$children[0].$children[1].$children[0].$el
找到是子表按钮所在的元素
4.9、子表合计自定义方法
需要先开启子表合计的,该脚本才会生效
el原生的方法
官网的例子:
4.10 监听表单的值变化
https://cn.vuejs.org/v2/api/#vm-watch
需求多对象(数组)内部值的变化,可以在选项参数中指定 deep: true。
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调。
移动端不采用 键路径
4.11 动态改变下拉选项的值
动态修改数据字典的值
4.12 常用工具类
4.12.1. this.$request :可以通过this.$request 来ajax请求数据
如果你请求的不是IBPS平台地址:请加参数:baseURL :’xxxx’
具体的地址前缀,更多参数看:https://www.kancloud.cn/yunye/axios/234845
baseURL
将自动加在 url
前面,除非 url
是一个绝对 URL。
它可以通过设置一个 baseURL
便于为 axios 实例的方法传递相对 URL
更多个性化属性配置:【传送门】
跨域问题解决:【传送门】
4.12.2. this._ (注意是下划线): Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。
一些常用的就不需要我们自己写了
具体API:https://www.lodashjs.com/
4.12.3. this.$dialog 【v3.3.0支持】: 简单封装element-ui的弹窗
①、
这个是 组件
或html元素
② 、[options] 是element-ui的 dialog的属性(attrs)
③、[callback] 是数据的回填,主要关闭窗口
具体用例:
注意:
①、在数据模版中使用‘template
’ 不是‘form
’。修改为template.dialogTemplate =tpl
②、
具体看示例:4.18
4.13 自定义提示弹窗
1、默认的提示弹窗可以用element-ui的弹窗方式
具体API看上面链接地址,数据模版脚本类似的,把
form
换成template
2、个性化实现示例
该功能使用了$createElement的语法实现
3、平台样式实现【v3.5.0+支持】
4.14、设置子表某行单个表格的读写权限【v3.3.7+】
4.15、【推荐】增加快捷找到表单组件实例方法【v3.3.9+】
fieldName
是表单字段名或者字段标识名,点击右侧【业务对象】的字段避免编写错误
说明:该方式为快捷查找只能找到主表或子表,如果要找到子表的某个字段,则先找到子表后在一层层向下查找
4.16、【详情表单】-[数据模版]选择的向表单赋值
注意:延迟个3-5秒钟等待详情表单加载完成,或者加个定时器监听是否加载完成
4.17、【详情表单】-[数据模板]双击事件脚本并编辑表单
注意:延迟个3-5秒钟等待数据模版加载完成,或者加个定时器监听是否加载完成
4.18、自定义组件引入
4.19、自定义按钮实现前置和后置的脚本示例
①、同步请求 不需要请求后端
②、异步请求
4.20、自定义按钮实现打开[数据模版] 案例
http://doc.bpmhome.cn/docs/ibps_v3_help/ibps_v3_help-1d2k67en1upo5
4.20、自定义按钮实现打开[在线表单] 案例
http://doc.bpmhome.cn/docs/ibps_v3_help/ibps_v3_help-1d2k01j299sd1
五、 FAQ
5.1、修改数据但界面还是旧的数据
前几天有朋友给我发了一段代码,然后说Vue有bug,他明明写的没问题,为啥数据就不响应呢,一定是Vue的bug?我感觉他比尤雨溪要牛逼,高攀不起,就没有理他了。但是确实有时候我们在开发时候会遇到数据不响应的情况,那怎么办呢?比如下面这段代码:
错误例子写法
在上面的代码中,我们希望给用户信息里面添加公众号属性,但是通过this.userInfo.officialAccount = '广州流辰'
添加之后,并没有生效,这是为什么呢?
这是因为在Vue内部,数据响应是通过使用Object.definePrototype
监听对象的每一个键的getter
,setter
方法来实现的,但通过这种方法只能监听到已有属性,新增的属性是无法监听到的,但我就是想监听,下面提供了四种方式
1) 处理对象(Object)的4种方式:
1. 将本来要新增的属性提前在data中定义好
比如上面的公众号,我可以提前在userInfo里面定义好,这样就不是新增属性了,就像下面这样
2. 直接替换掉userInfo
虽然无法给userInfo
里面添加新的属性,但是因为userInfo
已经定义好了,所以我直接修改userInfo
的值不就可以了么,所以也可以像下面这样写
3. 使用Vue.set 【推荐该方式】
其实上面两种方法都有点取巧的嫌疑,其实对于新增属性,Vue官方专门提供了一个新的方法Vue.set
用来解决新增属性无法触发数据响应。Vue.set
方法定义
上面的代码使用Vue.set可以修改为
但是每次要用到set方法的时候,还要把Vue引入进来,好麻烦,所以为了简便起见,Vue又将set方法挂载到了Vue的原型链上了,即Vue.prototype.$set = Vue.set
,所以在Vue组件内部可以直接使用this.$set
代替Vue.set
在IBPS表单脚本可以这样写
发现有许多同学不知道什么时候应该用Vue.set,其实只有当你要赋值的属性还没有定义的时候需要使用Vue.set,其他时候一般不会需要使用。
4. 使用$forceUpdate【不推荐使用】
我觉得$forceUpdate
的存在,让许多前端开发者不会再去注意数据双向绑定的原理,因为不论什么时候,反正我修改了data之后,调用一下$forceUpdate
就会让Vue组件重新渲染,bug是不会存在的。但是实际上这个方法并不建议使用,因为它会引起许多不必要的性能消耗。
2)针对数组(Array)的特定方式
其实不仅仅是对象,数组也存在数据修改之后不响应的情况,比如下面这段代码
上面的代码希望将张三的名字修改为王五,实际上这个修改并不能生效,这是因为Vue不能检测到以下变动的数组:
当你利用索引直接设置一个项时,例如: this.list[index] = newValue
修改数组的length属性,例如: this.list.length = 0
所以在上例中通过this.list[0] = '王五'
是无法触发数据响应的,那应该怎么办呢?
像上面提到的Vue.set和$forceUpdate都可以解决这个问题,
1) 处理数组(Array)的方式:
1、使用Vue.set**
比如Vue.set可以这样写
在表单中
除了那些方法之外,Vue还针对数组提供了变异方法
2、使用数组的包装变异方式** 【推荐该方式】
在操作数组的时候,我们一般会用到数据提供的许多方法,比如push,pop,splice等等,在Vue中调用数组上面提供的这些方法修改数组的值是可以触发数据响应的,比如上面的代码改为以下代码即可触发数据响应
实际上,如果Vue仅仅依赖getter与setter,是无法做到在数组调用push,pop等方法时候触发数据响应的,因此Vue实际上是通过劫持这些方法,对这些方法进行包装变异来实现的。
Vue对数组的以下方法进行的包装变异:
========扩展阅读=============
所以在操作数组的时候,调用上面这些方法是可以保证数据可以正常响应,下面是Vue源码中包装数组方法的代码:
5.2、如何在表单脚本获取token
由于移动端在微信不支持cookies 移动端存储在localStorage
旧版本v3.5.0-
采用
以下方法v3.5.0+
支持 建议采用该脚本
5.3、获取当前用户信息
获取更多的用户相关信息,用户,zhu
比如获取当前用户id
比如获取当前组织id
5.4、获取当前流程相关信息
获取当前流程定义defId(只有启动和草稿有该参数)
获取当前流程草稿实例ID(只有草稿有该参数)
获取当前流程节点ID
获取当前流程任务ID(只有审批时候有参数)
获取当前流程实例ID(只有实例或流程结束后时候有参数)
5.5、判断表单是新建还是编辑有判断标识
是否编辑,是编辑还是新增,编辑是true,新增是false
也可以通过判断主键id来判断是否为空,来判断新增还是编辑
判断是否是明细(或详请)表单
通过判断上述是否编辑+readonly 属性
5.6、表单怎么刷新数据模版的页面
5.7、移动端和PC脚本的区别
大部分脚本编写基本一样,区别如下:
1)调用的控件、控件属性和控件的事件不一样,
例如:pc的控件是element-ui的控件,移动端是vant的控件
比如监听事件改变
移动端用“input”,没有“change”
pc端
2)查找元素层级和元素,pc和移动端可能层级不同,移动端不支持嵌套布局,不支持子表编辑模式等。
例如:$children查找节点
5.8、一些常用脚本例子
下面为部分脚本整合的例子,可根据下面例子代入自己所需功能重新进行补充编辑
5.9、怎么关闭表单的弹窗
5.10、怎么过滤子表附件不重复了
注意:一定要延迟下赋值,组件渲染有延迟
5.11、怎么判断数据进行修改了
有以下2个方案参考:
5.11.1、方案1、你在表单 onLoad
方法定义一个全局变量
你想获取地方在获取就行 form.tempFomData 然后需要时候在2个对象进行比较了
比较逻辑需要自己写
5.11.2、方案2、用vue 的$wactch处理
值改变了就保存到全局变量里面
5.12、使用this.$request进行数据请求,但是报this.$request is not a function是什么情况?
这个是基础知识this的作用域不对,这个this 不等于 这个this, function的作用域不对了
1、一种写法,function(){}
写成()=>{}
2、另外一种写法在function外面定义
var _this = this
用的地方_this.$request
以上2种方法最常用,其他的apply,call有点难理解,如果你比较熟悉可以自行尝试
5.13、【自定义对话框】根据子表选择的数据,过滤掉对话框列表内容
在自定义对话框设置动态条件,设置不在。。。之内
子表的配置
在表单脚本中编写
5.14 、怎么触发事件在新tab显示数据模版,而不是弹出页面。
先判断是的tab的页面是否在菜单存在还是不存在
1、系统菜单有配置【推荐该方案】
1.1)添加个菜单,请记住资源别名(下面用到)
1.2)在脚本中编写
注意:数据模版类似的,把
form
换成template
2、系统菜单没有配置【不推荐使用,刷新页面没有加载回来】
2.1) 、表单脚本编写
数据模版类似的,把
form
换成template
5.15 、自定义按钮如何下载系统的附件
方案一:采用直接请求下载【推荐该方案】
v3.5.0 +版本支持,this.$actionUtils
v3.5.0- 的 旧版本 采用以下脚本
数据模版类似的,把
form
换成template
方案二:采用$request请求下载
该方案缺点:要自己写文件输出文件的名字
v3.5.0 +版本支持,this.$actionUtils
v3.5.0- 的 旧版本 采用以下脚本
5.16 、怎么调用后端的groovry 方法
参数传递说明:
例如后端的脚本
cscript.testScript(gender)
5.17 、自定义按钮怎么调用自定义弹窗
1、【最新版本】有这个代码组件,可以直接引用
2、如果【v3.5.1-】以下的版本没有该代码,需要把src\business\platform\data\templaterender\custom-dialog\dialog.vue
代码复制到src\views\platform\data\custom-dialog\dialog.vue
路径下
注意:
①、templateKey请根据实际的自定义对话框的key修改
②、点击确定按钮请根据数据处理data数据
扩展应用,可以弹窗其他弹窗
eg:流程表单窗口:弹窗组件:/platform/bpmn/form/template-form.vue
5.18 、 如何引用第三方 JS 资源
5.18.1、第三方CDN地址:
5.18.2、本地地址:该地址必须放在public的路径下
5.19 子表通过某个条件禁用字段
V3.5.5+例子
—– 设置了禁用点击后还是无法禁用
单选按钮要再禁用click属性组件
5.20 子表级联保存后回填的例子
V3.5.4-例子
首先在对应的级联的表单的后置事件
V3.5.4+例子
5.21 监听子表中输入框的input等事件
v3.5.6-例子
首先在对应的级联的表单的后置事件