增加多角色功能和角色切换功能

调整前端获取用户信息方式
This commit is contained in:
pixel
2021-07-22 16:46:09 +08:00
parent 152cb4ec01
commit 8f9ecebf41
20 changed files with 323 additions and 68 deletions
+30
View File
@@ -111,3 +111,33 @@ export const setUserInfo = (data) => {
data: data
})
}
// @Tags User
// @Summary 设置用户权限
// @Security ApiKeyAuth
// @accept application/json
// @Produce application/json
// @Param data body api.setUserAuthorities true "设置用户权限"
// @Success 200 {string} json "{"success":true,"data":{},"msg":"修改成功"}"
// @Router /user/setUserAuthorities [post]
export const setUserAuthorities = (data) => {
return service({
url: '/user/setUserAuthorities',
method: 'post',
data: data
})
}
// @Tags User
// @Summary 获取用户信息
// @Security ApiKeyAuth
// @accept application/json
// @Produce application/json
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
// @Router /user/getUserInfo [get]
export const getUserInfo = () => {
return service({
url: '/user/getUserInfo',
method: 'get'
})
}
+1
View File
@@ -23,6 +23,7 @@ router.beforeEach(async(to, from, next) => {
if (!asyncRouterFlag && store.getters['router/asyncRouters'].length === 0) {
asyncRouterFlag++
await store.dispatch('router/SetAsyncRouter')
await store.dispatch('user/GetUserInfo')
const asyncRouters = store.getters['router/asyncRouters']
router.addRoutes(asyncRouters)
next({ ...to, replace: true })
+8 -1
View File
@@ -1,4 +1,4 @@
import { login } from '@/api/user'
import { login, getUserInfo } from '@/api/user'
import { jsonInBlacklist } from '@/api/jwt'
import router from '@/router/index'
import { setUserInfo } from '@/api/user'
@@ -56,6 +56,13 @@ export const user = {
}
},
actions: {
async GetUserInfo({ commit }) {
const res = await getUserInfo()
if (res.code === 0) {
commit('setUserInfo', res.data.userInfo)
}
return res
},
async LoginIn({ commit, dispatch, rootGetters, getters }, loginInfo) {
const res = await login(loginInfo)
if (res.code === 0) {
+19 -4
View File
@@ -45,11 +45,17 @@
</span>
<el-dropdown-menu slot="dropdown" class="dropdown-group">
<el-dropdown-item>
<span>
更多信息
<el-badge is-dot />
<span style="font-weight: 600;">
当前角色:{{ userInfo.authority.authorityName }}
</span>
</el-dropdown-item>
<template v-if="userInfo.authorities">
<el-dropdown-item v-for="item in userInfo.authorities.filter(i=>i.authorityId!==userInfo.authorityId)" :key="item.authorityId" @click.native="changeUserAuth(item.authorityId)">
<span>
切换为:{{ item.authorityName }}
</span>
</el-dropdown-item>
</template>
<el-dropdown-item icon="el-icon-s-custom" @click.native="toPerson">个人信息</el-dropdown-item>
<el-dropdown-item icon="el-icon-table-lamp" @click.native="LoginOut">登 出</el-dropdown-item>
</el-dropdown-menu>
@@ -90,6 +96,7 @@ import BottomInfo from '@/view/layout/bottomInfo/bottomInfo'
import { mapGetters, mapActions } from 'vuex'
import CustomPic from '@/components/customPic'
import Setting from './setting'
import { setUserAuthority } from '@/api/user'
export default {
name: 'Layout',
components: {
@@ -186,7 +193,15 @@ export default {
}
},
methods: {
...mapActions('user', ['LoginOut']),
...mapActions('user', ['LoginOut', 'GetUserInfo']),
async changeUserAuth(id) {
const res = await setUserAuthority({
authorityId: id
})
if (res.code === 0) {
window.location.reload()
}
},
reload() {
this.reloadFlag = false
this.$nextTick(() => {
@@ -43,6 +43,7 @@
</template>
</el-table-column>
</el-table>
<span style="color: red;font-size: 12px">注:右上角头像下拉可切换角色</span>
<!-- 新增角色弹窗 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
<el-form ref="authorityForm" :model="form" :rules="rules">
+39 -19
View File
@@ -17,12 +17,14 @@
<el-table-column label="用户角色" min-width="150">
<template slot-scope="scope">
<el-cascader
v-model="scope.row.authority.authorityId"
v-model="scope.row.authorityIds"
:options="authOptions"
:show-all-levels="false"
:props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
:props="{ multiple:true,checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
filterable
@change="changeAuthority(scope.row)"
:clearable="false"
@visible-change="(flag)=>{changeAuthority(scope.row,flag)}"
@remove-tag="()=>{changeAuthority(scope.row,false)}"
/>
</template>
</el-table-column>
@@ -39,6 +41,7 @@
</template>
</el-table-column>
</el-table>
<span style="color: red;font-size: 12px">注:右上角头像下拉可切换角色</span>
<el-pagination
:current-page="page"
:page-size="pageSize"
@@ -69,11 +72,12 @@
</el-form-item>
<el-form-item label="用户角色" label-width="80px" prop="authorityId">
<el-cascader
v-model="userInfo.authorityId"
v-model="userInfo.authorityIds"
:options="authOptions"
:show-all-levels="false"
:props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
:props="{ multiple:true,checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
filterable
:clearable="false"
/>
</el-form-item>
</el-form>
@@ -91,7 +95,7 @@
const path = process.env.VUE_APP_BASE_API
import {
getUserList,
setUserAuthority,
setUserAuthorities,
register,
deleteUser
} from '@/api/user'
@@ -115,7 +119,8 @@ export default {
password: '',
nickName: '',
headerImg: '',
authorityId: ''
authorityId: '',
authorityIds: []
},
rules: {
username: [
@@ -139,11 +144,20 @@ export default {
...mapGetters('user', ['token'])
},
async created() {
this.getTableData()
await this.getTableData()
this.setAuthorityIds()
const res = await getAuthorityList({ page: 1, pageSize: 999 })
this.setOptions(res.data.list)
},
methods: {
setAuthorityIds() {
this.tableData && this.tableData.forEach((user) => {
const authorityIds = user.authorities && user.authorities.map(i => {
return i.authorityId
})
this.$set(user, 'authorityIds', authorityIds)
})
},
openHeaderChange() {
this.$refs.chooseImg.open()
},
@@ -174,11 +188,14 @@ export default {
async deleteUser(row) {
const res = await deleteUser({ id: row.ID })
if (res.code === 0) {
this.getTableData()
this.$message.success('删除成功')
await this.getTableData()
this.setAuthorityIds()
row.visible = false
}
},
async enterAddUserDialog() {
this.userInfo.authorityId = this.userInfo.authorityIds[0]
this.$refs.userForm.validate(async valid => {
if (valid) {
const res = await register(this.userInfo)
@@ -186,6 +203,7 @@ export default {
this.$message({ type: 'success', message: '创建成功' })
}
await this.getTableData()
this.setAuthorityIds()
this.closeAddUserDialog()
}
})
@@ -194,20 +212,22 @@ export default {
this.$refs.userForm.resetFields()
this.addUserDialog = false
},
handleAvatarSuccess(res) {
this.userInfo.headerImg = res.data.file.url
},
addUser() {
this.addUserDialog = true
},
async changeAuthority(row) {
const res = await setUserAuthority({
uuid: row.uuid,
authorityId: row.authority.authorityId
})
if (res.code === 0) {
this.$message({ type: 'success', message: '角色设置成功' })
async changeAuthority(row, flag) {
if (flag) {
return
}
this.$nextTick(async() => {
const res = await setUserAuthorities({
ID: row.ID,
authorityIds: row.authorityIds
})
if (res.code === 0) {
this.$message({ type: 'success', message: '角色设置成功' })
}
})
}
}
}