Operator Management Interface Design
HrController
@RestController
@RequestMapping("/system/hr")
public class HrController {
@Autowired
HrService hrService;
@GetMapping("/")
public List<Hr> getAllHr(){
return hrService.getAllHr();
}
}
HrService
public List<Hr> getAllHr() {
Hr principal = (Hr) SecurityContextHolder.getContext().getAuthentication().getPrincipal();//获取存储在Security当前用户信息
return hrMapper.getAllHr(principal.getId());
}
HrMapper
List<Hr> getAllHr(Integer id);
<resultMap id="BaseResultMap2" type="com.xyg.pojo.Hr" extends="BaseResultMap">
<collection property="roles" ofType="com.xyg.pojo.Role" >
<result column="id" property="id"></result>
<result column="name" property="name"></result>
<result column="namezh" property="namezh"></result>
</collection>
</resultMap>
<select id="getAllHr" resultMap="BaseResultMap2">
select * from hr LEFT JOIN hr_role as hrr on hr.id=hrr.hrid LEFT JOIN role on role.id = hrr.rid where hr.id!=#{id}
</select>
mysql logic: Query the information between Hr and roles, which roles each Hr has, except for the current user
Operator management page display
SysHr.vue
<template>
<div>
<div style="display: flex ; justify-content: center;margin-top: 20px">
<el-input type="text" placeholder="请输入用户名" style="width: 500px"></el-input>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>
<div style="display: flex; flex-wrap: wrap; justify-content: space-around ;">
<el-card style="width: 400px; margin-top: 20px" 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"></el-button>
</div>
<div>
<img style="width: 120px;height: 120px; border-radius: 60px; margin-left: 120px" :src="hr.userface" :alt="hr.name" :title="hr.name"/>
</div>
<div style="font-family: 幼圆;color:orange;margin-top: 5px;line-height: 30px ">
<div>用户名: {
{
hr.name}}</div>
<div>手机号码： {
{
hr.phone}}</div>
<div>地址: {
{
hr.telephone}}</div>
<div>用户状态: <el-switch
v-model="hr.enabled"
active-text="启用"
inactive-text="禁用">
</el-switch>
</div>
<div>用户角色:
<el-tag type="success" style="margin-left: 8px" v-for="(role,index) in hr.roles" :key="index">{
{
role.namezh}}
</el-tag>
<el-button size="small" style="" icon="el-icon-more"></el-button>
</div>
<div>备注：{
{
hr.remark}}</div>
</div>
</el-card>
</div>
</div>
</template>
<script>
export default {
name: "SysHr",
data(){
return{
Hrs:[]
}
},
mounted(){
this.initHr()
},
methods:{
initHr(){
this.getRequest("/system/hr/").then(resp=>{
if (resp){
this.Hrs=resp
}
})
}
}
}
</script>
<style scoped>
</style>
Display of results
Problem Bug Solved
There is another BUG
Due to: org.apache.ibatis.reflection.ReflectionException: Illegal overloading of the getter method, enabling attribute types in class
com.chb.vhr.bean.Hr is ambiguous. This violates the JavaBeans specification and may lead to unpredictable results
The solution
SpringSecurity implements UserDetails and rewrites isEnabled. It can’t be repeated, or it can be generated repeatedly after adding a @Data, and it’s fine to remove it.
user status update
HrController
@PutMapping("/")
public RespBean updateHr(@RequestBody Hr hr){
if(hrService.updateHr(hr)==1){
return RespBean.ok("更新成功");
}
return RespBean.err("更新失败");
}
HrService
public int updateHr(Hr hr) {
return hrMapper.updateByPrimaryKey(hr);
}
HrMapper
int updateByPrimaryKey(Hr record);
<update id="updateByPrimaryKey" parameterType="com.xyg.pojo.Hr" >
update hr
set name = #{name,jdbcType=VARCHAR},
phone = #{phone,jdbcType=CHAR},
telephone = #{telephone,jdbcType=VARCHAR},
address = #{address,jdbcType=VARCHAR},
enabled = #{enabled,jdbcType=BIT},
username = #{username,jdbcType=VARCHAR},
password = #{password,jdbcType=VARCHAR},
userface = #{userface,jdbcType=VARCHAR},
remark = #{remark,jdbcType=VARCHAR}
where id = #{id,jdbcType=INTEGER}
</update>
Front-end docking
eanbledChange(hr){
console.log(hr)
this.putRequest("/system/hr/",hr).then(resp=>{
if(resp){
this.initHr()
}
})
},
Operator role update
The specific idea is that the front-end passes the user id and needs to update multiple role ids, and the back-end receives the user id and the array of role ids, first
deletes the original role and user association, and then re-adds the role and user association
HrController
@PostMapping("/")
public RespBean updateHrRole(Integer hrid,Integer[] rid){
System.out.println(rid);
if(hrService.updateHrRole(hrid,rid)==rid.length){
return RespBean.ok("更新成功");
}
return RespBean.err("更新失败");
}
HrService
@Transactional
public Integer updateHrRole(Integer hrid, Integer[] rid) {
hrRoleMapper.deleteByHrId(hrid);
return hrRoleMapper.updateHrRole(hrid,rid);
}
HrRoleMapper
void deleteByHrId(Integer hrid);
Integer updateHrRole(@Param("hrid") Integer hrid,@Param("rids") Integer[] rids);
<delete id="deleteByHrId">
delete
from hr_role
where hrid=#{hrid};
</delete>
<insert id="updateHrRole">
insert into hr_role (hrid, rid) values
<foreach collection="rids" item="rid" separator=",">
(#{hrid},#{rid})
</foreach>
</insert>
Front-end layout docking back-end
add a popup
</el-tag>
<el-popover
@hide="hidePop(hr)"
@show="showPop(hr)"
placement="bottom"
title="角色列表"
width="100"
trigger="click">
<el-button slot="reference" size="mini" style="color: red" icon="el-icon-more">
</el-button>
<div>
<el-select v-model="selectrole" multiple placeholder="">
<el-option
v-for="(r,indexk) in allRoles"
:key="indexk"
:label="r.namezh"
:value="r.id">
</el-option>
</el-select>
</div>
</el-popover>
hidePop(hr){
let url ='/system/hr/?hrid='+hr.id
this.selectrole.forEach(r=>{
//selectrole[]数组存储了角色id
url+= '&rid='+r
})
this.postRequest(url).then(resp=>{
if(resp){
this.initHr()
}
})
},
showPop(role){
console.log(role)
let roles=role.roles;
this.selectrole=[]
roles.forEach(r=>{
this.selectrole.push(r.id)
})
Modify the role when it pops up, and the update is successful when the box is closed
problem solved
It is found that there is no option to modify the role, and the hidden pop-up box will make a network request.
Specific ideas
Compare whether the two arrays are the same length,
traverse and compare whether the data role ids of the two arrays are the same
Two conditions are met, that is, the user has not modified the data
hidePop(hr){
let roles = []
Object.assign(roles,hr.roles);//拷贝hr.roles数据到roles
let fla = false;
if(roles.length != this.selectrole.length){
//如果数组长度不相等说明修改了角色
fla=true;
}else {
for(let i=0;i<roles.length;i++){
//
let role=roles[i]
for (let j=0;j<this.selectrole.length;j++){
let sr=this.selectrole[j]//和selectrole每个数据进行比较
if(role.id == sr){
//如果有相等的
roles.splice(i,1);//数组中剔除掉
i--;//并且数组roles减少长度
break//退出当前循环，进入外层循环，进行遍历判断
}
}
}
if(roles.length != 0){
//遍历完后就判断，roles数组为0说明数组数据都相等的就不放行，程序结束
fla=true
}
}
if(fla){
let url ='/system/hr/?hrid='+hr.id
this.selectrole.forEach(r=>{
//selectrole[]数组存储了角色id
url+= '&rid='+r
})
this.postRequest(url).then(resp=>{
if(resp){
this.initHr()
}
})
}
},
operator search
HrController
Add a username parameter to the query user
HrService
public List<Hr> getAllHr(String keyW) {
Hr principal = (Hr) SecurityContextHolder.getContext().getAuthentication().getPrincipal();
return hrMapper.getAllHr(principal.getId(),keyW);
}
HrMapper
List<Hr> getAllHr(@Param("id") Integer id, @Param("keywords") String keywords);
Front-end interface docking
operator delete
HrController
@DeleteMapping("/{hid}")
public RespBean deleteHr(@PathVariable Integer hid){
if(hrService.deleteHr(hid)==1){
return RespBean.ok("删除成功");
}
return RespBean.err("用户状态开启，请先禁用");
}
HrService
public int deleteHr(Integer hid) {
Hr hr = hrMapper.selectByPrimaryKey(hid);
if(!hr.isEnabled()){
return hrMapper.deleteByPrimaryKey(hid);
}
return 0;
}
HrMapper
Hr selectByPrimaryKey(Integer id);
<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
select
<include refid="Base_Column_List" />
from hr
where id = #{
id,jdbcType=INTEGER}
</select>
Delete interface docking front end
deleteHr(hr){
this.deleteRequest("/system/hr/"+hr.id).then(resp=>{
if(resp){
this.initHr()
}
})
},