<template>
|
<el-container>
|
<el-aside>
|
<basic-container>
|
<div ref="TreeBox" style="height: calc(100vh - 154px);!important;">
|
<!-- 左侧树 -->
|
<div style="height: calc(100vh - 195px);">
|
<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 v-loading="treeLoading">
|
<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" style="margin-right: 40px;" type="primary"
|
@click="clearValue">重置
|
</el-button>
|
业务类型：
|
<el-select v-model="type" :clearable="true" placeholder="请选择" size="small"
|
style="width: 300px;margin-right: 20px;"
|
@change="typeChange">
|
<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" :clearable="true" placeholder="请选择" size="small" style="width: 350px;"
|
@change="contextChange">
|
<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 - 232px);margin-top: 10px;">
|
<avue-tree ref="uiTree" :data="uiTreeData" :node-key="oid" :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, getRightListByRoleId} 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 {
|
treeLoading: false,
|
type: '',//业务类型
|
context: '',//UI上下文code
|
treeOption: {
|
menu: false,
|
addBtn: false,
|
props: {
|
label: 'name',
|
value: 'oid',
|
children: 'children'
|
}
|
},
|
nodeRow: {},
|
treeData: [],
|
defaultExpandKeys: [],
|
uiTreeOption: {
|
defaultExpandedKeys: this.defaultExpandKeys,
|
multiple: true,
|
menu: false,
|
addBtn: false,
|
filter: false,
|
props: {
|
label: 'label',
|
value: 'oid',
|
children: 'children'
|
}
|
},
|
uiTreeData: [],
|
typeData: [],
|
contextData: []
|
}
|
},
|
created() {
|
this.getTreeList();
|
// this.getUITree();
|
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();
|
// const params = {
|
// roleId: row.oid
|
// }
|
// getRightListByRoleId(params).then(res => {
|
// const data = res.data.data.map(item => item.funcId);
|
// console.log(data);
|
// this.$refs.uiTree.setCheckedKeys(data);
|
// })
|
},
|
|
getUITree() {
|
this.treeLoading = true;
|
const params = {
|
'conditionMap[roleId]': this.nodeRow.oid,
|
'conditionMap[type]': this.type,
|
'conditionMap[context]': this.context,
|
'conditionMap[showCheckbox]': true
|
}
|
this.defaultExpandKeys = ['root'];
|
getUIAuthor(params).then(res => {
|
this.processChildren(res.data.data[0]); // 处理每个节点
|
this.uiTreeOption.defaultExpandedKeys = 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
|
}];
|
const checkedData = this.findCheckedOids(res.data.data[0]);
|
this.$refs.uiTree.setCheckedKeys(checkedData);
|
|
this.treeLoading = false;
|
}).catch(error => {
|
this.treeLoading = false;
|
})
|
},
|
|
// 查找已选择节点
|
findCheckedOids(obj, result = []) {
|
if (obj.checked === true) {
|
result.push(obj.oid);
|
}
|
// 如果有 children，则继续遍历
|
if (obj.children && obj.children.length > 0) {
|
obj.children.forEach(child => {
|
this.findCheckedOids(child, result);
|
});
|
}
|
return result;
|
},
|
|
//处理树
|
processChildren(item) {
|
if (item.children && item.children.length > 0) {
|
item.children = item.children.map(child => {
|
if (child.level < 3) {
|
// 默认树节点展开两层效果
|
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-tools';
|
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();
|
const selectParentList = this.$refs.uiTree.getHalfCheckedNodes();
|
if (selectTreeList.length == 0) {
|
this.$message.error("请选择功能模块");
|
return;
|
}
|
const selectTreeData = selectTreeList.map(item => {
|
return {
|
checked: true,
|
expanded: true,
|
data:item.data,
|
parentId:item.parentId,
|
level: item.level,
|
leaf:item.leaf,
|
oid: item.oid,
|
text: item.text
|
}
|
})
|
|
const parentData = selectParentList.map(item => {
|
return {
|
checked: false,
|
expanded: true,
|
data:item.data,
|
parentId:item.parentId,
|
level: item.level,
|
leaf:item.leaf,
|
oid: item.oid,
|
text: item.text
|
}
|
})
|
// 在半选状态中过滤掉顶级节点 oid 为 root
|
const filterSelectTreeData = parentData.filter(item => item.oid !== 'root');
|
|
const data = [...selectTreeData,...filterSelectTreeData];
|
const formData = {
|
roleId: this.nodeRow.oid,
|
type: this.type,
|
context: this.context,
|
selectTreeList: data
|
}
|
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>
|
