首先说需要实现的功能:点击新增按钮,跳转至新增排班周期的页面,并且将部门ID、工种ID、线路所ID包装进query,通过动态路由传递到上述页面中。
一、新增按钮页面
function handleAddPaiBan(row) {
reset();
const buMenID = user.value.deptId;
const gongZhongID = row.GongZhongID;
const xianLuSuoID = row.XianLuSuoID;
router.push({
path:"/RYQD/BZ-Add/GWBZ/",
query:{
buMenID: buMenID,
gongZhongID: gongZhongID,
xianLuSuoID: xianLuSuoID
}
});
};
二、定义动态路由
在ruoyi-ui\src\router\index.js的dynamicRoutes中定义
{
path: '/RYQD/BZ-Add/',
component: Layout,
hidden: true,
permissions: ['CZGB'],
children: [
{
path: 'GWBZ',
component: () => import('@/views/RYQD/PBZQ/GWBZ'),
name: 'BanZhiAdd',
query: '{"buMenID": buMenID, "gongZhongID": gongZhongID, "xianLuSuoID": xianLuSuoID}',
meta: { title: '新增岗位班制', activeMenu: '/RYQD/PBZQ' }
}
]
},
注意这里的path以及子路由的path要和router.push中的对应,权限字段自己定义,将新页面的前端路径导入到component中,query与router需要传递的参数对应,name与新页面中的脚本名称对应,title是新页面的标题,activemenu是上级路径
<script setup name="BanZhiAdd">
三、获取参数
用route.query获取参数即可,记得导入useRoute函数
const router = useRouter();
const buMenID = route.query.buMenID