1.创建EmployeeService.java（com.imooc.oa.service）
package com.imooc.oa.service;
import com.imooc.oa.entity.Employee;
import com.imooc.oa.mapper.EmployeeMapper;
import com.imooc.oa.utils.MybatisUtils;
public class EmployeeService {
public Employee selectById(Long employeeId){
Employee employee = (Employee)MybatisUtils.executeQuery(sqlSession -> {
EmployeeMapper mapper = sqlSession.getMapper(EmployeeMapper.class);
return mapper.selectById(employeeId);
});
return employee;
}
}
2.修改 com/imooc/oa/controller/UserInfoServlet.java
package com.imooc.oa.controller;
import com.imooc.oa.entity.Employee;
import com.imooc.oa.entity.Node;
import com.imooc.oa.service.EmployeeService;
import com.imooc.oa.service.RbacService;
import com.imooc.oa.utils.ResponseUtils;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
@WebServlet("/api/user_info")
public class UserInfoServlet extends HttpServlet {
private RbacService rbacService = new RbacService();
private EmployeeService employeeService = new EmployeeService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String uid = request.getParameter("uid");
String eid = request.getParameter("eid");
List<Node> nodes = rbacService.selectNodeByUserId(Long.parseLong(uid));
List<Map> treeList = new ArrayList<>();
Map module = null;
for(Node node : nodes){
if(node.getNodeType() == 1){
module = new LinkedHashMap();
module.put("node", node);
module.put("children", new ArrayList());
treeList.add(module);
}else if(node.getNodeType() == 2){
List children = (List)module.get("children");
children.add(node);
}
}
Employee employee = employeeService.selectById(Long.parseLong(eid));
String json = new ResponseUtils().put("nodeList", treeList).put("employee",employee).toJsonString();
response.setContentType("application/json;charset=utf-8");
response.getWriter().println(json);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
3.修改index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>慕课网办公OA系统</title>
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="assets/element-plus/index.css">
<!-- 引入组件库 -->
<script src="/assets/vue/vue.global.js"></script>
<script src="/assets/element-plus/index.full.js"></script>
<script src="/assets/axios/axios.js"></script>
<style>
.el-header {
background-color: rgb(238, 241, 246);
color: #333;
line-height: 60px;
}
html,body,#app,.el-container {
padding: 0px;
margin: 0px;
height: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div id="app">
<el-container style="height:100%;border:1px solid #eee">
<el-header>
<el-row>
<el-col :span="12">
<span style="font-size: 18px;color:darkcyan">慕课网办公OA系统</span>
</el-col>
<el-col :span="12" style="text-align:right">
<el-dropdown>
<i class="el-icon-s-check" style="font-size:18px;margin-right: 15px">
<span style="margin-right: 15px">{{employee.name}}[{{employee.title}}]</span>
</i>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-on:click="logout">注销</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
</el-header>
<el-container>
<el-aside width="200px" style="max-height:100%;background-color: rgb(238, 241, 246)">
<!--默认展开第一个模块功能-->
<el-menu :default-openeds="['0']">
<template v-for="(n,idx) in nodeList">
<el-submenu :index="idx.toString()">
<template #title><i class="el-icon-s-tools"></i>{{n.node.nodeName}}</template>
<template v-for="func in n.children">
<el-menu-item :index="func.nodeId.toString()" v-on:click="showPage(func.url)">{{func.nodeName}}</el-menu-item>
</template>
</el-submenu>
</template>
</el-menu>
</el-aside>
<el-main>
<iframe id="main" name="main" src="http://www.baidu.com" style="width:100%;height:95%;border: 0px"></iframe>
</el-main>
</el-container>
</el-container>
</div>
<script>
const Main = {
data(){
return {
nodeList:[],
employee:{}
}
}
,methods:{
showPage(url){
document.getElementById("main").src = url;
}
,logout(){
sessionStorage.clear();
window.location.href = "/login.html";
}
}
,mounted(){
const objApp = this;
const eid = sessionStorage.eid;
const uid = sessionStorage.uid;
axios.get("/api/user_info?uid=" + uid + "&eid=" + eid)
.then(function(response){
const json = response.data;
json.data.nodeList.forEach(function (item){
objApp.nodeList.push(item);
})
console.info(objApp.nodeList);
objApp.employee = json.data.employee;
})
}
};
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>
