当前位置:   article > 正文

VUE+Element-ui 后台管理平台给角色分配权限详解_角色权限 ui

角色权限 ui

VUE+Element-ui 后台管理平台给角色分配权限详解

给角色分配权限,哇塞,这个真的对初学者很难啊,相当棘手,思虑再三,终于出来了,下面就是详细步骤。
一、页面信息
下面展示一些 弹窗部分页面表单信息

//这里是打开弹窗的页面按钮信息
<el-table-column label="操作">
   <template slot-scope="scope">
   //获取点击分配权限的当前行信息
      <el-button type="primary" round @click="openPowerDialog(scope.row)">分配权限</el-button>
    </template>
</el-table-column>
//这里是弹窗的信息
<el-dialog
    title="编辑角色权限"
    :visible.sync="dialogVisible">
    <el-tree
    :data="ColumnList"
    show-checkbox
    node-key="auth_id"
    ref="tree"
    :default-expanded-keys="defaultTds"
    :default-checked-keys="defaultTds"
    :props="defaultProps">
    </el-tree>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeColumn">确 定</el-button>
    </div>
    </el-dialog>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

备注::data :是数据存储区域,也是页面数据来源
show-checkbox:是否被选中
node-key=“auth_id”:我们页面会包含一些已经选中的数据,node-key是必需设置项,是我们后端数据中的一个字段,且该字段是在数据中是唯一的。
:default-expanded-keys:展开时的默认节点
:default-checked-keys:默认选中的节点
:props=“defaultProps”:指定标签节点信息,我这里的值为:

defaultProps: {
            label: 'auth_name',
            children: 'children',
        },
  • 1
  • 2
  • 3
  • 4

二、js部分
1.引入接口

import {
    getColumnApi,
    putRolePowerApi
} from "@/api"
  • 1
  • 2
  • 3
  • 4

2、在data中定义信息

data() {
      return {
        // 当前默认权限
        defaultTds:[],
        selectRole:[],
        // 角权限色弹窗信息包
        ColumnList:[],
        defaultProps: {
            label: 'auth_name',
            children: 'children',
          
        },
        // 分配权限弹窗信息
        dialogVisible: false,
        // 修改信息弹窗
        row:{},
        tableData: [],
        loading: true,
        // 弹窗信息
        dialogFormVisible: false,
        form: {
            role_id:"",
            role_name:'',
            role_describe:''
        }
     }
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

3、点击修改弹窗按钮js

// 打开分配角色权限弹窗获取信息
        openPowerDialog(row){
            this.selectRole.role_id = row.role_id
            getColumnApi().then(res=>{
                this.ColumnList = res.data
                // 默认显示已有的权限
                let tmp = row.auth_ids_son ? row.auth_ids_son.split(','): []
                this.defaultTds = tmp
                console.log(this.defaultTds)
            })
            // 显示弹窗
            this.dialogVisible = true
        },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

4、选择好权限后,点击确定部分的js

// 确定修改权限,权限状态切换
        changeColumn(){
            var temId = []
            let temIdson = []
            // console.log(this.$refs.tree.getCheckedNodes());
            if(this.$refs.tree.getCheckedNodes()){
                this.$refs.tree.getCheckedNodes().forEach(firstItem => {
                    // console.log(firstItem)
                    if(firstItem.auth_id) temId.push(firstItem.auth_id)
                    if(firstItem.auth_id && firstItem.auth_pid != 0) temIdson.push(firstItem.auth_id)
                    if(firstItem.children){
                        firstItem.children.forEach((twoItem)=>{
                            if(twoItem.auth_id) temId.push(twoItem.auth_id)
                            if(twoItem.auth_id && twoItem.auth_pid !=0) temIdson.push(twoItem.auth_id)
                        })
                    }
                });
            }
            // console.log(temId)
            // console.log(temIdson)
            // // ES6去重
            // console.log([...new Set(temId)])
            // console.log([...new Set(temIdson)])
            let auth_ids = [...new Set(temId)].join(',')
            let auth_ids_son = [...new Set(temIdson)].join(',')
            putRolePowerApi({
                role_id:this.selectRole.role_id,
                auth_ids:auth_ids,
                auth_ids_son:auth_ids_son
            })
            .then(res=>{
                console.log(res)
                if(res.meta.state == 200){
                    this.$message.success("操作成功")
                    this.initData()
                    this.dialogVisible = false
                }else{
                    this.$message.error(res.meta.msg)
                }
            })

        },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

bingo

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/903340
推荐阅读
相关标签
  

闽ICP备14008679号