若依框架（ruoyi vue版）集成jeecg积木报表详细开发过程（四）

引言

        若依框架（ruoyi vue版）集成jeecg积木报表详细过程，主要说明jeecg积木报表的集成、jeecg积木报表嵌入若依菜单、token权限控制，以及iframe嵌入表格等内容。

iframe嵌入表格

将我们设计好的表格嵌入到菜单里面，上一篇已经介绍了如何进行token权限控制，现在我们主要要做的是将表格嵌入到我们的菜单里面，通过iframe来实现我们的需求。

---

1、前端配置

新增view.vue文件，新增的文件路径必须在views文件夹中，具体路径待会还会用到的。

代码片段：src用于表格的跳转链接（ eg.），height是表格的显示高度 

新建js文件index.js 

完整代码：

view.vue：

<template>
  <div class="app-container">
    <div v-loading="loading" :style="'height:'+ height">
      <iframe :src="src" frameborder="no" style="width: 100%;height: 100%;" scrolling="auto"/>
    </div>
  </div>

</template>
<script>

import {
  getToken
} from '@/utils/auth';
import {
  viewUrl
} from '@/api/system/jeecg/index';
/** 根据名称筛选部门树 */

export default {
  name: "view",
  data() {
    return {
      src: "",
      height: document.documentElement.clientHeight - 94.5 + "px;",
      loading: true,
      resUrl:`/957514889466417152?token=Bearer ${getToken()}`,
    }
  },
  created() {
     viewUrl().then(res => {
        this.src=`${res}${this.resUrl}`;
      })
  },
}
</script>

 index.js：

export function viewUrl() {
    return request({
        url: '/system/jeecg/getView',
        method: 'get'
    })
}

---

2、后端配置

新建一个controller，其目的主要是返回请求后端地址的前缀以及表格的请求前缀，这样在运行环境或者运行的地址端口发生改变时不影响前端的正常请求。

完整代码：

package com.ruoyi.framework.web.controller;

import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;

@RestController
@RequestMapping("/system/jeecg")
public class ReportController {
    @PreAuthorize("@ss.hasPermi('system:jeecg:view')")
    @GetMapping(value = "/getView")
    public String getView(HttpServletRequest request) {
        String scheme = request.getScheme();
        String serverName = request.getServerName();
        int serverPort = request.getServerPort();
        String baseUrl = scheme + "://" + serverName + ":" + serverPort;
        return baseUrl+"/jmreport/view";
    }

}

---

3、系统配置

打开系统管理-菜单管理，新增一个菜单，填入组件路径（也就是前端配置中的 vue文件的路径），权限字符（后端配置的   @PreAuthorize("@ss.hasPermi('system:jeecg:view')")）中的值填入其中即可

---

 4、效果图