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