分配用户角色

src/components/users/users.vue

@@ -38,7 +38,7 @@
             <el-button @click="edit(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button>
             <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row.id)"></el-button>
             <el-tooltip effect="dark" content="分配角色"  placement="top" :enterable="false">
-              <el-button  size="mini" type="warning" icon="el-icon-setting"></el-button>
+              <el-button  size="mini" type="warning" @click="setRole(scope.row)" icon="el-icon-setting"></el-button>
             </el-tooltip>
           </template>
         </el-table-column>
@@ -105,6 +105,23 @@
       </span>
     </el-dialog>
 
+    <el-dialog title="分配角色" :visible.sync="setDialogVisible" @close="selectKey=''">
+      <div>
+        <p>当前的用户: {{user.username}}</p>
+        <p>当前的角色: {{user.role_name}}</p>
+        <p>分配角色：
+          <el-select v-model="selectKey" placeholder="请选择角色">
+            <el-option :key="item.id" v-for="item in roles" :label="item.roleName" :value="item.id"></el-option>
+          </el-select>
+        </p>
+
+      </div>
+      <span slot="footer" class="dialog-footer">
+          <el-button @click="setDialogVisible=false">取消</el-button>
+          <el-button type="primary" @click="sub()">确定</el-button>
+        </span>
+    </el-dialog>
+
   </div>
 
 </template>
@@ -151,6 +168,7 @@ export default {
     return {
       dialogVisible: false,
       editVisible: false,
+      setDialogVisible: false,
       addForm: {
         username: '',
         password: '',
@@ -162,6 +180,7 @@ export default {
         email: '',
         mobile: ''
       },
+      rights: [],
       editRules: editRule,
       rules: rule,
       queryInfo: {
@@ -170,10 +189,36 @@ export default {
         pagesize: 5
       },
       userList: [],
-      total: 0
+      total: 0,
+      user: {},
+      roles: [],
+      selectKey: ''
     }
   },
   methods: {
+    async setRole (user) {
+      this.user = user
+      this.setDialogVisible = true
+      const { data: res } = await this.$http.get('roles')
+      if (res.meta.status !== 200) {
+        return this.$message.error(res.meta.msg)
+      }
+      this.roles = res.data
+    },
+    sub () {
+      if (!this.selectKey) {
+        return this.$message.warning('请先选择角色')
+      }
+      this.$http.put(`users/${this.user.id}/role`, { rid: this.selectKey }).then(response => {
+        const res = response.data
+        if (res.meta.status !== 200) {
+          return this.$message.error(res.meta.msg)
+        }
+        this.$message.success(res.meta.msg)
+        this.setDialogVisible = false
+        this.getUserList()
+      }).catch(error => error)
+    },
     del (id) {
       this.$confirm('要删除该用户么？').then(async value => {
         const { data: res } = await this.$http.delete('users/' + id)