若依框架的菜单管理中增加详情页

Ruoyi 框架生成代码时,各种数据操作都放在一个 dialog 弹出框中,而且只有编辑,没有查看……这很不方便。很多时候我们需要个详情页(只读),对于复杂实体在新建时,那个dialog中的表单也实在是有点过于粗糙了。
但是!是的,总是要说但是的。如果人家都给你做了,要你干嘛呢?框架框架就是个架子嘛。
经过反复研究,终于搞明白若依的菜单管理是如何对应路由的了!!!!!

因为代码生成已经建好了列表页,只需要建立相关的其他页面就好,比如新增,详情什么的。以高校管理为例。

1 新建详情页菜单

需要与列表页同级(下级好像我没测出来)。

级别类型菜单名称显示状态路径(path)组件(component)权限
一级目录信息管理显示info
二级菜单高校列表显示universitycrm-info/university/indexcrm-info:university:list
二级菜单高校详情隐藏university/:universityIdcrm-info/university/detailcrm-info:university:list

这样,实际访问的路径是:

  • 列表页:/info/university
  • 详情页:/info/university/:universityId

配好菜单后,可以先不隐藏,这样可以直接点击看路由是否可行,也可以在地址栏看到真实路径,以便调整修改。

2 修改列表页

修改列表页,增加详情按钮和跳转功能

(1)页面 template 部分

<table>
  <el-table-column>
    <template slot-scope="scope">
      <!-- 详情按钮 -->
      <el-button @click="handleShowDetail(scope.row)">
        详情
      </el-button>
    </template>
  </el-table-column>
</table>

(2)Script 中的 methods 部分

/** 详情按钮操作 */
handleShowDetail(row) {
  const loc = "/info/university/" + row.universityId
  this.$router.push(loc)
}

$router.push(location)中的参数 location在源码中可以看到是 String类型。而且这里是全路径,所以一定要从根路径开始写!!

3 增加详情页

按照前面菜单设定好的路径创建详情页,重点是接收路由中的参数。

created() {
  const universityId = this.$route.params.universityId
  console.log(universityId)
  // 业务处理
},

总结

  1. 根据这个思路,可以灵活搭建各种菜单、功能了。
  2. 实际上如果你不用代码生成,两个页面都自己写也一样的。加油吧~~
  • 4
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 12
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值