ruo-vue集成积木报表

1. 引入依赖

<!-- JimuReport -->
<dependency>
    <groupId>org.jeecgframework.jimureport</groupId>
    <artifactId>jimureport-spring-boot-starter</artifactId>
    <version>1.5.0-beta</version>
</dependency>

2.SecurityConfig 排除权限拦截

.antMatchers("/jmreport/**").anonymous()

3. RuoYiApplication添加积木扫描目录

@SpringBootApplication(exclude = { DataSourceAutoConfiguration.class, MongoAutoConfiguration.class },scanBasePackages = {"org.jeecg.modules.jmreport","com.ruoyi"})

4. yml中配置报表访问地址

注意: 这里配置的报表地址是ruoyi-vue后端服务地址, 并不是vue前端代理地址

# 项目相关配置
ruoyi:
  # 积木报表访问地址
  reporturl: http://127.0.0.1:8080

5. JimuController前端跳转控制器

@RestController
@RequestMapping("/report/jimu")
public class JimuController {
    @Autowired
    Environment environment;

    @GetMapping("/index")
    @PreAuthorize("@ss.hasPermi('report:jimu:index')")
    public String index(){
        // String hostIp = IpUtils.getHostIp();
        return environment.getProperty("ruoyi.reporturl")+"/jmreport/list";
    }

    @GetMapping("/view")
    @PreAuthorize("@ss.hasPermi('report:jimu:view')")
    public String view(){
        return environment.getProperty("ruoyi.reporturl")+"/jmreport/view";
    }
}

6. Token鉴权

@Service
public class JimuReportTokenService implements JmReportTokenServiceI {

    @Autowired
    TokenService tokenService;

    @Override
    public String getUsername(String s) {
        LoginUser loginUser = tokenService.getLoginUser(s);
        return loginUser.getUsername();
    }

    @Override
    public Boolean verifyToken(String s) {
        if (s != null && s.length() > 0) {
            return true;
        }
        return false;
    }

    @Override
    public String getToken(HttpServletRequest request) {
        String token = request.getParameter("token");
        String jmToken = request.getHeader("token");
        if (token == null || token.length() == 0) {
            token = jmToken;
        }
        LoginUser loginUser = tokenService.getLoginUser(token);
        if (loginUser != null) {
            return token;
        }
        return "";
    }

    @Override
    public String getToken() {
        return null;
    }

    @Override
    public Map<String, Object> getUserInfo(String token) {
        return null;
    }

    @Override
    public HttpHeaders customApiHeader() {
        return null;
    }
}

7. JimuInterceptor报表查看权限控制拦截器

根据业务需求进行拦截处理

@Component
public class JimuInterceptor implements HandlerInterceptor {

    @Autowired
    private TokenService tokenService;
    @Autowired
    private RoomService roomService;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object arg2) throws Exception {
        response.setContentType("text/html; charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        boolean roomValidation = false;
        String token = request.getParameter("token");
        LoginUser loginUser = tokenService.getLoginUser(token);
        String roomId = request.getParameter("roomId");
        SysUser user = loginUser.getUser();
        // 系统管理员
        if (user.isAdmin()) {
            return true;
        }
        // 机房集合
        List<Room> rooms = roomService.selectRoomByRoles(user.getRoles());

        for (int i = 0; i < rooms.size(); i++) {
            Room room = rooms.get(i);
            if (room.getId() == Integer.parseInt(roomId)) {
                roomValidation = true;
                break;
            }
        }

        if (loginUser != null && roomValidation) {
            return true;
        }

        response.getWriter().println("参数错误或无权访问数据~");
        return false;
    }
}

8. vue前端

// api 配置
// 首页
export function indexUrl(query) {
  return request({
    url: '/report/jimu/index',
    method: 'get'
  })
}
// 预览
export function view(query) {
  return request({
    url: '/report/jimu/view',
    method: 'get'
  })
}

// 报表设计页面 jimu.vue
<template>

</template>

<script>
import { getToken } from '@/utils/auth'
import { indexUrl } from '@/api/report/jimu'
export default {
  name: "Jimu",
  created() {
    indexUrl().then(res => {
      var open = window.open();
      open.location = res + "?token=" + getToken();
    })
  }
}
</script>

<style scoped>

</style>

// 根据业务跳转报表查看页面
view().then(url => {
   // 系统参数获取报表ID
   this.getConfigKey("ai_report_" + v.id).then(response => {
     self.report.aiReportId = response.msg;
     let open = window.open();
     open.location = url + '/' + self.report.aiReportId + '?roomId='+ v.id
       + '&roomName=' + v.roomName + "&token=" + getToken();
   });
 });

更多信息请参考 积木官网文档:http://report.jeecg.com/2302148