操作員管理接口設(shè)計
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當(dāng)前用戶信息
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邏輯: 查詢Hr 和 角色之間的信息 每個Hr有哪些角色，除了當(dāng)前用戶不查
操作員管理頁面展示
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>用戶狀態(tài): <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>
展示效果
問題Bug解決
還有一個BUG
因:org.apache.ibatis.reflection.ReflectionException:非法重載getter方法，在類class
com.chb.vhr.bean.Hr中啟用屬性類型不明確。這違反了JavaBeans規(guī)范，并可能導(dǎo)致不可預(yù)測的結(jié)果
解決方式
SpringSecurity 實現(xiàn)UserDetails 重寫isEnabled 不能有重復(fù)的可能重復(fù)生成，或者加了個@Data也重復(fù)生成了去掉它就好了
用戶狀態(tài)更新
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>
前端對接
eanbledChange(hr){
console.log(hr)
this.putRequest("/system/hr/",hr).then(resp=>{
if(resp){
this.initHr()
}
})
},
操作員角色更新
具體思路是前端傳遞用戶id和需要更新多個角色id,后端接收用戶id和數(shù)組角色id
先刪除原來的角色和用戶關(guān)聯(lián)，在重新新增角色和用戶關(guān)聯(lián)
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>
前端布局對接后端
加一個彈出框
</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[]數(shù)組存儲了角色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)
})
彈出的時候進行修改角色，關(guān)閉框的時候就更新成功
問題解決
發(fā)現(xiàn)并沒有選擇修改角色，隱藏彈出框會進行網(wǎng)絡(luò)請求。
具體思路
對比兩個數(shù)組是否一樣長
進行遍歷對比兩個數(shù)組的數(shù)據(jù)角色id是否一樣
兩個條件符合那就是用戶并沒有修改數(shù)據(jù)
hidePop(hr){
let roles = []
Object.assign(roles,hr.roles);//拷貝hr.roles數(shù)據(jù)到roles
let fla = false;
if(roles.length != this.selectrole.length){//如果數(shù)組長度不相等說明修改了角色
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每個數(shù)據(jù)進行比較
if(role.id == sr){//如果有相等的
roles.splice(i,1);//數(shù)組中剔除掉
i--;//并且數(shù)組roles減少長度
break//退出當(dāng)前循環(huán)，進入外層循環(huán)，進行遍歷判斷
}
}
}
if(roles.length != 0){//遍歷完后就判斷，roles數(shù)組為0說明數(shù)組數(shù)據(jù)都相等的就不放行，程序結(jié)束
fla=true
}
}
if(fla){
let url ='/system/hr/?hrid='+hr.id
this.selectrole.forEach(r=>{ //selectrole[]數(shù)組存儲了角色id
url+= '&rid='+r
})
this.postRequest(url).then(resp=>{
if(resp){
this.initHr()
}
})
}
},
操作員搜索
HrController
在查詢用戶中加個用戶名參數(shù)
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);
前端接口對接
文章來源：http://www.zghlxwxcb.cn/news/detail-668819.html
操作員刪除
HrController
@DeleteMapping("/{hid}")
public RespBean deleteHr(@PathVariable Integer hid){
if(hrService.deleteHr(hid)==1){
return RespBean.ok("刪除成功");
}
return RespBean.err("用戶狀態(tài)開啟，請先禁用");
}
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>
刪除接口對接前端
文章來源地址http://www.zghlxwxcb.cn/news/detail-668819.html
deleteHr(hr){
this.deleteRequest("/system/hr/"+hr.id).then(resp=>{
if(resp){
this.initHr()
}
})
},
到了這里，關(guān)于操作員管理 微人事 項目 SpringBooot + Vue 前后端分離的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
