前端設計
PermissMana.vue
<template>
<div>
<div class="permissManaTool">
<el-input size="small" placeholder="請輸入角色英文名" v-model="role.name">
<template slot="prepend">ROLE_</template>
</el-input>
<el-input size="small" placeholder="請輸入角色中文名" v-model="role.namezh"></el-input>
<el-button type="primary" size="small" icon="el-icon-plus" @click="doAddRole">添加角色</el-button>
</div>
<div style="margin-top: 10px;width: 700px">
<!-- element-ui 折疊面闆 手風琴模式 隻展開一個 activename=-1則不展開 等于1則展開第一個-->
<el-collapse accordion @change="change" v-model="activeName">
<el-collapse-item :title="r.namezh" :name="r.id" v-for="(r,index) in roles" :key="index">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>可通路的資源</span>
<el-button style="float: right; padding: 3px 0;color: red" type="text" icon="el-icon-delete" @click="deleteRole(r)"></el-button>
</div>
<div >
<el-tree
show-checkbox
node-key="id"
ref="tree"
:key="index"
:default-checked-keys="selectedMenus"
:data="allMenus"
:props="defaultProps" >
</el-tree>
<div style="display: flex;justify-content: flex-end">
<el-button size="small" @click="cancelUpdate">取消修改</el-button>
<el-button size="small" type="primary" @click="doUpdate(r.id,index)">确認修改</el-button>
</div>
</div>
</el-card>
</el-collapse-item>
</el-collapse></div>
</div>
</template>
<script>
export default {
name: "PermissMana",
data(){
return{
role:{
name:'',
namezh:''
},
roles:[],
allMenus:[],
activeName:-1,
selectedMenus:[],
defaultProps: {
children: 'children',
label: 'name'
}
}
},
mounted(){
this.initRoles()
},
methods:{
deleteRole(role){
this.$confirm('此操作将永久删除【'+role.namezh+'】角色, 是否繼續?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest("/system/basic/permiss/role/"+role.id).then(resp=>{
if (resp) {
this.initRoles();
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
doAddRole(){
if (this.role.name&&this.role.namezh) {
this.postRequest("/system/basic/permiss/role", this.role).then(resp => {
if (resp) {
this.role.name = '';
this.role.namezh = '';
this.initRoles();
}
})
}else {
this.$message.error("資料不可以為空")
}
},
cancelUpdate(){
this.activeName=-1;
},
doUpdate(rid,index){
let tree = this.$refs.tree[index];
//為true傳回目前被選中節點的key所組成的數組
let selectKeys=tree.getCheckedKeys(true);
let url='/system/basic/permiss/?rid='+rid;
selectKeys.forEach(key=>{
url+='&mids='+key;
})
this.putRequest(url).then(resp=>{
if (resp) {
this.activeName=-1;
}
})
},
initSelectedMenus(rid){
this.getRequest("/system/basic/permiss/mids/"+rid).then(resp=>{
if (resp) {
this.selectedMenus=resp;
}
})
},
//折疊面闆點選事件，展開時加載資料
change(rid){
if (rid){
this.initAllMenus();
this.initSelectedMenus(rid);
}
},
initAllMenus(){
this.getRequest("/system/basic/permiss/menus/").then(resp=>{
if (resp) {
this.allMenus=resp;
}
})
},
initRoles(){
//接收從後端傳過來的role值
this.getRequest("/system/basic/permiss/").then(resp=>{
if (resp) {
this.roles=resp;
}
})
}
}
}
</script>
<style>
.permissManaTool{
display: flex;
justify-content: flex-start;
}
.permissManaTool .el-input{
width: 300px;
margin-right: 10px;
}
</style>
後端端口設計
permissController
@RestController
@RequestMapping("/system/basic/permiss")
public class PermissController {
@Autowired
RoleService roleService;
@Autowired
MenuService menuService;
@GetMapping("/")
public List<Role> getAllRoles(){
return roleService.getAllRoles();
}
@GetMapping("/menus")
public List<Menu> getAllMenus(){
return menuService.getAllMenus();
}
@GetMapping("/mids/{rid}")
public List<Integer> getMidsByRid(@PathVariable Integer rid){
return menuService.getMidsByRid(rid);
}
@PutMapping("/")
public RespBean updateMenuRole(Integer rid,Integer [] mids){
if (menuService.updateMenuRole(rid,mids)){
return RespBean.ok("更新成功");
}
return RespBean.error("更新失敗");
}
@PostMapping("/role")
public RespBean addRole(@RequestBody Role role){
if (roleService.addRole(role)==1){
return RespBean.ok("添加成功");
}
return RespBean.error("添加失敗");
}
@DeleteMapping("/role/{rid}")
public RespBean deleteRoleById(@PathVariable Integer rid){
if (roleService.deleteRoleById(rid)==1){
return RespBean.ok("删除成功");
}
return RespBean.error("删除失敗");
}
}
Service
MenuService
@Service
public class MenuService {
@Autowired
MenuMapper menuMapper;
@Autowired
MenuRoleMapper menuRoleMapper;
public List<Menu> getMenusByHrId() {
return menuMapper.getMenusByHrId(((Hr) SecurityContextHolder.getContext().getAuthentication().getPrincipal()).getId());
}
public List<Menu> getAllMenusWithRole(){
return menuMapper.getAllMenusWithRole();
}
public List<Menu> getAllMenus() {
return menuMapper.getAllMenus();
}
public List<Integer> getMidsByRid(Integer rid) {
return menuMapper.getMidsByRid(rid);
}
@Transactional
public boolean updateMenuRole(Integer rid, Integer[] mids) {
menuRoleMapper.deleteByRid(rid);
Integer result=menuRoleMapper.insertRecord(rid,mids);
return result==mids.length;
}
}
RoleService
@Service
public class RoleService {
@Autowired
RoleMapper roleMapper;
public List<Role> getAllRoles() {
return roleMapper.getAllRoles();
}
public Integer addRole(Role role) {
if (!role.getName().startsWith("ROLE_")){
role.setName("ROLE_"+role.getName());
}
return roleMapper.insert(role);
}
public Integer deleteRoleById(Integer rid) {
return roleMapper.deleteByPrimaryKey(rid);
}
}
Mapper
MenuMapper
List<Menu> getAllMenusWithRole();
List<Menu> getAllMenus();
List<Integer> getMidsByRid(Integer rid);
MenuRoleMapper
Integer insertRecord(@Param("rid") Integer rid,@Param("mids") Integer[] mids);
RoleMapper
List<Role> getAllRoles();
XML
MenuMapper.xml
<resultMap id="MenuWithChildren" type="com.qwl.vhr.model.Menu"
extends="BaseResultMap">
<id column="id1" property="id"/>
<result column="name1" property="name"/>
<collection property="children" ofType="com.qwl.vhr.model.Menu">
<id column="id2" property="id"/>
<result column="name2" property="name"/>
<collection property="children" ofType="com.qwl.vhr.model.Menu">
<id column="id3" property="id"/>
<result column="name3" property="name"/>
</collection>
</collection>
</resultMap>
<select id="getMidsByRid" resultType="java.lang.Integer">
select mid from menu_role where rid=#{rid};
</select>
<select id="getAllMenus" resultMap="MenuWithChildren">
select m1.`id` as id1,m1.`name` As name1,
m2.`id` AS id2,m2.`name` AS name2,
m3.`id` AS id3,m3.`name` AS name3
from menu m1,menu m2,menu m3
where m1.`id`=m2.`parentId` and m2.`id`=m3.`parentId` and m3.`enabled`=true
order by m1.`id`,m2.`id`,m3.`id`
</select>
<select id="getAllMenusWithRole" resultMap="MenuWithRole">
select m.*,r.`id` as rid,r.`name` as rname,r.`nameZh` as rnameZh
from menu m,menu_role mr,role r
where m.`id`=mr.`mid` and mr.`rid`=r.`id` order by m.`id`
</select>
MenuRoleMapper.xml
<delete id="deleteByRid">
delete from menu_role where rid=#{rid}
</delete>
<insert id="insertRecord" parameterType="org.javaboy.vhr.model.MenuRole" >
insert into menu_role (mid, rid)
values <foreach collection="mids" separator="," item="mid">
(#{mid},#{rid})
</foreach>
</insert>
RoleMapper.xml
<select id="getAllRoles" resultMap="BaseResultMap" >
select * from role;
</select>
![8.Home頁的Title制作和下拉菜單[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)