Vhr项目分析（三） 菜单初始化 和员工资料查看

vhr项目地址： https://github.com/lenve/vhr
项目作者： https://blog.csdn.net/u0

检查权限

全局守卫：
每次跳转页面，全局守卫逻辑开启。检验权限(to.meta.requireAuth),如若够权限，初始化菜单。如果去chat页面，执行store的updateMsgList函数。

router.beforeEach((to, from, next)=> { 
      if (to.name == 'Login') { 
      next(); return; } var name = store.state.user.name; if (name == '未登录') { 
      if (to.meta.requireAuth || to.name == null) { 
      next({ 
     path: '/', query: { 
     redirect: to.path}}) } else { 
      next(); } } else { 
      initMenu(router, store); if(to.path=='/chat') store.commit("updateMsgList", []); next(); } } ) 

初始化菜单

• get请求“ /config/sysmenu ”，若返回status为200，表示成功，将响应消息格式化，加入router ( router.addRoutes(…) )和store的routes中。最后调用store的connect。

格式化数据

• let { … }=router 是解析赋值。
• require([ … ],resolve) 表示导入组件。

export const formatRoutes = (routes)=> { 
      let fmRoutes = []; routes.forEach(router=> { 
      let { 
      path, component, name, meta, iconCls, children } = router; if (children && children instanceof Array) { 
      //此时递归格式化子菜单内容 children = formatRoutes(children); } let fmRouter = { 
      path: path, component(resolve){ 
      if (component.startsWith("Home")) { 
      //用本来字符串形式的component名字，导入真正的组件 require(['../components/' + component + '.vue'], resolve) } else if (component.startsWith("Emp")) { 
      require(['../components/emp/' + component + '.vue'], resolve) } else if (component.startsWith("Per")) { 
      require(['../components/personnel/' + component + '.vue'], resolve) } else if (component.startsWith("Sal")) { 
      require(['../components/salary/' + component + '.vue'], resolve) } else if (component.startsWith("Sta")) { 
      require(['../components/statistics/' + component + '.vue'], resolve) } else if (component.startsWith("Sys")) { 
      require(['../components/system/' + component + '.vue'], resolve) } }, name: name, iconCls: iconCls, meta: meta, children: children }; fmRoutes.push(fmRouter); }) return fmRoutes; } 

• 设置路由及其包含的子路由
• 用组件名字引入组件

员工资料显示

EmpBasic.vue中，有员工的基本资料。

总体架构

<template> <div> <el-container> <el-header> 上方栏目  
       el-header> <el-main> 主体区域  
        el-main>  
         el-container> <el-form> 表  
          el-form>  
           div>  
            template> 

上方栏目布局

el-header标签内的布局。

<el-header> <div> <el-input> 
       el-input> <el-button>搜索 
        el-button> <el-button><i> 
         i>高级搜索 
          el-button>  
           div> <div> <el-upload> <el-button><i> 
            i>{ 
          {fileUploadBtnText}} 
             el-button>  
              el-upload> <el-button><i> 
               i>导出数据 
                el-button> <el-button>添加员工 
                 el-button>  
                  div>  
                   el-header> 

我的测试代码：

 <el-header style="display: flex;align-content: center"> <div style="display: inline"> <el-input placeholder="搜索在这里o" clearable style="width: 300px" size="mini" prefix-icon="el-icon-search" v-model="inputInfo" > 
       el-input> <el-button type="primary" size="mini">搜索 
        el-button> <el-button type="primary" size="mini">高级搜索 
         el-button>  
          div> <div> <el-upload> <el-button type="primary" size="mini">导入数据 
           el-button>  
            el-upload> <el-button type="primary" size="mini">导出数据 
             el-button> <el-button type="primary" size="mini">添加员工 
              el-button>  
               div>  
                el-header> 

效果如下：

• el-input标签：

• el-upload标签

• 上传文件accept=“application/vnd.ms-excel”，表示只接受excel文件。
• 上传文件标签action=”/employee/basic/importEmp”，对应后端

@RequestMapping(value = "/importEmp", method = RequestMethod.POST) public RespBean importEmp(MultipartFile file) { 
      List<Employee> emps = PoiUtils.importEmp2List(file, empService.getAllNations(), empService.getAllPolitics(), departmentService.getAllDeps(), positionService.getAllPos(), jobLevelService.getAllJobLevels()); if (empService.addEmps(emps) == emps.size()) { 
      return RespBean.ok("导入成功!"); } return RespBean.error("导入失败!"); } 

• 响应输入框的函数: change装配函数keywordsChange(val) ,如果val为空，那么调用loadEmps()，使用get请求” /employee/basic/emp?page= “+this.currentPage + “&size=10 ” + “&keywords=” + …
  查询所有员工信息。如果响应status为200，放入页面的变量里面。 如果在搜索框没有输入信息，那么就显示所有成员资料。
  
  
• “搜索”按钮： 类似前者。
• “导入数据”按钮： 由upload标签处理逻辑。成功则运行fileUploadSuccess；失败运行fileUploadError；上传前运行beforeFileUpload。

• 导出数据按钮： exportEmps()执行，windows.open(…)。
• 添加员工按钮： showAddEmpView()执行，请求maxWorkID，并设置workID。