小智报表实战系列 -3 分栏报表
需求背景:体检化验单报表(带参数查询)
在医疗信息系统中,分栏报表对于客户体检化验项目的需求主要集中在以下几点:数据密度与清晰度:化验报告通常包含大量的项目,如血液检查、尿液分析、生化指标等,每一项都需要清晰、准确地显示在报表上,而分栏报表可以帮助在有限的空间内排列更多的项目而不牺牲可读性。对比与分析:医生和实验室工作人员需要快速对比不同样本或同一患者在不同时间点的化验结果,分栏报表通过将相关数据并排显示,便于进行直观的比较分析。规范化输出:化验报告需要遵循一定的格式标准,分栏报表可以确保所有项目按照规定的顺序和格式呈现,便于统一管理和存档。灵活性与定制化:不同的科室或医疗机构可能有不同的报告需求,分栏报表应支持自定义栏目数量、宽度和排序,以适应特定的工作流程。
效果图
![](https://static001.geekbang.org/infoq/ec/ecbf9ff6df586b06a2f78b0fe7cf7a50.png)
![](https://static001.geekbang.org/infoq/af/af180e9b53fc1b695e06689a9ee14273.png)
报表难点
主子表
子表分栏
小智报表解决方案
小智报表设计器实现要点
脚本嵌入 接口实现
类 excel 报表设计 = 自由拖拽(低代码) + 极简配置
![](https://static001.geekbang.org/infoq/a6/a66c59bfe53b787f88e74762ab22c5eb.png)
![](https://static001.geekbang.org/infoq/61/61772f253157e152778fd99f5a610e92.png)
![](https://static001.geekbang.org/infoq/59/592547c1bdc586c216ec9c8347279a79.png)
![](https://static001.geekbang.org/infoq/f3/f3c4ee98a2b1fd8d7f92f76c3eca2d66.png)
![](https://static001.geekbang.org/infoq/f9/f9c0902b2bcd818fe0e3c324b95f21f5.png)
![](https://static001.geekbang.org/infoq/ef/ef94afecea334f35e4b96029003ea977.png)
![](https://static001.geekbang.org/infoq/17/1795435ee0e89aca4f5f8ffe0dacd073.png)
![](https://static001.geekbang.org/infoq/d9/d97b2d713568cc8c9972d461e5a90f7f.png)
![](https://static001.geekbang.org/infoq/08/0847de23b196558b86ca24cfdcd7fd2a.png)
![](https://static001.geekbang.org/infoq/58/5813b09bc5ec716715ed9221feee1951.png)
数据保存
报表渲染要点
准备模板和数据
在前面报表设计器的保存数据中,已经提交到业务后台保存;现在只需要 axios.get 提取 config,data 这 2 个 json 数据
脚本嵌入 接口实现
点评
接口精简(默认可以满足大部需求)
onUpdateDatasetList :提供候选数据集列表
onUpdateData :提供数据集记录(带参数查询)
sheetDesign.getData() :提取报表设计器的模板数据 //config,data 两个部分,都作为报表模板保存
options 功能选项配置 :默认配置即可满足大部分需要
reportDesign.on("dataset-edited",on_dataset_edited);//监听 编辑数据集事件
reportDesign.loadData({config: config, data: data});//触发数据刷新事件
spreadSheet.update(config, data);
Json 数据格式 :跨平台通用
分组/聚合/汇总/钻取/穿透/图表/函数/富文本/多样式单元格 层级坐标体系
简化后端程序员数据处理逻辑
减少后端数据库压力,前端只需要极少的原始数据
促进报表设计器人员和后台程序员合理化分工并行工作
参数查询 导出 打印 最大/小化 刷新 = 低代码 + 极简配置开箱即用
参考文档和样例源码下载
小智报表样例源码下载
https://gitee.com/tizdata_admin/vue-xzreport-example.git
![](https://static001.geekbang.org/infoq/70/7041e5e86fb03eb6d21924f7f615a3be.png)
小智报表 demo 体验
丰富的报表模板示例
小智报表在线试用
小智报表 js sdk 下载
开发使用文档
评论