wangyifang
/
mkw-visit-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
master
刘翔宇-旅管家 3 years ago
parent a37f0794a8
commit acb3114d76
1 changed files with 305 additions and 312 deletions
Show Stats Download Patch File Download Diff File

617
src/views/system/permission.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save