<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>
|
<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">功能权限配置</h3>
|
<div>
|
<el-button v-if="permissionList.rightBtn" class="button-custom-icon" plain size="small" type="primary" @click="saveHandler">
|
<icon-show :name="permissionList.rightBtn.source"></icon-show>
|
授权
|
</el-button>
|
<el-button v-if="permissionList.resetBtn" class="button-custom-icon" plain size="small" style="margin-right: 40px;" type="primary"
|
@click="clearValue">
|
<icon-show :name="permissionList.resetBtn.source"></icon-show>
|
重置
|
</el-button>
|
</div>
|
<div style="height: calc(100vh - 232px);margin-top: 10px;">
|
<avue-tree ref="uiTree" :data="uiTreeData" :node-key="id" :option="uiTreeOption">
|
<span slot-scope="{ node, data }" class="el-tree-node__label">
|
<span>
|
<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 {getSysModelAuthTreeMenuByPID, getSysModelAuth, saveRoleRight} from "@/api/authority/functionView/api"
|
import {mapGetters} from "vuex";
|
|
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: 'name',
|
value: 'id',
|
children: 'children'
|
}
|
},
|
uiTreeData: [],
|
typeData: [],
|
contextData: []
|
}
|
},
|
computed:{
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
rightBtn: this.vaildData(this.permission[this.$route.query.id].RIGHT, false),
|
resetBtn: this.vaildData(this.permission[this.$route.query.id].RESET, false),
|
};
|
},
|
},
|
created() {
|
this.getTreeList();
|
this.getUITree();
|
},
|
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.treeLoading = true;
|
getSysModelAuth({roleId: row.oid}).then(res => {
|
const data = res.data.data;
|
// console.log(data);
|
this.$refs.uiTree.setCheckedKeys(data);
|
this.treeLoading = false;
|
})
|
},
|
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'];
|
getSysModelAuthTreeMenuByPID(params).then(res => {
|
console.log(res);
|
let data= [{
|
attributes: {},
|
checked: false,
|
expanded: true,
|
data: "root",
|
childType: 1,
|
icon: 'el-icon-s-home',
|
id: 'root',
|
name:'功能模块',
|
children: res.data.data
|
}];
|
this.processChildren(data[0]); // 处理每个节点
|
this.uiTreeOption.defaultExpandedKeys = this.defaultExpandKeys;
|
this.uiTreeData = data;
|
this.treeLoading = false;
|
}).catch(error => {
|
this.treeLoading = false;
|
})
|
},
|
//处理树
|
processChildren(item) {
|
if (item.children && item.children.length > 0) {
|
item.children = item.children.map(child => {
|
if (!child.childType) {
|
// 默认树节点展开,最子级不展开
|
this.defaultExpandKeys.push(child.id)
|
}
|
child.icon = 'el-icon-s-promotion';
|
if (child.childType == 1) {
|
child.icon = 'el-icon-document';
|
} else if (child.childType == 2) {
|
child.icon = 'el-icon-s-tools';
|
}
|
this.processChildren(child); // 递归处理每个子节点
|
return child; // 只返回子节点的 attributes
|
});
|
}
|
},
|
saveHandler() {
|
const selectTreeList = this.$refs.uiTree.getCheckedNodes();
|
const selectParentList = this.$refs.uiTree.getHalfCheckedNodes();
|
|
if (selectTreeList.length == 0) {
|
this.$message.error("请选择功能模块");
|
return;
|
}
|
const formData = selectTreeList.map(item => {
|
return {
|
parentId: item.childType === 2 ? item.funcId : item.parentId,
|
id: item.id,
|
type: (!item.childType || item.childType === 1) ? 1 : 2,
|
number: item.childType === 2 ? item.sort : ''
|
}
|
})
|
const parentData = selectParentList.map(item => {
|
return {
|
parentId: item.parentId,
|
id: item.id,
|
type: (!item.childType || item.childType === 1) ? 1 : 2,
|
number: ''
|
}
|
})
|
const data = [...parentData,...formData];
|
data.shift();
|
const params = {
|
roleId: this.nodeRow.oid,
|
roleData: data
|
}
|
saveRoleRight(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success("授权成功");
|
}
|
});
|
},
|
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>
|
