xing/vue-learn
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

分配用户角色

Browse Source
This commit is contained in:
xing 2020-06-23 11:22:21 +08:00
parent a0dd85cdfd
commit 1b21e0e2aa
1 changed files with 48 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/users/users.vue
View File

@ -37,8 +37,8 @@
<template slot-scope="scope">
<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-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
<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)