目录

关于 GooFlow

功能需求

范例运行环境

设计数据表

流程项目表

流程项目节点明细表

流程项目节点审批人表

 人员信息表

示例代码

流程图主功能

设置审批人信息

运行结果演示

总结

关于 GooFlow

GooFlow 一个基于 Jquery/FontAwesome 的流程图/架构图画图插件，本文介绍的是基于JS的一个版本，能够适用于大部分支持H5的浏览器。通过创建画布，我们可以在其上通过工具栏绘制想要绘制的流程图/框/线等，如下图所示：

图中包括操作工具栏（顶部）、绘图工具栏（左侧）和绘制画布区域，左上角显示的是当前流程的名称。 具体的操作我们不再详述，本文将介绍通过改造后的 GooFlow 简化版本，结合数据库满足实际的开发需求。

功能需求

我们需要实现一个审批流程，在关键流程节点可能会添加审批人信息，通过GoolFlow绘制并显示，则更加友好和直观， 基本需要实现如下功能：

1、改造 GooFlow JS 程序，简化绘制工具栏。

2、设计相关数据库数据表保存流程图设计相关信息、节点明细信息等。

3、改造 GooFlow 操作工具栏，满足实际应用。

范例运行环境

操作系统： Windows Server 2019 DataCenter

GooFlow 版本：GooFlow V1 JS 版 

数据库：Microsoft SQL Server 2016

.net版本： .netFramework4.7.1 或以上

开发工具：VS2019  C#

设计数据表

流程项目表

cc_flow 表记录项目信息，主要说明见下表：

 创建脚本如下：

<code>CREATE TABLE [dbo].[cc_flow](

[cid] [uniqueidentifier] ROWGUIDCOL NOT NULL,

[flowName] [nvarchar](50) NOT NULL,

[nodeCount] [int] NULL,

[desript] [nvarchar](100) NULL,

[flowJSON] [nvarchar](max) NULL,

[sys_insuser] [nvarchar](100) NULL,

[sys_instime] [datetime] NULL,

[sys_upduser] [nvarchar](100) NULL,

[sys_updtime] [datetime] NULL,

CONSTRAINT [PK_cc_flow] PRIMARY KEY CLUSTERED

(

[cid] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY],

CONSTRAINT [IX_cc_flow] UNIQUE NONCLUSTERED

(

[flowName] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]

) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO

ALTER TABLE [dbo].[cc_flow] ADD CONSTRAINT [DF_cc_flow_cid] DEFAULT (newid()) FOR [cid]

GO

流程项目节点明细表

cc_flowNodes 表记录了项目绘制节点的所有信息明细情况，主要说明见下表：

 创建脚本如下：

<code>CREATE TABLE [dbo].[cc_flowNodes](

[cid] [uniqueidentifier] NOT NULL,

[nodeId] [nvarchar](50) NOT NULL,

[nodeName] [nvarchar](50) NOT NULL,

[desript] [nvarchar](100) NULL,

[parentNodeId] [nvarchar](50) NULL,

[projectCid] [uniqueidentifier] NOT NULL,

[sortid] [int] NULL,

[sys_insuser] [nvarchar](100) NULL,

[sys_instime] [datetime] NULL,

[sys_upduser] [nvarchar](100) NULL,

[sys_updtime] [datetime] NULL

) ON [PRIMARY]

GO

ALTER TABLE [dbo].[cc_flowNodes] ADD CONSTRAINT [DF_cc_flowNodes_cid] DEFAULT (newid()) FOR [cid]

GO

流程项目节点审批人表

cc_flowNodeAccounts 表记录了项目关键节点的参与审批人情况，主要说明见下表：

 创建脚本如下：

<code>

CREATE TABLE [dbo].[cc_flowNodeAccounts](

[cid] [uniqueidentifier] NOT NULL,

[projectCid] [uniqueidentifier] NOT NULL,

[AccountCid] [uniqueidentifier] NOT NULL,

[descript] [nvarchar](100) NULL,

[nodeId] [nvarchar](50) NOT NULL,

[role] [nvarchar](50) NULL,

[sys_insuser] [nvarchar](100) NULL,

[sys_instime] [datetime] NULL,

[sys_upduser] [nvarchar](100) NULL,

[sys_updtime] [datetime] NULL

) ON [PRIMARY]

GO

ALTER TABLE [dbo].[cc_flowNodeAccounts] ADD CONSTRAINT [DF_cc_flowNodeBuss_cid] DEFAULT (newid()) FOR [cid]

GO

 人员信息表

accounts 表审批人的基本个人情况，主要说明见下表：

 创建脚本如下：

<code>

CREATE TABLE [dbo].[accounts](

[cid] [uniqueidentifier] ROWGUIDCOL NOT NULL,

[name] [nvarchar](50) NULL,

[nickname] [nvarchar](500) NULL,

CONSTRAINT [PK_wxmp_accounts] PRIMARY KEY CLUSTERED

(

[cid] ASC

)

)

GO

ALTER TABLE [dbo].[accounts] ADD CONSTRAINT [DF_wxmp_accounts_cid] DEFAULT (newid()) FOR [cid]

GO

示例代码

流程图主功能

本示例代码包含后端、前端及 JS 代码，代码如下：

<%@ Page Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostback="true" ValidateRequest="FALSE" %>code>

<%@ Import Namespace="System.IO" %>code>

<%@ Import Namespace="System.Data" %>code>

<%@ Import Namespace="System.Data.SqlClient" %>code>

<script language="C#" runat="server">code>

public CosysJaneCommonAPI.CODAL dal = new CosysJaneCommonAPI.CODAL();

public DateTime dt = DateTime.Now;

void Page_load(Object sender, EventArgs e)

{

dal.RunAt = Form;

if (Page.IsPostBack == true) return;

dal.ConnKeyString = "JaneConnectionCloud";

ArrayList paras = new ArrayList();

paras.Clear();

paras.Add(new SqlParameter("a", "2"));

dal.simpledatalist("select cid,flowName from cc_flow order by flowName ", paras, "cid", "flowName",flowlist, true, "", "选择打开已创建流程");

}

protected void saveflow_Click(object sender, EventArgs e)

{

dal.ConnKeyString = "JaneConnectionCloud";

ArrayList paras = new ArrayList();

paras.Clear();

paras.Add(new SqlParameter("flowname", x_flowname.Text));

dal.RowsCount = 0;

dal.ErrorMessage = "";

dal.ExecDbScripts("insert into cc_flow (flowName) values(@flowname) ", paras);

if (dal.RowsCount > 0)

{

tip.Text = "创建成功！";

flowpanel.Visible = true;

}else

{

if (dal.ErrorMessage.IndexOf("重复键") != -1)

{

dal.RowsCount = 0;

dal.ErrorMessage = "";

paras.Clear();

paras.Add(new SqlParameter("flowname", x_flowname.Text));

object rv = dal.GetDataSet("select * from cc_flow where flowname=@flowname ", paras);

if (dal.RowsCount > 0)

{

DataSet ds = rv as DataSet;

DataTable dt = ds.Tables[0];

x_cid.Text = dt.Rows[0]["cid"].ToString();

x_flowJSON.Text = dt.Rows[0]["flowJSON"].ToString();

tip.Text = "打开成功！";

flowpanel.Visible = true;

}

else

{

tip.Text = dal.ErrorMessage;

flowpanel.Visible = false;

}

}

else

{

tip.Text = dal.ErrorMessage;

flowpanel.Visible = false;

}

}

}

protected void updflow_Click(object sender, EventArgs e)

{

dal.ConnKeyString = "JaneConnectionCloud";

ArrayList paras = new ArrayList();

Newtonsoft.Json.Linq.JObject jsonObj = Newtonsoft.Json.Linq.JObject.Parse(x_flowJSON.Text);

string nodelist = "";

foreach (Newtonsoft.Json.Linq.JProperty jt in jsonObj["nodes"])

{

nodelist+=jt.Name+",";

}

string cid = x_cid.Text;

dal.ConnKeyString = "JaneConnectionCloud";

paras.Clear();

paras.Add(new SqlParameter("cid", cid));

dal.RowsCount = 0;

dal.ErrorMessage = "";

dal.ExecDbScripts("delete cc_flowNodes where projectCid=@cid ", paras);

string[] la = nodelist.Split(',');

int added = 0;

for (int i = 0; i < la.GetLength(0); i++)

{

if (la[i] != "")

{

paras.Clear();

paras.Add(new SqlParameter("projectCid", cid));

paras.Add(new SqlParameter("parentNodeId", (i == 0 ? cid : la[i - 1])));

paras.Add(new SqlParameter("nodeId", la[i]));

paras.Add(new SqlParameter("nodeName", jsonObj["nodes"][la[i]]["name"].ToString()));

paras.Add(new SqlParameter("sortid", i + 1));

dal.RowsCount = 0;

dal.ErrorMessage = "";

dal.ExecDbScripts("insert into cc_flowNodes(projectCid,parentNodeId,nodeId,nodeName,sortid) values(@projectCid,@parentNodeId,@nodeId,@nodeName,@sortid) ", paras);

if (dal.RowsCount > 0)

{

added++;

}

}

}

paras.Clear();

paras.Add(new SqlParameter("cid", x_cid.Text));

paras.Add(new SqlParameter("flowName",x_flowname.Text));

paras.Add(new SqlParameter("flowJSON", x_flowJSON.Text));

dal.RowsCount = 0;

dal.ErrorMessage = "";

dal.ExecDbScripts("update cc_flow set flowName=@flowname,flowJSON=@flowJSON where cid=@cid ", paras);

if (dal.RowsCount > 0)

{

tip.Text = "更新成功！";

}

else

{

tip.Text = dal.ErrorMessage;

}

}

protected void flowlist_SelectedIndexChanged(object sender, EventArgs e)

{

if (flowlist.SelectedValue == "")

{

return;

}

dal.ConnKeyString = "JaneConnectionCloud";

ArrayList paras = new ArrayList();

dal.RowsCount = 0;

dal.ErrorMessage = "";

paras.Clear();

paras.Add(new SqlParameter("cid",flowlist.SelectedValue));

object rv = dal.GetDataSet("select * from cc_flow where cid=@cid ", paras);

if (dal.RowsCount > 0)

{

DataSet ds = rv as DataSet;

DataTable dt = ds.Tables[0];

x_cid.Text = dt.Rows[0]["cid"].ToString();

x_flowname.Text = dt.Rows[0]["flowName"].ToString();

x_flowJSON.Text = dt.Rows[0]["flowJSON"].ToString();

tip.Text = "打开成功！";

flowpanel.Visible = true;

}

else

{

tip.Text = dal.ErrorMessage;

flowpanel.Visible = false;

}

}

</script>

<!DOCTYPE html>

<html lang="cn" >code>

<head>

<meta charset="UTF-8">code>

<title></title>

<link rel="stylesheet" href="dist/GooFlow.min.css?v=10" />code>

<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css" />code>

</head>

<script src="dist/jquery.min.js"></script>code>

<script src="dist/GooFlow.js?v=7"></script>code>

<body>

<form runat="server">code>

<div style=" display:flex">code>

<asp:TextBox ID="x_flowname" placeholder="输入项目名称" runat="server"></asp:TextBox>code>

<asp:Button ID="saveflow" Text="创建项目" runat="server" onclick="saveflow_Click"></asp:Button>code>

<asp:Button ID="updflow" Text="更新项目" style=" display:none" runat="server" onclick="updflow_Click" ></asp:Button>code>

<asp:TextBox ID="x_cid" placeholder="cid" style="display:none" ReadOnly="true" runat="server"></asp:TextBox>code>

<asp:DropDownList ID="flowlist" runat="server" AutoPostBack="true"code>

onselectedindexchanged="flowlist_SelectedIndexChanged"></asp:DropDownList>code>

</div>

<div style=" margin:10px; display:flex">code>

<asp:Label ID="tip" Text="这是一些提示信息..." runat="server"></asp:Label>code>

</div>

<iframe id="tframe" width="500" height="400" style=" display:none;z-index:99;position:absolute;" runat="server"></iframe>code>

<div id="flowpanel" visible="false" runat="server">code>

</div>

<div>

<asp:TextBox ID="x_flowJSON" Rows="10" style="display:none" width="100%" TextMode="MultiLine" runat="server"></asp:TextBox>code>

</div>

</form>

</body>

</html>

<script language="javascript" type="text/javascript">code>

var tframe=$('#tframe');

var curnode=null;

var flowpanel=null;

var sortBy = function (filed, rev, primer) {

rev = (rev) ? -1 : 1;

return function (a, b) {

a = a[filed];

b = b[filed];

if (primer && typeof (primer) != 'undefined') {

a = primer(a);

b = primer(b);

}else{

if(!isNaN(a) && !isNaN(a)){

a = Number(a);

b = Number(b);

}

}

if (a < b) { return rev * -1; }

if (a > b) { return rev * 1; }

return 1;

}

};

$(function(){

var options={initLabelText:"未命名",toolBtns:["task","chat","state"],toolBtnRemarks:{cursor:"选择指针",direct:"连线",task:"任务结点",chat:"决策结点",state:"状态结点",group:"组织区域框"},headBtns:["save","undo","redo","new","expand"],headBtnRemarks:['保存','撤销','重做','清空画布','结点设置']};

flowpanel = $('#flowpanel').createGooFlow(options);

var flowpanelData = {

areas: {

flowpanel_area_17: {

color: "yellow",

height: 300,

left: 40,

name: "部门一",

top: 30,

width: 150,

},

flowpanel_area_18: {

color: "blue",

height: 300,

left: 200,

name: "部门二",

top: 30,

width: 150,

},

flowpanel_area_19: {

color: "green",

height: 300,

left: 360,

name: "部门三",

top: 30,

width: 150,

},

flowpanel_area_20: {

color: "red",

height: 300,

left: 520,

name: "部门四",

top: 30,

width: 150,

},

},

lines: {

flowpanel_line_11: {

from: "flowpanel_node_1",

marked: false,

name: "",

to: "flowpanel_node_2",

type: "sl",

},

},

nodes: {

flowpanel_node_1: {

height: 24,

left: 70,

name: "节点流程1",

top: 66,

type: "chat",

width: 86,

sortid:1,

id:"flowpanel_node_1",

},

flowpanel_node_2: {

height: 24,

left: 240,

name: "节点流程2",

top: 132,

type: "state",

width: 86,

sortid:2,

id:"flowpanel_node_2",

},

}

};

flowpanel.loadData(flowpanelData);

if($('#x_flowJSON').val()!=""){

flowpanel.clearData();

flowpanel.loadData($.parseJSON($('#x_flowJSON').val()));

alert("加载流程图成功");

}

flowpanel.setTitle($('#x_flowname').val());

$('#flowpanel').css('backgroundColor','silver');

$('#flowpanel').css('borderColor','silver');

var obj = flowpanel.exportData();

flowpanel.onExpandClick=function(){

if(curnode==null) return;

var x=(curnode.offset().left+parseInt(curnode.css('width'),10))+'px';

var y=curnode.offset().top+'px';

tframe.css('left',x);

tframe.css('top',y);

tframe.attr('src','test_server.aspx?cid='+$('#x_cid').val()+'&nid='+curnode.selector.substring(1));

tframe.css('display',(tframe.css('display')=='none'?'':'none'));code>

}

flowpanel.onBtnSaveClick=function(){

$('#x_flowJSON').val(JSON.stringify(this.exportData()));

$('#updflow').click();

}

flowpanel.onItemFocus=function(id,type){

flowpanel.focusItem(id,false);

curnode=$("#"+id);

tframe.css('display','none');

}

});

</script>

设置审批人信息