Vue全家桶 电商后台管理项目实战13

用户  分配角色篇

点击分配角色弹出对话框

<!-- 分配角色对话框 -->
<el-dialog
  title="提示"
  :visible.sync="setRolesSDialogVisible"
  width="30%"
  >
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="setRolesSDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="setRolesSDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

改造对话框  

传数据   得到当前用户和角色渲染出来    

通过插槽的方法传值然后获得值渲染出来

分配新角色通过采用select下拉菜单渲染  v-model的值就是选中的值

具体代码实现有

<!-- 分配角色对话框 -->
<el-dialog
  title="分配角色"
  :visible.sync="setRolesDialogVisible"
  width="30%"
  >
 <div>
  <p>当前的用户:{{setRolesInfo.username}}</p>
   <p>当前的角色:{{setRolesInfo.role_name}}</p>
   <p>分配新角色:
  <el-select v-model="selectedRoleId" placeholder="请选择">
    <el-option
      v-for="item in usersInfo"
      :key="item.id"
      :label="item.roleName"
      :value="item.id">
    </el-option>
  </el-select>
</p>
</div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="setRolesDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="setRolesSubmit(selectedRoleId)">确 定</el-button>
  </span>
</el-dialog>

//  确定分配新角色
async setRolesSubmit(rid){
  // 用户id要点击分配角色的时候保存下来
 // 得到选择的新角色
// 发起请求
const {data:res}=await this.$http.put('users/'+this.userId+'/role',{rid})
if(res.meta.status!==200) return this.$message.error('分配角色失败！')
//  成功分配角色刷新
this.getUserList();
this.$message.success('分配角色成功！')
 // 关闭弹框
this.setRolesDialogVisible = false
   }