<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 cardBodyStyle="padding-bottom:0;">
|
<avue-crud
|
ref="crud"
|
:data="data"
|
:option="option"
|
:table-loading="tableLoading"
|
@refresh-change="handleRefresh"
|
@current-row-change="rowClickHandler">
|
<template slot="menuLeft">
|
<el-button icon="el-icon-plus" size="small" type="primary" @click="addHandler">添加</el-button>
|
<el-button icon="el-icon-plus" size="small" type="primary" @click="editHandler">修改</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 style="margin-top: 15px;">
|
<data-view key="dataView" :btmNode="nodeRow" :selectRow="selectRow" :actionMap="actionMap" :readOnly="true" :height="clientHeight-260-220"></data-view>
|
</div>
|
<!-- 新增 && 编辑 -->
|
<el-dialog
|
v-dialogDrag
|
:title="title === 'add' ? '创建' : '修改'"
|
:visible.sync="visible"
|
append-to-body="true"
|
class="avue-dialog"
|
width="70%"
|
@close="addDialogClose">
|
<div>
|
<data-view ref="editView" key="editView" :btmNode="nodeRow" :selectRow="selectRow" :actionMap="actionMap" :readOnly="false" :height="clientHeight-340"></data-view>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button size="small" type="primary" @click="addDialogSavaHandler">确 定</el-button>
|
<el-button size="small" @click="addDialogClose">取 消</el-button>
|
</span>
|
</el-dialog>
|
<!-- 查看授权结果 -->
|
<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 {getData,saveGrand,delGrand} from "@/api/authority/ui/dataAuthor";
|
import func from "@/util/func";
|
import {getUsedEnumList} from "@/api/modeling/enumType/api";
|
export default {
|
name: "index",
|
components:{dataView},
|
data:function (){
|
return{
|
clientHeight:Math.max(document.body.clientHeight,700),
|
treeOption: {
|
height: 'auto',
|
defaultExpandAll: true,
|
menu: false,
|
addBtn: false,
|
props: {
|
label: 'text',
|
value: 'oid',
|
children: 'children'
|
}
|
},
|
nodeRow: {},
|
treeData: [],
|
tableLoading: false,
|
selectRow: {},
|
option: {
|
...basicOption,
|
height:280,
|
highlightCurrentRow:true,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
filterBtn:false,
|
columnBtn:false,
|
gridBtn:false,
|
tip: false,
|
index:false,
|
selection:false,
|
menu:false,
|
align:'center',
|
column: [{
|
label: '规则名称',
|
prop: 0,
|
overHidden: true
|
},{
|
label: '规则类型',
|
prop: 1,
|
overHidden: true
|
}]
|
},
|
data: [],
|
title: '',
|
visible: false,
|
form:{},
|
actionMap:{},
|
switchDic:[{
|
label:'',
|
value:false
|
},{
|
label:'',
|
value:true
|
}]
|
}
|
},
|
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() {
|
getData(this.nodeRow.attributes.name).then(res => {
|
/*if(typeof res.data == 'string'){
|
res.data=eval('('+res.data +')')
|
}*/
|
if(res.data.obj.tableHeader){
|
this.option.column=[ {
|
label: '规则名称',
|
prop: 0,
|
overHidden: true
|
},{
|
label: '规则类型',
|
prop: 1,
|
overHidden: true
|
}];
|
res.data.obj.tableHeader.forEach((item,i)=>{
|
if(i<=1) return;
|
if(i=='rules') return;
|
this.option.column.push({
|
label: item,
|
prop: i,
|
overHidden: true,
|
width:'auto',
|
html:true,
|
formatter:(val)=> {
|
return '<label class="el-checkbox is-disabled ' + (val[i] == true ? 'is-checked' : '') + '"><span class="el-checkbox__input is-disabled ' + (val[i] == true ? 'is-checked' : '') + '"><span class="el-checkbox__inner"></span><input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="' + val[i] + '"></span></label>'
|
}
|
})
|
})
|
}
|
this.data = res.data.obj.rowList;
|
this.$refs.crud.clearSelection();
|
this.tableLoading = false;
|
this.actionMap=res.data.obj.actionMap;
|
this.selectRow={}
|
})
|
},
|
handleRefresh() {
|
this.getTableList();
|
},
|
// 行点击
|
rowClickHandler(row) {
|
this.selectRow=row
|
},
|
// 查看授权结果
|
chekView() {
|
if (this.selectRow=={}) {
|
this.$message.warning('请选择一条数据');
|
return;
|
}
|
|
getUsedEnumList({enumName: this.selectRow.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();
|
|
},
|
//创建
|
addHandler(){
|
if (func.isEmptyObject(this.nodeRow)) {
|
this.$message.error('请选择要添加的节点');
|
return;
|
}
|
this.title = 'add';
|
this.visible = true;
|
},
|
//修改
|
editHandler(){
|
if (func.isEmptyObject(this.nodeRow)) {
|
this.$message.error('请至少选择一条数据');
|
return;
|
}
|
this.title = 'edit';
|
this.visible = true;
|
},
|
// 新增编辑保存
|
addDialogSavaHandler() {
|
saveGrand(this.viewData).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
this.addDialogClose();
|
}
|
})
|
},
|
// 新增编辑对话框取消
|
addDialogClose() {
|
this.visible = false;
|
},
|
//删除
|
delHandler(){
|
if (func.isEmptyObject(this.nodeRow)) {
|
this.$message.error('请选择数据');
|
return;
|
}
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
delGrand({name:this.templateForm}).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
// 查看使用范围重置
|
checkHandleReset() {
|
this.checkViewData = this.checkViewDataSearch;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-scrollbar__wrap {
|
overflow: auto !important;
|
}
|
}
|
|
</style>
|
