spritekuang

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

#

[置顶] 企业级自定义表单引擎解决方案(六)--工作流挂接表单

摘要: 自定义表单可以挂载到流程引擎,也可单独存在,本文介绍自定义表单挂接流程引擎案例,流程引擎采用开源的框架elsa,并对部分代码做了修改以适应中国国内的审批业务,流程设计器也是基于elsa提供的前端实现框架,但全部移植到vue版本中以适应自身框架的需要。 流程引擎应用范围: 1.关键业务流程:订单、报价 阅读全文

posted @ 2021-07-05 09:49 spritekuang 阅读(4073) 评论(3) 推荐(6) 编辑

2022年12月16日 #

企业级自定义表单引擎解决方案(十八)--列表视图属性设置

表格对于后台管理类的系统来说,至关重要,系统大多数功能都需要以表格的方式展示业务内容,系统开发人员多数时间也是围绕着表格进行业务编码,接触过很多后台管理系统的框架,我个人第一首先也是看表格功能是否强大。

对于低代码平台来说,也是非常核心的内容,关系到系统好不好用,功能能不能支撑各种业务场景的需求,所以也是至关重要的内容。

列表视图后续会写多篇文章来分解具体的功能设计,感兴趣可以查看前端相关代码,这篇文章主要是讲一下表格内容的使用配置,不涉及到查询及各种高级控件的使用。

请参照开源网站的“表单常规示例->控件综合应用”这个页面体验及对照查看相关配置,这个页面功能单一,但里面的各种列表使用场景比较复杂,将所有平常开发常见的功能的集成到里面了,并且是真正意义的零代码,全部通过配置完成,前后端都没有任何代码,界面配置立马生效。

基础功能参见antd的表格使用,特殊功能如下:

  • 点击“字符字段”打开编辑对话框(点击字段接入规则引擎,将选中的行数据作为事件参数传入规则引擎,执行打开编辑视图对话框、根据选择行Id获取后端数据、将数据绑定到编辑视图)
  • 日期、字典、电话等字段自定义显示
  • 外键字段格式化显示(数据库只存储外键Id)
  • 人员字段格式化显示(数据库只存储人员外键)
  • 表格按钮权限控制
  • 表头分页
  • 是否换行显示
  • 自定义列显示
  • 多选行
  • 表格扩展内容显示

 

列表视图属性设置

属性常规设置即为设置ant的table控件,其他一些扩展字段如下:

  1. tableDiv
    设置a-table外层的div样式,默认样式为:'min-height: 560px'
  2. rowKey
    前端表格的行主键,一般情况为"id",可以不设置,当查询出来的列表数据主键不为id是,需要设置,如:id_a
  3. tableType
    自定义扩展字段,多数情况不需要设置,如果是树列表,需要设置为“tree”
  4. columns
    参见Table组件设置,定义表格列, 特殊处理(宽度width不设置,默认置为80;对齐align不设置,默认置为center,扩展linked属性,标识表格字段可以点击,点击事件可接入规则引擎;扩展option_is属性,标识字段列可自定义是否显示;扩展option_selected属性,配合option_is使用,标识字段列默认是否显示)
  5. columnsExpanded columnsExpandedColSpan
    columnsExpanded表格展开更多内容字段列定义,columnsExpandedColSpan定义展开显示多少行,值为1-4,默认为4
  6. colOperateWidth
    定义列表操作列的宽度,当列表操作控件或者列表更多控件定义了,列表中的操作列才会显示。
  7. excelTemplate
    导入导出Excel配置模版信息,参见附录【导入导出Excel模版】,如:[{"name":"电话","field":"phoneNumber","fieldType":5,"isRequred":true,"validateType":99,"validateValue":"[{'customerVal':'Phone','trigger':'blur'}]"},{"name":"学历","field":"education","fieldType":5,"validateType":11}]
  8. excelDicts
    字段字典映射集合数据,表示Excel中用到的数据字典映射信息,定义哪个字段用到哪个数据字典,如:[{"dict":"sex","field":"sex"},{"dict":"edu","field":"education"},{"dict":"title","field":"positionalTitle"}]
  9. excelName
    导入导出Excel文件名称,如:人员管理测试Excel数据
  10. uniqKey
    导入时唯一字段检测(这里的字段为数据库字段,注意不是转换为驼峰命名之后的字段,多个字段组合用;号隔开),如:UserName。
  11. 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']}}),参考附录:【自定义查询条件
  12. defaultSorting
    默认后端查询方法排序,如:checkTime desc,stockCheckType asc

高级功能说明

  • 表头分页
    参照antd设置即可,如果存在自定义列显示,且所有列都不显示时,分组字段也不显示
{
      "title": "日期字段",
      "children": [
        {
          "dataIndex": "dateTimeField",
          "title": "日期字段",
          "scopedSlots": {
            "customRender": "dateTimeField"
          },
          "width": 160
        },
        {
          "dataIndex": "dateField",
          "title": "日期字段2",
          "scopedSlots": {
            "customRender": "dateField"
          },
          "width": 160,
          "option_is": true,
          "option_selected": true
        }
      ]
    }
  • 自定义列显示
    在表格右上角,用户可点击下拉勾选自定义显示哪些字段列option_is属性控制是否允许用户选择,option_selected控制默认是否勾选
{
          "dataIndex": "dateField",
          "title": "日期字段2",
          "scopedSlots": {
            "customRender": "dateField"
          },
          "width": 160,
          "option_is": true,
          "option_selected": true
        }
  • 是否换行显示
    在表格右上角,checkbox选择,默认情况表格单元格内容超过展示宽度,用“...”代替,当勾选时,表格单元格内容换行显示所有内容。
  • 超连接字段
    扩展linked属性,点击单元格内容,可触发事件,接入规则引擎,触发的事件会将表格行作为事件参数传递到规则引擎,比如点击“合同编号”字段打开编辑合同对话框等(需要设置scopedSlots属性)。
{
      "align": "center",
      "dataIndex": "stringField",
      "title": "字符",
      "sorter": true,
      "linked": true,
      "scopedSlots": {
        "customRender": "stringField"
      }
    }
  • 表格更多内容

columnsExpanded表格展开更多内容字段列定义,columnsExpandedColSpan定义展开显示多少行,值为1-4,默认为4,表格更多列不支持option_is和option_selected属性,支持linked属性设置,“是否换行显示”功能也支持

  • 超出内容自动横向滚动

表格控件设置了超出表格所有列长度时,自动出现横向滚动条

  • 其他高级功能

更多高级功能,可增加列表自定义控件,格式化显示表格内容

 

个人业余时间开发进度确实快不起来,很多设计思想我认为还是很不错的,完全可以应用到实际项目中,欢迎关注。


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

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

前端开源地址:https://gitee.com/kuangqifu/spritefronts
体验地址:http://47.108.141.193:8031 (首次加载可能有点慢,用的阿里云最差的服务器)
自定义表单文章地址:https://www.cnblogs.com/spritekuang/
流程引擎文章地址:https://www.cnblogs.com/spritekuang/category/834975.html (采用WWF开发,已过时,已改用Elsa实现,https://www.cnblogs.com/spritekuang/p/14970992.html 

 

posted @ 2022-12-16 18:24 spritekuang 阅读(629) 评论(0) 推荐(2) 编辑

2022年11月28日 #

企业级自定义表单引擎解决方案(十七)--Job配置执行

摘要: .net core研发的低代码自定义表单引擎,采用强大的规则引擎将所有的业务串联起来的,和其他低代码平台是有本质的区别的,目标是完全解放繁琐的CRUD工作。 常规的业务,在需求以及数据库设计完成之后,可能就仅仅在界面上几分钟的配置就能够完成所有的开发、测试、部署工作,完全解放繁琐的CRUD工作。 表 阅读全文

posted @ 2022-11-28 14:05 spritekuang 阅读(278) 评论(1) 推荐(0) 编辑

2022年11月2日 #

企业级自定义表单引擎解决方案(十六)--Excel导入导出

摘要: Excel对于后端管理系统来说,永远都是绕不开的话题,开发Excel导入导出功能往往都比较麻烦,因为涉及到Excel导入模板制作、Excel表格数据与系统数据库表字段映射、Excel导入数据验证、验证错误数据返回给用户的交互、表格数据唯一判断(不存在新增,存在则修改),复杂一些的还会涉及到多表头、合 阅读全文

posted @ 2022-11-02 15:51 spritekuang 阅读(944) 评论(2) 推荐(1) 编辑

2022年10月28日 #

企业级自定义表单引擎解决方案(十五)--前端开源说明

摘要: 一直做后端开发,前端还真不是强项,半桶水的样子,好在现在前端框架和组件层出不穷,基本上勉强可以上路。 自定义表单对前端要求非常高,技术上的难度不亚于后端,而且要考虑扩展性、性能,对于扩展性的设计要求非常高,比如你做一个按钮点击事件,就要考虑文本框、下拉框的值改变事件,再比如界面上的参数来源,可以从其 阅读全文

posted @ 2022-10-28 17:53 spritekuang 阅读(1179) 评论(0) 推荐(4) 编辑

2022年10月26日 #

企业级自定义表单引擎解决方案(十四)--表单模板2

摘要: .net core研发的自定义表单引擎,采用强大的规则引擎将所有的业务串联起来的,和其他低代码平台是有本质的区别的,目标是完全解放繁琐的CRUD工作。 常规的业务,在需求以及数据库设计完成之后,可能就仅仅在界面上几分钟的配置就能够完成所有的开发、测试、部署工作,完全解放繁琐的CRUD工作。 表单模板 阅读全文

posted @ 2022-10-26 13:21 spritekuang 阅读(838) 评论(0) 推荐(2) 编辑

2022年7月9日 #

企业级自定义表单引擎解决方案(十三)--表单模板1

摘要: .net core研发的自定义表单引擎,采用强大的规则引擎将所有的业务串联起来的,和其他低代码平台是有本质的区别的,目标是完全解放繁琐的CRUD工作。 常规的业务,在需求以及数据库设计完成之后,可能就仅仅在界面上几分钟的配置就能够完成所有的开发、测试、部署工作,完全解放繁琐的CRUD工作。表单模板能 阅读全文

posted @ 2022-07-09 17:22 spritekuang 阅读(1458) 评论(6) 推荐(5) 编辑

2022年7月7日 #

企业级自定义表单引擎解决方案(十二)--体验代码目录结构

摘要: 写在前面 体验地址:http://47.108.141.193:8031/体验网站数据库定期还原,可以随意修改配置查看效果,为方便其他人使用,模板相关的配置请尽量不要动。 体验网站技术清单 服务器采用阿里云1核2G,Linux8,Docker部署 后端采用的是Abp Vnext,net5,自定义表单 阅读全文

posted @ 2022-07-07 09:57 spritekuang 阅读(792) 评论(0) 推荐(3) 编辑

2022年7月3日 #

企业级自定义表单引擎解决方案(十二)--表单规则引擎2

摘要: .net core研发的自定义表单引擎,采用强大的规则引擎将所有的业务串联起来的,和其他低代码平台是有本质的区别的,目标是完全解放繁琐的CRUD工作。 规则引擎是自定义表单最为核心的内容,也是与其他低代码工具最为本质的区别,非常重要的内容,对于读者来说也是最难理解内容。 没有规则引擎的低代码工具,即 阅读全文

posted @ 2022-07-03 17:41 spritekuang 阅读(576) 评论(0) 推荐(1) 编辑

企业级自定义表单引擎解决方案(十一)--表单规则引擎1

摘要: .net core研发的自定义表单引擎,采用强大的规则引擎将所有的业务串联起来的,和其他低代码平台是有本质的区别的,目标是完全解放繁琐的CRUD工作。 规则引擎是自定义表单最为核心的内容,也是与其他低代码工具最为本质的区别,非常重要的内容,对于读者来说也是最难理解内容。 没有规则引擎的低代码工具,即 阅读全文

posted @ 2022-07-03 17:04 spritekuang 阅读(1064) 评论(0) 推荐(3) 编辑

2022年2月9日 #

企业级自定义表单引擎解决方案(十)--缓存设计2

摘要: 新年伊始,万物皆生机,然冠未去,美帝相向,于华夏之子,吾辈当自强。 这篇文章接上一篇文章,主要介绍缓存的代码实现 后端本地缓存 之前介绍的将自定义表单数据全部存储到应用程序内存中,任何自定义表单数据更新之后,都刷新内存缓存,分布式部署涉及到缓存同步刷新问题。 全局本地缓存容器设计 用线程安全的字典C 阅读全文

posted @ 2022-02-09 18:50 spritekuang 阅读(833) 评论(0) 推荐(2) 编辑

点击右上角即可分享
微信分享提示