若依升级小记04-ruoyi集成积木报表(nice)

介绍

项目中经常有报表,可视化大屏,打印这块的需求,这些手动处理会很麻烦,这次尝试用 积木报表这个组件解决

集成到若依

引入依赖,我们首先在 主Pom中做版本声明,后面我们把这个依赖放到 common 中

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

<repository>
    <id>jeecg</id>
    <name>jeecg Repository</name>
    <url>https://maven.jeecg.org/nexus/content/repositories/jeecg</url>
    <snapshots>
        <enabled>false</enabled>
    </snapshots>
</repository>

需要把 admin 模块中的 spring-boot-devtools 注释掉,可能会出现 aop 报错

security 中排除

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

RuoYiApplication添加积木扫描目录

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

前端控制器

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

配置

@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";
    }
}

前端配置

import request from "@/utils/request";
// 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"
  });
}
// 报表设计页面 tool/jimu/index.vue
<template>

</template>

<script>
// import { getToken } from '@/utils/auth'
import { indexUrl } from '@/api/tool/jimu'
export default {
  name: "Jimu",
  created() {
    indexUrl().then(res => {

      var open = window.open();
      // open.location = res + "?token=" + getToken();
      open.location = res
    })
  }
}
</script>

<style scoped>

</style>

我们这边不需要 token 校验,后续再加上

添加菜单

image-20220627100032401

点击后会跳转到一个新的页面,就是我们的积木报表主页了

image-20220627100104732
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
ruoyi-vue集成积木报表的操作步骤如下: 1. 下载ruoyi-vue源代码:首先,需要在GitHub上下载ruoyi-vue的源代码,可以通过直接下载zip文件或者使用git clone命令来获取代码。 2. 配置环境:下载完成后,需要将代码部署到本地开发环境中,并配置好相关的运行环境,例如安装Java、Node.js和Maven等。 3. 导入项目:使用IDE(如IntelliJ IDEA)打开ruoyi-vue源代码所在的文件夹,并将项目导入到IDE中。 4. 配置数据库:在ruoyi-vue项目中,需要配置数据库连接信息,包括数据库类型、地址、用户名和密码等。可以在项目的配置文件(如application.yml)中进行相应的修改。 5. 运行项目:在IDE中运行ruoyi-vue项目,可以选择运行前端或后端代码。前端代码使用npm命令进行运行,后端代码使用maven命令进行运行。 6. 登录系统:在浏览器中输入对应的URL地址,打开ruoyi-vue系统的登录页面。输入正确的用户名和密码,点击登录按钮进行登录。 7. 集成积木报表:在ruoyi-vue系统的菜单中找到“积木报表”模块,点击进入。在该模块中,用户可以创建、编辑和删除报表,以及进行数据导入等操作。 8. 创建报表:在积木报表模块中,用户可以点击“创建报表”按钮,在弹出的对话框中填写报表的基本信息,如报表名称、描述等。还可以在报表设计器中进行表格或图表的设计和布局。 9. 编辑报表:已创建的报表可以通过点击报表列表中的“编辑”按钮进行修改。用户可以编辑报表的名称、描述和设计布局,并且可以添加、删除和调整报表中的数据字段。 10. 导出报表:在报表编辑完成后,用户可以点击“导出报表”按钮将报表导出为各种格式,例如Excel、PDF或图片等。 总结:通过以上步骤,可以实现在ruoyi-vue系统中集成和操作积木报表,方便用户进行报表的设计、编辑和导出等功能。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值