By的博客
0%

10.角色资源关系管理

发表于 更新于 分类于

这个主要是给不同角色分配不同的资源。

角色展示

角色的展示采用了ElementUI中的Collapse 折叠面板，并且采用了手风琴模式，即一次只打开一个角色，如下图：

img

角色中资源的展示则采用了ElementUI中的树形控件，管理员可以直接直接点击勾选，然后点击修改按钮，进行资源的分配。

核心思路

核心代码如下：

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
"activeColItem" accordion style="width: 500px;" @change="collapseChange">
for="(item,index) in roles" :title="item.nameZh" :name="item.id" :key="item.name">
    class="box-card">
    
"header">
        可访问的资源</span>
        
                    style="color: #f6061b;margin: 0px;float: right; padding: 3px 0;width: 15px;height:15px"
                    icon="el-icon-delete" @click="deleteRole(item.id,item.nameZh)">el-button>
    </div>
    

        
                :key="item.id"
                :data="treeData"
                :default-checked-keys="checkedKeys"
                node-key="id"
                ref="tree"
                show-checkbox
                highlight-current
                @check-change="handleCheckChange">
        el-tree>
    </div>
    

        取消修改el-button>
        "primary" size="mini" @click="updateRoleMenu(index)">确认修改</el-button>
    div>
    </el-card>
el-collapse-item>
</el-collapse>

核心思路如下：

  1. 通过for循环渲染出el-collapse-item，将角色展示出来。
  2. el-collapse-item的内容就是一个树形控件，很明显，树形控件的数量和el-collapse-item的数量是一样多的，但是考虑到el-collapse-item使用了手风琴模式，即一次只有一个折叠面板被打开，因此树形控件的数据源只有一个，即多个树形控件共用一个数据源，为了避免数据紊乱，我采取了这样的数据加载方式：当用户每次点击折叠面板的时候，我都根据当前折叠面板所对应的角色去查询该角色所对应的资源，同时也查询所有的资源，将查到的数据交给树形控件去展示。这样可以避免为每一个树形控件都准备一份数据。