Vue + ElementUI的电商管理系统实例10 用户列表-分配角色

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