接上篇《35、编辑角色下的权限（二）》

上一篇我们完成了为角色分配新的权限并保存的效果，本篇我们来完成为用户分配角色的功能。

一、完成对话框和待分配角色加载

我们打开用户列表的页面（User.vue组件），需要在点击编辑按钮的时候弹出角色分配的对话框：

效果：

此时需要在编辑按钮处指定一个click显示方法，名为“setRole”，参数为当前用户对象：

然后编写一个dialog区域（放在div内的最下面），用来展示分配角色的对话框：

  

    
当前的用户：{{userInfo.username}}
    
当前的角色：{{userInfo.role_name}}
    

      分配新角色：
      
           
          
      
    
  
  
      取 消
      确 定
  

其中的setRoleDialogVisible是控制对话框显示与否的参数，然后“userInfo”是获取到的需要配分配角色的用户对象，“roleList”是待用户选取的所有角色的列表对象，“selectRoleId”为已选中的角色ID值，这些都在data区预定义：

setRoleDialogVisible: false, //控制用户分配角色对话框的显示与隐藏
//需要被分配角色的用户信息
userInfo: [],
//所有角色的数据列表
roleList: [],
//已选中的角色ID值
selectRoleId: ''

上面我们还用到了el-select组件，所以记得在element.js中定义Select和Option对象。

然后编写“setRole”方法，显示该对话框

//展示分配角色的对话框
async setRole(user){
  //在展示对话框之前，加载所有的角色（待用户选择）
  const {data: res} = await this.$http.get('roles');
  if(res.meta.status!==200){
      return this.$message.error('获取角色列表失败！');
  }
  this.roleList = res.data;
  this.userInfo = user;//获取用户信息展示在页面
  //显示对话框
  this.setRoleDialogVisible = true;
}

效果：

二、调用后台API进行角色分配

为用户绑定角色的API：

其中rid是角色id，在put请求方法体中。

我们为对话框中的确定按钮绑定一个名为“saveRoleInfo”的函数：

    取 消
    确 定

在方法区编写“saveRoleInfo”函数：

// 点击按钮分配角色
async saveRoleInfo(){
  if(!this.selectRoleId){
      return this.$message.error('请选择要分配的角色！');
  }
  const {data: res} = await this.$http.put('users/'+this.userInfo.id+'/role',{rid: this.selectRoleId});
  if(res.meta.status!==200){
      return this.$message.error('更新用户角色失败！');
  }
  this.$message.success('更新角色成功！');
  this.getUsersList();//刷新用户列表
  this.selectRoleId = '';//清空本次选择，避免影响下次
  this.setRoleDialogVisible = false;//关闭对话框
}

效果：

三、合并分支

我们权限相关代码全部开发完毕，此时需要将我们rights分支的代码，合并到主分支。

首先使用“git branch”查看当前所在分支，是rights分支；然后使用“git add .”将修改内容添加到暂存区，然后执行“git commit”将修改内容提交至当前本地分支；然后使用“git push”将本地分支push到云端；最后通过“git checkout master”将分支切换到master分支，执行“git merge rights”将rights的内容合并至master主分支，然后将本地master分支推送到云端，此时master更新到了最新：

至此为用户分配角色的功能已经全部实现。

在当今商业领域，客户关系管理是每个企业都必须面对和解决的关键挑战之一。对于小型企业而言，要想提高客户满意度和业务效率，客户管理系统是不可或缺的。但是，对于预算有限的企业来说，高昂的客户管理系统费用可能会成为他们的负担。因此，寻找一款价格实惠或者免费的客户管理系统成为了小型企业的迫切需求。

本文将为您介绍国内外一些靠谱的免费客户管理系统，帮助您找到最适合自己企业的解决方案。

简道云

简道云是一款旨在满足企业或部门个性化管理需求的轻量级应用搭建平台，用户无需编写代码即可通过简单的拖拉拽操作，快速搭建符合自身需求的管理应用，包括CRM等。现在，用户可以通过简道云提供的CRM场景套件免费体验，该套件集成了简道云的搭建功能和标准的CRM功能模块，帮助用户高效地管理客户，提升团队业绩。

简道云免费版提供表单协作与数据管理、基础流程引擎以及数据可视化等核心功能，支持最多30人的小团队使用，同时可存储最多5万条数据。如果企业的业务不断扩大，简道云还提供两种增值服务以及私有云订制版供用户选择。这些增值服务将提供更多的功能和存储空间，以满足不同规模企业的管理需求。

八百客

虽然八百客免费版CRM仅支持4个账户，但如果您需要更多的账户，可以升级到付费版本以满足更高的需求。此外，八百客不仅提供了客户/联系人管理、任务/提醒、移动客户等实用功能，还提供了社交网络功能，以帮助用户与其他用户互动。这些社交网络功能包括状态更新、活动动态信息、隐私和安全设置等，为用户提供全面的使用体验。

Less Annoying CRM

Less Annoying CRM（LACRM）是专为小型企业设计的全能CRM解决方案，提供为期30天的免费试用期。试用期结束后，用户可以选择一个单一且成本低廉的付费计划。LACRM能够处理任务管理、销售线索、联系人管理以及跟进，通过跟踪销售渠道，帮助企业管理所有客户数据，并在易于使用的日历和议程格式中跟踪事件和待办事项。

Bitrix24

Bitrix24是一款全面的CRM软件，包含多个业务工具和功能，涵盖销售、客户服务、项目管理和协作等方面。其免费版本适用于最多12个用户的企业，提供了基本的CRM功能，如客户信息管理、销售流程管理和营销自动化等。此外，Bitrix24还提供了社交媒体集成和在线会议功能等，让用户可以更加高效地管理客户和与团队协作。