2020-09-13 权限组管理

微人事——权限组

 

输入框

 v-model   要在data()  里面声明。 引用的时候也要用   role.name。不可以直接使用

data 是个函数，要加上  data（）

  <div>
                <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" @click="doAddRole" size="small" icon="el-icon-plus">添加角色</el-button>
 </div>

data(){
            return{
                role: {
                    name: '',
                    namezh:''
                  },
            }
}

添加角色

@click="doAddRole"

前端：里要带一个参数用 ， 隔开   this.role 

  doAddRole(){
              if(this.role.name && this.role.zhname){
                  this.putRequest("/system/basic/permiss/",this.role).then(resp=>{
                      this.role.name='',
                      this.role.zhname=''
                      this.initAllRoles();
                  })
              }
            },

后端：

添加方法用  PostMapping

controller  

@PostMapping("")
    public RespBean addRole(@RequestBody Role role){
         if(roleService.addRole(role)==1){
             return RespBean.ok("添加成功!");
         }
        return RespBean.error("添加失败!");
    }

service

 public Integer addRole(Role role) {
        if(!role.getName().equals("ROLE_")){
            role.setName("ROLE_"+role.getName());
        }
        return roleMapper.insert(role);
    }

 

二、查询所有的角色

       1、把查出来角色的在 折叠面板 里面显示，每个角色可以操作的菜单也不同

       2、角色操作菜单，根据 rid 查出 mids 。一个角色拥有操作不同菜单的权利

       3、查出来的可操作菜单，放在 card 显示

       后端：

controller

   @GetMapping("/")
    public List<Role> getAllRoles(){
        return roleService.getAllRoles();
    }

    @GetMapping("/menus")
    public List<Menu> getAllMenus(){
        return menuService.getAllMenus();
    }

    //根据角色id,查询可操作的菜单
    @GetMapping("/mids/{rid}")
    public List<Integer> getMidsByRid(@PathVariable Integer rid){
        return  menuService.getMidsByRid(rid);
    }
   

RoleService   查询所有的角色

      //获取所有的角色
    public List<Role> getAllRoles() {
        return roleMapper.getAllRoles();
    }

RoleMapper

List<Role> getAllRoles();

RoleMapper.xml

<select id="getAllRoles" resultMap="BaseResultMap"  >
    select * from role;
</select>

---

---

MenuService

    public List<Menu> getAllMenus() {
        return menuMapper.getAllMenus();
    }

    public List<Integer> getMidsByRid(Integer rid) {
        return menuMapper.getMidsByRid(rid);
    }

MenuMapper

List<Menu> getAllMenusWithRole();

List<Menu> getAllMenus();

List<Integer> getMidsByRid(Integer rid);

MenuMapper.xml

  <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>

前端：

data(){
            return{
                role:{
                    name:'',
                    nameZh:''
                },
                roles:[],
                allMenus:[],
                activeName:-1,
                selectedMenus:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        }

 

           initAllMenus(){
                this.getRequest("/system/basic/permiss/menus/").then(resp=>{
                    if (resp) {
                        this.allMenus=resp;
                    }
                })
            },
            initRoles(){
                this.getRequest("/system/basic/permiss/").then(resp=>{
                    if (resp) {
                        this.roles=resp;
                    }
                })
            }

 mounted(){
            this.initRoles()
        },

 

 

<el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item title="一致性 Consistency" name="1">
    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
  </el-collapse-item>
</el-collapse>

把文字，在里面放入card , 角色放入card 展示

<el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item :title="r.name" Consistency" name="r.id" v-for="(r,index) in roles" :key="index">
    <div>
        <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text">可访问资源</el-button>
            <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 
                :data="allmenus" 
                ref="tree"
                :key="index"
                node-key="id"
                :props="defaultProps"
                 @node-click="handleNodeClick">
               </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>
    </div>
    <div></div>
  </el-collapse-item>
</el-collapse>

node-key:树是唯一的

ref="tree" 给树木取一个名字

default-checked-keys 预选中的id 默认勾选的节点的 key 的数组

：key="index"   这是哪颗树

---

删除方法

：@click="deleteRole(r)

v-for="(r,index) in roles"

删除是根据 id 删除的，  这里传入的 r ，是上面遍历出来的 

在写方法时，传入的要是 data(){} 中的  role ，路径后面的参数 + role.id

注意这里路径参数是用的 +

后端的是直接在路径上传了一个参数         @DeleteMapping("/role/{rid}")

  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: '已取消删除'
                    });
                });
            },

删除后端

    @DeleteMapping("/role/{rid}")
    public RespBean deleteRoleById(@PathVariable Integer rid){
        if (roleService.deleteRoleById(rid)==1){
            return RespBean.ok("删除成功");
        }
        return RespBean.error("删除失败");
    }

 

 

修改方法，修改的路径是  PutMapping("/")

修改方法是，直接根据rid删除，然后再添加上   rid  mids  , 注意mapper层 里面添加   @param

controller

 @PutMapping("/")
    public RespBean updateMenuRole(Integer rid,Integer [] mids){
        if (menuService.updateMenuRole(rid,mids)){
            return RespBean.ok("更新成功");
        }
        return RespBean.error("更新失败");
    }

service   注意   要加上事务 @Transactional

 @Transactional
    public boolean updateMenuRole(Integer rid, Integer[] mids) {
        menuRoleMapper.deleteByRid(rid);
        Integer result=menuRoleMapper.insertRecord(rid,mids);

        return result==mids.length;
    }

 mapper

Integer insertRecord(@Param("rid") Integer rid,@Param("mids") Integer[] mids);

 在表名后面说明添加哪些字段   menu_role (mid, rid)

<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>

---

---

 根据 rid 查询  ，后端的rid  也是在路径上带的

前端 +rid

       initSelectedMenus(rid){
                this.getRequest("/system/basic/permiss/mids/"+rid).then(resp=>{
                    if (resp) {
                        this.selectedMenus=resp;
                    }
                })
            },

 

  @GetMapping("/mids/{rid}")
    public List<Integer> getMidsByRid(@PathVariable Integer rid){
            return  menuService.getMidsByRid(rid);
    }

 

---

---

 点开哪个面板就加载哪个面板的数据

change(rid)   打印出rid   点开就会显示它的rid

 //折叠面板点击事件，展开时加载数据
            change(rid){
                if (rid){
                    this.initAllMenus();
                    this.initSelectedMenus(rid);
                }
            }