美文网首页
activiti explorer跨模板复制流程节点

activiti explorer跨模板复制流程节点

作者: 爱余星痕 | 来源:发表于2018-03-17 08:42 被阅读0次

    最近的项目是用activiti explorer做流程前端。
    功能做出来后,经常被用户反馈 ,说流程页面不好用。
    画一个流程图后,再画一个,都要重头开始,如果导入及导出,用户又嫌麻烦。
    用户希望能同时打开多个流程模板页面,将一个模板当前配的节点,复制到另外一个模板中。
    这个可以做到吗?
    答案是肯定的!
    先找到activiti-explorer的复制粘贴代码
    通过跟踪代码,找到代码的复制地方。
    oryx.debug.js页面中的editCopy为原生的复制代码,而editPaste为粘贴的相关代码
    怎么改?
    考虑使用localStorage将复制的内空存在localStorage,而粘贴时,要将代码从localStorage读取出来。
    经验证,修改代码如下

     editCopy: function( will_update, useNoOffset ){
            var selection = this.facade.getSelection();
            
            //if the selection is empty, do not remove the previously copied elements
            if(selection.length == 0) return;
            
            this.clipboard.refresh(selection, this.getAllShapesToConsider(selection), this.facade.getCanvas().getStencil().stencilSet().namespace(), useNoOffset);
           
            if( will_update ) this.facade.updateSelection();
            //将复制内容
            localStorage.setItem('flowclipboard', JSON.stringify(this.clipboard));  
           
        },
        
        /**
         * Performs the paste operation.
         */
        editPaste: function(){
             //从  h5中复制内容
             this.clipboard= JSON.parse(localStorage.getItem('flowclipboard'));
             //这个一定要序列化对象才可能,否则getChildShapes报错
             this.clipboard.shapesAsJson= JSON.parse( this.clipboard.shapesAsJson);
            // Create a new canvas with childShapes 
            //and stencilset namespace to be JSON Import conform
    

    其实代码的修改只有三行,一个是将复制的内容转为字符串,存入localStorage,一个是从localStorage读取出来,注意,读取出来时,要转回jSOn对象,在转换过程中,shapesAsJson为一个字符串,需要再转换成JSON对象

     //这个一定要序列化对象才可能,否则getChildShapes报错
             this.clipboard.shapesAsJson= JSON.parse( this.clipboard.shapesAsJson);
    

    至此,功能修改完成,但还有点小问题。 粘贴按钮总是要点了复制才有效,不能在页面初始化时,显示,找到修改代码toolbar.js,修改内容如下:

    ,
            {
                "type" : "button",
                "title" : "TOOLBAR.ACTION.PASTE",
                "cssClass" : "editor-icon editor-icon-paste",
                "action" : "KISBPM.TOOLBAR.ACTIONS.paste",
                "enabled" : localStorage.getItem('flowclipboard')!=''
            },
    

    至此,代码全部成功!

    相关文章

      网友评论

          本文标题:activiti explorer跨模板复制流程节点

          本文链接:https://www.haomeiwen.com/subject/ukirqftx.html