基于YUI的工作流流程设计器

赶在春节之前完成了这个工作流流程设计器的功能

这个工作流流程设计器完全是基于前台YUI纯JS技术开发，里面综合了其他先前编写的YuiFrame的设计架构，如表格，树等（可以参考其他几篇关于YUIFrame的文章）

工作流的引擎暂时没空做，驱动核心机制自然是在UI设计器之前就定下了的（和ExtFrame里的工作流还是一脉相承的，不过改动会比较大些）

先放个简单的流程图

树是采用的自动加载树的treeLoaderPlugin插件实现的，在页面里只需要很简单的以下几行代码就可以实现

            var treeview = new Y.TreeView({
                startCollapsed: false,
                toggleOnLabelClick: false
            });
            treeview.plug(Y.TreePlugin.TreeLoaderPlugin, { treename: 'flow' });
            treeview.render("#nav .content");

树上还通过配置实现了：在包上双击可以打开修改包名称的对话框，在流程上双击可以自动加载流程的功能

上面第一个按钮是新建包，通过对话框（Y.Panel）输入包名创建新包

第二个按钮是创建新流程，建立新流程，清除数据后建立新流程的初始数据（创建开始和结束节点）

第三个按钮是输入当前流程的基础资料

第4个按钮是保存当前流程信息，保存前必须先输入流程资料

第5个按钮是放置新的节点到流程图里，点击后会出现新节点的图示，随鼠标移动，到指定位置后点击鼠标左键，放置新节点

第6个按钮是创建新的连接，点击后可以从一个节点拖拽一条连接线到另一个节点（结束节点不能作为开始拖拽的对象）

第7个按钮是设置当前选择项（节点或连接）的参数，例如，连接可以设置为弧线，这样如果两个节点互相连接，就不会产生线条重合

（被点击的节点或连接将成为当前选择项，节点的label会加粗显示，连接则加粗线条和label，开始和结束节点不需设置参数）

最后一个按钮是删除当前选择项（节点或连接）

 

流程是如何运转的及如何插入与流程无关的业务逻辑？

举个例子，有个通用的打印功能，要插入到流程运转中显示的form里，如何实现？

例子2：如果一个节点有2个输出到其他节点，流程运行时如何判定？如果节点本身是并发或者选择，又如何运作？

这个涉及到YUIFrame及ExtFrame设计时的核心，Command模式（可以参考ExtFrame相关的设计文档）

在系统配置里，定义了不同组别的Command，流程上设置参数时指定此流程使用的Command组名称，在流程运转时，就会自动加载组里的命令，生成操作按钮或链接，点击后执行封装的脚本，对不同模式的流程运转代码均封装在不同的Command里，在配置流程时选择正确的操作代码即可

例如，用车申请的配置里有打印的Command，在某节点设置参数时，可以选择此节点的操作时将打印选项点上，则流程运行到该节点时工具栏上会有打印项出现，如果没选则该节点不可打印

对于下一步从多个节点里选择路径的节点，则将相关节点定义同一个操作，而该操作封装选择功能

人员选择功能：

人员选择的表格是自动加载查询数据及翻页（见相关随笔）表格的实现

节点上不限制具体人数，但一般节点应当指明单一人员，这样下一步之类的普通流转操作可以自动生成相关人员的工作环节，如果有多个人员的话，则可以搭配人员选择之类的封装操作实现

 

工作流采用的YUI3技术说明：

生成流程节点的功能，采用的是Y.Model，Y.ModelList和Y.View这个号称YUI3的MVC框架的东西，通过Model来保持数据，通过View来生成节点的DIV

生成节点连接线的功能，是通过Y.Graphic创建了新的箭头类型的Shape自己画的，这个计算两个model之间的连接线的坐标位置，箭头坐标点位置，以及弧线绘制，着实杀了我不少脑细胞，三角函数，切线什么的，早就还给老师了。两个model之间连接时绘制起始点，以一个正方的DIV，外围指定了8个连接点，通过坐标点定义斜率，然后通过斜率指定了两个物体之间的连接点，例如y坐标相同时，物体1的4号连接点对应2的8号连接点什么的，然后重点还要在原有斜率上再加上个箭头分叉线的角度正负斜率计算箭头的两个坐标点，如果是弧线，则找出两点的垂直平分线，然后在线上某比率上某点为基准绘制贝氏曲线，绘制曲线倒简单，关键是那个坐标点真的没把我算晕过去了......

其他的功能基本还简单，也就是例如节点的拖拽的功能，采用DD.Delegate啦，连接线的终点，同样采用了DD.drop的功能什么的，不过有些功能做的有点和IE9以外的浏览器不兼容（IE8都不行），有点郁闷

还有一堆的事件委托，以及IO操作拼在一起

最后数了下，页面HTML200行，封装的功能不计，YUI页面代码1100多行

本来接近完成时忽然有个改进UI的想法，将不同的流程展示在不同的Tab页里，结果一测试功能发现改动比较大，很多代码要大修改，一时半刻完成不了，就干脆放弃了

因为年后要做一个项目的2013年度修改，估计一时半刻没时间做工作流的驱动核心及样例了