上个小节我们用Swagger测试过了添加新角色，这节课我们来把前端JS代码写一下。

一、熟悉弹窗页面

角色管理页面的弹窗页面是role-add-or-update.vue，添加新角色和修改角色信息都是用这个弹窗页面。下面我们来看看弹窗页面的模型层都定义了什么东西？

data: function() {
    return {
        visible: false,
        //标记角色是否为系统内置，弹窗是否会用到该变量
        systemic: true,
        dataForm: {
            id: null,
            roleName: null,
            //用户选中的权限
            permissions: [],
            desc: null,
            changed: false
        },
        //所有权限
        permisionList: [],
        //该角色拥有的权限
        oldPermissions: [],
        dataRule: {
            roleName: [
                { required: true, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$', message: '角色名称格式错误' }
            ],
            permissions: [
                { required: true, trigger: 'blur', message: '角色没有关联权限' },
                { required: false, trigger: 'change', message: '角色没有关联权限' }
            ]
        }
    };
},

模型层中的systemic变量在修改角色记录的时候会被用到。因为系统内置的角色名称是不能修改的，所以我使用systemic变量来表示要修改的角色是不是系统内置的。结合视图层中的文本框标签，你就能明白该变量到底怎么使用了。

<el-input v-model="dataForm.roleName" size="medium" style="width:50%" :readonly="systemic" clearable />

关于弹窗页面的穿梭框的各种数据，我要详细说一下，大家请看下面的截图。

左侧权限列表中显示的是系统全部的权限列表，这部分数据是从数据库里面查询出来的，大家可以查看后端项目里面PermissionController.java类中的Web方法。前端页面得到系统权限列表之后保存到permisionList变量中，于是穿梭框的左侧列表就显示出数据。你看穿梭框中:data引用的是就是permisionList变量。还有要注意的是v-model属性值是dataForm.permissions，也就是说我们在穿梭框中选中的内容，会保存在模型层的permissions变量中，这个数据将来是要上传的。

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

模型层中oldPermissions变量跟角色修改有关，在init()函数中做了初始化，大家可以去看一下。另外，视图层各种控件完整的定义如下：

<el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    v-if="isAuth(['ROOT', 'ROLE:INSERT', 'ROLE:UPDATE'])"
    :close-on-click-modal="false"
    v-model="visible"
    custom-class="dialog"
    width="692px"
>
    <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="60px">
        <el-form-item label="角色" prop="roleName">
            <el-input v-model="dataForm.roleName" size="medium" style="width:50%" :readonly="systemic" clearable />
            <span class="note">（ 角色名称必须是2~10个字符之间 ）</span>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
            <el-input v-model="dataForm.desc" style="width:50%" size="medium" maxlength="20" clearable />
            <span class="note">（ 备注信息必须是20个字符以内 ）</span>
        </el-form-item>
        <el-form-item label="权限" prop="permissions">
            <el-transfer
                v-model="dataForm.permissions"
                :data="permisionList"
                size="medium"
                :titles="['权限列表', '具备权限']"
                filterable
                filter-placeholder="请输入权限"
            />
        </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
            <el-button size="medium" @click="visible = false">取消</el-button>
            <el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button>
        </span>
    </template>
</el-dialog>

二、引用弹窗页面

在role.vue页面，引用了弹窗页面，所以我们才能调用弹窗页面。

<template>
    <div v-if="isAuth(['ROOT', 'ROLE:SELECT'])">
        ……
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="loadDataList"></add-or-update>
        ……
    </div>
</template>
<script>
import AddOrUpdate from './role-add-or-update.vue';
export default {
    components: {
        AddOrUpdate
    },
    ……
}
</script>

三、提交表单，添加新角色

弹窗页面中的确定按钮绑定了点击事件回调函数，所以我们来把这个函数给声明一下。

<el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button>

dataFormSubmit: function() {
    let that = this;
    this.$refs['dataForm'].validate(valid => {
        if (valid) {
            //因为用户是随机选择权限，所以对选中的权限排序
            that.dataForm.permissions.sort(function(a, b) {
                return a - b;
            });
            //判断用户选择的权限和原来的权限是否一致？把数组转换成字符串，简化比较两个数组是否一致
            if (that.dataForm.permissions.join() != that.oldPermissions.join()) {
                that.dataForm.changed = true;
            } else {
                that.dataForm.changed = false;
            }
            that.$http(`role/${!that.dataForm.id ? 'insert' : 'update'}`, 'POST', that.dataForm, true, function(
                resp
            ) {
                if (resp.rows == 1) {
                    that.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1200
                    });
                    that.visible = false;
                    that.$emit('refreshDataList');
                } else {
                    that.$message({
                        message: '操作失败',
                        type: 'error',
                        duration: 1200
                    });
                }
            });
        }
    });
}

上面代码关于oldPermissions变量的语句，有的同学可能看不明白是什么意思。大家看下面的截图，在弹窗页面里面我们可以修改角色的名字、备注和关联的权限。如果只是修改角色名字或者备注，是不需要把该角色关联的所有用户都踢下线的，毕竟角色的权限没有改变。只有角色权限改变的时候，才需要后端程序把角色关联的所有用户都踢下线。

that.dataForm.permissions.join() != that.oldPermissions.join()这个表达式比较的是用户选择的权限是否等于角色原来拥有的权限。如果不一致，说明用户修改了角色关联的权限，需要往dataForm中添加一个changed变量通知后端程序有没有修改权限。后端的Java代码也会根据这个changed值判断要不要踢用户下线。

四、显示弹窗页面

在role.vue页面中，声明新增按钮的点击事件回调函数，然后大家就可以调试添加新角色功能了。

<el-button
    size="medium"
    type="primary"
    :disabled="!isAuth(['ROOT', 'ROLE:INSERT'])"
    @click="addHandle()"
>
    新增
</el-button>

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