微人事项目学习之操作员管理
学习SpringBoot+Vue前后端分离项目，原项目GitHub地址，项目作者江雨一点雨博客。
前端页面设计
sys/SysHr.vue
<template>
<div>
<div style="margin-top: 10px;display: flex;justify-content: center">
<el-input v-model="keywords" placeholder="通过用户名搜索用户..."
prefix-icon="el-icon-search" style="width: 400px;margin-right: 10px" @keydown.enter.native="doSearch"></el-input>
<el-button icon="el-icon-search" type="primary" @click="doSearch">搜索</el-button>
</div>
<div class="hr-container">
<el-card class="hr-card" v-for="(hr,index) in hrs" :key="index">
<div slot="header" class="clearfix">
<span>{{hr.name}}</span>
<el-button style="float: right; padding: 3px 0;color: red" type="text" icon="el-icon-delete" @click="deleteHr(hr)"></el-button>
</div>
<div>
<div class="img-container">
<img :src="hr.userface" :alt="hr.name" :title="hr.name" class="userface-img"/>
</div>
<div class="userinfo-container">
<div>用户名：{{hr.name}}</div>
<div>手机号码：{{hr.phone}}</div>
<div>电话号码：{{hr.telephone}}</div>
<div>地址：{{hr.address}}</div>
<div>用户状态：<el-switch
v-model="hr.enabled"
active-text="启用"
@change="enabledChange(hr)"
inactive-color="red"
inactive-text="禁用">
</el-switch>
</div>
<div>
用户角色：
<el-tag type="success" size="small" style="margin-right: 4px" v-for="(role,indexj) in hr.roles"
:key="indexj">{{role.nameZh}}</el-tag>
<el-popover
placement="right"
title="角色列表"
@show="showPop(hr)"
@hide="hidePop(hr)"
width="200"
trigger="click">
<el-select v-model="selectedRoles" multiple placeholder="请选择">
<el-option
v-for="(r,indexk) in allRoles"
:key="indexk"
:label="r.nameZh"
:value="r.id">
</el-option>
</el-select>
<el-button icon="el-icon-more" slot="reference" type="text"></el-button>
</el-popover>
</div>
<div>备注：{{hr.remark}}</div>
</div>
</div>
</el-card>
</div>
</div>
</template>
<script>
export default {
name: "SysHr",
data(){
return{
keywords:'',
hrs:[],
allRoles:[],
selectedRoles:[]
}
},
mounted(){
this.initHrs();
},
methods:{
deleteHr(hr){
this.$confirm('此操作将永久删除【'+hr.name+'】, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest("/system/hr/"+hr.id).then(resp=>{
if (resp){
this.initHrs();
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
doSearch(){
this.initHrs();
},
hidePop(hr){
let roles=[];
//把hr.roles复制给roles
Object.assign(roles,hr.roles);
let flag=false;
//原来的角色数量和当前选中的角色数量是否一样
if (roles.length != this.selectedRoles.length){
flag=true;
}else {
//角色数量一样，比较角色是否一样
for (let i = 0; i < roles.length; i++) {
let role=roles[i];
for (let j = 0; j <this.selectedRoles.length; j++) {
let sr=this.selectedRoles[j];
if (role.id==sr){
//删除相同项
roles.splice(i,1);
//假设i为2，移除roles[2]之后，
//roles[3]往前移一位变为roles[2],
//此时外层循环由于i++变为3，开始比较roles[3]
//然而此时这个roles[3]实际上是之前的roles[4]
//之前的roles[3]就被跳过了
//所以需要i-1
i--;
break;
}
}
}
//循坏过后roles是否还有数据
if (roles.length != 0) {
flag=true;
}
}
if (flag) {
let url='/system/hr/roles?hrid=' +hr.id;
this.selectedRoles.forEach(sr=>{
url+='&rids='+sr;
})
this.putRequest(url).then(resp=>{
if (resp) {
this.initHrs();
}
})
}
},
showPop(hr){
this.initAllRoles();
let roles =hr.roles;
//防止历史数据遗留
this.selectedRoles=[];
roles.forEach(r=>{
this.selectedRoles.push(r.id)
});
},
initHrs(){
this.getRequest("/system/hr/?keywords="+this.keywords).then(resp=>{
if (resp) {
this.hrs=resp;
}
})
},
enabledChange(hr){
delete hr.roles;
this.putRequest("/system/hr/",hr).then(resp=>{
if (resp) {
this.initHrs();
}
})
},
initAllRoles(){
this.getRequest("/system/hr/roles").then(resp=>{
if (resp) {
this.allRoles=resp;
}
})
}
}
}
</script>
<style>
.userinfo-container div{
font-size: 12px;
color: #3c57ff;
}
.userinfo-container{
margin-top: 20px;
}
.img-container{
width: 100%;
display: flex;
justify-content: center;
}
.userface-img{
width: 72px;
height: 72px;
border-radius: 72px;
}
.hr-container{
margin-top: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.hr-card{
width: 350px;
margin-bottom: 20px;
}
</style>
后端接口设计
Model
给Hr中的getAuthorities添加@JsonIgnore
@Override
@JsonIgnore
public Collection<? extends GrantedAuthority> getAuthorities() {
List<SimpleGrantedAuthority> authorities =new ArrayList<>(roles.size());
for (Role role : roles) {
authorities.add(new SimpleGrantedAuthority(role.getName()));
}
return authorities;
}
Controller
HrController
@RestController
@RequestMapping("/system/hr")
public class HrController {
@Autowired
HrService hrService;
@Autowired
RoleService roleService;
@GetMapping("/")
public List<Hr> getAllHrs(String keywords){
return hrService.getAllHrs(keywords);
}
@PutMapping("/")
public RespBean updateHr(@RequestBody Hr hr){
if (hrService.updateHr(hr)==1){
return RespBean.ok("更新成功");
}
return RespBean.error("更新失败");
}
@GetMapping("/roles")
public List<Role> getAllRoles(){
return roleService.getAllRoles();
}
@PutMapping("/roles")
public RespBean updateHrRole(Integer hrid,Integer[] rids){
if (hrService.updateHrRole(hrid,rids)){
return RespBean.ok("更新角色成功");
}
return RespBean.error("更新角色失败");
}
@DeleteMapping("/{id}")
public RespBean deleteHrById(@PathVariable Integer id){
if (hrService.deleteHrById(id)==1){
return RespBean.ok("删除成功");
}
return RespBean.error("删除失败");
}
}
Service
HrService
public List<Hr> getAllHrs(String keywords) {
return hrMapper.getAllHrs(HrUtils.getCurrentHr().getId(),keywords);
}
@Transactional
public boolean updateHrRole(Integer hrid, Integer[] rids) {
//先全部删除，再全部添加
hrRoleMapper.deleteByHrid(hrid);
return hrRoleMapper.addRole(hrid,rids)==rids.length;
}
public Integer deleteHrById(Integer id) {
return hrMapper.deleteByPrimaryKey(id);
}
Mapper
HrMapper
List<Role> getHrRolesById(Integer id);
List<Hr> getAllHrs(@Param("hrid") Integer hrid,@Param("keywords") String keywords);
HrRoleMapper
void deleteByHrid(Integer hrid);
Integer addRole(@Param("hrid") Integer hrid,@Param("rids") Integer[] rids);
XML
HrMapper.xml
<select id="getAllHrs" resultMap="HrWithRoles">
SELECT hr.`address`,hr.`enabled`,hr.`id`,hr.`name`,hr.`phone`,hr.`remark`,hr.`telephone`,hr.`userface`,hr.`username`,
r.`id` AS rid,r.`name` AS rname,r.`nameZh`AS rnameZh
FROM hr LEFT JOIN hr_role hrr ON hr.`id`=hrr.`hrid` LEFT JOIN role r ON hrr.`rid`=r.`id`
WHERE hr.`id`!=#{hrid}
<if test="keywords!=null">
and hr.name like concat('%',#{keywords},'%')
</if>
order by hr.id
</select>
<select id="getHrRolesById" resultType="org.javaboy.vhr.model.Role">
SELECT r.* FROM role r,hr_role hrr WHERE hrr.`rid`=r.`id` AND hrr.`hrid`=#{id}
</select>
HrRoleMapper.xml
<delete id="deleteByHrid">
delete from hr_role where hrid=#{hrid}
</delete>
<insert id="addRole">
insert into hr_role (hrid,rid) values
<foreach collection="rids" item="rid" separator=",">
(#{hrid},#{rid})
</foreach>
</insert>