三棵树添加搜索

app_web/src/pages/uaa/sys-role-permissioncustom-view/sys-role-permissioncustom-view.vue

@@ -8,8 +8,14 @@
                         <context-menu-container class='design-tree-container'>
                             <div>
                                 <div class="text">应用菜单</div>
+                                <div>
+                                    <el-input size="medium" 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"
@@ -31,8 +37,14 @@
                         <context-menu-container class='design-tree-container'>
                             <div>
                                 <div class="text">数据能力</div>
+                                <div>
+                                    <el-input size="medium" 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"
@@ -54,8 +66,14 @@
                         <context-menu-container class='design-tree-container'>
                             <div>
                                 <div class="text">统一资源</div>
+                                <div>
+                                    <el-input size="medium" 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"
@@ -80,7 +98,7 @@
 </template>
 
 <script lang='tsx'>
-    import {Component, Prop, Vue} from 'vue-property-decorator';
+    import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
     import view_pickupviewpanel
         from '@widgets/sys-permission/mpickup-viewpickupviewpanel-pickupviewpanel/mpickup-viewpickupviewpanel-pickupviewpanel.vue';
     import ContextMenuContainer from "@components/context-menu-container/context-menu-container.vue";
@@ -99,7 +117,6 @@
     })
     export default class SYS_ROLE_PERMISSIONCustomView extends Vue {
 
-
         /*应用菜单数据*/
         protected CDdata: any = [];
         /*数据能力数据*/
@@ -145,6 +162,43 @@
          */
         protected srfparentkey: any;
 
+        // 应用菜单树搜索文本
+        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);
+        }
+
+
         /**
          * 视图标识
          *