1、用户列表页面,点击分配角色按钮,弹出分配角色对话框

给分配角色按钮添加点击事件,并传递当前行的信息:

<!--分配角色按钮-->
<el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
      <el-button type="warning" size="mini" icon="el-icon-setting" @click="setRole(scope.row)"></el-button>
</el-tooltip>
setRole事件:
// 展示分配用户角色的对话框
setRole(userInfo) {
      this.setRoleDialogVisible = true
}

添加分配角色的对话框:

<!--分配用户角色的对话框-->
<el-dialog title="分配角色" :visible.sync="setRoleDialogVisible"
      width="50%">
      <!--内容主体区域-->
      <div>
        <p>当前的用户:{{userInfo.username}}</p>
        <p>当前的角色:{{userInfo.role_name}}</p>
      </div>
      <!--底部按钮区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="setRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
</el-dialog>

<script>
export default {
  data() {
     return {
         setRoleDialogVisible: false, // 控制分配用户角色的对话框是否显示
         setRoleDialogVisible: false, // 控制分配用户角色的对话框是否显示
         // 需要被分配角色的用户信息
         userInfo: {}
     }
  },
  methods: {
     // 展示分配用户角色的对话框
    setRole(userInfo) {
      // console.log(userInfo)
      this.userInfo = userInfo
      this.setRoleDialogVisible = true
    }
  }
}
</script>

此时点击分配角色按钮,效果如图:

然后要获取所有角色列表,并传递到rolesList数组中:

rolesList: [] // 所有角色列表数组

// 展示分配用户角色的对话框
async setRole(userInfo) {
     // console.log(userInfo)
     this.userInfo = userInfo

     // 在展示对话框之前,获取所有角色列表
     const { data: res } = await this.$http.get('roles')
     if (res.meta.status !== 200) {
        return this.$message.error('获取所有角色列表失败')
     }
     this.rolesList = res.data

     this.setRoleDialogVisible = true
}

2、渲染角色列表的下拉菜单

这里需要用到Select组件展示所有角色列表,Select和Option引入到element.js中,具体就不写了

添加下拉框代码:

<p>分配新角色:
     <el-select v-model="selectedRoleId" placeholder="请选择">
          <el-option
              v-for="item in rolesList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id">
          </el-option>
     </el-select>
</p>

<script>
export default {
  data() {
     return {
       selectedRoleId: '' // 已选中的角色id值
     }
  }
}
</script>

label:选项的标签,若不设置则默认与 value 相同
value:选项的值

3、给确定按钮添加点击事件,完成分配角色操作

请求api的分配用户角色接口,请求路径:users/:id/role,请求方法:put,请求参数:rid 角色 id

添加确定按钮的点击事件:

<el-button type="primary" @click="editUserRole">确 定</el-button>
editUserRole事件函数:
// 点击确定,分配用户角色
async editUserRole() {
      if (!this.selectedRoleId) {
        return this.$message.error('请选择要分配的角色')
      }
      const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, { rid: this.selectedRoleId })
      if (res.meta.status !== 200) {
        return this.$message.error('分配角色失败')
      }
      this.$message.success('分配角色成功!')
      this.getUserList()
      this.setRoleDialogVisible = false
}

完成的效果图:

小bug:分配角色完成后,再次点击分配角色按钮,对话框里的下拉框的值没有重置:

给分配角色对话框添加colse事件:

<!--分配用户角色的对话框-->
<el-dialog title="分配角色" :visible.sync="setRoleDialogVisible"
      width="50%" @close="setRoleDialogClosed">
setRoleDialogClosed:
// 监听 分配角色对话框的关闭事件
setRoleDialogClosed() {
      this.selectedRoleId = ''
      this.userInfo = {}
}

提交本地代码到远程:

先查看分支

git branch

发现当然是在rights分支上。

然后提交到暂存区

git add .

把当前提交到rights分支:

git commit -m "完成了权限功能的开发"

推送到云端rights分支:

git push

把rights合并到master:

git checkout master
git merge rights

//在推送到远程
git push
02-12 05:20