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

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

检查权限

全局守卫：
每次跳转页面，全局守卫逻辑开启。检验权限(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标签：

属性	作用
clearable	是否可清空
disabled	禁用
change	仅在输入框失去焦点、用户按下回车时触发
keyup.enter.native	使用回车触发函数
prefix-icon	输入框头部图标
v-model

• el-upload标签

属性	作用
show-file-list	是否显示已经上传的文件列表
accept	接受的上传文件类型
action	上传的地址
on-success	上传成功时候调用
on-error	上传出错
before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

• 上传文件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。

函数	作用
beforeFileUpload
fileUploadSuccess	像是消息，从服务器查所有员工
fileUploadError	显示消息

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

---