<template>
|
<el-container>
|
<el-aside>
|
<basic-container>
|
<div ref="TreeBox" style="height: calc(100vh - 154px);!important;">
|
<!-- 左侧树 -->
|
<div style="height: calc(100vh - 190px);">
|
<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-s-promotion"></i>
|
{{ (node || {}).label }}
|
</span>
|
</span>
|
</avue-tree>
|
</div>
|
</div>
|
</basic-container>
|
</el-aside>
|
|
<el-main>
|
<basic-container>
|
<avue-crud
|
ref="crud"
|
:data="data"
|
:option="option"
|
:table-loading="tableLoading"
|
@refresh-change="handleRefresh"
|
@selection-change="selectChange"
|
@row-click="rowClickHandler">
|
<template slot="menuLeft">
|
<el-button icon="el-icon-plus" size="small" type="primary" @click="addHandler">添加</el-button>
|
<el-button icon="el-icon-delete" plain size="small" type="danger" @click="delHandler">删除</el-button>
|
<el-button icon="el-icon-view" plain size="small" type="primary" @click="chekView">查看授权结果</el-button>
|
</template>
|
</avue-crud>
|
<div>
|
<data-view key="dataView"></data-view>
|
</div>
|
<!-- 查看授权结果 -->
|
<el-dialog
|
v-dialogDrag
|
v-loading="checkViewLoading"
|
:visible.sync="checkViewVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="查看使用范围"
|
width="60%"
|
>
|
<avue-crud
|
ref="checkViewCrud"
|
:data="checkViewData"
|
:option="checkViewOption"
|
@search-change="checkHandleSearch"
|
@search-reset="checkHandleReset"
|
>
|
|
</avue-crud>
|
</el-dialog>
|
</basic-container>
|
</el-main>
|
|
</el-container>
|
</template>
|
|
<script>
|
import {getBizTree} from "@/api/UI/uiDefine";
|
import basicOption from "@/util/basic-option";
|
import dataView from "./dataView";
|
import {getTypeActionByType} from "@/api/authority/ui/typeAction";
|
import func from "@/util/func";
|
import {getUsedEnumList} from "@/api/modeling/enumType/api";
|
export default {
|
name: "index",
|
components:{dataView},
|
data:function (){
|
return{
|
treeOption: {
|
height: 'auto',
|
defaultExpandAll: true,
|
menu: false,
|
addBtn: false,
|
props: {
|
label: 'text',
|
value: 'oid',
|
children: 'children'
|
}
|
},
|
nodeRow: {},
|
treeData: [],
|
tableLoading: false,
|
selectList: [],
|
option: {
|
...basicOption,
|
height:260,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
filterBtn:false,
|
columnBtn:false,
|
gridBtn:false,
|
tip: false,
|
align: 'left',
|
menu:false,
|
column: [
|
{
|
label: '规则名称',
|
prop: 'plCode',
|
overHidden: true
|
},
|
{
|
label: '规则类型',
|
prop: 'plName',
|
overHidden: true
|
}
|
]
|
},
|
data: [],
|
}
|
},
|
created() {
|
this.getTreeList();
|
},
|
methods: {
|
//树表查询
|
getTreeList() {
|
const loading = this.$loading({});
|
getBizTree().then(res => {
|
this.treeData = [res.data.obj];
|
loading.close();
|
}).catch(error => {
|
loading.close();
|
})
|
},
|
// 树点击
|
nodeClick(row) {
|
if (row.oid) {
|
this.nodeRow = row;
|
this.getTableList();
|
}
|
},
|
getTableList() {
|
getTypeActionByType({
|
'typeName': this.nodeRow.attributes.name,
|
}).then(res => {
|
this.data = res.data.data;
|
this.$refs.crud.clearSelection();
|
this.tableLoading = false;
|
})
|
},
|
handleRefresh() {
|
this.getTableList();
|
},
|
// 行点击
|
rowClickHandler(row) {
|
func.rowClickHandler(
|
row,
|
this.$refs.crud,
|
this.lastIndex,
|
(newIndex) => {
|
this.lastIndex = newIndex;
|
},
|
() => {
|
this.selectList = [row];
|
}
|
);
|
},
|
// 选择框
|
selectChange(row) {
|
this.selectList = row;
|
},
|
// 查看授权结果
|
chekView() {
|
if (this.selectList.length <= 0) {
|
this.$message.warning('请至少选择一条数据');
|
return;
|
}
|
if (this.selectList.length > 1) {
|
this.$message.warning('只能选择一条数据进行查看');
|
return;
|
}
|
|
getUsedEnumList({enumName: this.selectList[0].id}).then(res => {
|
if (res.data.code === 200) {
|
this.checkViewVisible = true;
|
this.checkViewData = res.data.data;
|
this.checkViewDataSearch = res.data.data;
|
}
|
})
|
},
|
|
// 查看授权结果查询
|
checkHandleSearch(params, done) {
|
const {source} = params;
|
|
if (!params.source) {
|
this.checkViewData = this.checkViewDataSearch;
|
return done();
|
}
|
;
|
|
this.checkViewData = this.checkViewData.filter(item => {
|
return item.source && item.source.includes(source);
|
});
|
|
done();
|
|
},
|
|
// 查看使用范围重置
|
checkHandleReset() {
|
this.checkViewData = this.checkViewDataSearch;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-scrollbar__wrap {
|
overflow: auto !important;
|
}
|
}
|
|
</style>
|
