提交 10e937c5 编写于 作者: laizhilong's avatar laizhilong

权限树,组织树,部门树 增加快速搜索框

上级 6a107feb
......@@ -42,7 +42,12 @@
margin-top:30px;margin-bottom:20px;margin-left:40px;
}
.roll{
height:calc(100vh - 355px) ;overflow:hidden;overflow-x: hidden;overflow-y: auto;
height:calc(100vh - 370px);
overflow:hidden;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 17px;
padding-left: 1px;
}
.tre{
margin-left:20px;
......@@ -50,6 +55,9 @@
}
selector::-webkit-scrollbar{
width:0;
}
.pickup-view {
......
......@@ -7,9 +7,14 @@
<div class="center" :style="{width : '33%',border:'1px solid #dcdee2', margin: '0 16px 0 0'}">
<context-menu-container class='design-tree-container'>
<div>
<div class="text">应用菜单</div>
<div style="margin: 20px 20px 0 20px;">
<el-input size="small" placeholder="搜索应用菜单..." v-model="CDtreefilterText" @input="filterChangeCDtree">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="roll">
<el-tree
:filter-node-method="fiterNode"
class="tre"
:data="this.CDdata"
ref="CDtree"
......@@ -30,9 +35,14 @@
<div class="center" :style="{width : '33%',border:'1px solid #dcdee2', margin: '0 16px 0 0' }">
<context-menu-container class='design-tree-container'>
<div>
<div class="text">数据能力</div>
<div style="margin: 20px 20px 0 20px;">
<el-input size="small" placeholder="搜索数据能力..." v-model="QXtreefilterText" @input="filterChangeQXtree">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="roll">
<el-tree
:filter-node-method="fiterNode"
class="tre"
:data="this.QXdata"
ref="QXtree"
......@@ -53,9 +63,14 @@
<div class="center" :style="{width : '33%',border:'1px solid #dcdee2' }">
<context-menu-container class='design-tree-container'>
<div>
<div class="text">统一资源</div>
<div style="margin: 20px 20px 0 20px;">
<el-input size="small" placeholder="搜索自定义资源..." v-model="ZYtreefilterText" @input="filterChangeZYtree">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="roll">
<el-tree
:filter-node-method="fiterNode"
class="tre"
:data="this.ZYdata"
ref="ZYtree"
......@@ -100,6 +115,43 @@
export default class SYS_ROLE_PERMISSIONCustomView extends Vue {
// 应用菜单树搜索文本
public CDtreefilterText:any = '';
// 数据能力树搜索文本
public QXtreefilterText:any = '';
// 自定义资源树搜索文本
public ZYtreefilterText:any = '';
/**
* 过滤节点
*/
public fiterNode(value:any,data:any){
if (!value) return true;
return data.label.indexOf(value) !==-1;
}
/**
* 应用菜单树搜索触发
*/
public filterChangeCDtree(){
const CDtree:any = this.$refs.CDtree;
CDtree.filter(this.CDtreefilterText);
}
/**
* 数据能力树搜索触发
*/
public filterChangeQXtree(){
const QXtree:any = this.$refs.QXtree;
QXtree.filter(this.QXtreefilterText);
}
/**
* 自定义资源树搜索触发
*/
public filterChangeZYtree(){
const ZYtree:any = this.$refs.ZYtree;
ZYtree.filter(this.ZYtreefilterText);
}
/*应用菜单数据*/
protected CDdata: any = [];
/*数据能力数据*/
......
<template>
<div class="design-tree-container">
<context-menu-container>
<el-input size="small" placeholder="搜索..." v-model="filerText" @input="filterChange">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-tree
:filter-node-method="filterNode"
class="tre"
:data="this.TreeData"
ref="DeptTree"
......@@ -28,6 +32,24 @@
})
export default class DeptTree extends Vue {
// 过滤文本
public filerText: any = '';
/**
* 过滤节点
*/
public filterNode(value:any,data:any){
if (!value) return true;
return data.label.indexOf(value) !==-1;
}
/**
* 树搜索触发
*/
public filterChange(){
const DeptTree:any = this.$refs.DeptTree;
DeptTree.filter(this.filerText);
}
/*树数据*/
public TreeData: any = [];
......
<template>
<div class="design-tree-container">
<context-menu-container>
<el-input size="small" placeholder="搜索..." v-model="filerText" @input="filterChange">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-tree
:filter-node-method="filterNode"
class="tre"
:data="this.TreeData"
ref="OrgTree"
......@@ -27,6 +31,24 @@
})
export default class OrgTree extends Vue {
// 过滤文本
public filerText: any = '';
/**
* 过滤节点
*/
public filterNode(value:any,data:any){
if (!value) return true;
return data.label.indexOf(value) !==-1;
}
/**
* 树搜索触发
*/
public filterChange(){
const OrgTree:any = this.$refs.OrgTree;
OrgTree.filter(this.filerText);
}
/*树数据*/
public TreeData: any = [];
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册