背景
查询统计,可以说是任何业务系统都必备的一个工具。也是很多公司给新人熟悉业务练手的一个系统。
它的前端业务逻辑一般比较简单明了。设置几个输入条件,根据输入条件生成调用参数,通过后端接口生成报表。
这样一个系统维护起来难度并不大,但是往往随着报表的增多,工作量很大。因此我们需要设计一个可根据配置自动生成报表页面的查询统计前端。这样前端的工作量就可以大大减少,节约了前端开发的资源。
(相关资料图)
基础实现
这个查询统计到我手里时,已经实现了既定的功能。下面我们简单看一下原来的功能和代码结构。
原来的实现大致可以分成三个模块。
上方是导航栏,是可配置的菜单。
中间是查询条件,也是不同报表间最大的区别。我们希望这个区域能修改成可配置的。比较常见的查询方式有时间,输入框,下拉框,下拉框树等。此外还包含一个查询和重置的按钮。
下方是ureport的报表,由后端生成。
那么我们看看原来的代码实现:
菜单实现
菜单的实现可以说已经非常的不错了,抽象出了一级菜单name,code,icon,二级菜单通过parentCode确定挂载在哪个一级菜单下面,点击时通过routeCode路由到对应查询组件页面。
扩展开发痛点
相信大家看到第三张图,也就是我们已有的报表组件时,就会发现原来实现的问题。
其一:报表数量太大了,后续维护管理,包括项目上二次开发回归代码,都存在巨大的工作量。
其二:新增报表时修改工作量也不小,首先复制一个已经做好的报表,然后在上面修改字段,在路由中添加这个组件。一个报表前前后后修改的工作也不少。
模板生成查询条件
首先需要定义的是我们模板的数据结构,他应该包含报表名字,报表code,报表的url路径,查询字段,报表归属菜单等主要属性。特别需要注意的是下拉框,下拉框树这种查询条件,需要配置字典来源Source。当然还可以包括排序,是否展示等辅助属性。routeCode咱们复用一下原来的实现。新增一个template模板组件,通过配置生成的报表统一路由到这个模板组件展示。
按照这个思路我定义了TemplateItem这个模板数组。同时顺手把title和菜单配置也一起单独拉出来,为了后续进一步优化做准备。
首先要把模板生成的菜单和原有的菜单兼容,通过设置sort属性来排序。这样就可以在不破坏原有实现的基础上追加新功能。
在路由切换时,需要缓存一下点击进入了哪个模板,这样打开模板页面时才能根据缓存的数据生成页面。
模板组件
前面的工作完成后,那么模板组件的实现也是水到渠成了。
根据field生成查询条件,采用flex布局,一行六个条件,自动换行。
除了时间,输入框,下拉框,下拉框树等之前说的查询条件,这边还新加了两个type,space代表一个空的区域,便于调整页面布局,query代表查询和重置两个按钮。
展开来看,里面是各个查询的具体实现,非常的简单,唯一值得一提的是里面的各个code不是写死的,采用queryData[xxxCode]这样的形式去绑定。下拉框内的字典来源基本采用了原有的实现,我这边加了个GetSource的方法,根据Source配置的key获取字典定义。
最后
既然json定义好了,也能根据json生成页面了。那么最后一步显而易见,我们把这个json放到数据库里,在页面打开时通过后端查询获取。那么前端的工作量就彻底消灭了。将来再有新的报表需求,前端版本发布完后不再需要再在前端修改。后端完成报表后根据字段填写json即可实现前端查询条件模板的自动生成。当然我们甚至可以更进一步,提供一个维护页面,通过可视化的界面去输入字段name code,选择source type。这样现场的工程人员可以直接通过操作页面来生成json。
感想
比较大的前端项目也从零开始做了三四个了。在做前端产品的时候,我最大的感受就是我们不能仅仅局限于我们亲自去实现一个页面,也要让没有前端编程经验的人,甚至是没有编程经验的工程人员参与进来。当他们在现场接到需求时,我们可以赋予他们一点实现需求的能力。这样的实现才能说是一个好的实现。
(责任编辑:黄俊飞)推荐内容
- 重构一个可配的查询统计到底有多难?|看热
- 怎么找网站? 世界即时看
- 怎么做炖排骨汤_怎么做炖排骨汤好吃 天
- 天天快看:每天车闻:长安发律师函:银河
- 世界信息:巴克利称詹姆斯曾说要没有韦德
- 环球今亮点!至死不渝的由来简介_至死不
- 特斯拉潮州事故鉴定结果已出
- 国家发改委:查处涉企收费问题7700多个,
- 最新资讯:富士s4530属于单反吗_富士s405
- 煮牛肉放什么调料好吃窍门_煮牛肉放什么
- 金信诺:公司的PCB产品在手机及汽车领域
- 微头条丨今日时讯:震后被遗忘的叙利亚怎
- 大自然中的指南针有哪些?向日葵_大自然中
- 当前热文:易瑞生物:融资净买入131.82万
- 南昌市金融支持水利高质量发展产融对接会
- 一本书是怎样诞生的_快资讯
- 世界视讯!奥司他韦被抢购一空,但它不是
- 春季实用穿搭攻略,灵感在这里~
- 环球百事通!分析师称苹果第二代头显将有
- 万舟
- 【世界热闻】甲流和诺如病毒感染如何预防
- 【速看料】权健产品_关于权健产品的基本
- 乌当区气象台发布大风蓝色预警信号【Ⅳ/
- 邪秽之精套装地下城入口_邪秽之精 世界
- 【全球新要闻】2023年来收益最高的十大基金
- 江城子密州出猎翻译加朗读_江城子密州出
- 全球热资讯!河北唐山古冶区,发生2.2级
- 沛纳海 环球快消息
- 焦点要闻:琼海新型冠状病毒肺炎疫情:2月
- 全球速递!“万名港人游湖北”首发团来了
- 洛杉矶湖人队
- 关于一条热门视频 背后的故事...
- 琴葛蕾-环球今热点
- 环球快消息!02月26日14时河北廊坊昨日累
- 苹果回应偷看密码后再偷iPhone:会高度重视
- 中关村第四小学-世界今日报
- 杨利伟:今年还将有6名航天员执行飞行任
- 观速讯丨传统节日的习俗_传统节日都有哪些
- 中国古典文化大系:周易译注 环球即时
- 环球看点!安德雷·拉吉
- 世界女子九球锦标赛
- 滚动:“吃鸡”幸运轮盘抢先看,继“五福
- 苹果instagram怎么注册不了怎么办_苹果in
- 上海大众golf
- 湖北秭归:电商助力小脐橙成大产业-世界
- 问道手游帮贡有什么用途_问道手游帮派帮
- 临河里社区志愿者服务队
- 今日热讯:同益中(688722)2月24日主力
- 当前动态:乐客影视
- 电梯安全管理员证多少钱_电梯安全管理员证
- 梅西亚斯:变阵后米兰的防守更好了,不过
- 泰拼音的近义词
- 高平子
- 深圳控股1月份合同销售额约3.28亿元
- 当代书画作品专场网络拍卖会(第二〇三期
- 每日聚焦:北京移动积分商城官网_北京移
- 全球热点!王纲球:阴阳k线的形态辨识案
- 精品葡萄酒美食搭配指南_关于精品葡萄酒
- 民间故事:商人放生一只小甲鱼,一百多年
- 德州扒鸡变味了,IPO前频遭股东倒卖_全球
- 【世界热闻】甲流和诺如病毒感染如何预防
- 【速看料】权健产品_关于权健产品的基本
- 乌当区气象台发布大风蓝色预警信号【Ⅳ/
- 邪秽之精套装地下城入口_邪秽之精 世界
- 【全球新要闻】2023年来收益最高的十大基金
- 江城子密州出猎翻译加朗读_江城子密州出
- 全球热资讯!河北唐山古冶区,发生2.2级
- 沛纳海 环球快消息
- 焦点要闻:琼海新型冠状病毒肺炎疫情:2月
- 全球速递!“万名港人游湖北”首发团来了
- 洛杉矶湖人队
- 关于一条热门视频 背后的故事...
- 琴葛蕾-环球今热点
- 环球快消息!02月26日14时河北廊坊昨日累
- 苹果回应偷看密码后再偷iPhone:会高度重视
- 中关村第四小学-世界今日报
- 杨利伟:今年还将有6名航天员执行飞行任
- 观速讯丨传统节日的习俗_传统节日都有哪些
- 中国古典文化大系:周易译注 环球即时
- 环球看点!安德雷·拉吉
- 世界女子九球锦标赛
- 滚动:“吃鸡”幸运轮盘抢先看,继“五福
- 苹果instagram怎么注册不了怎么办_苹果in
- 上海大众golf
- 湖北秭归:电商助力小脐橙成大产业-世界
- 问道手游帮贡有什么用途_问道手游帮派帮
- 临河里社区志愿者服务队
- 今日热讯:同益中(688722)2月24日主力
- 当前动态:乐客影视
- 电梯安全管理员证多少钱_电梯安全管理员证
- 梅西亚斯:变阵后米兰的防守更好了,不过
- 泰拼音的近义词
- 高平子
- 深圳控股1月份合同销售额约3.28亿元
- 当代书画作品专场网络拍卖会(第二〇三期
- 每日聚焦:北京移动积分商城官网_北京移
- 全球热点!王纲球:阴阳k线的形态辨识案
- 精品葡萄酒美食搭配指南_关于精品葡萄酒
- 民间故事:商人放生一只小甲鱼,一百多年
- 德州扒鸡变味了,IPO前频遭股东倒卖_全球
- 农村怎样贷款_农村怎样贷款5万元|最新消息
- 天天时讯:上汽通用:网传内部筹备大裁员
- 信息:河南商丘公交公司:拟于3月1日起暂
- 平阳县_说一说平阳县的简介
- 当前热门:hdmi接口_说一说hdmi接口的简介
- 机构观点:纯碱大涨后面临整数关口缩量调
- 天天看热讯:英雄联盟蜘蛛用什么铭文,LO
- 米利托:卢卡库状态恢复对国米很重要,次
- 周智深一行在岚县调研|天天报资讯
- 李荣浩的《乌梅子酱》被批,这次摊上事了
- 淘宝模特招聘在哪里找_淘宝模特招聘在哪
- 瑞科生物:公司重组双组分新冠肺炎疫苗Re
- 男职工生育保险待遇怎么享受?生育津贴男
- 西南商报:绽放美丽乡村新画卷 阿坝州黑
- iPhone 15 Pro 系列稳了:或配8G运存
- ex600是什么车 全球独家
- 在高粱地里种出丰裕图景(遇见)
- 我为歌狂_说一说我为歌狂的简介_天天日报
- 二月二龙抬头安徽黄山舞起“稻草龙”祈盼
- 天天报道:七世怨侣到底是谁和谁_七世怨侣