element Ui树状图控件 spring boot Vue 实现角色授权功能

目录

前言:

二. element ui

 2.1官网提供的核心代码

三.表结构

​编辑 

四.后端

4.1功能分析

4.2实体类

4.3 查询全部权限显示的结果

4.2修改角色权限的后台方法 

 五.vue

5.0代码总览

5.1树形图

 5.2所需要的绑定数据

5.3所需方法


前言:

先上图看效果,页面不是很美观

 

二. element ui

 2.1官网提供的核心代码

<el-tree
  :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">
</el-tree>

<div class="buttons">
  <el-button @click="getCheckedNodes">通过 node 获取</el-button>
  <el-button @click="getCheckedKeys">通过 key 获取</el-button>
  <el-button @click="setCheckedNodes">通过 node 设置</el-button>
  <el-button @click="setCheckedKeys">通过 key 设置</el-button>
  <el-button @click="resetChecked">清空</el-button>
</div>

<script>
  export default {
    methods: {
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 9,
          label: '三级 1-1-1'
        }]);
      },
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3]);
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      }
    },

    data() {
      return {
        data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

 打开官网找到Tree树形控件,第一次应该很难看懂,我来详细跟大家讲解一下

1.

<el-tree
  :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">
</el-tree>

:data="data" 绑定的数据叫data,data可以替换成自己写的集合

node-key里的id对应的是数据库中表的id  

  ref="tree" 表示这个树形图。

:props="defaultProps"  用来设置树形图的属性 说白了 就是设置节点叫啥,子节点是什么集合。估计还是很懵,到时候直接带大家看项目

2.

 

 getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },

将勾选的节点以json集合的形式打印到控制台


      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },

将勾选中的节点以字符串数组的形式打印到控制台

3.

 setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3]);
      },
    

设置选中的节点的key值,将其样式改为勾选。 里面填的是3,就是把id为3的节点设置为选中状态

setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 9,
          label: '三级 1-1-1'
        }]);
      },

通过json的集合类型来设置选中的节点

4. data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],

该示例 树形图绑定的数据类型为data,data数据内部细节为父子孙结构,按照该结构显示到前端页面上树形图的显示是由绑定的数据结构来决定的。

三.表结构

四.后端

4.1功能分析

1.查询所有的权限,将含有所有权限的集合跟树形图绑定

2.查询不同的角色所拥有的不同权限,用集合存储并调用setCheckedNodes()用来设置选中的节点 

3.修改节点功能

删除该角色所拥有的权限

添加该角色的权限

前端勾选节点,将已勾选的节点的id,打包成string数组,转换成字符串,传给服务器。服务器通过对象的属性保存分割后的字符串id。

4.2实体类

package com.dmdd.javasecuritypractice.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;

import java.io.Serializable;
import java.util.List;

/**
 * <p>
 * 
 * </p>
 *
 * @author xray
 * @since 2023-01-31
 */
@Data
public class Permission implements Serializable {

    private static final long serialVersionUID = 1L;

    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;

    private String name;

    private String description;

    private String url;

    private Integer pid;

    private String icon;

    private Integer sort;
    //子权限集合
    @TableField(exist = false)
    private List<Permission> subPermissions;

    @Override
    public String toString() {
        return "Permission{" +
            "id=" + id +
            ", name=" + name +
            ", description=" + description +
            ", url=" + url +
            ", pid=" + pid +
            ", icon=" + icon +
            ", sort=" + sort +
        "}";
    }
}

通过一级权限查询二级权限,实体类里面定义一个集合用来存储二级权限 

4.3 查询全部权限显示的结果

包含所有权限的集合的数据形式 ,将该集合传给前端,树形控件绑定该集合,就会以该方式显示到页面上。

4.2修改角色权限的后台方法 

 //1,2,3,4,5 中间表的 permission_id permission的 id
    @Transactional
    @Override
    public void setRolePermissions(Long roleId, String permissions) {
        ArrayList<RolePermission> rolePermissions = new ArrayList<>();
        //清空该角色权限
//        boolean b = this.removeById(roleId);
        boolean b = this.remove(new QueryWrapper<RolePermission>().lambda().eq(RolePermission::getRoleId, roleId));
        if (b) {
            //将权限依次赋值给rolePermission
            String[] strings = permissions.split(",");
            for (String permissionId : strings) {
                RolePermission rolePermission = new RolePermission();
                //设置当前角色id 权限id id会自增
                rolePermission.setRoleId(roleId);
                rolePermission.setPermissionId(Long.valueOf(permissionId));
                rolePermissions.add(rolePermission);
            }
            //mybats-plus批量添加方法
            boolean b1 = this.saveBatch(rolePermissions);

        }
    }

对中间表进行操作,实现角色权限的修改 

 五.vue

5.0代码总览

<template>
  <div>
<!--    添加角色的树形结构-->
    <!--权限树对话框-->
    <el-dialog title="权限信息" :visible.sync="dialogTreeVisible">
      <el-tree
          :data="allPermissions"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTreeVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRolePermissions()">确 定</el-button>
      </div>
    </el-dialog>


    <el-button type="text" @click="dialogFormVisible= true">新增模块</el-button>
    <el-dialog title="权限操作" :visible.sync="dialogFormVisible">
      <el-form :model="role">
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="role.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="role.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="role.description" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="地区id" :label-width="formLabelWidth">
          <el-input v-model="role.siteId" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
    <el-table
        :data="roles"
        style="width: 100%">
      <el-table-column
          label="id"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="用户名"
          width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>id: {{ scope.row.id }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          label="描述"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="siteId"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.siteId }}</span>
        </template>
      </el-table-column>



      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              @click="openTree(scope.row.id)">修改权限
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    //分页功能
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="loadRole"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "RoleView",
  data() {
    return {
      roles: [],
      role: {},
      current: 1,
      total: 0,
      pageSize: 10,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      dialogTreeVisible: false,
      allPermissions: [],
      rolePermissions:[],
      defaultProps: {
        children: 'subPermissions',
        label: 'name'
      },
      RoleId:-1
    }
  },
  methods:{
    //点击修改角色权限 弹出树形图
    openTree(roleId){
      this.RoleId=roleId;
      this.dialogTreeVisible=true
      //查询所有权限通过角色
      this.axios.get("http://localhost:8080/permissionsByRole")
      .then(result=>{
        console.log("所有权限:"+result)
        if (result.data.status=="OK"){
          this.allPermissions=result.data.data;
          //查询该角色拥有的权限
          this.axios.get("http://localhost:8080/permissionsByRoleId?RoleId="+roleId)
          .then(result=>{
            console.log("当前角色的权限"+result)
            if (result.data.status=="OK"){
              this.rolePermissions=result.data.data;
              //设置勾选效果
              this.$refs.tree.setCheckedNodes(this.rolePermissions);
            }
          })
        }
      })
    },
    //设置角色权限
    setRolePermissions(){
      console.log(this.$refs.tree.getCheckedKeys());
      //将数组转换成字符串
      let keys = this.$refs.tree.getCheckedKeys();
      let keyStr=""
      for (let i=0;i<keys.length;i++){
        keyStr+=keys[i]+",";
      }
      keyStr.substr(0,keyStr.length-1);
      //调用后台接口
      this.axios.post("http://localhost:8080/permission/set-role","roleId="+this.RoleId+"&permissions="+keyStr)
      .then(result=>{
        if (result.data.status=="OK"){
          this.$message(result.data.data);
        }
      })
      this.dialogTreeVisible=false;
    },

    //查询角色表
    loadRole(current,pageSize){
      this.current=current;
      this.axios.get("http://localhost:8080/role/page?current="+this.current+"&pageSize="+this.pageSize)
      .then(result=>{
        console.log(result)
        this.roles=result.data.data.records
        this.total=result.data.data.total
      })
    },
    update() {
      if (this.role.id) {
        //执行修改方法
        this.axios.put("http://localhost:8080/role", this.role)
            .then(result => {
              if (result.data.status == "OK") {
                console.log(result.data)
                this.role={}
                this.dialogFormVisible=false
                this.loadRole(this.current)
              }
            })
      }
      else{
        this.axios.post("http://localhost:8080/role",this.role)
            .then(result=>{
              if (result.data.status=="OK"){
                console.log(result)
                this.role={}
                this.dialogFormVisible=false
                this.loadRole(1)
              }
            })
      }
    },
    //回显
    handleEdit(index,row){
      this.role=JSON.parse(JSON.stringify(row));
      this.dialogFormVisible=true
    },
  },
  mounted() {
    this.loadRole(1)
  }
}
</script>

<style scoped>

</style>

5.1树形图


<!--    添加角色的树形结构-->
    <!--权限树对话框-->
    <el-dialog title="权限信息" :visible.sync="dialogTreeVisible">
      <el-tree
          :data="allPermissions"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTreeVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRolePermissions()">确 定</el-button>
      </div>
    </el-dialog>

树形图控件 

 5.2所需要的绑定数据

 allPermissions: [],
      rolePermissions:[],
      defaultProps: {
        children: 'subPermissions',
        label: 'name'
      },
      RoleId:-1

 defaultProps: {
        children: 'subPermissions',
        label: 'name'
      },

设置树形图父节点下的子集合名字为subPermissions.children属性对应的是父集合下的子集合  

label 表示每个节点的名字 我设置的name表示的是 allPermissions里的对象的name属性值

5.3所需方法

 //点击修改角色权限 弹出树形图
    openTree(userId) {
      this.userId = userId;
      this.dialogTreeVisible = true
      //查询所有权限通过角色
      this.axios.get("http://localhost:8080/selectAllRole")
          .then(result => {
            console.log("所有权限:" + result)
            if (result.data.status == "OK") {
              this.allRoles = result.data.data;
              //查询该角色拥有的权限
              this.axios.get("http://localhost:8080/select-role?userId=" + userId)
                  .then(result => {
                    console.log("当前角色的权限" + result)
                    if (result.data.status == "OK") {
                      this.userRoles = result.data.data;
                      //设置勾选效果
                      this.$refs.tree.setCheckedNodes(this.userRoles);
                    }
                  })
            }
          })
    },
    //设置用户的角色
    setUserRoles() {
      console.log(this.$refs.tree.getCheckedKeys());
      //将数组转换成字符串
      let keys = this.$refs.tree.getCheckedKeys();
      let keyStr = ""
      for (let i = 0; i < keys.length; i++) {
        keyStr += keys[i] + ",";
      }
      keyStr.substr(0, keyStr.length - 1);
      //调用后台接口
      this.axios.post("http://localhost:8080/setRole", "userId=" + this.userId + "&roles=" + keyStr)
          .then(result => {
            // if (result.request.status == 200) {
              this.$message(result.data);
            // }
          })
      this.dialogTreeVisible = false;
    },

点击修改权限的按钮,设置树形图为可见,显示所有节点数据,设置勾选节点是哪些。

1.将后端的通过角色查询到的权限的集合传入前台,通过

this.$refs.tree.setCheckedNodes(this.rolePermissions);
设置勾选节点

其他的大家可以自己去体会,如果完全了解的话,不管是怎么样的数据结构的树形图都会写

最后附上我的另一个通过用户查询角色权限的实现图。

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui是一套基于Vue.jsUI组件库,提供了丰富的组件和工具,方便开发者进行项目开发。其中,下拉多选树状图element-ui中的一个常用组件之一。 使用element-ui的下拉多选树状图组件,可以实现用户通过下拉选择框来选择多个选项,并且这些选项还以树状图的形式展示。这在处理包含层级关系的数据时尤其有用。 首先,在Vue组件中引入element-ui的下拉多选树状图组件,即el-select组件。然后,在组件中定义一个变量来存储用户选中的值,例如selectedOptions。接着,在挂载到DOM之前设置el-select组件的placeholder属性,如:请选择。 接下来,通过调用element-ui提供的API,将需要展示的选项作为树节点传递给el-select组件。可以使用element-ui的el-tree组件来支持树状结构,通过配置tree-props属性来指定树节点的显示字段,例如label和children。在数据源中,可以为每个节点设置一个唯一的key属性。 然后,在el-select组件的v-model属性中绑定selectedOptions变量,以实现选中值的双向绑定。此时,用户可以通过下拉选框选择多个选项,选中的选项会自动存储在selectedOptions变量中。 最后,在Vue组件的template中使用el-select组件来展示下拉多选树状图。设置el-select的filterable属性为true,可以让用户通过输入关键字来筛选选项。使用el-option组件来表示每一个下拉选项。为el-select组件设置多选属性multiple,并通过el-tree组件的子节点slot来显示树状结构。 通过以上步骤,我们就可以使用element-ui快速实现下拉多选树状图。使用这个组件,可以方便地展示具有层级关系的数据,并让用户灵活选择多个选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值