<template>
|
<el-dialog v-dialogDrag
|
:title="dialog.title"
|
:visible.sync="dialog.showDialog"
|
width="1000px"
|
:append-to-body="true"
|
class="avue-dialog"
|
:destroy-on-close="true"
|
:close-on-click-modal="false"
|
@close="cancelDialog">
|
<el-container style="height: 550px">
|
<el-aside>
|
<basic-container style="height: 500px">
|
<avue-tree ref="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>
|
</basic-container>
|
</el-aside>
|
|
<el-main>
|
<basic-container style="height: 500px">
|
<h3 style="margin: 0">模块权限配置</h3>
|
<div style="height: 445px;">
|
<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>
|
<div class="dialog-footer avue-dialog__footer">
|
<el-button type="primary" plain size="small" @click="submitDialog" >授权</el-button>
|
<el-button type="primary" plain size="small" @click="clearValue" >重置</el-button>
|
<el-button size="small" @click="cancelDialog">取 消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {gridRoles} from '@/api/system/role/api'
|
import {getUIAuthor,authorizedUI} from "@/api/authority/ui/uiAuthor";
|
|
export default {
|
name: "UIDialog",
|
data() {
|
return {
|
dialog: {
|
showDialog: false,
|
title: "UI授权",
|
loading: false,
|
type: "add",
|
},
|
type:'',//业务类型
|
context:'',//UI上下文code
|
treeOption: {
|
menu: false,
|
addBtn: false,
|
props: {
|
label: 'name',
|
value: 'oid',
|
children: 'children'
|
}
|
},
|
nodeRow: {},
|
treeData: [],
|
defaultExpandKeys:[],
|
uiTreeOption: {
|
nodeKey:'oid',
|
checkOnClickNode:true,
|
defaultExpandedKeys:this.defaultExpandKeys,
|
multiple: true,
|
menu: false,
|
addBtn: false,
|
filter:false,
|
props: {
|
label: 'label',
|
value: 'oid',
|
children: 'children'
|
}
|
},
|
uiTreeData: [],
|
}
|
},
|
methods:{
|
openDialog(type,context) {
|
this.type=type;
|
this.context=context;
|
this.dialog.showDialog = true;
|
this.getTreeList()
|
this.uiTreeData=[];
|
},
|
cancelDialog() {
|
this.dialog.loading = false;
|
this.dialog.showDialog = false;
|
},
|
getTreeList() {
|
const loading = this.$loading({});
|
gridRoles().then(res => {
|
this.treeData = res.data.data;
|
loading.close();
|
}).catch(error=>{
|
loading.close();
|
})
|
},
|
// 角色点击
|
nodeClick(row,node) {
|
this.nodeRow = row;
|
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.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
|
}];
|
loading.close();
|
}).catch(error => {
|
loading.close();
|
})
|
},
|
//处理树
|
processChildren(item) {
|
if (item.children && item.children.length > 0) {
|
item.children = item.children.map(child => {
|
if(child.level<4){
|
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
|
});
|
}
|
},
|
submitDialog() {
|
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 scoped>
|
|
</style>
|
