master
刘翔宇-旅管家
3 years ago
parent
a37f0794a8
commit
acb3114d76
@ -1,313 +1,306 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 查询配置 -->
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader icon="md-apps" text="权限管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
</slot>
|
||||
</LxHeader>
|
||||
</div>
|
||||
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="3">
|
||||
<Card class="box-card">
|
||||
<div slot="title" class="clearfix" style="height: 32px;line-height: 32px;">
|
||||
<span>角色列表</span>
|
||||
</div>
|
||||
<div style="overflow: auto;" :style="{height:height+'px'}">
|
||||
<el-scrollbar style="flex: 1">
|
||||
<el-tabs tab-position="left" v-model="activeRole" @tab-click="roleChange">
|
||||
<el-tab-pane :label="item.name" :name="item.rowid" v-for="(item,index) in rolelist">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</Card>
|
||||
</el-col>
|
||||
<el-col :span="21">
|
||||
<Card class="box-card">
|
||||
<div slot="title" class="clearfix" style="height: 32px;line-height: 32px;">
|
||||
<span>菜单列表</span>
|
||||
<Button style="float: right;" type="primary" @click="savepermission">保存</Button>
|
||||
</div>
|
||||
|
||||
<div style="overflow: auto;" :style="{height:height+'px'}">
|
||||
<el-scrollbar style="flex: 1">
|
||||
<el-tree ref="tree" :data="tree" show-checkbox style="padding: 15px" node-key="id" default-expand-all
|
||||
:expand-on-click-node="false">
|
||||
<div class="action-group" slot-scope="{ node, data }">
|
||||
<div class="action-text" :style="{ width: (4 - data.lv) * 18 + 150 + 'px' }">
|
||||
{{ data.name }}
|
||||
</div>
|
||||
<div class="action-item">
|
||||
<el-checkbox v-for="(item, index) in data.auth_node_tags_array" :key="index"
|
||||
v-model="item.checked" @change="() => {}">
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</Card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LxHeader from "@/components/LxHeader/index.vue";
|
||||
import {
|
||||
list
|
||||
} from "../../api/system/role.js";
|
||||
import {
|
||||
listmenu
|
||||
} from "../../api/system/menu.js";
|
||||
import {
|
||||
setPermissions
|
||||
} from "../../api/system/permission.js"
|
||||
export default {
|
||||
components: {
|
||||
LxHeader
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
activeRole: "",
|
||||
rolelist: [],
|
||||
selectIndex: -1,
|
||||
checked: false,
|
||||
data: [],
|
||||
tree: [],
|
||||
height: 0
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
var that = this;
|
||||
this.initLoad();
|
||||
this.load(function() {
|
||||
that.loadrole();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initLoad() {
|
||||
var that = this;
|
||||
var clientHeight = document.documentElement.clientHeight
|
||||
var lxHeader_height = 67; //查询 头部
|
||||
var card_Height = 109; //分页的高度
|
||||
var topHeight = 50; //页面 头部
|
||||
let height = clientHeight - lxHeader_height - topHeight - card_Height;
|
||||
that.height = height;
|
||||
},
|
||||
loadrole() {
|
||||
var that = this;
|
||||
list().then(response => {
|
||||
let cur = 0;
|
||||
that.rolelist = response;
|
||||
|
||||
for (var mod of response) {
|
||||
mod.rowid = mod.id.toString();
|
||||
if (cur == 0) {
|
||||
that.activeRole = mod.rowid;
|
||||
that.loadPermisstions(0, that.activeRole);
|
||||
}
|
||||
cur++;
|
||||
}
|
||||
|
||||
}).catch(error => {
|
||||
//reject(error)
|
||||
})
|
||||
},
|
||||
load(callback) {
|
||||
var that = this;
|
||||
listmenu().then(response => {
|
||||
this.tree = response;
|
||||
|
||||
this.tree.map((tree, index1) => {
|
||||
|
||||
let children = tree.children
|
||||
children.map((menu, index3) => {
|
||||
|
||||
menu.auth_node_tags_array.map((m, index4) => {
|
||||
m.checked = false;
|
||||
that.$forceUpdate();
|
||||
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
callback();
|
||||
}).catch(error => {
|
||||
//reject(error)
|
||||
})
|
||||
},
|
||||
roleChange(tab, event) {
|
||||
this.loadPermisstions(parseInt(tab.index), tab.name)
|
||||
},
|
||||
loadPermisstions(index, name) {
|
||||
let select = this.rolelist[index].permissions;
|
||||
this.$refs.tree.setCheckedKeys([]);
|
||||
this.activeRole = name;
|
||||
|
||||
|
||||
let that = this;
|
||||
this.tree.map((tree, index1) => {
|
||||
let children = tree.children;
|
||||
select.map((item, index2) => {
|
||||
let selectMenu = children.filter(m => {
|
||||
return m.id == item.id
|
||||
});
|
||||
|
||||
selectMenu.map((menu, index3) => {
|
||||
if (item.has_auth_node_tags.length > 0) {
|
||||
menu.auth_node_tags_array.map((m, index4) => {
|
||||
if (item.has_auth_node_tags.indexOf(m.tag) > -1) {
|
||||
that.$set(that.tree[index1].children[index3].auth_node_tags_array[index4],
|
||||
"checked", true);
|
||||
}
|
||||
else{
|
||||
that.$set(that.tree[index1].children[index3].auth_node_tags_array[index4],
|
||||
"checked", false);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
menu.auth_node_tags_array.map(m => {
|
||||
m.checked = false;
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$refs.tree.updateKeyChildren(tree.id, JSON.parse(JSON.stringify(children)))
|
||||
})
|
||||
|
||||
|
||||
this.$refs.tree.setCheckedNodes(select);
|
||||
that.$forceUpdate();
|
||||
|
||||
|
||||
},
|
||||
savepermission() {
|
||||
var checkedList = this.$refs.tree.getCheckedNodes();
|
||||
console.log(checkedList)
|
||||
if (checkedList.length == 0) {
|
||||
this.$message.error("请选择菜单");
|
||||
return false;
|
||||
}
|
||||
let data = {};
|
||||
data.id = this.activeRole;
|
||||
let permission = [];
|
||||
for (var m of checkedList) {
|
||||
let tags = [];
|
||||
var mod = {};
|
||||
mod.permission_id = m.id;
|
||||
m.auth_node_tags_array.map(item => {
|
||||
if (item.checked) {
|
||||
tags.push(item.tag);
|
||||
}
|
||||
});
|
||||
mod.auth_node_tags = tags.join(",");
|
||||
permission.push(mod);
|
||||
|
||||
}
|
||||
data.permission_list = permission;
|
||||
setPermissions(data).then(response => {
|
||||
console.log(response)
|
||||
this.$Message.success('操作成功');
|
||||
that.dialogFormVisible = false;
|
||||
that.load();
|
||||
}).catch(error => {
|
||||
//reject(error)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.t-tree {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
background: #eee;
|
||||
/* padding: 100px; */
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #f9f8f8;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #eee;
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
padding: 0 15px;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-container {
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
margin-left: 15px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.role-list {
|
||||
width: 200px;
|
||||
border: 1px solid #eee;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.actived {
|
||||
color: #409efe !important;
|
||||
background-color: #f3f7f9;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.roleitem {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.action-item>label {
|
||||
width: 55px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.action-container>>>.el-tree-node {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.action-container>>>.el-checkbox__label {
|
||||
padding-left: 5px;
|
||||
}
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 查询配置 -->
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="权限管理">
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
</slot>
|
||||
</LxHeader>
|
||||
</div>
|
||||
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="3">
|
||||
<Card class="box-card">
|
||||
<div slot="title" class="clearfix" style="height: 32px;line-height: 32px;">
|
||||
<span>角色列表</span>
|
||||
</div>
|
||||
<div :style="{height:height+'px'}" style="overflow: auto;">
|
||||
<el-scrollbar style="flex: 1">
|
||||
<el-tabs v-model="activeRole" tab-position="left" @tab-click="roleChange">
|
||||
<el-tab-pane v-for="(item,index) in rolelist" :key="item.id" :label="item.name" :name="item.rowid">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</Card>
|
||||
</el-col>
|
||||
<el-col :span="21">
|
||||
<Card class="box-card">
|
||||
<div slot="title" class="clearfix" style="height: 32px;line-height: 32px;">
|
||||
<span>菜单列表</span>
|
||||
<Button style="float: right;" type="primary" @click="savepermission">保存</Button>
|
||||
</div>
|
||||
|
||||
<div :style="{height:height+'px'}" style="overflow: auto;">
|
||||
<el-scrollbar style="flex: 1">
|
||||
<el-tree ref="tree" :data="tree" :expand-on-click-node="false" default-expand-all node-key="id" show-checkbox
|
||||
style="padding: 15px"
|
||||
>
|
||||
<div slot-scope="{ node, data }" class="action-group">
|
||||
<div :style="{ width: (4 - data.lv) * 18 + 150 + 'px' }" class="action-text">
|
||||
{{ data.name }}
|
||||
</div>
|
||||
<div class="action-item">
|
||||
<el-checkbox v-for="(item, index) in data.auth_node_tags_array" :key="index"
|
||||
v-model="item.checked" @change="()=>{}"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</Card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LxHeader from '@/components/LxHeader/index.vue'
|
||||
import {
|
||||
list
|
||||
} from '../../api/system/role.js'
|
||||
import {
|
||||
listmenu
|
||||
} from '../../api/system/menu.js'
|
||||
import {
|
||||
setPermissions
|
||||
} from '../../api/system/permission.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LxHeader
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeRole: '',
|
||||
rolelist: [],
|
||||
selectIndex: -1,
|
||||
checked: false,
|
||||
data: [],
|
||||
tree: [],
|
||||
height: 0
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
var that = this
|
||||
this.initLoad()
|
||||
this.load(function() {
|
||||
that.loadrole()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
initLoad() {
|
||||
var that = this
|
||||
var clientHeight = document.documentElement.clientHeight
|
||||
var lxHeader_height = 67 //查询 头部
|
||||
var card_Height = 109 //分页的高度
|
||||
var topHeight = 50 //页面 头部
|
||||
let height = clientHeight - lxHeader_height - topHeight - card_Height
|
||||
that.height = height
|
||||
},
|
||||
loadrole() {
|
||||
var that = this
|
||||
list().then(response => {
|
||||
let cur = 0
|
||||
that.rolelist = response
|
||||
|
||||
for (let mod of response) {
|
||||
mod.rowid = mod.id.toString()
|
||||
console.log(mod)
|
||||
if (cur == 0) {
|
||||
that.activeRole = mod.rowid
|
||||
that.loadPermisstions(0, that.activeRole)
|
||||
}
|
||||
cur++
|
||||
}
|
||||
|
||||
}).catch(error => {
|
||||
})
|
||||
},
|
||||
load(callback) {
|
||||
var that = this
|
||||
listmenu().then(response => {
|
||||
this.tree = response
|
||||
|
||||
this.tree.forEach((tree, index1) => {
|
||||
|
||||
let children = tree.children
|
||||
children.forEach((menu, index3) => {
|
||||
|
||||
menu.auth_node_tags_array.map((m, index4) => {
|
||||
m.checked = false
|
||||
that.$forceUpdate()
|
||||
|
||||
})
|
||||
})
|
||||
})
|
||||
callback()
|
||||
}).catch(error => {
|
||||
})
|
||||
},
|
||||
roleChange(tab, event) {
|
||||
this.loadPermisstions(parseInt(tab.index), tab.name)
|
||||
},
|
||||
loadPermisstions(index, name) {
|
||||
let select = this.rolelist[index].permissions
|
||||
this.$refs.tree.setCheckedKeys([])
|
||||
this.activeRole = name
|
||||
|
||||
let that = this
|
||||
this.tree.forEach((tree, index1) => {
|
||||
let children = tree.children
|
||||
select.forEach((item, index2) => {
|
||||
let selectMenu = children.filter(m => {
|
||||
return m.id == item.id
|
||||
})
|
||||
|
||||
selectMenu.forEach((menu, index3) => {
|
||||
if (item.has_auth_node_tags.length > 0) {
|
||||
menu.auth_node_tags_array.forEach((m, index4) => {
|
||||
if (item.has_auth_node_tags.indexOf(m.tag) > -1) {
|
||||
that.$set(m,
|
||||
'checked', true)
|
||||
} else {
|
||||
that.$set(m,
|
||||
'checked', false)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
menu.auth_node_tags_array.map(m => {
|
||||
m.checked = false
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$refs.tree.updateKeyChildren(tree.id, JSON.parse(JSON.stringify(children)))
|
||||
})
|
||||
this.$refs.tree.setCheckedNodes(select)
|
||||
that.$forceUpdate()
|
||||
},
|
||||
|
||||
savepermission() {
|
||||
var checkedList = this.$refs.tree.getCheckedNodes()
|
||||
console.log(checkedList)
|
||||
if (checkedList.length == 0) {
|
||||
this.$message.error('请选择菜单')
|
||||
return false
|
||||
}
|
||||
let data = {}
|
||||
data.id = this.activeRole
|
||||
let permission = []
|
||||
for (var m of checkedList) {
|
||||
let tags = []
|
||||
var mod = {}
|
||||
mod.permission_id = m.id
|
||||
m.auth_node_tags_array.map(item => {
|
||||
if (item.checked) {
|
||||
tags.push(item.tag)
|
||||
}
|
||||
})
|
||||
mod.auth_node_tags = tags.join(',')
|
||||
permission.push(mod)
|
||||
|
||||
}
|
||||
data.permission_list = permission
|
||||
setPermissions(data).then(response => {
|
||||
console.log(response)
|
||||
this.$Message.success('操作成功')
|
||||
that.dialogFormVisible = false
|
||||
that.load()
|
||||
}).catch(error => {
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.t-tree {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
background: #eee;
|
||||
/* padding: 100px; */
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #f9f8f8;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #eee;
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
padding: 0 15px;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-container {
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
margin-left: 15px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.role-list {
|
||||
width: 200px;
|
||||
border: 1px solid #eee;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.actived {
|
||||
color: #409efe !important;
|
||||
background-color: #f3f7f9;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.roleitem {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.action-item > label {
|
||||
width: 55px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.action-container >>> .el-tree-node {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.action-container >>> .el-checkbox__label {
|
||||
padding-left: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue