【ReportDesign】100行代码搞定一个功能完整的报表页,你不心动吗?

helloworld_84866829
• 阅读 357

使用文档地址:http://43.143.54.159/

github地址:https://github.com/hunan-liy/report-design

ReportDesign是一款基于ElementUI进行扩展的Vue开源组件库,以数据驱动视图,通过简单的配置生成一个完整的页面,主要包含Form 表单、Table 表格、Report 报表和DialogSelect 弹窗选择器组件,主要解决开发过程中以下痛点:

风格不统一:

尤其是在管理后台的项目中,对于大部分页面,风格其实基本是统一的,但是开实际开发过程中,就算使用了ElementUI,由于协作开发,可能每个人写出来的页面都有差异,但是对于管理后台页面如果叫UI出设计稿又太浪费成本了,所以我们通过组件的方式统一页面风格,保证每个开发人员写出的页面都保持一致的风格。

功能遗漏:

细节功能遗漏其实在开发过程中很容易出现,如Form 表单的校验、占位文字,Report页面的分页入参错误、条件查询字段漏传、查询后分页没有切换到第一页等,这些细节问题虽然在提交测试过程中最后会被发现并解决,但是为什么我们不从根本上避免这种错误的出现呢?通过使用组件的方式,如Report 报表组件,开发人员只用关注页面需要哪些查询条件,需要展示哪些字段就行,接口请求全部封装在组件内部去做,减少出现低级功能遗漏问题的几率。

开发效率:

正常开发一个需要查询条件、需要分页、需要排序功能的报表页面需要多久?半天?2个小时?1个小时?不,只要你复制粘贴的够快,10分钟就够了!因为每个页面需要的配置基本一直,我们定义好开发模板,对照的接口文档将需要展示的字段的label和prop以及接口地址复制粘贴替换掉,10分钟开发一个简单报表页完全足够。

生成这样的一个页面只需要100行代码,轻松搞定! 【ReportDesign】100行代码搞定一个功能完整的报表页,你不心动吗?

该组件库是结合作者工作经验,重新整理后独立开发完成,各位同行如有发现其中不足之处,欢迎指导。

点赞
收藏
评论区
推荐文章
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
LeeFJ LeeFJ
1年前
Foxnic-Web 代码生成 (8) —— 配置列表页
列表页面主要包含了顶部的搜索区域和表格区域,搜索区域有点类似表单,配置上可能存在相似之处。本篇我们就来了解一下,在代码生成时的列表页呈现方面,我们可以做点啥。
不才 不才
3年前
md-loader
mdloader组件文档是如何渲染出来文档用于描述系统功能,而组件文档描述组件的功能,对于前端组件为了直观体现一般会有一个预览模块,而一般组件文档都是采用markdown编写,而md是文本内容且并没有渲染组件代码的能力,那么这是如何做的呢?简单的说就是“自定义结构”,像elementui中对代码的描述为,中间的YOUCODE可以放简单的vue组件代码。这种
皕杰报表中未使用的数据集和多数据集会影响运算不
首先想知道多数据集和未使用的数据集影响运算不,我们需要先了解设计器是怎么运算的,皕杰报表的brt文件在服务端是由servlet解析的,其报表生成的运算顺序是:变量参数运算数据集取数及运算报表运算及扩展......,前面的步骤未走完,是不会往下进行运算的。无论报表里是否用到了这个数据集,报表工具都要先完成数据集的取数和运算再进行报表运算,因而,如果数据集发
Wesley13 Wesley13
3年前
java代码生成工具之autoCode部署
autoCode介绍autoCode是一个代码生成工具。基于velocity模板引擎,采用SpringMVCmybatisFDUImysql此工具只负责生成代码文件,不会生成完整功能的应用程序.其特点主要有用户登陆每个用户有他自己独立的数据库连接配置和模板配置;数据源配置
皕杰报表如何在web页面调节大小和位置和按钮?
皕杰报表工具中报表在页面显示的大小和位置可以通过在URL后面添加servlet参数的方式来控制。控制页面大小的参数有两个,一个是rptwidth,一个是rptheight,分别代表报表在页面的输出宽度和高度,支持像素和百分比。控制工具条位置的是toolbardisplay,他有四个参数值,top在表格上方显示,below在表格下方显示,bottom在表格底
Easter79 Easter79
3年前
SpringBoot2.0 基础案例(14):基于Yml配置方式,实现文件上传逻辑
本文源码GitHub地址:知了一笑https://github.com/cicadasmile/springbootbase一、文件上传文件上传是项目开发中一个很常用的功能,常见的如头像上传,各类文档数据上传等。SpringBoot使用MultiPartFile接收来自表单的file文件,然后执
Stella981 Stella981
3年前
SpringBoot2.0 基础案例(14):基于Yml配置方式,实现文件上传逻辑
本文源码GitHub地址:知了一笑https://github.com/cicadasmile/springbootbase一、文件上传文件上传是项目开发中一个很常用的功能,常见的如头像上传,各类文档数据上传等。SpringBoot使用MultiPartFile接收来自表单的file文件,然后执
Stella981 Stella981
3年前
BookStack v1.1发布,功能类似Gitbook和看云的在线文档管理系统
BookStackV1.1版本发布,是基于MinDoc,使用Beego开发的功能类似Gitbook和看云的在线文档管理系统。本次版本升级,主要扩展了本地化存储的支持,以及优化了markdown项目的导入和拉取功能。开源地址:Github:https://github.com/TruthHun/BookStack(https://www
Stella981 Stella981
3年前
C# 自制报表组件 EzReportBuild 2.5
2.0版本添加了多报表页嵌套功能,每份报表可设置多页,每页可设置不同的纸张大小、数据表、页面规则等,并可对报表页次序即时调整,同时,优化了显示,报表显示更流畅。2.3增加了数据库生成一维码、二维码以及直接写入维码;数据库字段之间进行混合四则运算。2.5统一了界面,包括打开、保存文件对话框等均自定义,修改了一些错误。demo由于数据库字段生成一
helloworld_84866829
helloworld_84866829
Lv1
如果有来世,我一定活出你喜欢的样子。
文章
1
粉丝
2
获赞
2
热门文章

暂无数据