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。

---