<template>
|
<el-container>
|
<el-aside>
|
<basic-container>
|
<div ref="TreeBox" style="height: calc(100vh - 154px);!important;">
|
<!-- 左侧树 -->
|
<div style="height: calc(100vh - 200px);">
|
<avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
|
<span slot-scope="{ node, data }" class="el-tree-node__label">
|
<span style="font-size: 15px">
|
<i class="el-icon-user-solid"></i>
|
{{ (node || {}).label }}
|
</span>
|
</span>
|
</avue-tree>
|
</div>
|
</div>
|
</basic-container>
|
</el-aside>
|
|
<el-main>
|
<basic-container>
|
<h3 style="margin: 0 0 10px 0">UI权限配置</h3>
|
<div>
|
<el-button icon="el-icon-place" plain size="small" type="primary" @click="saveHandler">授权</el-button>
|
<el-button icon="el-icon-close" plain size="small" type="primary" @click="clearValue" style="margin-right: 40px;">重置</el-button>
|
业务类型：<el-select v-model="type" placeholder="请选择" :clearable="true" @change="typeChange" style="width: 350px;margin-right: 20px;">
|
<el-option
|
v-for="item in typeData"
|
:key="item.oid"
|
:label="item.text"
|
:value="item.attributes.name">
|
</el-option>
|
</el-select>
|
UI上下文：<el-select v-model="context" placeholder="请选择" :clearable="true" @change="contextChange" style="width: 350px;">
|
<el-option
|
v-for="item in contextData"
|
:key="item.oid"
|
:label="item.plCode+' '+item.plName"
|
:value="item.plCode">
|
</el-option>
|
</el-select>
|
</div>
|
<div style="height: calc(100vh - 277px);margin-top: 10px;">
|
<avue-tree ref="uiTree" :data="uiTreeData" :option="uiTreeOption">
|
<span slot-scope="{ node, data }" class="el-tree-node__label">
|
<span style="font-size: 15px">
|
<i :class="data.icon"></i>
|
{{ (node || {}).label }}
|
</span>
|
</span>
|
</avue-tree>
|
</div>
|
</basic-container>
|
</el-main>
|
|
</el-container>
|
</template>
|
|
<script>
|
import {gridRoles} from "@/api/system/role/api";
|
import {getUIAuthor,authorizedUI} from "@/api/authority/ui/uiAuthor";
|
import {getBizTree, gridUIContextData} from "@/api/UI/uiDefine";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
type:'',//业务类型
|
context:'',//UI上下文code
|
treeOption: {
|
menu: false,
|
addBtn: false,
|
props: {
|
label: 'name',
|
value: 'oid',
|
children: 'children'
|
}
|
},
|
nodeRow: {},
|
treeData: [],
|
defaultExpandKeys:[],
|
uiTreeOption: {
|
defaultExpandKeys:[],
|
multiple: true,
|
menu: false,
|
addBtn: false,
|
filter:false,
|
props: {
|
label: 'label',
|
value: 'oid',
|
children: 'children'
|
}
|
},
|
uiTreeData: [],
|
typeData:[],
|
contextData:[]
|
}
|
},
|
created() {
|
this.getTreeList();
|
this.getTypeList()
|
},
|
methods:{
|
getTreeList() {
|
const loading = this.$loading({});
|
gridRoles().then(res => {
|
this.treeData = res.data.data;
|
loading.close();
|
}).catch(error=>{
|
loading.close();
|
})
|
},
|
// 角色点击
|
nodeClick(row) {
|
this.nodeRow = row;
|
this.getUITree();
|
},
|
getUITree() {
|
if (this.nodeRow && this.nodeRow.oid) {
|
const loading = this.$loading({});
|
const params = {
|
'conditionMap[roleId]': this.nodeRow.oid,
|
'conditionMap[type]': this.type,
|
'conditionMap[context]': this.context
|
}
|
this.defaultExpandKeys=['root'];
|
getUIAuthor(params).then(res => {
|
this.processChildren(res.data.data[0]); // 处理每个节点
|
this.uiTreeOption.defaultExpandKeys=this.defaultExpandKeys;
|
this.uiTreeData = [{
|
attributes: {},
|
checked: false,
|
expanded: true,
|
data: "root",
|
level: 0,
|
icon: 'el-icon-s-home',
|
oid: res.data.data[0].oid,
|
label: res.data.data[0].text,
|
children: res.data.data[0].children
|
}];
|
loading.close();
|
}).catch(error => {
|
loading.close();
|
})
|
}
|
},
|
//处理树
|
processChildren(item) {
|
if (item.children && item.children.length > 0) {
|
item.children = item.children.map(child => {
|
if(child.level<5){
|
this.defaultExpandKeys.push(child.oid)
|
}
|
if(child.level==1){
|
child.icon='el-icon-s-promotion';
|
child.label=child.data.label+'（'+child.data.name+'）'
|
}else if(child.level==2){
|
child.icon='el-icon-s-order';
|
child.label=child.text
|
}else if(child.level==3){
|
child.icon='el-icon-office-building';
|
child.label=child.text
|
}else if(child.level==4){
|
child.icon='el-icon-document';
|
child.label=child.text
|
}else if(child.level==5){
|
child.icon='el-icon-s-ticket';
|
child.label=child.text
|
}
|
this.processChildren(child); // 递归处理每个子节点
|
return child; // 只返回子节点的 attributes
|
});
|
}
|
},
|
getTypeList() {
|
getBizTree().then(res => {
|
this.typeData=res.data.obj.children;
|
})
|
},
|
typeChange(data){
|
this.contextData=[];
|
this.type=data;
|
if(data){
|
const params = {
|
'conditionMap[btmName]': data,
|
}
|
gridUIContextData(1, 500, params).then(res => {
|
this.contextData = res.data.data;
|
})
|
}else {
|
this.contextData = [];
|
}
|
this.getUITree();
|
},
|
contextChange(data){
|
this.context=data;
|
this.getUITree();
|
},
|
saveHandler() {
|
const selectTreeList = this.$refs.uiTree.getCheckedNodes();
|
if (selectTreeList.length == 0) {
|
this.$message.error("请选择功能模块");
|
return;
|
}
|
const formData = {
|
roleId: this.nodeRow.oid,
|
type: this.type,
|
context: this.context,
|
selectTreeList: selectTreeList
|
}
|
authorizedUI(formData).then(res => {
|
if (res.data.success) {
|
this.$message.success("授权成功");
|
this.cancelDialog();
|
}
|
});
|
},
|
clearValue(){
|
this.$refs.uiTree.setCheckedNodes([])
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-scrollbar__wrap {
|
overflow: auto !important;
|
}
|
.headerCon{
|
.el-button{
|
width: 82px;
|
}
|
}
|
}
|
|
.headerCon {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 5px;
|
|
.el-button + .el-button {
|
margin-left: 5px;
|
}
|
|
.el-button {
|
margin-top: 5px;
|
}
|
}
|
|
.headerCon > .el-button:nth-child(4) {
|
margin-left: 0;
|
}
|
|
.headerCon > .el-button:nth-child(7) {
|
margin-left: 0;
|
}
|
|
|
.smallBtn {
|
width: 82px;
|
text-align: center;
|
padding-left: 4.5px;
|
}
|
|
</style>
|
