实撸vue-element-admin（二）

之前撸了权限和登陆，这次补一下利用tree控件动态设置权限，和一些单个功能的实现：

一：首先是新增角色，需要说的是，我们之前的思路是登陆之后就绑定了该角色，然后把cookie信息写上来供后端去在请求头里获取role来做角色关系处理！

1.点击确定创建按钮后执行如下操作：

// 添加角色 || 修改角色
    async _addRole() {
      if (!this.roleName) { //检测角色名是否为空
        this.$message({
          message: '角色名不能为空',
          type: 'error'
        })
        return
      }
      console.log(this.id)
      if (this.id) { //判断是否有角色id来判断是在创建还是修改角色，这里是修改
        try {
          await editRole({ role_name: this.roleName, role_id: this.id }) //封装好的请求方法
          this.$message({
            message: '角色更新成功',
            type: 'success'
          })
          this._initRoleList()  //修改完之后重新获取一遍角色列表
          this.handleClose()  //关闭创建角色浮窗
        } catch (e) {
          this.handleClose()
        }
      } else {  //这里是创建（没有角色id）
        try {
          await addRole({ role_name: this.roleName })  //创建新角色
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this._initRoleList()
          this.handleClose()
        } catch (e) {
          this.handleClose()
        }
      }
    },

// 删除角色
    async _deleteRole(id) {
      this.$confirm('确认删除该角色？')
        .then(async _ => {
          await deleteRole({ role_id: id })
          await this._initRoleList()
        })
        .catch(_ => {})
    },

2.获取角色列表函数_initRoleList

// 获取角色列表
    async _initRoleList() {
      const roleList = await fetchRoleList()
      const { data } = roleList
      this.roleList = data
    },
//判断如果角色id和角色列表里的id相同是进行disable
checkDisable(item) {
      if (item.id === getRoleId()) {
        return true
      }
      return false
    },

二：根据角色获取权限tree控件的选中状态

这里是用的wath监控radio的model的方式来判断点击了哪一个角色

watch: {
    'role'(newVal) {
      this.role = newVal
      this._initMenuList() // 根据角色获取菜单并获得默认选中项
    }
  },

// 根据角色获取菜单并获得默认选中项
    async _initMenuList() {
      const menuList = await fetchRoleMenulist({ role_id: this.role }) //获取role权限列表
      const { data } = menuList
      this.menuList = data
      this.checkedMenuList = []
      this._getcheckedMenuIds(this.menuList) //根据从后端获取的权限列表来进行tree控件选装状态设定
    },

// 获得选中菜单项
    _getcheckedMenuIds(menuList) {
      if (menuList[0].checked==1) {
        this.checkedMenuList.push(menuList[0].id)
      }
      for(let i=0;i<menuList.length;i++){
          for(let j=0;j<menuList[i].childs.length;j++){
              for(let b=0;b<menuList[i].childs[j].childs.length;b++){
                  let menuList_3=menuList[i].childs[j].childs[b]
                  if (menuList_3.checked==1) {
                    this.checkedMenuList.push(menuList_3.id)
                  }
              }
          }
      }
    },

三：下面是根据tree控件的修改状态来进行权限的修改：

// 更改权限
    handleChangeRoleMenuList() {
      let menu_num=this.$refs.menuTree.getCheckedNodes(false,true) //利用tree控件的getCheckedNodes方法获取目前被选中的节点所组成的数组
      let menu_id=[]
      for (let i=0; i < menu_num.length;  i++) {
        menu_id.push(menu_num[i].id)
      }
      const menu_ids = menu_id.join() //把通过getCheckedNodes获取到的列表的id进行数组重整
      // const menu_ids = this.$refs.menuTree.getCheckedKeys().join()
      this.$confirm('确认修改该角色权限吗') //利用element ui的confirm
        .then(async _ => {
          await setRoleMenulist({ role_id: this.role, menu_ids: menu_ids }) //给后端把权限修改后的选中id传过去，以供后端进行数据库修改
          await this._initMenuList() //对角色权限tree控件进行重新渲染
        })
        .catch(async _ => {
          await this._initMenuList()
        })
    }

ok，至此，动态设置权限的功能已写完，下次再更新单个功能

实撸vue-element-admin（二）

猜你喜欢