<template>
|
<div class="rolePage">
|
<div class="roleContainer">
|
<div class="roleContainer-title">角色</div>
|
<ul>
|
<li v-for="(item,index) in tableData" @click="changeTabaleLi(item,index)">
|
<span :class="{active: item.active}">{{item.roleName}}</span>
|
<div class="scopeBtn">
|
<span style="margin-right: 12px;cursor: pointer;" @click.stop="table_edit(item, index)">重命名</span>
|
<span @click="table_del(item, index)">删除</span>
|
</div>
|
</li>
|
</ul>
|
<div class="left-panel">
|
<el-button type="primary" icon="el-icon-plus" @click="addRole">添加角色</el-button>
|
</div>
|
</div>
|
<div class="role-main-tabs">
|
<div class="role-main-header">
|
<div class="role-main-title">账号</div>
|
<ul>
|
<li v-for="(item,index) in roleHeaderList" @click="changeHeaderLi(item,index)" :class="{titleActive: item.active}">{{item.realName}}</li>
|
<li class="role-header-add" @click="addUser">+ 添加账号</li>
|
</ul>
|
<div class="role-main-title">权限管理</div>
|
</div>
|
<el-tabs tab-position="top">
|
<el-tab-pane label="菜单">
|
<div class="treeMain">
|
<el-tabs tab-position="left" class="demo-tabs" v-model="menuActiveName" @tab-click="menuHandleClick">
|
<el-tab-pane v-for="item in menuGrantList" :label="item.title" :name="item.title">
|
<el-tree v-if="showtree" :data="treeData" :props="{ label: 'title',children: 'children'}" node-key="id" show-checkbox @check-change="treeHandleCheckChange" :default-checked-keys="treeCheck" default-expand-all />
|
</el-tab-pane>
|
</el-tabs>
|
<div class="roleSubmit"><el-button type="primary" :loading="submitIsSaveing" @click="roleSubmit()">保 存</el-button></div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="卡片">
|
<div class="treeMain">
|
<!-- <el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree> -->
|
123
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
|
<el-dialog title="人员选择" v-model="userVisible" :width="500" destroy-on-close>
|
<div>
|
<el-table ref="userVisibleRef" :data="userVisibleData" style="width: 100%" @selection-change="userVisibleChange">
|
<el-table-column type="selection" width="55" />
|
<el-table-column label="姓名" prop="realName" />
|
<el-table-column label="当前角色" prop="roleName" />
|
<el-table-column label="手机号" prop="phone" />
|
<el-table-column label="邮箱" prop="email" />
|
</el-table>
|
<el-pagination @current-change="handleCurrentChange" style="margin-top: 12px;" layout="total, prev, pager, next" :total="total" />
|
</div>
|
|
<template #footer>
|
<el-button @click="userVisible=false" >取 消</el-button>
|
<el-button type="primary" :loading="isSaveing" @click="userSubmit()">确 定</el-button>
|
</template>
|
</el-dialog>
|
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
|
</div>
|
</template>
|
|
<script>
|
import saveDialog from './save'
|
|
export default {
|
name: 'role',
|
components: {
|
saveDialog
|
},
|
data() {
|
return {
|
showtree: true,
|
treeCheck: [],
|
menuActiveName: "",
|
treeData: [],
|
menuGrantList: [],
|
total: 0,
|
searchData: {
|
current: 1,
|
size: 10
|
},
|
tableLiId: "", //当前角色id
|
isSaveing: false,
|
submitIsSaveing: false,
|
userVisibleData: [],
|
userVisible: false,
|
roleHeaderList: [],
|
menu: {
|
list: [],
|
checked: [],
|
props: {
|
label: (data)=>{
|
return data.meta.title
|
}
|
}
|
},
|
grid: {
|
list: [],
|
checked: ["welcome", "ver", "time", "progress", "echarts", "about"],
|
props: {
|
label: (data)=>{
|
return data.title
|
},
|
disabled: (data)=>{
|
return data.isFixed
|
}
|
}
|
},
|
dialog: {
|
save: false,
|
permission: false
|
},
|
//apiObj: this.$API.system.role.list,
|
tableData: "",
|
userSelection: []
|
}
|
},
|
mounted(){
|
this.getRoleList(); //角色列表
|
this.getUser(); //获取全部账号
|
},
|
methods: {
|
roleSubmit() { //保存
|
var obj = {
|
apiScopeIds: [],
|
dataScopeIds: [],
|
menuIds: ["1519970491499069442", "1519971258746322945", "1519972116229832706", "1519972350729175041"],
|
roleIds: [this.tableLiId]
|
}
|
// 0: "1519970491499069442"
|
// 1: "1519971258746322945"
|
// 2: "1519972116229832706"
|
// 3: "1519972350729175041"
|
// 4: "1519972501539569666"
|
// 5: "1123598815738675201"
|
// 6: "1483632111746801666"
|
// 7: "1470274120439566338"
|
// 8: "1503966666579030018"
|
// 9: "1529388585562615809"
|
// 10: "1529365139944321026"
|
// this.$HTTP.post(`/api/blade-system/role/grant`,obj).then(res=> {
|
// this.isSaveing = false;
|
// if(res.code == 200) {
|
// this.userVisible = false;
|
// this.$message.success("操作成功");
|
// this.getBladeList(this.tableLiId); //获取人员列表
|
// }
|
// })
|
},
|
menuHandleClick(tab, event) {
|
this.setTreeList(this.menuGrantList,event.target.innerText); //tree
|
},
|
treeHandleCheckChange() {
|
|
},
|
setTreeList(arr,name) {
|
this.treeData = [];
|
arr.forEach(item=> {
|
if(item.title == name) {
|
this.treeData = item.children;
|
}
|
})
|
},
|
extractLastLevelIds(array) { //递归获取children最后一级的id的数组
|
let ids = [];
|
for (let i = 0; i < array.length; i++) {
|
const obj = array[i];
|
if (obj.children) {
|
// 递归调用以提取更深层级的children中的id
|
ids = ids.concat(this.extractLastLevelIds(obj.children));
|
} else {
|
// 如果没有children属性，则假定当前对象是最后一级
|
if (obj.id) {
|
ids.push(obj.id);
|
}
|
}
|
}
|
return ids;
|
},
|
findOverlap(array1, array2) { //找出两个数组重合的部分
|
// 创建一个集合（Set）来存储第二个数组中的元素，以便于快速查找
|
const set = new Set(array2);
|
// 使用filter方法过滤出第一个数组中在集合中存在的元素
|
const overlap = array1.filter(item => set.has(item));
|
return overlap;
|
},
|
getSelectTree(res,id,index) {//获取已选数据
|
this.$HTTP.get(`/api/blade-system/menu/role-tree-keys?roleIds=${id}`).then(resp=> {
|
if(res.code == 200) {
|
this.tableData.forEach(item=> {
|
item.active = false;
|
})
|
this.tableData[index].active = true; //选中
|
this.showtree = false;
|
this.tableLiId = id; //角色id
|
this.$nextTick(()=> {
|
this.showtree = true;
|
this.menuGrantList = res.data.menu.filter(item=> { //过滤掉没有children的
|
return item.children;
|
});
|
this.menuActiveName = this.menuGrantList[0].title;//默认第一个菜单
|
this.setTreeList(this.menuGrantList,this.menuActiveName);//展示树（左侧菜单list，左侧菜单名字）
|
var lastId = [],idarr = [];
|
var lastId = this.extractLastLevelIds(this.menuGrantList); //获取最后一级id
|
var idarr = this.findOverlap(lastId,resp.data.menu); //找出两个数组重合的部分
|
this.treeCheck = idarr; //获取选中数据
|
})
|
}
|
})
|
},
|
getMenuGrant(row,index) {
|
this.$HTTP.get(`/api/blade-system/menu/grant-tree`).then(res=> {
|
if(res.code == 200) {
|
//获取已选数据 (树的数据，角色id)
|
this.getSelectTree(res,row.id,index);
|
}
|
})
|
},
|
userSubmit() {
|
var ids = [];
|
this.userSelection.forEach(item=> {
|
ids.push(item.id);
|
})
|
this.isSaveing = true;
|
|
this.$HTTP.post(`/api/blade-user/${this.tableLiId}/save`,{ids}).then(res=> {
|
this.isSaveing = false;
|
if(res.code == 200) {
|
this.userVisible = false;
|
this.$message.success("操作成功");
|
this.getBladeList(this.tableLiId); //获取人员列表
|
}
|
})
|
},
|
userVisibleChange(selection) {
|
this.userSelection = selection;
|
},
|
addUser() { //添加账号
|
this.userVisible = true;
|
},
|
getUser() { //获取全部账号
|
this.$HTTP.get(`/api/blade-user/page?current=${this.searchData.current}&size=10&deptId=`).then(res=> {
|
if(res.code == 200) {
|
this.userVisibleData = res.data.records;
|
this.total = res.data.total;
|
}
|
})
|
},
|
getBladeList(row,index) { //人员列表
|
this.$HTTP.get(`/api/blade-user/${row.id}/list`).then(res=> {
|
if(res.code == 200) {
|
this.roleHeaderList = res.data;
|
this.getMenuGrant(row,index); //获取tree
|
}
|
})
|
},
|
changeHeaderLi(row,index) {
|
this.roleHeaderList.forEach(item=> {
|
item.active = false;
|
})
|
this.roleHeaderList[index].active = true;
|
},
|
changeTabaleLi(row,index) {
|
this.getBladeList(row,index); //获取人员列表
|
},
|
getRoleList() {
|
this.$HTTP.get("/api/blade-system/role/list?current=1&size=1000").then(res=> {
|
if(res.code == 200) {
|
res.data[0].active = true;
|
this.tableData = res.data;
|
this.getBladeList(this.tableData[0],0); //默认第一个角色获
|
console.log(this.tableData[0],this.tableData[0].id)
|
}
|
})
|
},
|
//添加
|
addRole(){
|
this.dialog.save = true
|
this.$nextTick(() => {
|
this.$refs.saveDialog.open()
|
})
|
},
|
//编辑
|
table_edit(row){
|
this.dialog.save = true
|
this.$nextTick(() => {
|
this.$refs.saveDialog.open('edit').setData(row);
|
})
|
},
|
//查看
|
table_show(row){
|
this.dialog.save = true
|
this.$nextTick(() => {
|
this.$refs.saveDialog.open('show').setData(row)
|
})
|
},
|
//删除
|
table_del(row) {
|
var that = this;
|
this.$confirm(`是否删除角色-${row.roleName}?`, '', {
|
type: 'warning'
|
}).then(() => {
|
this.$HTTP.post("/api/blade-system/role/remove?ids="+row.id).then(res=> {
|
if(res.code == 200) {
|
that.$message.success("操作成功");
|
that.getRoleList(); //角色列表
|
}
|
})
|
}).catch(() => {
|
|
})
|
},
|
//表格选择后回调事件
|
selectionChange(selection){
|
this.selection = selection;
|
},
|
//表格内开关
|
changeSwitch(val, row){
|
row.status = row.status == '1'?'0':'1'
|
row.$switch_status = true;
|
setTimeout(()=>{
|
delete row.$switch_status;
|
row.status = val;
|
this.$message.success("操作成功")
|
}, 500)
|
},
|
//根据ID获取树结构
|
filterTree(id){
|
var target = null;
|
function filter(tree){
|
tree.forEach(item => {
|
if(item.id == id){
|
target = item
|
}
|
if(item.children){
|
filter(item.children)
|
}
|
})
|
}
|
filter(this.$refs.table.tableData)
|
return target
|
},
|
//本地更新数据
|
handleSaveSuccess(data, mode){
|
this.getRoleList(); //角色列表
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
this.searchData.current = val;
|
this.getUser();
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.rolePage {
|
display: flex;
|
}
|
.rolePage .roleContainer {
|
max-width:300px;
|
width:300px;
|
margin-right: 8px;
|
height: 100%;
|
margin-top:8px;
|
margin-left:8px;
|
background-color: #fff;
|
padding-bottom:8px;
|
}
|
.roleContainer-title {
|
height: 41px;
|
line-height: 41px;
|
font-size: 14px;
|
text-align: center;
|
background-color: #3b8e8e;
|
color: #fff;
|
}
|
.rolePage .roleContainer ul {
|
|
}
|
.rolePage .roleContainer ul li{
|
height:42px;
|
line-height: 42px;
|
list-style-type: none;
|
color: #606266;
|
display: flex;
|
justify-content: space-between;
|
border-bottom: 1px solid #ebeef5;
|
padding-left: 8px;
|
padding-right: 8px;
|
cursor: pointer;
|
}
|
.rolePage .roleContainer ul li .active {
|
font-weight: bold;
|
color: #3b8e8e;
|
}
|
.rolePage .roleContainer ul li:hover {
|
background-color: #f5f7fa;
|
}
|
.rolePage .roleContainer ul li .scopeBtn {
|
color: #409eff;
|
}
|
.rolePage .roleContainer .left-panel {
|
text-align: center;
|
margin-top:8px;
|
}
|
.rolePage .role-main-tabs {
|
flex: 1;
|
background-color: #fff;
|
padding: 8px;
|
margin-top:8px;
|
margin-right:8px;
|
}
|
.role-main-title {
|
padding: 6px 10px;
|
font-size: 14px;
|
background-color: #d8e8d8;
|
margin-bottom: 8px;
|
border-radius: 2px;
|
}
|
.role-main-header ul {
|
padding: 20px 20px 10px;
|
}
|
.role-main-header ul li {
|
list-style-type: none;
|
display: inline-block;
|
width: 200px;
|
padding: 8px 20px;
|
margin: 0 10px 10px 0;
|
border: 1px solid #e5e5e5;
|
cursor: pointer;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.role-main-header ul li.titleActive {
|
border: 1px solid #3b8e8e;
|
}
|
.role-main-header ul li.role-header-add {
|
display: inline-block;
|
border: 1px dashed #e5e5e5;
|
}
|
.treeMain {
|
position: relative;
|
margin-bottom: 60px;
|
}
|
.roleSubmit {
|
bottom: 0;
|
position: fixed;
|
width: 100%;
|
text-align: right;
|
right: 0;
|
padding-right: 20px;
|
padding-bottom: 12px;
|
background: #fff;
|
z-index: 11;
|
}
|
</style>
|
