上个小节我们定义了后端的Web方法，经过Swagger测试之后，修改角色信息是没问题的，那么本小节咱们去实现修改角色信息的前端JS代码。

一、如何禁止取消角色默认的权限

修改角色信息的时候，弹窗页面里面穿梭框右侧是该角色关联的权限。如果是系统内置角色，默认关联的权限是无法取消的。这个禁止取消选中的功能在前端页面是怎么实现的，这里我们来看看。

穿梭框组件一共需要用到两个JSON数组，一个是左侧列表数组，另一个是右侧选中列表数据。左侧列表数组需要包含选项的完整数据，数组每个元素包含key、label、disabled属性。右侧列表数组只需要记录被选中数据的key值即可。

<el-transfer
	v-model="dataForm.permissions"
	:data="permisionList"
	size="medium"
	:titles="['权限列表', '具备权限']"
	filterable
	filter-placeholder="请输入权限"
/>

例如弹窗页面中的穿梭框，它左侧的数组是permisionList，右侧数组是dataForm.permissions。咱们先来看左侧数组的内容，其中key属性代表复选框的value；label属性代表复选框显示的文字；disabled属性代表该选项被选中后是否禁止取消选中。

[
  { key: 1, label: `权限1`, disabled: disabled },
  { key: 2, label: `权限2`, disabled: disabled },
  { key: 3, label: `权限3`, disabled: disabled },
  { key: 4, label: `权限4`}
]

穿梭框右侧的数组只需要记录被选中选项的key值，例如下面的代码：

[1,2,4]

在role-add-or-update.vue弹窗页面中的init()函数中有这么一段代码，大家一定要认真看一下，它是如何生成左侧数组的。

//查询系统所有权限数据，用于生成左侧数组
that.$http('permission/searchAllPermission', 'GET', null, true, function(resp) {
    let temp = [];
    //遍历所有系统权限
    for (let one of resp.list) {
        let disabled = false;
        //判断要修改的是否为系统内置角色
        if (that.systemic) {
            //如果默认权限数组中含有某个权限，那么disabled设置为true，禁止取消选中
            disabled = defaultPermissions.includes(one.id);
        }
        //生成左侧数组元素值
        temp.push({ key: one.id, label: `${one.moduleName}（${one.actionName}）`, disabled: disabled });
    }
    //更新左侧数组
    that.permisionList = temp;
});

至于说右侧数组如何生成，我们直接从tb_role数据表中查询出来的permissions字段即可，非常简单。

二、显示弹窗页面，传入参数

因为添加角色和修改角色信息共用同一个弹窗页面，弹窗页面的代码我们都已经写完了，所以我们要回到角色管理页面编写JS代码来显示弹窗页面，然后传入要修改的角色ID，让弹窗页面去查询该角色的信息。

<el-button
    type="text"
    size="medium"
    :disabled="!isAuth(['ROOT', 'ROLE:UPDATE']) || scope.row.id == 0"
    @click="updateHandle(scope.row.id, scope.row.systemic)"
>
    修改
</el-button>

role.vue页面上的修改按钮点击事件回调函数是updateHandle()，传入的参数是角色ID和是否为系统内置帐户，我们去声明该函数。

updateHandle: function(id, systemic) {
    this.addOrUpdateVisible = true;
    this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id, systemic);
    });
},

写完代码，同学们就可以运行前后端项目，修改一条角色信息试试。注意，超级管理员角色，既不能删除，也不能修改。