2020迅速Vueの家族のバケットを開発するために、ゼロベースは電気事業管理システム（要素-UI）[割り当て権限]を開発

記事のディレクトリ

1はじめに
2割り当てる権限

要求許可データに2.1ポップアップダイアログボックスと割り当て権限
2.2初期設定と使用エル・ツリーツリーコントロール
ツリーコントロールの効果を示す2.3の最適化
既存の権限の2.4分析はデフォルトでチェックされ、アイデアの負荷が既存の権利の役割を達成するために
2.5リセットdefKeys配列は、ダイアログボックスを閉じます
機能を完了するに割り当てる権限に2.6 APIの呼び出し

3.おわりに
〜Vue❤が列を学ぶ入るためにクリック

1はじめに

寒假是用来反超的！Vueのは、学ぶために一緒に入れ、彼は教えることのように、このブログは〜、権利の割り当てについてです

2割り当てる権限

要求許可データに2.1ポップアップダイアログボックスと割り当て権限

		 //展示分配权限的对话框
        async showSetRightDialog(){
            //获取到所有权限的数据
            const {data:res}=  await this.$http.get('rights/tree')
            if(res.meta.status != 200) return this.$message.error('获取权限数据失败！')
            // 获取到的权限数据保存到list中
            this.rightsList = res.data
            console.log(this.rightsList)
            this.setRightDialogVisible=true
        }

ここに画像を挿入説明

2.2初期設定と使用エル・ツリーツリーコントロール

 <!-- 显示树形控件 -->
    <el-tree :data="rightsList" :props="treeProps" ></el-tree>

			// 树形控件的属性绑定对象
            treeProps:{
                label: 'authName',
                children: children
            }

ここに画像を挿入説明

ツリーコントロールの効果を示す2.3の最適化

ここに画像を挿入説明

既存の権限の2.4分析はデフォルトでチェックされ、アイデアの負荷が既存の権利の役割を達成するために

		 //展示分配权限的对话框
        async showSetRightDialog(role){
            //获取到所有权限的数据
            const {data:res}=  await this.$http.get('rights/tree')
            if(res.meta.status != 200) return this.$message.error('获取权限数据失败！')
            // 获取到的权限数据保存到list中
            this.rightsList = res.data
            //console.log(this.rightsList)
            
            //递归获取三级节点的id
            this.getLeafKeys(role, this.defKyes)

            this.setRightDialogVisible=true
        },
        // 通过递归的方式，获取角色下所有三级权限的id并保存在defKeys数组中
        getLeafKeys(node ,arr){
            // 如果当前node节点不包含children属性，则是三级节点
            if(!node.children){
                return arr.push(node.id)
            }
            node.children.forEach(item =>
                this.getLeafKeys(item,arr))
        }

ここに画像を挿入説明

2.5リセットdefKeys配列は、ダイアログボックスを閉じます

キャッシュの現象は、我々は、配列を空にする必要があるので、あなたは、ダイアログボックスが一度空にしなければならない閉じたときに、ボタンをクリックすると表示されます

ここに画像を挿入説明

	// 监听分配权限对话框的关闭事件
        setRightDialogClosed(){
            this.defKyes = []
        }

機能を完了するに割り当てる権限に2.6 APIの呼び出し

 		// 监听分配权限对话框的关闭事件
        setRightDialogClosed(){
            this.defKyes = []
        },
        // 点击确定按钮为角色分配权限
        async allotRights(){
            const keys = [
                ...this.$refs.treeRef.getCheckedKeys(),
                ...this.$refs.treeRef.getHalfCheckedKeys()
            ]
            //console.log(keys)
            // 以 `,` 分割的权限 ID 列表（获取所有被选中、叶子节点的key和半选中节点的key, 包括 1，2，3级节点）
            const idStr = keys.join(',')

            const {data:res} = await this.$http.post('roles/'+this.roleId+'/rights',{rids:idStr})
            console.log(res)
                if(res.meta.status != 200) return this.$message.error('更新权限失败！')

            this.$message.success('分配权限成功!')
            this.getRolesList()
            // 将对话框隐藏
            this.setRightDialogVisible = false
        }