若依集成积木报表(二),集成报表浏览到页签tab
先看效果!
接上文: 若依vue集成积木报表,加token校验
已经实现了:集成token校验,集成报表设计器
下面,先设计一个报表,格式为主子表。采用API数据源,用若依代码生成器的,获取 表单详细信息的接口。
那么需要
1.传参:传入表单号。
2.定义数据格式转换器。
一、数据格式转换器定义。原接口返回的数据格式为{,,,data:{...List[{},{}]}
而积木报表要求的数据格式为[{},{}],为了省事,积木报表中的API数据源,我用相同的接口,调用不同的转换器处理。
主表API数据集
子表API数据集。
主子表参数配置
下面是两个数据转换器
参考积木的帮助文档:7.API接口数据格式适配 · JimuReport 积木报表 · 看云
主表的数据格式转换器:这里把Params参数去掉了,把List子表数据也去掉了,getToale,getCount,因为不需要分页,删除就行。
。另外jsobject要处理成jsArray返回,否则会报错com.alibaba.fastjson.JSONException: field null expect ‘[‘, but {, pos 1, line 1,
-
@Component("ReportMainParser")
-
public class MyApiDataConvertAdapterMain implements ApiDataConvertAdapter {
-
/**
-
* 返回list数据集,转换成积木报表需要格式[],没有嵌套
-
* 注意:需要json格式,不用data包裹起来了
-
* @param jsonObject 接口数据原始对象
-
* @return
-
*/
-
@Override
-
public String getData(JSONObject jsonObject) {
-
JSONObject jsdata = new JSONObject();
-
String js = jsonObject.toString();
-
JSONArray jsonArray = new JSONArray();
-
if(jsonObject.containsKey("data")){
-
jsdata=(JSONObject) jsonObject.get("data");
-
for (Map.Entry<String, Object> entry : jsdata.entrySet()) {
-
String key = entry.getKey();
-
Object value = entry.getValue();
-
if (key.endsWith("List")) {
-
jsdata.remove(key);
-
jsdata.remove("params");
-
break;
-
} else {
-
continue;
-
}
-
}
-
jsonArray.add(jsdata);
-
String str = jsonArray.toJSONString();
-
return str;
-
}
-
return "";
-
-
}
-
/**
-
* 返回links(没有图表属性可以删掉)
-
* @param jsonObject 接口数据原始对象
-
* @return
-
*/
-
@Override
-
public String getLinks(JSONObject jsonObject) {
-
return jsonObject.containsKey("links") ? jsonObject.get("links").toString() : "";
-
}
-
-
-
}
子表数据格式转换器。因为考虑通用性,所有找jsobject.data中key 结尾为List的object,返回。同样,不需要分页,不要getTotal 和 getCount。
-
"ReportDetailsParser")(
-
public class MyApiDataConvertAdapterDetails implements ApiDataConvertAdapter {
-
/**
-
* 返回list数据集,转换成积木报表需要格式{},没有嵌套
-
* 注意:需要json格式,不用data包裹起来了
-
* @param jsonObject 接口数据原始对象
-
* @return
-
*/
-
-
public String getData(JSONObject jsonObject) {
-
JSONArray rows = new JSONArray();
-
JSONObject jsdata = new JSONObject();
-
if(jsonObject.containsKey("data")){
-
jsdata=(JSONObject) jsonObject.get("data");
-
for (Map.Entry<String, Object> entry : jsdata.entrySet()) {
-
String key = entry.getKey();
-
Object value = entry.getValue();
-
if (key.endsWith("List")) {
-
rows = (JSONArray) jsdata.get(key);
-
break;
-
} else {
-
continue;
-
}
-
}
-
String jsonArray = rows.toJSONString();
-
return jsonArray;
-
}
-
return "";
-
-
}
-
/**
-
* 返回links(没有图表属性可以删掉)
-
* @param jsonObject 接口数据原始对象
-
* @return
-
*/
-
-
public String getLinks(JSONObject jsonObject) {
-
return jsonObject.containsKey("links") ? jsonObject.get("links").toString() : "";
-
}
-
-
-
}
以上,就可以成功解析了。
下面是,如果把设计好的报表装到页签中。
设计好的报表,点预览,就可以获得这个报表的预览编号。如下图,就是报表的访问地址,设计的每个报表,都有一个编号,需要把这个编号 token reportId参数传递过去。
设计一个报表浏览页面,view.vue,跟前面写的差不多。这里我加了一个刷新按钮,考虑后续可以把动态查询条件,放到页面里(积木报表本身也可以!)。
created事件中,先获取参数,this.$route.query.
注意:这里不是.$router,也不是params(一直传不过去,看了原代码才找到原因)
-
<template>
-
<div v-loading="loading" :style="'height:' height" class="app-container">
-
<el-row style="margin-bottom: 10px;">
-
<el-col :span="1.5">
-
<el-button type="primary" plain icon="el-icon-refresh-right" size="mini" @click="handleRefresh">刷新</el-button>
-
</el-col>
-
</el-row>
-
-
<iframe :src="src" id="reportView" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
-
-
-
</div>
-
</template>
-
<script>
-
import {
-
getToken
-
} from '@/utils/auth'
-
import {
-
view
-
} from '@/api/report/jimu'
-
export default {
-
name: "Ureport",
-
data() {
-
return {
-
src: "",
-
height: document.documentElement.clientHeight - 94.5 "px;",
-
loading: true,
-
viewNum: "",
-
reportId: "",
-
};
-
},
-
created() {
-
this.viewNum = this.$route.query.viewNum
-
this.reportId = this.$route.query.reportId
-
view().then(res => {
-
this.src = res "/" this.viewNum "?reportId=" this.reportId "&token=Bearer " getToken();
-
})
-
},
-
methods: {
-
handleRefresh() {
-
document.getElementById("reportView").src = document.getElementById("reportView").src;
-
},
-
},
-
mounted: function() {
-
setTimeout(() => {
-
this.loading = false;
-
}, 230);
-
const that = this;
-
window.onresize = function temp() {
-
that.height = document.documentElement.clientHeight - 94.5 "px;";
-
};
-
}
-
};
-
</script>
刷新可以用:没有找到别的办法,因为Iframe访问的是后端地址,有跨域问题。
document.getElementById("reportView").src = document.getElementById("reportView").src;
配置动态路由。router/index.js
-
// 动态路由,基于用户权限动态去加载
-
export const dynamicRoutes = [
-
{
-
path: '/system/user-auth',
-
component: Layout,
-
hidden: true,
-
permissions: ['system:user:edit'],
-
children: [
-
{
-
path: 'role/:userId(\\d )',
-
component: () => import('@/views/system/user/authRole'),
-
name: 'AuthRole',
-
meta: { title: '分配角色', activeMenu: '/system/user' }
-
}
-
]
-
},
-
{
-
path: '/report',
-
component: Layout,
-
hidden: true,
-
permissions: ['bre:DailyReport:list'],
-
children: [
-
{
-
path: 'breDailyReport',
-
component: () => import('@/views/report/view'),
-
name:'DailyReportReport',
-
meta:{title:'报表-日报表',activeMenu:'/bre/DailyReport'},
-
},
-
]
-
},
在页面中,添加按钮,打开页签,需要把报表编号,id传递过去。
按钮事件代码为
-
/** 显示报表*/
-
handleReport(row){
-
const reportId = row.reportId;
-
const viewNum = "726979918227357696";
-
const params = {viewNum,reportId};
-
this.$tab.openPage('报表-日报表','/report/breDailyReport',params);
-
},
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfffggi
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24