<template>
|
<div>
|
<div class="body" :style="{height:mainHeight+'px'}">
|
|
<div
|
class="elTableDiv"
|
>
|
|
<div style="width: 300px;background:#fff">
|
|
<div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">
|
<div style="display: flex;">
|
<div
|
style="width: 5px;height: 100%;border-radius: 5px;"
|
:style="{background:$store.state.settings.theme}"
|
/>
|
<div style="margin-left: 8px;">角色名称</div>
|
</div>
|
|
<!-- <div style="margin-right:10px">-->
|
<!-- <i class="el-icon-plus" style="cursor: pointer;color: #999" @click="rolePlusClick" />-->
|
<!-- </div>-->
|
|
</div>
|
|
<el-tree
|
ref="treeLeftRef"
|
style="padding: 10px;overflow: auto"
|
:style="{height:(tableHeight-20)+'px'}"
|
:data="treeLeft"
|
node-key="code"
|
highlight-current
|
:props="defaultPropsLeft"
|
:default-expand-all="true"
|
:expand-on-click-node="false"
|
@node-click="treeLeftNodeClick"
|
/>
|
<!-- draggable-->
|
<!-- :allow-drop="treeLeftAllowDrop"-->
|
</div>
|
|
<div
|
style="margin-left: 10px;width: calc(100% - 300px);position: relative"
|
>
|
|
<el-button
|
style="position: absolute;right: 15px;z-index:1;top:3px"
|
type="primary"
|
:loading="$store.state.app.buttonIsDisabled"
|
:disabled="$store.state.app.buttonIsDisabled"
|
@click="saveClick"
|
>保 存
|
</el-button>
|
|
<el-tabs v-model="activeName" type="border-card" @tab-click="tabClick">
|
<el-tab-pane label="PC端" name="PC">
|
<div style="display: flex;">
|
<div
|
ref="scrollLeft"
|
style="border-right: 1px solid rgba(0,0,0,0.2);width:100%;
|
overflow-y: auto;overflow-x:hidden;"
|
:style="{height:(tableHeight-40)+'px'}"
|
@scroll="scrollLeftScroll()"
|
@mouseover="isScroll='left'"
|
>
|
<div style=" ">
|
<i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 菜单权限
|
</div>
|
|
<el-tree
|
ref="treeCenterPCRef"
|
style="padding-top: 10px;"
|
:data="treeCenter"
|
highlight-current
|
:props="defaultPropsCenter"
|
show-checkbox
|
node-key="menucode"
|
:default-expand-all="true"
|
@check-change="handleTreeCenterCheckChange"
|
@check="handleTreeCenterCheck"
|
@node-click="getLeftTreeNode"
|
/>
|
</div>
|
<!-- <div-->
|
<!-- ref="scrollCenter"-->
|
<!-- style="width: calc(100% - 260px );padding-left: 10px;overflow-y: auto;"-->
|
<!-- :style="{height:(tableHeight-40)+'px'}"-->
|
<!-- @scroll="scrollCenterScroll()"-->
|
<!-- @mouseover="isScroll='center'"-->
|
<!-- >-->
|
<!-- <div style=" ">-->
|
<!-- <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 按钮权限-->
|
<!-- </div>-->
|
|
<!-- <el-checkbox-->
|
<!-- v-model="buttonIsChecked"-->
|
<!-- style="height: 26px;display:flex;align-items: center;margin-top:10px;width:200px"-->
|
<!-- @change=" handleCheckAllChange "-->
|
<!-- >全选-->
|
<!-- </el-checkbox>-->
|
|
<!-- <div v-if="treeCenter.length>0">-->
|
<!-- <div v-for="(item,index) in treeCenter[0].children" :key="item.menucode">-->
|
|
<!-- <div-->
|
<!-- v-if="!item.buttoncodelist"-->
|
<!-- style="margin-left: 40px;height:26px;display: flex;"-->
|
<!-- />-->
|
|
<!-- <el-checkbox-group-->
|
<!-- v-for="it in item.children"-->
|
<!-- v-if="item.expanded"-->
|
<!-- :key="it.menucode"-->
|
<!-- v-model="it.buttonChecked"-->
|
<!-- style="margin-left: 40px;height:26px;display: flex;"-->
|
<!-- @change="val=>handleCheckedButtonChange(val,it.menucode,it.buttonChecked)"-->
|
<!-- >-->
|
|
<!-- <el-checkbox-->
|
<!-- v-for="i in it.buttoncodelist"-->
|
<!-- :key="i"-->
|
<!-- :label="i"-->
|
<!-- style="display:flex;align-items: center;"-->
|
<!-- />-->
|
<!-- </el-checkbox-group>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="APP端" name="APP">
|
<div style="display: flex;">
|
<div
|
ref="scrollLeft"
|
style="border-right: 1px solid rgba(0,0,0,0.2);width:100%;
|
overflow-y: auto;overflow-x:hidden;"
|
:style="{height:(tableHeight-40)+'px'}"
|
@scroll="scrollLeftScroll()"
|
@mouseover="isScroll='left'"
|
>
|
<div style=" ">
|
<i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 菜单权限
|
</div>
|
|
<el-tree
|
ref="treeCenterAPPRef"
|
style="padding-top: 10px;"
|
:data="treeCenter"
|
highlight-current
|
:props="defaultPropsCenter"
|
show-checkbox
|
node-key="menucode"
|
:default-expand-all="true"
|
@check-change="handleTreeCenterCheckChange"
|
@check="handleTreeCenterCheck"
|
@node-click="getLeftTreeNode"
|
/>
|
</div>
|
</div>
|
</el-tab-pane>
|
<!-- <el-tab-pane label="工控端" name="工控端">工控端</el-tab-pane>-->
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import waves from '@/directive/waves'
|
import {
|
RolePermissionSava,
|
RolePermissionSearchRole,
|
RolePermissionSearchRoleMenu,
|
RolePermissionSearchRoleMenuButton
|
} from '@/api/basicSettings'
|
import arrayToTree from 'array-to-tree'
|
|
export default {
|
name: 'PowerDivider',
|
directives: { waves },
|
data() {
|
return {
|
mainHeight: 0,
|
tableHeight: 0,
|
|
treeLeft: [], // 左侧树
|
treeCenter: [], // 中间树
|
defaultPropsLeft: {
|
children: 'roles',
|
label: 'name'
|
},
|
defaultPropsCenter: {
|
children: 'children',
|
label: 'menuname'
|
},
|
activeName: 'PC',
|
|
buttonIsChecked: false,
|
|
menuCheckedCodeArr: [], // 菜单权限数组选中的
|
|
allButtonData: [], // 所有菜单对应的按钮权限加数据权限
|
|
isScroll: 'left',
|
|
ButtonData: JSON.parse(localStorage.getItem('ButtonData'))
|
|
}
|
},
|
|
activated() { window.addEventListener('resize', this.getHeight) this.getHeight() }, created() {
|
|
},
|
mounted() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
|
this.getRolePermissionSearchRole()
|
},
|
methods: {
|
|
// 获取角色权限查询角色
|
async getRolePermissionSearchRole() {
|
const { data: res } = await RolePermissionSearchRole()
|
this.treeLeft = res
|
|
let rolecode = ''
|
if (window.location.hash.indexOf('?') !== -1) {
|
rolecode = window.location.hash.split('?')[1].split('=')[1]
|
}
|
|
if (res && res.length > 0) {
|
this.$nextTick(() => { // 默认选中第一个
|
this.$refs.treeLeftRef.setCurrentKey(rolecode || res[0].code) // 默认选中节点第一个
|
})
|
|
await this.getRolePermissionSearchRoleMenuButton(rolecode || res[0].code)// 用于数据回显
|
|
await this.getRolePermissionSearchRoleMenu(rolecode || res[0].code)// 用于渲染页面
|
} else {
|
this.$notify.error('请先建相对应的角色！')
|
}
|
},
|
async tabClick() {
|
this.treeCenter = []
|
await this.getRolePermissionSearchRoleMenuButton(this.$refs.treeLeftRef.getCurrentKey())// 用于数据回显
|
await this.getRolePermissionSearchRoleMenu(this.$refs.treeLeftRef.getCurrentKey())// 用于渲染页面
|
},
|
|
// 获取菜单权限对应的按钮
|
async getRolePermissionSearchRoleMenuButton(rolecode) {
|
const { data: res } = await RolePermissionSearchRoleMenuButton({ rolecode, type: this.activeName })
|
this.allButtonData = res.length > 0 ? JSON.parse(res[0].jsondate) : []
|
},
|
// 获取菜单权限
|
async getRolePermissionSearchRoleMenu(rolecode) {
|
const { data: res } = await RolePermissionSearchRoleMenu({ rolecode, type: this.activeName })
|
|
// 拿到数组list转换成树形tree
|
const result = arrayToTree(res, {
|
parentProperty: 'parent_id',
|
customID: 'menucode',
|
childrenProperty: 'children'
|
})
|
|
this.treeCenter = [
|
{ menucode: '-1', menuname: '全部', children: result }
|
]
|
|
this.treeCenter[0].children.sort((a, b) => a.menu_seq - b.menu_seq)
|
this.treeCenter[0].children.forEach(item => {
|
if (item.children && item.children.length) {
|
item.children.forEach(it => {
|
it.buttoncodelist = it.buttoncodelist !== '' && it.buttoncodelist !== null ? it.buttoncodelist.split(',') : []
|
if (it.buttoncodelist && it.buttoncodelist.length > 0) {
|
it.buttoncodelist = this.ButtonData.filter(j =>
|
it.buttoncodelist.includes(j.buttoncode)
|
)
|
|
it.buttoncodelist = it.buttoncodelist.map(j => j.buttonname)
|
}
|
})
|
|
item.children.sort((a, b) => a.menu_seq - b.menu_seq)
|
|
item.expanded = true
|
}
|
})
|
|
this.handleData()// 处理数据回显
|
},
|
// 处理组合数据
|
handleData() {
|
this.menuCheckedCodeArr = this.allButtonData.map(i => i.menucode)
|
this.$nextTick(() => {
|
if (this.activeName === 'PC') {
|
this.$refs.treeCenterPCRef.setCheckedKeys(this.menuCheckedCodeArr)
|
}
|
if (this.activeName === 'APP') {
|
this.$refs.treeCenterAPPRef.setCheckedKeys(this.menuCheckedCodeArr)
|
}
|
})
|
|
this.treeCenter[0].children.forEach(item => {
|
if (item.children && item.children.length) {
|
item.children.forEach(it => {
|
let temp = this.allButtonData.filter(j => j.menucode === it.menucode).length > 0 ? this.allButtonData.filter(j => j.menucode === it.menucode)[0].buttoncode : []
|
temp = temp.length > 0 ? temp.split(',') : []
|
it.buttonChecked = [] // 数据回显
|
this.ButtonData.forEach(j => {
|
if (temp.includes(j.buttoncode)) {
|
it.buttonChecked.push(j.buttonname)
|
}
|
})
|
})
|
}
|
})
|
|
this.handleCheckedButtonChange('', '', '', true)
|
// this.$forceUpdate()
|
},
|
|
// 左边滚动条滑动时
|
scrollLeftScroll() {
|
if (this.isScroll === 'left') {
|
this.$refs.scrollCenter.scrollTop = this.$refs.scrollLeft.scrollTop
|
}
|
},
|
// 中间边滚动条滑动时
|
scrollCenterScroll() {
|
if (this.isScroll === 'center') {
|
this.$refs.scrollLeft.scrollTop = this.$refs.scrollCenter.scrollTop
|
}
|
},
|
|
// 全选改变
|
handleCheckAllChange(val) {
|
let checkedKeys
|
if (this.activeName === 'PC') {
|
checkedKeys = this.$refs.treeCenterPCRef.getCheckedKeys()
|
}
|
if (this.activeName === 'APP') {
|
checkedKeys = this.$refs.treeCenterAPPRef.getCheckedKeys()
|
}
|
|
if (val) {
|
this.treeCenter[0].children.forEach(item => {
|
if (item.children && item.children.length) {
|
item.children.forEach(it => {
|
if (checkedKeys.includes(it.menucode)) {
|
it.buttonChecked = it.buttoncodelist
|
}
|
})
|
}
|
})
|
} else {
|
this.treeCenter[0].children.forEach(item => {
|
if (item.children && item.children.length) {
|
item.children.forEach(it => {
|
if (checkedKeys.includes(it.menucode)) {
|
it.buttonChecked = []
|
}
|
})
|
}
|
})
|
}
|
},
|
// 单个按钮改变
|
handleCheckedButtonChange(oldValue, code, newValue, flag) {
|
// console.log(oldValue, code, newValue, 2)
|
// 判断是否包含在内
|
if (!flag) {
|
if (!this.menuCheckedCodeArr.includes(code) && oldValue.length === 0 && newValue.length === 1) { // 否
|
this.menuCheckedCodeArr.push(code)
|
} else if (this.menuCheckedCodeArr.includes(code) && oldValue.length === 1 && newValue.length === 0) { // 是
|
this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== code)
|
}
|
if (this.activeName === 'PC') {
|
this.$refs.treeCenterPCRef.setCheckedKeys(this.menuCheckedCodeArr)
|
}
|
if (this.activeName === 'APP') {
|
this.$refs.treeCenterAPPRef.setCheckedKeys(this.menuCheckedCodeArr)
|
}
|
}
|
|
// 这里是判断全选checkbox 是否选中
|
let count = 0
|
let childrenLength = 0
|
this.treeCenter[0].children.forEach(item => {
|
if (item.children && item.children.length) {
|
item.children.forEach(it => {
|
if (it.buttonChecked && it.buttonChecked.length === it.buttoncodelist.length && it.buttoncodelist.length > 0) {
|
count++
|
}
|
|
if (it.buttoncodelist.length) {
|
childrenLength++
|
}
|
})
|
}
|
})
|
|
this.buttonIsChecked = count === childrenLength
|
this.$forceUpdate()
|
},
|
// 获取树形节点node
|
getLeftTreeNode(data, Node, VueComponent) {
|
this.treeCenter[0].children.forEach(item => {
|
if (item.menucode === data.menucode) {
|
item.expanded = Node.expanded
|
}
|
})
|
if (data.menucode === '-1') {
|
Node.expanded = true // 暂时先写成这个
|
}
|
this.$forceUpdate()
|
},
|
// 处理中间树形勾选
|
handleTreeCenterCheck(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
|
// console.log(obj, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys, '加多宝')
|
|
if (checkedKeys.length === 0) { // 树形菜单全不选的情况下
|
this.buttonIsChecked = false
|
this.menuCheckedCodeArr = []
|
} else {
|
if (checkedKeys.includes(obj.menucode)) { // 判断是否包含在内 //是
|
this.menuCheckedCodeArr.push(obj.menucode)
|
} else { // 否
|
this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.menucode)
|
}
|
}
|
},
|
// 处理中间树形选中值改变
|
handleTreeCenterCheckChange(obj, selfChecked, selfChildrenTreeCheck) {
|
// console.log(obj, selfChecked, selfChildrenTreeCheck, '王老吉')
|
if (!selfChildrenTreeCheck) {
|
if (!selfChecked) { // 从选中到不选中
|
obj.buttonChecked = []
|
this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.menucode)
|
}
|
if (selfChecked) { // 从不选中到选中
|
obj.buttonCheckedCode = []
|
this.treeCenter[0].children.forEach(item => {
|
if (item.children && item.children.length) {
|
item.children.forEach(it => {
|
if (it.menucode === obj.menucode) {
|
this.menuCheckedCodeArr.push(obj.menucode)
|
}
|
})
|
}
|
})
|
}
|
|
this.$forceUpdate()
|
}
|
},
|
// 角色切换
|
async treeLeftNodeClick(obj, Node, VueComponent) {
|
if (obj.code !== '000') {
|
await this.getRolePermissionSearchRoleMenuButton(obj.code)
|
this.handleData()
|
}
|
},
|
// 页面勾选好保存事件
|
async saveClick() {
|
const rolecode = this.$refs.treeLeftRef.getCurrentKey()
|
const datacode = this.treeLeft.find(i => i.code === rolecode).datarange !== 'CUSTOM' ? this.treeLeft.find(i => i.code === rolecode).datarange : this.treeLeft.find(i => i.code === rolecode).datapermissions
|
let menuKeyArr
|
if (this.activeName === 'PC') {
|
menuKeyArr = this.$refs.treeCenterPCRef.getCheckedKeys()
|
}
|
if (this.activeName === 'APP') {
|
menuKeyArr = this.$refs.treeCenterAPPRef.getCheckedKeys()
|
}
|
|
const arr = []
|
this.treeCenter[0].children.forEach(item => {
|
if (item.children && item.children.length) {
|
item.children.forEach(it => {
|
if (menuKeyArr.includes(it.menucode)) {
|
if (it.buttonChecked && it.buttonChecked.length > 0) { // 已选菜单
|
it.buttonCheckedCode = this.ButtonData.filter(i =>
|
it.buttonChecked.includes(i.buttonname)
|
).map(i => i.buttoncode)
|
}
|
arr.push({
|
menucode: it.menucode,
|
datacode,
|
buttoncode: it.buttonCheckedCode ? it.buttonCheckedCode.join(',') : ''
|
})
|
}
|
})
|
}
|
})
|
this.$store.state.app.buttonIsDisabled = true
|
|
const res = await RolePermissionSava(JSON.stringify(arr), rolecode, this.activeName)
|
if (res.code === '200') {
|
const rolename = this.treeLeft.find(i => i.code === rolecode).name
|
this.$notify.success(rolename + '的角色权限提交成功！')
|
await this.getRolePermissionSearchRoleMenuButton(rolecode)
|
this.$store.state.app.buttonIsDisabled = false
|
}
|
},
|
// 获取页面高度
|
getHeight() {
|
this.$nextTick(() => {
|
this.mainHeight = window.innerHeight - 85
|
this.tableHeight = this.mainHeight - 50
|
})
|
},
|
// 左侧树形拖动处理
|
treeLeftAllowDrop(draggingNode, dropNode, type) {
|
// console.log(draggingNode, dropNode, type)
|
// 注掉的是同级拖拽
|
if (draggingNode.level === dropNode.level) {
|
return type === 'prev' || type === 'next'
|
} else {
|
// 不同级进行处理
|
return false
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
::v-deep .el-checkbox__label {
|
width: 55px;
|
}
|
|
.el-checkbox-group {
|
margin-left: 0 !important;
|
padding-left: 40px;
|
}
|
|
.el-checkbox-group:hover {
|
background: #f0f7ff;
|
}
|
</style>
|
