功能描述：
使用vue+elementui+axios实现角色的菜单授权功能，
主要操作：获取角色列表展现到页面中，选择某个角色点击授权的操作，对该角色进行菜单权限变更。
页面代码：
<template>
<div class="bk">
<!-- 弹框 -->
<el-dialog
v-dialogDrag
title="授权菜单"
:visible.sync="dialogAuthorizeVisible"
width="50%"
:close-on-click-modal="false">
<el-form :model="treeForm" ref="treeForm">
<el-tree
:data="menuTreeData"
show-checkbox
default-expand-all
node-key="id"
:default-checked-keys="handleDefault"
ref="tree"
highlight-current
:props="defaultProps">
</el-tree>
</el-form>
<div slot="footer">
<el-button @click="handleTreeCancel('treeForm')">取 消</el-button>
<el-button type="primary" @click="handleSaveTreeMenu('treeForm')">确 定</el-button>
</div>
</el-dialog>
<!-- 列表 -->
<el-table border :data="tableData" style="width: 100%">
<el-table-column prop="role_id" label="ID"/>
<el-table-column prop="role_name" label="角色名称"/>
<el-table-column prop="role_describe" label="角色描述"/>
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-button
type="primary"
size="small"
@click.native.prevent="handleAuthorize(scope.$index,scope.row)">
授权</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
script代码：
<script>
import axios from 'axios'
export default {
data: function () {
return {
user_token: '',
dialogAuthorizeVisible: false,
tableData: [],
menuTreeData: [],
treeForm: {
role_id: '',
check_list: [],
select_set: new Set()
},
defaultProps: {
children: 'children',
label: 'menu_name'
}
}
},
computed: {
// 遍历拿到的菜单数据
// 根据select_flag字段判断哪些菜单是勾选状态
// 1代表被勾选，0代表没被勾选
handleDefault: function () {
const that = this
that.menuTreeData.map(o => {
o.children.map(e => {
if (e.select_flag === 1) {
that.treeForm.check_list.push(e.id)
}
})
})
return that.treeForm.check_list
}
},
methods: {
// 获取角色列表
// 绑定到el-table上
getList: function () {
const that = this
axios({
method: 'post',
url: '/http://localhost:8080/role-list',
data: { user_token: that.user_token },
headers: { 'Content-Type': 'application/json;charsetset=UTF-8' }
}).then(function (res) {
if (res.data.code === '0000') {
// 拿到角色数据
that.tableData = res.data.data
} else {
that.$message({
type: 'info',
message: res.data.msg
})
}
}).catch(function (error) {
console.log(error)
})
},
// 选中角色列表的某一行数据
// 点击授权按钮
// 拿到当前行的角色id
// 通过角色id拿到该角色的菜单数据menuTreeData
// 打开弹窗并将数据绑定到菜单树上
handleAuthorize: function (index, row) {
const that = this
// role_id等于当前行的id
that.treeForm.role_id = row.id
axios({
method: 'post',
url: '/http://localhost:8080/menu-list',
data: {
user_token: that.user_token,
role_id: that.treeForm.role_id
},
headers: { 'Content-Type': 'application/json;charsetset=UTF-8' }
}).then(function (res) {
if (res.data.code === '0000') {
// 获取菜单数据
that.menuTreeData = res.data.data
// 打开弹窗
that.dialogAuthorizeVisible = true
} else {
that.$message({
type: 'info',
message: res.data.msg
})
}
}).catch(function (error) {
console.log(error)
})
},
// 保存新的菜单数据
handleSaveTreeMenu: function (formName) {
// 获取被选中菜单的父节点id在内的所有节点id
// 保存数据到select_set数组
this.$refs.tree.getCheckedNodes().map(o => {
this.treeForm.select_set.add(o.id)
this.treeForm.select_set.add(o.parent_id)
})
const that = this
that.$refs[formName].validate(valid => {
if (valid) {
axios({
method: 'post',
url: '/http://localhost:8080/save-role-menu',
data: {
user_token: that.user_token,
role_id: that.treeForm.role_id,
menu_list: Array.from(that.treeForm.select_set).toString()
},
headers: { 'Content-Type': 'application/json;charsetset=UTF-8' }
}).then(function (res) {
if (res.data.code === '0000') {
that.$message({
type: 'success',
message: res.data.msg
})
// 关闭弹窗
that.dialogAuthorizeVisible = false
// 刷新角色列表
that.getList()
} else {
that.$message({
type: 'info',
message: res.data.msg
})
}
}).catch(function (error) {
console.log(error)
})
}
})
},
// 弹窗取消按钮
// 关闭弹窗并清空缓存数据
handleTreeCancel (formName) {
const that = this
that.$refs[formName].resetFields()
that.treeForm.role_id = ''
that.menuTreeData = []
that.treeForm.check_list = []
that.treeForm.select_set = new Set()
that.dialogAuthorizeVisible = false
}
}
}
</script>
效果展示：
角色列表
授权菜单弹窗
