ruoyi-vue-pro优化——让菜单支持多个参数，一键直达【经营分析】、【生产报表】、【销售报表】

1、需求痛点

随着数据大屏给管理层带来直观而有丰富的数据信息，大屏报表需求不断增加，公司高层及各部门经理都希望能将经营数据实现数据大屏监控，ruoyi-vue-pro给我们提供基于go-view的数据大屏解决方案，前期序列博文也对其进行了基础和优化，已经可以通过【数据报表->大屏设计器】菜单进入到数据大屏的设计及浏览，然而还差最后一公里------如何通过点击菜单一键直达【生产报表】、【销售报表】、【经营分析】？

2、原因分析

ruoyi-vue-pro 给我们提供了菜单管理功能，但无法配置路由参数，导致无法实现如下效果。

作为数据大屏展示我们可以配置外链菜单路径通过弹窗的方式访问具体的报表，但最为一个整体解决方案，产品组更希望提供这种内联的方式的展示：

3、解决方案

在菜单中增加路由参数字段query，提供一个json字符串配置，在路由初始化时传递给菜单路由。

4、实现步骤

1）数据库菜单表增加query字段

java 复制代码

ALTER TABLE `ruoyi-vue-pro`.`system_menu` 
ADD COLUMN `query` varchar(255) NULL AFTER `path`;

2）后端修改菜单管理

cn/iocoder/yudao/module/system/dal/dataobject/permission/MenuDO.java

cn/iocoder/yudao/module/system/controller/admin/permission/vo/menu/MenuBaseVO.java

中增加query字段

java 复制代码

package cn.iocoder.yudao.module.system.dal.dataobject.permission;

@EqualsAndHashCode(callSuper = true)
public class MenuDO extends BaseDO {

    /**
     * 路由地址
     *
     * 如果 path 为 http(s) 时，则它是外链
     */
    private String path;
    /**
     * 路由参数
     */
    private String query;
    /**
     * 菜单图标
     */
    private String icon;
}



package cn.iocoder.yudao.module.system.controller.admin.permission.vo.menu;


@Data
public class MenuBaseVO {

    @Schema(description = "路由参数对象json字符串", example = "{\"id\":8}")
    @Size(max = 255, message = "路由参数对象json字符串不能超过255个字符")
    private String query;
}

3）前端菜单管理增加query字段

这里比较简单，就不列出代码了

4）后端路由菜单加载VO

cn/iocoder/yudao/module/system/controller/admin/auth/vo/AuthPermissionInfoRespVO.java中的内部静态类MenuVO

java 复制代码

public static class MenuVO {

        @Schema(description = "路由地址,仅菜单类型为菜单或者目录时，才需要传", example = "post")
        private String path;

        @Schema(description = "路由参数对象json字符串", example = "{\"id\":8}")
        private String query;
}

5）前端路由参数反序列化处理

在src\store\modules\permission.js文件中找到如下函数：

function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {

}

具体修改代码如下，注意route.query处理相关的几行代码：

java 复制代码

// 处理 component 属性
    if (route.children) { // 父节点
      if (route.parentId === 0) {
        route.path = startWithSplash(route.path);
        route.component = Layout
      } else {
        route.path = removeStartSplash(route.path);
        route.component = ParentView
      }
    } else { // 根节点
      route.path = removeStartSplash(route.path);
      route.component = loadView(route.component);
    }
    if(route.query){
      try {
        route.query = JSON.parse(route.query);
      } catch (error) {
        console.error(error);
      }
    }

    // filterChildren
    if (type && route.children) {
      route.children = filterChildren(route.children)
    }
    if (route.children != null && route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children, route, type)
      route.alwaysShow = route.alwaysShow !== undefined ? route.alwaysShow  : true
    } else {
      delete route['children']
      delete route['alwaysShow'] // 如果没有子菜单，就不需要考虑 alwaysShow 字段
    }
    // 如果子菜单都隐藏则隐藏

6）前端增加数据大屏通用组件

新建src\views\report\goview\bigscreen.vue页面，内容如下：

java 复制代码

<template>
  <div class="">
    <doc-alert v-if="0" title="大屏设计器" url="https://doc.iocoder.cn/report/screen/" />
    <i-frame v-if="url" :src="url" />
  </div>
</template>
<script>
import iFrame from "@/components/iFrame/index";
import { setTenantId, getTenantId} from "@/utils/auth";
export default {
  name: "BigScreen",
  components: { iFrame },
  props: {
    /* 数据大屏的id */
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      url: undefined,
    };
  },
  mounted(){
    var reportId = this.$route.params.id || this.$route.query.id || this.value
    if(reportId){
      this.url = "http://localhost:3000/chart/preview/"+reportId+"?sso=true"
    } else {
      this.url = "http://localhost:3000/?sso=true";
    }
  }
};
</script>

7）菜单路由配置

上述三个报表的对应的路径如下：

经营分析：http://localhost:3000/chart/preview/6

生产报表：http://localhost:3000/chart/preview/7

销售报表：http://localhost:3000/chart/preview/8

内联菜单及弹窗菜单关键配置如下：

============= 相关博文 ============

ruoyi-vue-pro数据大屏------路由支持history，告别难看的hash路由

ruoyi-vue-pro数据大屏------单点登录，告别手输密码（适用于不带后端服务的情况）

ruoyi-vue-pro优化------如何将一个模块快速变成一个独立的应用进行开发，部署，管理

ruoyi-vue-pro增强------新增通用单点登录模块yudao-module-sso（下载链接在博文末尾）

ruoyi-vue-pro数据大屏优化------在yudao-module-report-app使用yudao-moudle-sso优化单点登录

ruoyi-vue-pro优化------让菜单支持多个参数，一键直达【经营分析】、【生产报表】、【销售报表】

ruoyi-vue-pro优化------模块单独打包，增量更新、部署，告别打包等待，上传等待，节省网络流量

============= 相关博文 ============