![](https://img-blog.csdnimg.cn/20190403150913680.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMDQ3NjI1,size_16,color_FFFFFF,t_70)
首先看看这块区域怎么出来的看看在edito.html, 是遍历节点的属性, 获取到对应的html页面拼上
![](https://img-blog.csdnimg.cn/20190327090432645.png)
看看属性在哪里定义的 stencilset_zh_CN.json
一个审批模版的配置
![](https://img-blog.csdnimg.cn/2019032709105056.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMDQ3NjI1,size_16,color_FFFFFF,t_70)
同时再把审批模版属性加入人工任务节点
![](https://img-blog.csdnimg.cn/20190327091138444.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMDQ3NjI1,size_16,color_FFFFFF,t_70)
做法: 在 "stencils" 属性找到 人工任务节点, 添加到 propertyPackages 里面
![](https://img-blog.csdnimg.cn/20190327091251337.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMDQ3NjI1,size_16,color_FFFFFF,t_70)
定义审批模版的按钮的html的url定义在properties.js;
![](https://img-blog.csdnimg.cn/20190327091427897.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMDQ3NjI1,size_16,color_FFFFFF,t_70)
我们看一下这个页面
![](https://img-blog.csdnimg.cn/20190327091534910.png)
这个页面上定义了显示的按钮, 和按钮要触发的事件
![](https://img-blog.csdnimg.cn/20190403150703601.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMDQ3NjI1,size_16,color_FFFFFF,t_70)
![](https://img-blog.csdnimg.cn/20190403150803471.png)
每个组件用的界面都是单独的作用域, 需要声明 controller, 如果页面需要引入js. 那么就要把新加的 js 在modeler.html, modeler.html 为根页面
![](https://img-blog.csdnimg.cn/20190327134450892.png)
可以在 js 中声明作用域
![](https://img-blog.csdnimg.cn/20190328090131635.png)
作用域中 $scope.property.value 的值代表工作流编辑保存的Json 中当前属性对应的值 , 可以给它赋对应的值
![](https://img-blog.csdnimg.cn/20190328090722808.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMDQ3NjI1,size_16,color_FFFFFF,t_70)
同时在 properties下面的 form properties 里面就是对应要转换成的 XML
![](https://img-blog.csdnimg.cn/20190424172956311.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMDQ3NjI1,size_16,color_FFFFFF,t_70)