若依框架的菜单管理中增加详情页 | 您所在的位置:网站首页 › 厦门20日新增详情信息 › 若依框架的菜单管理中增加详情页 |
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 部分 详情(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) // 业务处理 },总结 根据这个思路,可以灵活搭建各种菜单、功能了。实际上如果你不用代码生成,两个页面都自己写也一样的。加油吧~~ |
CopyRight 2018-2019 实验室设备网 版权所有 |