表单引擎呈现部分-代码实现逻辑结构详解

最新推荐文章于 2024-07-24 22:19:46 发布

chengping8138

最新推荐文章于 2024-07-24 22:19:46 发布

阅读量978

点赞数

文章标签： json 数据库

原文链接：https://my.oschina.net/ccbpm/blog/1923434

版权

基于上篇文章我们只做了简单了两种设计思想的对比，没有深入说明实现原理。

本章节我们的重点说明表单引擎系统基于关系型数据库设计的实现原理以及CCBPM实现的重点代码结构。

表单引擎系统是由表单设计器和表单解析器和表单模板三部分组成。

表单设计器为表单设计入口，通过表单设计器的表单设计将表单组成元素存储到数据表中，在进行表单展示过程中，通过表单解析器进行对表单模板数据进行解析和拼接，生成网页内容进行展示。

表单设计器

实现原理详解

驰骋工作流引擎-傻瓜表单实现原理

代码详解，

在Designer.htm初始化界面中，工具栏按钮直接在表单上进行展示。

新建组件时，弹出FieldTypeList.htm页面。实现对各种类型的组件新增功能。

新建字段时，执行AddF方法，弹出页面。

function AddF() {

    var url = 'FieldTypeList.htm?DoType=AddF&FK_MapData=' + GetQueryString('FK_MapData');

    var h = 500;

    var w = 600;

    var l = (screen.width - w) / 2;

    var t = (screen.height - h) / 2;

    var s = 'width=' + w + ', height=' + h + ', top=' + t + ', left=' + l;

    s += ', toolbar=no, scrollbars=no, menubar=no, location=no, resizable=no';

    var b = window.showModalDialog(url, 'ass', s);

    window.location.href = window.location.href;

}

FieldTypeList.htm页面详解

新建字段时弹出该页面，该接页面在初始化加载时将组件控件进行展示

在点击保存触发时，将控件信息记录到对应的组件数据表中。

控件在数据库中的存储//求出选择的字段类型.

            MapAttr attr = new MapAttr();
            attr.Name = newName;
            attr.KeyOfEn = newNo;
            attr.FK_MapData = this.FK_MapData;
            attr.LGType = FieldTypeS.Normal;
            attr.MyPK = this.FK_MapData + "_" + newNo;
            attr.GroupID = iGroupID;
            attr.MyDataType = fType;

            int colspan = attr.ColSpan;
            attr.Para_FontSize = 12;
            int rows = attr.UIRows;

            if (attr.MyDataType == DataType.AppString)
            {
                attr.UIWidth = 100;
                attr.UIHeight = 23;
                attr.UIVisible = true;
                attr.UIIsEnable = true;
                attr.ColSpan = 1;
                attr.MinLen = 0;
                attr.MaxLen = 50;
                attr.MyDataType = DataType.AppString;
                attr.UIContralType = UIContralType.TB;
                attr.Insert();
                return "url@../../Comm/En.htm?EnName=BP.Sys.FrmUI.MapAttrString&MyPK=" + attr.MyPK;
            }

普通文本类型、日期类型、数值类型、枚举类型、外键类型在Sys_Mapatrr中进行存储。附件控件，在Sys_FrmAttachment附件表中存储。普通标签类型在Sys_FrmLab表中存储。

更多控件类型存储，请参考代码实现。

表单解析器

表单解析器工作原理为从存储组件的数据表中获取存储数据表以及组件表的相互关系，以JSON数据格式返回至展示界面。展示界面介绍JSON数据后通过JS脚本解析，分别对各种控件文本控件、数据控件、日期控件、枚举控件、外键控件、附件控件、明细表控件、审核组件控件等的解析予以不同的字符串拼接展示。最终以htm网页的形式展示出来。

表单解析器代码详解

表单设计器由同一入口文件传入的设计类型判断加载设计器的类型为傻瓜表单设计器还是自由表单设计器。

Designer.htm页面初始化函数如下：

一般处理程序方法实现：

Designer.htm页面加载设计器

使用data接受返回的json数据。

对json里面的三个对象<Sys_Mapdata、Sys_MapAttr、Sysy_GroupField>做拼接table。

普通文本类型、日期类型、数值类型、枚举类型、外键类型的表单实现，在实现过程中将根据控件属性，权限<只读、可编辑、不可见>、默认值填充等进行加载。

 html += "<td class='FDesc'>" + GenerLabel(mapAttr) + "</td>";
 html += "<td ColSpan=" + mapAttr.ColSpan + "><div id='DIV_" + mapAttr.KeyOfEn + "'><input class='form-control' style='width:99%;margin:3px;' maxlength=" + mapAttr.MaxLen + "  name='TB_" + mapAttr.KeyOfEn + "' id='TB_" + mapAttr.KeyOfEn + "' type='text' " + (mapAttr.UIIsEnable == 1 ? '' : ' disabled="disabled"') + "/></div></td>";
 html += "</tr>";

附件控件的表单实现

var frameUrl = "<iframe ID='F" + athEn.MyPK + "' frameborder=0 style='padding:0px;border:0px;width:100%;height:" + athEn.H + "px;'  leftMargin='0'  topMargin='0' src='" + src + "'  scrolling='auto'  /></iframe>";
return "<tr><td colspan=4 id='TD" + athEn.MyPK + "' style='width:" + athEn.H + "px;'>" + frameUrl + "</td></tr>";

明细表、从表控件展示

var src = "MapDtlDe.htm?DoType=Edit&FK_MapData=" + pageParam.fk_mapdata + "&FK_MapDtl=" + dtl[0].No;
var frameUrl = "<iframe ID='F" + dtl[0].No + "' frameborder=0 style='padding:0px;border:0px;width:100%;height:" + dtl[0].H + "px;'  leftMargin='0'  topMargin='0' src='" + src + "'  scrolling='auto'  /></iframe>";
return "<tr><td colspan=4 id='TD" + dtl[0].No + "'>" + frameUrl + "</td></tr>";

审核组件控件展示

var src = "../../WorkOpt/WorkCheck.htm?WorkID=0&FK_Flow=" + fk_flow + "&FK_Node=" + nodeID + "&FK_MapData=" + pageParam.fk_mapdata;
var frameUrl = "<iframe ID='FWC' frameborder=0 style='padding:0px;border:0px;width:100%;height:" + h + "px;' leftMargin='0' topMargin='0' src='" + src + "' scrolling='auto'  /></iframe>";
return "<tr><td colspan=4 style='width:100%;height:" + h + "px;' id='FWC' >" + frameUrl + "</td></tr>";

更多实现过程，请参考代码。

转载于:https://my.oschina.net/ccbpm/blog/1923434