大家好，欢迎来到IT知识分享网。

• .net core研发的低代码自定义表单引擎，采用强大的规则引擎将所有的业务串联起来的，和其他低代码平台是有本质的区别的，目标是完全解放繁琐的CRUD工作，其他很多称为低代码的不管界面介绍得多炫酷，本质上还是解决复制粘贴的问题。
• 常规的业务，在需求以及数据库设计完成之后，可能就仅仅在界面上几分钟的配置就能够完成所有的开发、测试、部署工作，最后用户直接使用，完全解放繁琐的CRUD工作。
• 表单模板能够快速创建常规的业务模块，系统尽量将常规的业务功能做成模板，方便快速地创建业务模块功能，选择一个模板之后，会将模板对应的表单、子表单、子视图、控件等所有自定义表单相关的定义全部自动创建出来。

实体模型，视图模型，表单模型，表单规则引擎，这几部分内容是自定义表单核心内容，之前的文章已经介绍了实体模型，这篇文章介绍一下视图模型管理（实体模型设计请参考：企业级自定义表单引擎解决方案（三）——实体对象模型设计）。

　　我们平时见到的一些管理系统或者多数程序员做的一些CRUP操作，比如我们接触最多的列表管理、表单Form管理、树管理等，这些功能在一个后台管理系统中最为常见也最为繁琐，对于一个后台管理类的系统来说，可能60%左右都在做这样一些繁琐且无聊的工作，其实这些功能我们可以进行归纳总结，进行抽象，列表管理无非就是各种基本查询字段定义、高级查询定义、基础的一些功能按钮、比如新增或者导入导出Excel等、列管理、排序分页等，对于表单Form管理，无非就是字段排序显示、字段用什么控件显示、保存时验证、新增还是修改等，这些功能我们可以按照大的方面抽象，实际使用的时候，要什么功能就打开什么功能，更者我们可以做成模版，常用的功能根据模版自动生成，配置的大多数过程都可以省略。

　　实体模型管理就是对这些具体典型功能的抽象，真实业务根据实体模型动态生成具体业务功能模块。

　　先上一张整体设计图

低代码视图模型

视图关键字段说明：

　　ViewType（视图分类）：视图分为列表视图、表单视图、树视图、报表面板等，后面还可以灵活的添加其他类型的视图。

　　Version（版本）：每一次修改视图的任何信息，都会重新生成一个版本号，浏览器存储视图信息，每打开一个页面，会将本地表单版本和视图版本传递到服务端比较版本号，如果版本号发生变化，重新请求视图数据（一般系统交互后，视图及表单定义信息很少会发生变化）。

　　PropertySettings（视图属性）：Json数据，存储前端的一些样式，比如列表视图，存储前端表格控件的一些属性，前端渲染时，读取属性并应用到控件中，一般需要结合具体使用的前端框架设置，我这里使用的是ant vue。

RelationInfos（关联信息）：视图可能会关联其他视图，比如表单视图中，某个字段的数据从其他视图获取，这里会把关联视图的Id关联到此视图中。

Rules（规则）：Json数据，定义视图的规则，如点击编辑按钮，打开对话框、获取表单数据、将表单数据绑定到表单视图中，规则是非常核心的一块内容，后续单独介绍。

WrapInfos（视图包装器）：视图用显示在对框框中，视图显示在特定样式Div中或者Box中，前端在渲染视图时，如果有包装器，会用包装器包装视图之后再渲染。

Controls（视图控件）：不同的视图控件显示的区域不一样，需结合具体的视图定义控件，前端渲染不同视图时，读取不同类型的视图控件，在特定的区域显示视图控件。

Extension1、2、3、4（扩展字段）：对于不同的视图，存储不同的内容，比如列表视图，存储查询信息、视图特定列定义信息、表单视图则存储表单行定义信息。根据不同的视图类型使用不同的扩展字段。

列表视图（ListView）

列表视图及为传统的表格管理，表格包含表格内容、查询、高级查询、分页、操作按钮、列格式化显示、行按钮等的管理
列表视图常规数据渲染过程： 定义页码改变事件，事件执行的规则为调用后端的PageList方法，参数从页码控件、隐藏参数查询、普通查询、高级查询、表格表头排序动态拼接，组装成查询参数，然后再执行绑定数据规则（获取参数过程列表视图已经封装，直接配置使用即可），将查询结果绑定到ant表格控件。另外，在视图加载、查询按钮点击、高级查询查询、点击排序表头、弹出子表单或子视图对话框确认事件中，都会直接绑定到执行页码改变事件，进而执行数据渲染过程。（主要是用规则引擎将所有动作串联起来，规则引擎参见规则引擎部分文档） 。单表的数据一般比较好设置，多表关联时，需要定义别名以及关联Sql语句等，如一对一关系配置执行后端方法配置：{“aplicationCode”:”Default”,”isTransaction”:true,”methods”:[{“ruleId”:1,”objectName”:”OTO1″,”methodId”:”MultiPageList”,”transfors”:[{“transType”:”query”,”aliasInfos”:”OTO1:a;OTO2:b”,”joinInfos”:”OTO1 a LEFT JOIN OTO2 b ON a.Id=b.Id”}]}]}，多表查询映射出来的数据每个字段都会增加“_别名”处理，如id_a,userName_b等。

属性设置

属性常规设置即为设置ant的table控件，另外附加扩展的一些自定义设置，ant的Table设置参考Table组件设置，其他一些扩展字段如下：

1. tableDiv
   设置a-table外层的div样式，默认样式为：’min-height: 560px’
2. rowKey
   前端表格的行主键，一般情况为”id”，可以不设置，当查询出来的列表数据主键不为id是，需要设置，如：id_a
3. tableType
   自定义扩展字段，多数情况不需要设置，如果是树列表，需要设置为“tree”
4. columns
   参见Table组件设置，定义表格列
5. colOperateWidth
   定义列表操作列的宽度，当列表操作控件或者列表更多控件定义了，列表中的操作列才会显示。
6. excelTemplate
   导入导出Excel配置模版信息，参见附录【导入导出Excel模版】，如：[{“name”:”电话”,”field”:”phoneNumber”,”fieldType”:5,”isRequred”:true,”validateType”:99,”validateValue”:”[{‘customerVal’:’Phone’,’trigger’:’blur’}]”},{“name”:”学历”,”field”:”education”,”fieldType”:5,”validateType”:11}]
7. excelDicts
   字段字典映射集合数据，表示Excel中用到的数据字典映射信息，定义哪个字段用到哪个数据字典，如：[{“dict”:”sex”,”field”:”sex”},{“dict”:”edu”,”field”:”education”},{“dict”:”title”,”field”:”positionalTitle”}]
8. excelName
   导入导出Excel文件名称，如：人员管理测试Excel数据
9. uniqKey
   导入时唯一字段检测（这里的字段为数据库字段，注意不是转换为驼峰命名之后的字段，多个字段组合用;号隔开），如：UserName。
10. eval_query
    执行后端方法获取查询参数后执行的JS脚本，自定义扩展处理查询条件，本质上执行eval函数，特殊场景使用，比如执行查询之前，将查询条件做自定义特殊处理，如：界面查询条件只查询年月，到后端映射为时间段查询sqlWhere.children.forEach(r=>{if(r.field===’checkTime’){r.value=[r.value.format(‘yyyy-MM’)+’-01 00:00:00′,r.value.add(1,’month’).format(‘yyyy-MM’)+’-01 00:00:00′]}})，参考附录：【自定义查询条件】
11. defaultSorting
    默认后端查询方法排序，如：checkTime desc,stockCheckType asc等

列管理

对列表区域特定列数据的格式化显示

• 绑定字段
  查询出来的数据特定字段
• 组件名称
  col-tbl-text或者col-tbl-icon
• 编辑组件
  未实现此功能，原本定义为列表视图可直接在表格中编辑，现取消此功能。
• 组件属性设置

1. 格式化显示特定行列数据，可使用的上下文参数：text（特定行特定列的原始文本）、record（特定行的整行数据对象），index（行索引）
2. col-tbl-text控件主要是针对文本格式的转换，动态调用js的eval方法，定义eval_render值，内容为动态执行的js语句，如： {“eval_render”:”text.substring(0, 19).replace(‘T’, ‘ ‘)”} ，将时间字段格式化显示。
3. col-tbl-icon控件主要是针对字典或者需要定义图标显示的列，主要填写内容：icons(图标格式显示)、texts(文本格式显示)、dict(数据字典名称)、isMulti(数据字典时使用，是否多选择，数据字典多选时，不填写icons，构造出”字典项1;字典项2″的内容)、showTitle(是否显示文本)，icons的配置参考前端网站a-icon的配置,texts配置为span的配置。
   ),showTitle(是否显示文本)几个字段，icons的配置参考前端网站a-icon的配置,texts配置为span的配置。
4. 例1（只显示图标，不显示文本，其中key为字段值，config为根据特定值做特定的配置）：{“icons”:[{“key”:”female”,”config”:{“type”:”woman”,”style”:”font-size:14px;font-weight:600;color:rgb(255, 112, 112);”,”title”:”女”}},{“key”:”male”,”config”:{“type”:”man”,”style”:”font-size:14px;font-weight:600;color:#13c2c2;”,”title”:”男”}}],”showTitle”:false}
5. 例2（同时显示图标和文本，key为空，标识匹配任意文本）：{“icons”:[{“key”:””,”config”:{“type”:”phone”,”style”:”font-size:14px;font-weight:600;color:#13c2c2;”}}],”texts”:[{“key”:””,”config”:{“style”:”font-size:14px;font-weight:600;color:#13c2c2;”}}],”showTitle”:true}
6. 例3（数据字典，不带图标，格式化显示）：{“texts”:[{“key”:”master”,”config”:{“style”:”font-size: 14px;font-weight: 400;color: rgb(19 113 194);”}},{“key”:”doctor”,”config”:{“style”:”font-size: 14px;font-weight: 400;color: rgb(70 194 19);”}},{“key”:””,”config”:{“style”:”font-size: 14px;font-weight: 400;color: rgb(194 189 19);”}}],”dict”:”edu”,”showTitle”:true}
   特殊说明：如果通过模板自动生成，如果字段类型是bool,date,datetime，或者定义了dict，系统会自动添加格式化列显示。

查询（查询涉及到各种控件的使用，参见Wike文档【自定义表单控件使用说明】描述）

查询主要定义执行后端方法PageList或者ListWhere前，根据用户输入的查询条件，动态构造查询树对象，参见Wike附录【自定义查询条件】

• 查询类型
  普通查询(列表查询区域看到的查询控件)、高级查询(点击查询区域最右侧“更多”按钮显示的高级查询功能)、隐藏查询(用户看不到，通过规则引擎的方式给列表查询赋值)
• 查询字段
  字段名称
• 允许查询的条件
  普通查询和隐藏查询条件只填写一个，与后面的默认条件一致，高级查询条件可以选择多个供用户选择使用，选择查询条件时，需要适配使用的控件以及字段类型，比如a-input控件选择查询条件为In，这种在运行时会报错。
• 默认查询条件
  单选
• 查询源（已废弃）
  配合组件使用，调用远程方法，获取组件需要的数据源，数据源统计返回带name和value字段的集合。
• 组件名称：

1. 普通查询见附录【自定义表单控件使用说明】描述
2. 高级查询
   高级查询控件的使用方式与普通查询比较类型，请参见 > 体验网站> 控件综合应用

TextBox，如果查询条件为Between，则构造两个文本框输入，否则构造一个文本框输入
SingleDropDown和MultipleDropDown，下拉单选或者下拉多选
TreeSingleDropDown和TreeMultipleDropDown，下拉单选或者下拉多选树
SingleDropDownAndTextBox和MultipleDropDownAndTextBox，下拉单选或者下拉多选，允许用户输入查询条件搜索
SingleTile和Radio，瓦片和Radio单选
DateTime，如果查询条件为Between，则构造日期范围选择控件，否则构造日期控件。
col-form-user，系统用户查询选择控件
下拉多选的地方，查询条件多半为In或者NotIN

编辑视图（ItemView）

• 行管理
  比较好理解，比较简单，只需要定义排序集合，也可以定义行的Div样式设置。
• 列管理

视图行：列所在的行
列类型：Control，View或者Form，当选择View或者Form时，在此列渲染子表单或者子视图
对象Id：如果列类型为View或者Form，设置为View的Id或者Form的Id
验证：如果是Control，可以定义验证规则，参见附录【表单验证】，如：[ { “required”: true, “message”: “请填写此项数据”, “trigger”: “blur” }]
绑定值：如果是Control，绑定到的object对象字段
属性：这里是ant-design的Item属性设置，不是控件的属性设置
Wrap信息：参见【公共配置Wrap管理】
Label显示：Lable显示
Label属性：一般不填写，设置Label的属性
控件和控件设置：见附录【自定义表单控件使用说明】描述

树视图（TreeView）

同列表视图配置基本相同，只是规则执行后端方法时，执行的是TreeListWhere等树相关的方法，另外界面的一些控件就没有了，比如分页，导入导出Excel等。基本的列表视图理解之后，参考 > 示例网站 > 模板运行时 > 单树Tree_模板

本地列表视图（ListLocalView）

同列表视图配置基本相同，只是新增、修改、删除都是针对本地表格数据进行的操作，不执行后端方法，参见 > 示例网站 > 模板运行时 > 本地单表_模板，以及参考 > 示例网站 > 模板运行时 > 1对多2Collapse_模板

低代码自定义表单引擎绝对不是简单几个字就能够概括的，是一个非常庞大技术知识体系。

低代码自定义表单引擎、流程引擎、QT开发框架，整整花了两年的时间，当然都是工作之外的时间来做的，真的很辛苦，当然自己的出发点也没那么高尚，想要给正在到来的大龄程序员自己找到另外的一条出路，也是自己想要深入的方向，也给想要往这方面发展的同行一些自己的微博之力，自定义表单引擎已经开源出来了，后续会不断优化；QT开发框架也肯定会开源出来，里面也用到了很多低代码的思想，QT开发根本没有像样的开源开发框架（我同学是QT界的大佬，之前说有很多项目做，所以也是花费很多时间和精力在上面的，结果疫情也好、经济环境也好，并不理想）；工作流引擎这块暂时没有打算开源，后续看情况。

后续会陆续在头条上写一些文章，直接看代码基本很难整体理解这块的设计，文章前面部分主要是一些设计思想，后面会偏具体的一些技术以及场景应用。

冠未去，美帝相向，于华夏之子，吾辈当自强。

wike文档地址：https://gitee.com/kuangqifu/sprite/wikis/pages

后端开源地址：https://gitee.com/kuangqifu/sprite

前端开源地址：https://gitee.com/kuangqifu/spritefronts