GooFlow获取节点/线信息和自定义节点属性

柔情只为你懂 2022-02-28 05:22 526阅读 0赞

使用bootstrap 和 gooflow 完成demo

参考 [Jquery版API文档][Jquery_API]

### 用到最主要的两个数据结构定义 ###

**1、描述单个节点信息的Json结构体。**

### NodeItem 类型：Json Object ###

描述单个节点信息的Json结构体。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>String</td> 
   <td>('node_'+序列号)</td> 
   <td>节点的显示名称。</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>Number</td> 
   <td>0</td> 
   <td>节点相对于工作区的左边距，单位像素。</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>Number</td> 
   <td>0</td> 
   <td>节点相对于工作区的顶距，单位像素。</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>Number</td> 
   <td>104</td> 
   <td>节点宽度，单位像素；仅非圆形节点时有效。</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>Number</td> 
   <td>26</td> 
   <td>节点高度，单位像素；仅非圆形节点时有效。</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td>''</td> 
   <td>必填项：节点类型名称，可用户自定义；其对应的图标样式为<code>'ico_'+节点类型</code>；&nbsp;<br> 类型名中如果有<code>' round'</code>，则为圆形节点，如果有<code>' mix'</code>，则为复合节点(变换背景色)。</td> 
  </tr> 
  <tr> 
   <td>marked</td> 
   <td>Boolean</td> 
   <td>(undefined)</td> 
   <td>节点是否已被标注。</td> 
  </tr> 
  <tr> 
   <td>alt</td> 
   <td>Boolean</td> 
   <td>(undefined)</td> 
   <td>在编辑模式下节点是否被用户编辑过。</td> 
  </tr> 
  <tr> 
   <td>areaId</td> 
   <td>String</td> 
   <td>(undefined)</td> 
   <td>该节点所属分组泳道的id，当为<code>undefined</code>时表示不属于任何分组。</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>String</td> 
   <td>(undefined)</td> 
   <td>选填项。该节点对象特有的背景颜色，优先级高于<code>GooFlow.color.node</code>。</td> 
  </tr> 
  <tr> 
   <td>fontColor</td> 
   <td>String</td> 
   <td>(undefined)</td> 
   <td>选填项。该节点对象特有的文字颜色，优先级高于<code>GooFlow.color.font</code>。</td> 
  </tr> 
  <tr> 
   <td>……</td> 
   <td>Object</td> 
   <td>(undefined)</td> 
   <td>任意类型、任意数量的自定义属性，由用户根据需要自行添加。</td> 
  </tr> 
 </tbody> 
</table>

**2、描述单条连线信息的Json结构体。**

### LineItem 类型：Json Object ###

描述单条连线信息的Json结构体。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>String</td> 
   <td>(undefiend)</td> 
   <td>连线的显示名称，未定义时连线上无文字。</td> 
  </tr> 
  <tr> 
   <td>from</td> 
   <td>String</td> 
   <td>(undefiend)</td> 
   <td>必填项，连线的起始节点id。</td> 
  </tr> 
  <tr> 
   <td>to</td> 
   <td>String</td> 
   <td>(undefiend)</td> 
   <td>必填项，连线的目标节点id。</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td>sl</td> 
   <td>连线类型，取值有三种：<code>'sl'</code>直线；<code>'lr'</code>中段可左右移动的折线'；<code>'tb'</code>中段可上下移动的折线。</td> 
  </tr> 
  <tr> 
   <td>M</td> 
   <td>Number</td> 
   <td>(undefiend)</td> 
   <td>一种抽象值，单位为像素。<br> 当<code>type='lr'</code>时为必填项，表示中段线相对于工作区的X坐标值；<br> 当<code>type='tb'</code>时为必填项，表示中段线相对于工作区的Y坐标值。<br> 当<code>type='sl'</code>时无任何意义。</td> 
  </tr> 
  <tr> 
   <td>marked</td> 
   <td>Boolean</td> 
   <td>(undefined)</td> 
   <td>连线是否已被标注。</td> 
  </tr> 
  <tr> 
   <td>alt</td> 
   <td>Boolean</td> 
   <td>(undefined)</td> 
   <td>在编辑模式下连线是否被用户编辑过。</td> 
  </tr> 
  <tr> 
   <td>dashed</td> 
   <td>Boolean</td> 
   <td>(undefined)</td> 
   <td>是否为虚线样式，当为<code>undefined</code>时表示默认实线。</td> 
  </tr> 
  <tr> 
   <td>noArrow</td> 
   <td>Boolean</td> 
   <td>(undefined)</td> 
   <td>是否有箭头，当为<code>undefined</code>时表示默认为有向线，反之则为无向线段。</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>String</td> 
   <td>(undefined)</td> 
   <td>选填项。该连线对象特有的线条颜色，优先级高于<code>GooFlow.color.line</code>。</td> 
  </tr> 
  <tr> 
   <td>fontColor</td> 
   <td>String</td> 
   <td>(undefined)</td> 
   <td>选填项。该连线对象特有的文字颜色，优先级高于<code>GooFlow.color.lineFont</code>。</td> 
  </tr> 
  <tr> 
   <td>……</td> 
   <td>Object</td> 
   <td>(undefined)</td> 
   <td>任意类型、任意数量的自定义属性，由用户根据需要自行添加。</td> 
  </tr> 
 </tbody> 
</table>

### 一、创建两个div 布局 ###

**1、引入 js 和 css 文件** 参考 [GooFlow入门使用][GooFlow]

**2、一个 div 初始化 GooFlow 实例，另一个一个显示信息**

<div class="col-md-8" >
            <div id="flowsuperviseTemp" style="width:750px;min-height:700px;margin:5px;float:left"></div>
        </div>
        <div class="col-md-4" >
            <form id="flowsuperviseItemForm">
                <div class="form-group">
                    <table class="table table-hover table-bordered table-condensed" style="width: 99%" id="configtable">
                        <tr>
                            <th colspan="2" >节点属性</th>
                        </tr>
                        <tr>
                            <th>节点ID：</th>
                            <td><input type="text" class="form-control form-group-sm" id="ele_id" name="compid" readonly="readonly"/></td>
                        </tr>
                        <tr>
                            <th>名称：</th>
                            <td><input type="text" class="form-control form-group-sm"  id="ele_name" name="name" /></td>
                        </tr>
                        <tr>
                            <th>类型：</th>
                            <td><input type="text" class="form-control form-group-sm"  id="ele_type" name="type" /></td>
                        </tr>
                        <tr>
                            <th>属性：</th>
                            <td><input type="text" class="form-control form-group-sm"  id="ele_model" name="model"/></td>
                        </tr>
                        <tr>
                            <th>左边距：</th>
                            <td><input type="text" class="form-control form-group-sm"  id="ele_left" name="left" comptype="node" /></td>
                        </tr>
                        <tr>
                            <th>上边距：</th>
                            <td><input type="text" class="form-control form-group-sm"  id="ele_top" name="top" comptype="node"/></td>
                        </tr>
                        <tr>
                            <th>宽度：</th>
                            <td><input type="text" class="form-control form-group-sm"  id="ele_width" name="width" comptype="node" /></td>
                        </tr>
                        <tr>
                            <th>高度：</th>
                            <td><input type="text" class="form-control form-group-sm"  id="ele_height" name="height" comptype="node" /></td>
                        </tr>
                        <tr>
                            <th colspan="2">连接属性</th>
                        </tr>
                        <tr>
                            <th>起始节点：</th>
                            <td><input type="text" class="form-control form-group-sm"  id="ele_from" name="from" comptype="line" /></td>
                        </tr>
                        <tr>
                            <th>结束节点：</th>
                            <td><input type="text" class="form-control form-group-sm"  id="ele_to" name="to" comptype="line" /></td>
                        </tr>
                        <tr>
                            <th>是否虚线：</th>
                            <td><input type="text" class="form-control form-group-sm"  id="ele_dash" name="dash" comptype="line" /></td>
                        </tr>
                        <tr id="sxsx">
                            <th colspan="2"> 自定义配置属性
                                <a href="javascript:showDialog('url')">
                                    <div style="float: right;cursor:pointer;" title="配置"><i class="icon-settings"></i>  </div>
                                </a>
                            </th>
                        </tr>
                        <tr>
                            <th>姓名</th>
                            <td><input type="text" class="form-control" placeholder="姓名"/></td>
                        </tr>
                        <tr>
                            <th>性别</th>
                            <td><input type="text" class="form-control" placeholder="性别"/></td>
                        </tr>
                        <tr>
                            <th colspan="2">
                                <input type="reset" class="btn-default" value="重置"/>
                                <input type="button" class="btn-primary" value="确定" onclick="editflowsuperviseItem()"/>
                            </th>
                        </tr>
                    </table>
                </div>
            </form>
        </div>

input 中的 name 名和数据结构定义的属性名保持一致（需要什么显示什么），也可以自定义 name 名 。例如 节点id 和 属性等

input  也可以自定义属性（用于业务处理），例如 comtype 属性等

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]

### 二、js 初始化 GooFlow 实例 ###

** 1、需要用到 事件钩子 和 内部属性等，举两个，其他参考文档**

1.1 组件获得焦点事件

### this.onItemFocus() 返回值：boolean ###

当操作某个元素（节点/连线）被由不选中变成选中时，触发的方法。

传参：`( id, type )`

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型/格式</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>String</td> 
   <td>元素的id，唯一标识。</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td>元素的种类，有<code>'node'</code>节点、<code>'line'</code>连线两种</td> 
  </tr> 
 </tbody> 
</table>

1.2  组件失去焦点事件

### this.onItemBlur() 返回值：boolean ###

当操作某个元素（节点/连线）被由选中变成不选中时，触发的方法。

传参：`( id, type )`

** 2、在获取失去焦点时，回显和删除 form 表单的信息**

### 三、保存节点信息 ###

**1、 确定按钮 保存单个节点的信息到节点实例中**

** 2、流程图保存按钮 **

获取 json 结构的流程数据， ajax 请求 交互后台

**3、用到一些 GooFlow de 内部属性**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 2][]

{
        "title":"事项流程图",
        "nodes":{
    	"1553438226938":{"name":"开始","left":267,"top":88,"type":"start round mix","width":28,"height":28,"alt":true},
    	"1553438229007":{"name":"结束","left":277,"top":412,"type":"end round mix","width":28,"height":28,"alt":true},
    	"1553438231623":{"name":"节点1","left":"237","top":"169","type":"task","width":"104","height":"28","alt":true,"model":"node","xm":"张三","xb":"男"},
    	"1553438232544":{"name":"节点2左","left":"107","top":"251","type":"task","width":"104","height":"28","alt":true,"model":"node","xm":"李四","xb":"女"},
    	"1553438233100":{"name":"节点2右","left":"382","top":"251","type":"task","width":"104","height":"28","alt":true,"model":"node","xm":"王五","xb":"男"},
    	"1553438235571":{"name":"节点3","left":"242","top":"333","type":"task","width":"104","height":"28","alt":true,"model":"node","xm":"赵柳","xb":"不详"}
        },
        "lines":{
    	"1553438237966":{"type":"sl","from":"1553438226938","to":"1553438231623","name":"","dash":false},
    	"1553438238928":{"type":"sl","from":"1553438231623","to":"1553438233100","name":"","dash":false},
    	"1553438240303":{"type":"sl","from":"1553438231623","to":"1553438232544","name":"","dash":false},
    	"1553438241365":{"type":"sl","from":"1553438232544","to":"1553438235571","name":"","dash":false},
    	"1553438243677":{"type":"sl","from":"1553438233100","to":"1553438235571","name":"","dash":false},
    	"1553438245066":{"type":"sl","from":"1553438235571","to":"1553438229007","name":"","dash":false}
        },
        "areas":{},
        "initNum":13
    }

大体 GooFlow 的一个 节点信息 与 自定义字段的 回显/保存 有了一点了解,

多查看文档 end ~

[Jquery_API]: https://gooflow.xyz/docs/
[GooFlow]: https://blog.csdn.net/qq_42402854/article/details/80977519
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70]: /images/20220228/191a2e5ce53e4e2185a3e79035d4bfa5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1]: /images/20220228/39aa9d024a454fb5be75979a7aaba8a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 2]: /images/20220228/4e42c3693b114a56879a255e70a10958.png