莱州网站建设哪家好,南京小程序开发,wordpress文章 页面模板下载,微信公众号微网站建设需求#xff1a;需要将ERP的报表数据挪到OA中#xff0c;但是OA表单设计不支持存储过程动态传参#xff0c;所以需要设计一个系统#xff0c;可以手动配置#xff0c;动态显示原本ERP的报表数据#xff0c;ERP报表是存在数据库的视图和存储过程中
思路#xff1a;因为E…需求需要将ERP的报表数据挪到OA中但是OA表单设计不支持存储过程动态传参所以需要设计一个系统可以手动配置动态显示原本ERP的报表数据ERP报表是存在数据库的视图和存储过程中
思路因为ERP数据库只有一个所以不需要考虑多数据源问题当然这个也很好解决动态sql拼接存储过程原本想用临时表的方式解决结果集字段查询和分页问题但是后来觉得太麻烦了选择程序中解决毕竟数据量最多的也就一两万条使用list的截取实现分页
后端spring 前端element
效果截图 管理界面 新增界面 修改界面 视图没有必要参数因为视图可以通过where查询默认都是结果集筛选参数 展示页面效果用于外挂在OA系统里 展示页面只有一个文件动态展示数据根据管理页面中注释字段区分 所有筛选参数和展示字段也都是动态显示
针对不同字段的动态处理 日期 客户和供应商采购员员工销售员都是对应数据的下拉带搜索 后台配置筛选参数的时候字段名叫日期会去调用日期选择字段叫客户会调用所有客户信息选择字段名叫供应商会去调用所有供应商信息字段名带员的人员员工采购员销售员会去调用员工信息选择这些都是前端设置的不想后端在加一个类型字段来区分了直接用名字区分
数据库表结构 主表 从表用于筛选字段 部分代码 页面获取参数信息根据展示页面url的参数
RequestMapping(/getcanshu)public R getcanshu(RequestParam(name) String zhushi){QueryWrapperXinxiShituzhuEntity query new QueryWrapper();query.eq(zhushi, zhushi);XinxiShituzhuEntity zhudata xinxiShituzhuService.getOne(query);Integer zhuid zhudata.getId();QueryWrapperXinxiShitucongEntity congquery new QueryWrapper();congquery.eq(fatherid, zhuid);ListXinxiShitucongEntity congdata xinxiShitucongService.list(congquery);zhudata.setCanshu(congdata);return R.ok().put(data, zhudata);}获取展示页面查询数据
RequestMapping(/getalldatas)public R getalldatas(RequestBody XinxiShituzhuEntity xinxiShituzhu){// 视图if(xinxiShituzhu.getBtype()1){// 拼接sqlString querySql SELECT * FROM xinxiShituzhu.getName() WHERE 11 ;String countsql SELECT COUNT(1) FROM xinxiShituzhu.getName() WHERE 11 ;ListXinxiShitucongEntity congdatas xinxiShituzhu.getCanshu();for(XinxiShitucongEntity data: congdatas){if(!Objects.equals(data.getZdzhi(), ) data.getZdzhi()!null){querySql querySql AND [data.getName()] data.getZdzhi();countsql countsql AND [data.getName()] data.getZdzhi();}}// 添加分页querySql querySql order by [ xinxiShituzhu.getPaixuzd() ] offset (xinxiShituzhu.getPageNum()-1)*xinxiShituzhu.getPageSize() row fetch next xinxiShituzhu.getPageSize() row only;;ListMapString, Object zhudatas xinxiShituzhuService.getAllShituDatas(querySql);// 总数Integer zhucount xinxiShituzhuService.getAllShituCount(countsql);// 获取所有表头用于展示页表头信息ListMapString, Object newdatas new ArrayList();for(MapString, Object data : zhudatas){for(String key: data.keySet()){MapString, Object newmapdata new LinkedHashMap();newmapdata.put(key, key);newdatas.add(newmapdata);}
// Collections.reverse(newdatas);break;}return R.ok().put(count, zhucount).put(data, zhudatas).put(headdata, newdatas);}// 存储过程else{// 拼接sqlString querySql EXEC [xinxiShituzhu.getName()];ListXinxiShitucongEntity congdatas xinxiShituzhu.getCanshu();// 遍历所有参数for(XinxiShitucongEntity data: congdatas){// 视图必要参数添加if(Objects.equals(data.getZdtype(), 1)){if(!Objects.equals(data.getZdzhi(), ) data.getZdzhi()!null){querySql querySql data.getName() data.getZdzhi();}else{return R.error(必要参数不能为空);}}}// 获取所有数据ListMapString, Object zhudatas xinxiShituzhuService.getAllShituDatas(querySql);ListMapString, Object newdatas new ArrayList();// 遍历结果集用于结果集的字段筛选for(MapString, Object dataxx: zhudatas){// 用于标记筛选字段有效性ListBoolean biaojis new ArrayList();for(XinxiShitucongEntity data: congdatas){if(Objects.equals(data.getZdtype(), 2)){if(!Objects.equals(data.getZdzhi(), ) data.getZdzhi()!null){if(ObjectUtil.isNotNull(dataxx.get(data.getName())) dataxx.get(data.getName()).equals(data.getZdzhi())){// 如果被其中一个条件筛选出来就给整条数据标记truebiaojis.add(true);}else{// 如果被其中一个条件没有筛选出来就给整条数据标记falsebiaojis.add(false);}}else{// 筛选条件没有填的是都要筛选的biaojis.add(true);}}}// 只有没有false标记的数据才是被筛选出来的if(!biaojis.contains(false)){newdatas.add(dataxx);}}// 总数Integer zhucount newdatas.size();int pagenum (xinxiShituzhu.getPageNum()-1)*xinxiShituzhu.getPageSize();int pagesize pagenum xinxiShituzhu.getPageSize();// list截取ListMapString, Object newzhudatas CollectionUtil.sub(newdatas, pagenum, pagesize);ListMapString, Object newheaddatas new ArrayList();// 获取表头信息for(MapString, Object data : newzhudatas){for(String key: data.keySet()){MapString, Object newmapdata new LinkedHashMap();newmapdata.put(key, key);newheaddatas.add(newmapdata);}break;}return R.ok().put(count, zhucount).put(data, newzhudatas).put(headdata, newheaddatas);}}sql拼接xml(要用LinkedHashMap类型不然字段顺序不固定数据展示就很难看) select idgetAllShituDatas resultTypejava.util.LinkedHashMap${shitusql}/selectselect idgetAllShituCount resultTypejava.lang.Integer${shitusql}/select主Entity 从Entity
展示页面的vue代码
templatediv classsanfangcangkuliang-mainel-form :modelform :inlinetrue el-form-item :labelitem.zdname v-foritem of canshulist :keyitem.name el-input v-modelitem.zdzhi v-ifitem.zdname!供应商 item.zdname!客户 item.zdname.indexOf(员)-1 item.zdname!日期 :placeholderitem.zdtype1?必填:选填/el-input!-- el-input v-modelitem.zdzhi v-ifitem.zdtype2 placeholder选填/el-input --el-select v-modelitem.zdzhi filterable clearable :placeholderitem.zdtype1?必填:选填 v-ifitem.zdname供应商el-optionv-foritem in gongyingshanglist:keyitem.gys:labelitem.gys:valueitem.gys/el-option/el-selectel-select v-modelitem.zdzhi filterable clearable :placeholderitem.zdtype1?必填:选填 v-ifitem.zdname客户el-optionv-foritem in kehulist:keyitem.kh:labelitem.kh:valueitem.kh/el-option/el-selectel-select v-modelitem.zdzhi filterable clearable :placeholderitem.zdtype1?必填:选填 v-ifitem.zdname.indexOf(员)!-1el-optionv-foritem in renyuanlist:keyitem.yg:labelitem.yg:valueitem.yg/el-option/el-selectel-date-pickerv-modelitem.zdzhitypedatevalue-formatyyyy-MM-dd:placeholderitem.zdtype1?必填:选填v-ifitem.zdname日期/el-date-picker/el-form-itemel-form-itemel-button typeprimary styledisplay:inline-block; width: 80px;height: 40px; clickgetList(1)搜索/el-buttonel-button styledisplay:inline-block; width: 80px;height: 40px; clickchongzhi()重置/el-button!-- el-button typesuccess styledisplay:inline-block; width: 100px;height: 40px; clickgengxin()批量更新/el-button --/el-form-item/el-formel-paginationstylemargin:30pxsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagemapdatas.pageNum:page-sizes[50, 100, 200, 500, 1000, 2000, 5000]:page-sizemapdatas.pageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-paginationel-table stylewidth: 100%; margin-left:40px :datatableDatatemplate v-for(item,index) in mapheadel-table-column :propitem.key :labelitem.key :keyindex/el-table-column/template/el-tableel-paginationstylemargin:30pxsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagemapdatas.pageNum:page-sizes[50, 100, 200, 500, 1000, 2000, 5000]:page-sizemapdatas.pageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div
/template
scriptexport default {data () {return {renyuanlist:[],gongyingshanglist:[],kehulist:[],form:{},maphead:[],mapdatas:{pageNum:1,pageSize:100,},canshulist:[],pageSize:100,currentPage:1,total:0,tableData: [],xiangqingshow:false,xiangqingdatas:[],tableDatazong:[],ckmclist: [],ywymc:}},mounted(){this.getTableCanshu();this.getRenyuanDatas();this.getGyingshangDatas();this.getKehuDatas();},methods: {handleSizeChange(val) {this.mapdatas.pageSize valthis.getList(2);},handleCurrentChange(val) {this.mapdatas.pageNum valthis.getList(2);},getList(type){if(type1){this.mapdatas.pageNum 1this.mapdatas.pageSize 100;}this.mapdatas[canshu] this.canshulistthis.$axios({method:post,url:/renren-fast/xinxi/xinxishituzhu/getalldatas,data:JSON.stringify(this.mapdatas),headers:{Content-Type: application/json}}).then((response) { //这里使用了ES6的语法if(response.data.code0 || response.data.code0){this.tableData response.data.data;this.total response.data.count;this.maphead response.data.headdata;}else{this.$message.error(response.data.msg);this.total 0this.mapdatas.pageNum 1this.mapdatas.pageSize 100;}}).catch((error) {console.log(error) //请求失败返回的数据})},chongzhi(){for(let data of this.canshulist){data.zdzhi}this.mapdatas.pageNum 1this.mapdatas.pageSize 100;this.tableData []this.getList(1)},// 获取表的参数getTableCanshu(){this.$axios({url: /xinxi/xinxishituzhu/getcanshu,method: GET,params: {name: this.$route.query.name}}).then((res) {if(res.data.code0 || res.data.code0){this.mapdatas {btype: res.data.data.btype,deleted: res.data.data.deleted,id: res.data.data.id,name: res.data.data.name,pageNum: res.data.data.pageNum || 1,pageSize: res.data.data.pageSize || 100,paixuzd: res.data.data.paixuzd,reationtime: res.data.data.reationtime,updatetime: res.data.data.updatetime,zhushi: res.data.data.zhushi}this.canshulist res.data.data.canshuif(res.data.data.btype1){this.getList(1);}}})},// 获取人员getRenyuanDatas(){this.$axios({url: /xinxi/xinxishituzhu/getyuangongdatas,method: GET,// params: {// name: this.$route.query.name// }}).then((res) {if(res.data.code0 || res.data.code0){this.renyuanlist res.data.data;}})},// 获取供应商getGyingshangDatas(){this.$axios({url: /xinxi/xinxishituzhu/getgongyingshangdatas,method: GET,// params: {// name: this.$route.query.name// }}).then((res) {if(res.data.code0 || res.data.code0){this.gongyingshanglist res.data.data;}})},// 获取客户getKehuDatas(){this.$axios({url: /xinxi/xinxishituzhu/getkehudatas,method: GET,// params: {// name: this.$route.query.name// }}).then((res) {if(res.data.code0 || res.data.code0){this.kehulist res.data.data;}})},}
}
/script
style scoped
*{margin: 0;padding: 0;
}
/style因为ERP有几十个报表要迁移之前领导都是上级领导想看报表但是他们不使用ERP只使用OA就会我们做进OA报表只有OA实现不了的我才自己写后台接口和前端页面这次说要全部迁移我看一下几十个报表如果像原来那样一个个写后台接口和前端页面的话不知道要写到什么时候于是花了两天写了这个功能出来目前正常使用没问题因为存储过程必须要填参数才可以出数据所以存储过程的展示页面需要输入必填参数以后点查询出数据视图则是可以直接出数据
