若依集成积木报表(二)，集成报表浏览到页签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,

1.  
   @Component("ReportMainParser")
2.  
   public class MyApiDataConvertAdapterMain implements ApiDataConvertAdapter {
3.  
   /**
4.  
   * 返回list数据集，转换成积木报表需要格式[]，没有嵌套
5.  
   * 注意：需要json格式，不用data包裹起来了
6.  
   * @param jsonObject 接口数据原始对象
7.  
   * @return
8.  
   */
9.  
   @Override
10.  
    public String getData(JSONObject jsonObject) {
11.  
    JSONObject jsdata = new JSONObject();
12.  
    String js = jsonObject.toString();
13.  
    JSONArray jsonArray = new JSONArray();
14.  
    if(jsonObject.containsKey("data")){
15.  
    jsdata=(JSONObject) jsonObject.get("data");
16.  
    for (Map.Entry<String, Object> entry : jsdata.entrySet()) {
17.  
    String key = entry.getKey();
18.  
    Object value = entry.getValue();
19.  
    if (key.endsWith("List")) {
20.  
    jsdata.remove(key);
21.  
    jsdata.remove("params");
22.  
    break;
23.  
    } else {
24.  
    continue;
25.  
    }
26.  
    }
27.  
    jsonArray.add(jsdata);
28.  
    String str = jsonArray.toJSONString();
29.  
    return str;
30.  
    }
31.  
    return "";
32.  
     
33.  
    }
34.  
    /**
35.  
    * 返回links（没有图表属性可以删掉）
36.  
    * @param jsonObject 接口数据原始对象
37.  
    * @return
38.  
    */
39.  
    @Override
40.  
    public String getLinks(JSONObject jsonObject) {
41.  
    return jsonObject.containsKey("links") ? jsonObject.get("links").toString() : "";
42.  
    }
43.  
     
44.  
     
45.  
    }

子表数据格式转换器。因为考虑通用性，所有找jsobject.data中key 结尾为List的object，返回。同样，不需要分页，不要getTotal 和 getCount。

1.  
   @Component("ReportDetailsParser")
2.  
   public class MyApiDataConvertAdapterDetails implements ApiDataConvertAdapter {
3.  
   /**
4.  
   * 返回list数据集，转换成积木报表需要格式{}，没有嵌套
5.  
   * 注意：需要json格式，不用data包裹起来了
6.  
   * @param jsonObject 接口数据原始对象
7.  
   * @return
8.  
   */
9.  
   @Override
10.  
    public String getData(JSONObject jsonObject) {
11.  
    JSONArray rows = new JSONArray();
12.  
    JSONObject jsdata = new JSONObject();
13.  
    if(jsonObject.containsKey("data")){
14.  
    jsdata=(JSONObject) jsonObject.get("data");
15.  
    for (Map.Entry<String, Object> entry : jsdata.entrySet()) {
16.  
    String key = entry.getKey();
17.  
    Object value = entry.getValue();
18.  
    if (key.endsWith("List")) {
19.  
    rows = (JSONArray) jsdata.get(key);
20.  
    break;
21.  
    } else {
22.  
    continue;
23.  
    }
24.  
    }
25.  
    String jsonArray = rows.toJSONString();
26.  
    return jsonArray;
27.  
    }
28.  
    return "";
29.  
     
30.  
    }
31.  
    /**
32.  
    * 返回links（没有图表属性可以删掉）
33.  
    * @param jsonObject 接口数据原始对象
34.  
    * @return
35.  
    */
36.  
    @Override
37.  
    public String getLinks(JSONObject jsonObject) {
38.  
    return jsonObject.containsKey("links") ? jsonObject.get("links").toString() : "";
39.  
    }
40.  
     
41.  
     
42.  
    }

 以上，就可以成功解析了。

下面是，如果把设计好的报表装到页签中。

设计好的报表，点预览，就可以获得这个报表的预览编号。如下图，就是报表的访问地址，设计的每个报表，都有一个编号，需要把这个编号   token reportId参数传递过去。

 设计一个报表浏览页面,view.vue，跟前面写的差不多。这里我加了一个刷新按钮，考虑后续可以把动态查询条件，放到页面里（积木报表本身也可以！）。

created事件中，先获取参数，this.$route.query.

注意：这里不是.$router，也不是params（一直传不过去，看了原代码才找到原因）

1.  
   <template>
2.  
   <div v-loading="loading" :style="'height:' height" class="app-container">
3.  
   <el-row style="margin-bottom: 10px;">
4.  
   <el-col :span="1.5">
5.  
   <el-button type="primary" plain icon="el-icon-refresh-right" size="mini" @click="handleRefresh">刷新</el-button>
6.  
   </el-col>
7.  
   </el-row>
8.  
    
9.  
   <iframe :src="src" id="reportView" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
10.  
     
11.  
     
12.  
    </div>
13.  
    </template>
14.  
    <script>
15.  
    import {
16.  
    getToken
17.  
    } from '@/utils/auth'
18.  
    import {
19.  
    view
20.  
    } from '@/api/report/jimu'
21.  
    export default {
22.  
    name: "Ureport",
23.  
    data() {
24.  
    return {
25.  
    src: "",
26.  
    height: document.documentElement.clientHeight - 94.5 "px;",
27.  
    loading: true,
28.  
    viewNum: "",
29.  
    reportId: "",
30.  
    };
31.  
    },
32.  
    created() {
33.  
    this.viewNum = this.$route.query.viewNum
34.  
    this.reportId = this.$route.query.reportId
35.  
    view().then(res => {
36.  
    this.src = res "/" this.viewNum "?reportId=" this.reportId "&token=Bearer " getToken();
37.  
    })
38.  
    },
39.  
    methods: {
40.  
    handleRefresh() {
41.  
    document.getElementById("reportView").src = document.getElementById("reportView").src;
42.  
    },
43.  
    },
44.  
    mounted: function() {
45.  
    setTimeout(() => {
46.  
    this.loading = false;
47.  
    }, 230);
48.  
    const that = this;
49.  
    window.onresize = function temp() {
50.  
    that.height = document.documentElement.clientHeight - 94.5 "px;";
51.  
    };
52.  
    }
53.  
    };
54.  
    </script>

刷新可以用：没有找到别的办法，因为Iframe访问的是后端地址，有跨域问题。

document.getElementById("reportView").src = document.getElementById("reportView").src;

配置动态路由。router/index.js

1.  
   // 动态路由，基于用户权限动态去加载
2.  
   export const dynamicRoutes = [
3.  
   {
4.  
   path: '/system/user-auth',
5.  
   component: Layout,
6.  
   hidden: true,
7.  
   permissions: ['system:user:edit'],
8.  
   children: [
9.  
   {
10.  
    path: 'role/:userId(\\d )',
11.  
    component: () => import('@/views/system/user/authRole'),
12.  
    name: 'AuthRole',
13.  
    meta: { title: '分配角色', activeMenu: '/system/user' }
14.  
    }
15.  
    ]
16.  
    },
17.  
    {
18.  
    path: '/report',
19.  
    component: Layout,
20.  
    hidden: true,
21.  
    permissions: ['bre:DailyReport:list'],
22.  
    children: [
23.  
    {
24.  
    path: 'breDailyReport',
25.  
    component: () => import('@/views/report/view'),
26.  
    name:'DailyReportReport',
27.  
    meta:{title:'报表-日报表',activeMenu:'/bre/DailyReport'},
28.  
    },
29.  
    ]
30.  
    },

在页面中，添加按钮，打开页签，需要把报表编号，id传递过去。

 按钮事件代码为

1.  
   /** 显示报表*/
2.  
   handleReport(row){
3.  
   const reportId = row.reportId;
4.  
   const viewNum = "726979918227357696";
5.  
   const params = {viewNum,reportId};
6.  
   this.$tab.openPage('报表-日报表','/report/breDailyReport',params);
7.  
   },

这篇好文章是转载于：学新通技术网